/* === BANNER === */
.nano-banner {
  position: relative;
  height: 100%;
  width: 100%;
  overflow: hidden;
  background-image:
    url('https://eshop.nanobeauty.cz/user/documents/upload/woman_face.png'),
    linear-gradient(to right, rgb(157 176 193 / 30%), rgb(224 245 255 / 85%)),
    url('https://eshop.nanobeauty.cz/user/documents/upload/bg_hexa.png');
  background-repeat: no-repeat, no-repeat, no-repeat;
  background-position:
    90% bottom,
    center center,
    center center;
  background-size: auto 100%, cover, cover;
  background-color: #cfe2f3;
}

@media (max-width: 767px) {
  .nano-banner {
    background-position: right -200px bottom, center center, center center;
  }
}

.nano-banner__inner {
  position: relative;
  z-index: 2;
  max-width: 1280px;
  margin: 0 auto;
  padding: clamp(50px, 5vw, 70px) clamp(25px, 3vw, 40px);
  min-height: clamp(300px, 30vw, 500px);
  display: flex;
  align-items: center;
}

.nano-banner__content {
  flex: 0 1 80%;
  max-width: 600px;
}

.nano-banner__subtitle {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 10px;
  font-size: clamp(15px, 1.8vw, 21px);
  font-weight: 500;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: #1a1a1a;
  margin: 0 0 clamp(12px, 1vw, 18px) 0;
  line-height: 1.3;
}

.nano-banner__subtitle::after {
  content: "";
  display: block;
  width: 40px;
  height: 2px;
  background-color: #4088c9;
}

.nano-banner__title {
  font-size: clamp(28px, 4vw, 56px);
  font-weight: 800;
  color: #111;
  text-transform: uppercase;
  line-height: 1.1;
  margin: 0 0 clamp(22px, 2.5vw, 34px) 0;
  letter-spacing: 0.5px;
}

.nano-banner__btn {
  display: inline-block;
  padding: clamp(11px, 1.2vw, 14px) clamp(22px, 2.5vw, 32px);
  background-color: #4088c9;
  color: #fff !important;
  font-size: clamp(14px, 1.3vw, 16px);
  font-weight: 600;
  text-decoration: none;
  text-transform: uppercase;
  border-radius: 30px;
  transition: background-color 0.25s ease, transform 0.25s ease;
}

.nano-banner__btn:hover {
  background-color: #3175b1;
  transform: translateY(-2px);
}

/* === ANIMOVANÉ SVĚTELNÉ BODY === */
.nano-banner__particles {
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  overflow: hidden;
}

.nano-banner__particles span {
  position: absolute;
  bottom: -20px;
  width: 6px;
  height: 6px;
  background: radial-gradient(circle, 
    rgba(255, 255, 255, 1) 0%, 
    rgba(144, 200, 240, 0.7) 50%, 
    rgba(144, 200, 240, 0) 100%);
  border-radius: 50%;
  opacity: 0;
  animation: nano-float 12s linear infinite;
  filter: blur(0.5px);
  /* Glow efekt – tři vrstvy záře */
  box-shadow: 
    0 0 6px rgba(255, 255, 255, 0.9),
    0 0 12px rgba(144, 200, 240, 0.7),
    0 0 20px rgba(144, 200, 240, 0.4);
}

/* === MALÉ ČÁSTICE (světelný prach) === */
.nano-banner__particles span:nth-child(1)  { left: 5%;  width: 5px;  height: 5px;  animation-duration: 14s; animation-delay: 0s;   }
.nano-banner__particles span:nth-child(2)  { left: 12%; width: 9px;  height: 9px;  animation-duration: 18s; animation-delay: 2s;   }
.nano-banner__particles span:nth-child(3)  { left: 20%; width: 6px;  height: 6px;  animation-duration: 11s; animation-delay: 4s;   }
.nano-banner__particles span:nth-child(4)  { left: 28%; width: 8px;  height: 8px;  animation-duration: 16s; animation-delay: 1s;   }
.nano-banner__particles span:nth-child(5)  { left: 35%; width: 4px;  height: 4px;  animation-duration: 13s; animation-delay: 6s;   }
.nano-banner__particles span:nth-child(6)  { left: 42%; width: 7px;  height: 7px;  animation-duration: 15s; animation-delay: 3s;   }

/* === VELKÁ HVĚZDA č. 1 (vizuální dominanta) === */
.nano-banner__particles span:nth-child(7) {
  left: 50%;
  width: 16px;
  height: 16px;
  animation-duration: 25s;
  animation-delay: 2s;
  box-shadow:
    0 0 10px rgba(255, 255, 255, 1),
    0 0 25px rgba(144, 200, 240, 0.9),
    0 0 45px rgba(144, 200, 240, 0.5);
}

/* === Pokračování malých částic === */
.nano-banner__particles span:nth-child(8)  { left: 58%; width: 5px;  height: 5px;  animation-duration: 12s; animation-delay: 5s;   }
.nano-banner__particles span:nth-child(9)  { left: 65%; width: 7px;  height: 7px;  animation-duration: 17s; animation-delay: 2.5s; }
.nano-banner__particles span:nth-child(10) { left: 72%; width: 6px;  height: 6px;  animation-duration: 14s; animation-delay: 8s;   }
.nano-banner__particles span:nth-child(11) { left: 80%; width: 8px;  height: 8px;  animation-duration: 16s; animation-delay: 0.5s; }
.nano-banner__particles span:nth-child(12) { left: 86%; width: 5px;  height: 5px;  animation-duration: 13s; animation-delay: 4.5s; }

/* === VELKÁ HVĚZDA č. 2 === */
.nano-banner__particles span:nth-child(13) {
  left: 92%;
  width: 14px;
  height: 14px;
  animation-duration: 28s;
  animation-delay: 8s;
  box-shadow:
    0 0 10px rgba(255, 255, 255, 1),
    0 0 25px rgba(144, 200, 240, 0.9),
    0 0 45px rgba(144, 200, 240, 0.5);
}

/* === VELKÁ HVĚZDA č. 3 === */
.nano-banner__particles span:nth-child(14) {
  left: 16%;
  width: 15px;
  height: 15px;
  animation-duration: 26s;
  animation-delay: 12s;
  box-shadow:
    0 0 10px rgba(255, 255, 255, 1),
    0 0 25px rgba(144, 200, 240, 0.9),
    0 0 45px rgba(144, 200, 240, 0.5);
}

/* === Poslední malá částice === */
.nano-banner__particles span:nth-child(15) { left: 76%; width: 7px;  height: 7px;  animation-duration: 18s; animation-delay: 3.5s; }

/* === ANIMACE STOUPÁNÍ === */
@keyframes nano-float {
  0% {
    transform: translateY(0) translateX(0);
    opacity: 0;
  }
  15% {
    opacity: 1;
  }
  50% {
    transform: translateY(-50vh) translateX(15px);
    opacity: 1;
  }
  85% {
    opacity: 0.9;
  }
  100% {
    transform: translateY(-100vh) translateX(-10px);
    opacity: 0;
  }
}

/* === Respekt k uživatelům s preferencí omezeného pohybu === */
@media (prefers-reduced-motion: reduce) {
  .nano-banner__particles span {
    animation: none;
    display: none;
  }
}