/* ======================================================
   HERO LAYER — ESTRUTURA PRINCIPAL
====================================================== */

.scene-layer.hero-layer {

  min-height: 100dvh;
  position: relative;
  overflow: hidden;

  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;

  text-align: center;

  color: white;

  /* Fundo preto puro para destacar partículas */
  background: #000;

}


/* ======================================================
   ANIMAÇÃO DO GRADIENT
====================================================== */

@keyframes gradientMove {

  0% { background-position: 0% 50%; }

  50% { background-position: 100% 50%; }

  100% { background-position: 0% 50%; }

}



/* ======================================================
   CONTEÚDO DO HERO
====================================================== */

.hero-content {

  position: relative;

  z-index: 10;

  padding: 0 20px;

}



/* ======================================================
   NOMES DO CASAL
====================================================== */

.couple-names {

  font-family: 'Dancing Script', cursive;

  font-size: clamp(3rem, 10vw, 8rem);

  color: #ff4d6d;

  margin-bottom: 10px;

  text-shadow: none;

  /* movimento muito sutil */
  animation: nameFloat 6s ease-in-out infinite;

}





/* ======================================================
   DATA ESPECIAL
====================================================== */

.special-date {

  font-size: 10px;

  letter-spacing: 2px;

  color: rgba(255,255,255,0.65);

}


/* ======================================================
   PARTÍCULAS — BASE
====================================================== */

.floating-elements {

  position: absolute;

  inset: 0;

  pointer-events: none;

  overflow: hidden;

}



/* FUNDO */

.floating-elements.back {

  z-index: 1;

}



/* FRENTE */

.floating-elements.front {

  z-index: 20;

}



/* PARTÍCULAS */

.floating-elements span {

  position: absolute;

  bottom: -20%;

  width: 34px;

  height: 34px;

  border-radius: 50%;

  background: radial-gradient(
    circle,
    rgba(255,77,109,1),
    rgba(255,77,109,0.9),
    rgba(255,77,109,0.4),
    transparent 75%
  );

}





/* ======================================================
   PARTÍCULAS DO FUNDO
====================================================== */

.floating-elements.back span {

  opacity: 0.4;

  filter: blur(6px);

  animation: floatBack 22s linear infinite;

}

.floating-elements.back span:nth-child(1) { left: 4%; animation-delay: -3s; }
.floating-elements.back span:nth-child(2) { left: 17%; animation-delay: 11s; }
.floating-elements.back span:nth-child(3) { left: 29%; animation-delay: 6s; }
.floating-elements.back span:nth-child(4) { left: 41%; animation-delay: 14s; }
.floating-elements.back span:nth-child(5) { left: 53%; animation-delay: 2s; }

.floating-elements.back span:nth-child(6) { left: 64%; animation-delay: -9s; }
.floating-elements.back span:nth-child(7) { left: 74%; animation-delay: 5s; }
.floating-elements.back span:nth-child(8) { left: 83%; animation-delay: 12s; }
.floating-elements.back span:nth-child(9) { left: 91%; animation-delay: 7s; }
.floating-elements.back span:nth-child(10) { left: 96%; animation-delay: 16s; }

/* ======================================================
   PARTÍCULAS DA FRENTE
====================================================== */

.floating-elements.front span {

  opacity: 0.9;

  filter: blur(1px);

  animation: floatFront 14s ease-in-out infinite;

}

/* ======================================================
PARTÍCULAS DA FRENTE — DISTRIBUIÇÃO
====================================================== */

.floating-elements.front span:nth-child(1) { left: 8%; animation-delay: -2s; }
.floating-elements.front span:nth-child(2) { left: 21%; animation-delay: 9s; }
.floating-elements.front span:nth-child(3) { left: 34%; animation-delay: 4s; }
.floating-elements.front span:nth-child(4) { left: 47%; animation-delay: 11s; }
.floating-elements.front span:nth-child(5) { left: 59%; animation-delay: 6s; }

.floating-elements.front span:nth-child(6) { left: 68%; animation-delay: -13s; }
.floating-elements.front span:nth-child(7) { left: 77%; animation-delay: 3s; }
.floating-elements.front span:nth-child(8) { left: 85%; animation-delay: 10s; }
.floating-elements.front span:nth-child(9) { left: 92%; animation-delay: 5s; }
.floating-elements.front span:nth-child(10) { left: 97%; animation-delay: 14s; }
/* ======================================================
   ANIMAÇÕES
====================================================== */

@keyframes floatBack {

  0% {
    transform: translateY(0) scale(0.8);
    opacity: 0;
  }

  20% { opacity: 0.4; }

  50% {
    transform: translateY(-60vh) translateX(-40px) scale(1);
  }

  100% {
    transform: translateY(-130vh) translateX(40px) scale(1.1);
    opacity: 0;
  }

}



@keyframes floatFront {

  0% {
    transform: translateY(0) scale(0.6);
    opacity: 0;
  }

  15% { opacity: 1; }

  50% {
    transform: translateY(-50vh) translateX(30px) scale(1);
  }

  100% {
    transform: translateY(-120vh) translateX(-30px) scale(1.4);
    opacity: 0;
  }

}



/* ======================================================
   SCROLL INDICATOR
====================================================== */

.scroll-indicator {

  position: absolute;

  bottom: 26px;

  left: 50%;

  transform: translateX(-50%);

  display: flex;

  flex-direction: column;

  gap: 6px;

}



.scroll-indicator .arrow {

  width: 12px;

  height: 12px;

  border-right: 2px solid #ff4d6d;

  border-bottom: 2px solid #ff4d6d;

  transform: rotate(45deg);

  opacity: 0;

  animation: arrowDown 1.8s ease-in-out infinite;

}



.scroll-indicator .arrow:nth-child(2) {

  animation-delay: .25s;

}

.scroll-indicator .arrow:nth-child(3) {

  animation-delay: .5s;

}



@keyframes arrowDown {

  0% {
    opacity: 0;
    transform: translateY(0) rotate(45deg);
  }

  40% {
    opacity: 1;
  }

  80% {
    opacity: 0;
    transform: translateY(10px) rotate(45deg);
  }

  100% {
    opacity: 0;
  }

}


/* ======================================================
   ANIMAÇÃO SUAVE DO NOME
====================================================== */

@keyframes nameFloat {

  0% { transform: translateY(0px); }

  50% { transform: translateY(-6px); }

  100% { transform: translateY(0px); }

}


.scene-layer.hero-layer {

  transition: opacity .6s ease;

}



.scene-layer.hero-layer {
  min-height: 100vh;
}


.scene-layer {
  position: relative;
  width: 100%;
}

.scene-layer.hero-layer {
  z-index: 1;
}

.photo-layer {
  position: relative;
  z-index: 2;
}