/* ==========================================================
   HERO
========================================================== */

.hero-section {
  position: relative;
  width: 100%;
  min-height: 100svh;
  overflow: hidden;

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

  background:
    radial-gradient(
      ellipse at 50% -12%,
      rgba(82,122,195,.18) 0%,
      rgba(32,58,108,.12) 12%,
      rgba(8,18,40,0) 34%
    ),
    radial-gradient(
      ellipse at 50% 62%,
      rgba(18,48,108,.22) 0%,
      rgba(8,18,38,.10) 26%,
      transparent 55%
    ),
    linear-gradient(
      180deg,
      #01060f 0%,
      #020b18 18%,
      #041326 38%,
      #05182d 62%,
      #04111f 82%,
      #030b15 100%
    );
}

.hero-section,
.hero-section .section-inner {
  min-height: 100svh;
}

/* ==========================================================
   CONTENIDO
========================================================== */

.hero-content {
  position: relative;
  z-index: 20;
  width: 90%;
  max-width: 430px;
  text-align: center;
  transform: translateY(-28px);
}

/* SUBTÍTULOS */

.hero-subtitle {
  margin: 0;
  font-family: 'Cinzel', serif;
  font-size: 1.55rem;
  letter-spacing: .22em;
  color: #fff2cf;
}

.hero-subtitle-small {
  margin-top: 10px;
  font-family: 'Cinzel', serif;
  font-size: 1rem;
  letter-spacing: .08em;
  color: rgba(255,242,207,.82);
}

/* NOMBRES */

.couple-names {
  margin: 45px 0 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;

  font-family: 'Alex Brush', cursive;
  font-weight: 400;
}

.name-line {
  font-size: 2.65rem;
  line-height: 1;
  white-space: nowrap;

  background: linear-gradient(
    to bottom,
    #fff8d8,
    #e7ca72,
    #dcb165,
    #9a690e
  );

  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-size: 100% 180%;
}

.ampersand {
  font-family: 'Cinzel', serif;
  font-size: 1.7rem;
  margin: 2px 0;
  color: #dcb165;
  font-style: normal;
}

/* DIVISOR */

.gold-divider {
  position: relative;
  width: 240px;
  height: 18px;
  margin: 28px auto 0;
}

.gold-divider::before,
.gold-divider::after {
  content: "";
  position: absolute;
  top: 50%;
  width: 43%;
  height: 1px;
  background: linear-gradient(
    90deg,
    transparent,
    rgba(220,177,101,.9),
    transparent
  );
}

.gold-divider::before {
  left: 0;
}

.gold-divider::after {
  right: 0;
}

.gold-divider span {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 7px;
  height: 7px;
  background: #dcb165;
  transform: translate(-50%, -50%) rotate(45deg);
  box-shadow: 0 0 6px rgba(220,177,101,.45);
}

/* ==========================================================
   LUNA
========================================================== */

.hero-moon {
  position: absolute;
  top: 28px;
  left: 50%;
  width: 150px;
  transform: translateX(-50%);
  z-index: 5;
  pointer-events: none;
  opacity: .98;

  filter:
    drop-shadow(0 8px 10px rgba(0,0,0,.22))
    drop-shadow(0 0 18px rgba(255,239,196,.22))
    drop-shadow(0 0 40px rgba(220,177,101,.18));

  animation: moonGlow 5s ease-in-out infinite;
}

/* ==========================================================
   NUBES
========================================================== */

.hero-cloud {
  position: absolute;
  bottom: -10px;
  z-index: 8;
  width: 72%;
  max-width: 380px;
  opacity: 0;
  pointer-events: none;
}

.hero-cloud-left {
  left: -10%;
  --cloud-scale: 1.28;
  transform: translateX(-115%) scaleY(var(--cloud-scale));
  transform-origin: bottom left;
}

.hero-cloud-right {
  right: -10%;
  --cloud-scale: 1.28;
  transform: translateX(115%) scaleY(var(--cloud-scale));
  transform-origin: bottom right;
}

/* ==========================================================
   ESTADO INICIAL DE TEXTO
========================================================== */

.hero-subtitle,
.hero-subtitle-small,
.gold-divider {
  opacity: 0;
  transform: translateY(-34px);
  clip-path: inset(0 0 100% 0);
}

.name-line,
.ampersand {
  opacity: 0;
  transform: translateY(-24px) scale(.96);
}

/* ==========================================================
   SECUENCIA DE ENTRADA
========================================================== */

.invitation.is-visible .hero-cloud-left {
  animation: heroCloudLeftIn 2.1s ease-out forwards;
}

.invitation.is-visible .hero-cloud-right {
  animation: heroCloudRightIn 2.1s ease-out forwards;
}

.invitation.is-visible .hero-subtitle {
  animation: heroTextSweep 1.1s ease-out 1.75s forwards;
}

.invitation.is-visible .hero-subtitle-small {
  animation: heroTextSweep 1.1s ease-out 2.05s forwards;
}

.invitation.is-visible .name-elena {
  animation:
    nameLineIn 1.15s ease-out 2.45s forwards,
    nameGoldGlow 4s ease-in-out 4s infinite;
}

.invitation.is-visible .ampersand {
  animation:
    ampersandIn .95s ease-out 2.75s forwards,
    ampersandGlow 3.4s ease-in-out 4s infinite;
}

.invitation.is-visible .name-alvaro {
  animation:
    nameLineIn 1.15s ease-out 3.05s forwards,
    nameGoldGlow 4s ease-in-out 4.25s infinite;
}

.invitation.is-visible .gold-divider {
  animation: heroTextSweep 1s ease-out 3.55s forwards;
}

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

.hero-scroll-indicator{

    position:absolute;

    left:50%;
    bottom:180px;

    transform:translateX(-50%);

    z-index:40;

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

    gap:-2px;

    opacity:0;

    animation:heroScrollAppear .8s ease 20s forwards;
}

.hero-scroll-indicator span{

    width:20px;
    height:20px;

    border-right:2px solid rgba(220,177,101,.9);
    border-bottom:2px solid rgba(220,177,101,.9);

    transform:rotate(45deg);

    margin-top:-3px;

    filter:
        drop-shadow(0 0 4px rgba(220,177,101,.35));

}

.hero-scroll-indicator span:nth-child(1){

    animation:scrollArrow 1.8s infinite;

}

.hero-scroll-indicator span:nth-child(2){

    animation:scrollArrow 1.8s .20s infinite;

}

.hero-scroll-indicator span:nth-child(3){

    animation:scrollArrow 1.8s .40s infinite;

}

@keyframes heroScrollAppear{

    to{

        opacity:1;

    }

}

@keyframes scrollArrow{

    0%{

        opacity:0;
        transform:translateY(-4px) rotate(45deg);

    }

    30%{

        opacity:1;

    }

    60%{

        opacity:1;

    }

    100%{

        opacity:0;
        transform:translateY(10px) rotate(45deg);

    }

}
/* ==========================================================
   KEYFRAMES
========================================================== */

@keyframes heroCloudLeftIn {
  from {
    opacity: 0;
    transform: translateX(-115%) scaleY(var(--cloud-scale));
  }

  to {
    opacity: .95;
    transform: translateX(0) scaleY(var(--cloud-scale));
  }
}

@keyframes heroCloudRightIn {
  from {
    opacity: 0;
    transform: translateX(115%) scaleY(var(--cloud-scale));
  }

  to {
    opacity: .95;
    transform: translateX(0) scaleY(var(--cloud-scale));
  }
}

@keyframes heroTextSweep {
  from {
    opacity: 0;
    transform: translateY(-34px);
    clip-path: inset(0 0 100% 0);
  }

  to {
    opacity: 1;
    transform: translateY(0);
    clip-path: inset(0 0 0 0);
  }
}

@keyframes nameLineIn {
  0% {
    opacity: 0;
    transform: translateY(-24px) scale(.96);
    filter: blur(2px);
  }

  60% {
    opacity: 1;
    transform: translateY(4px) scale(1.02);
    filter: blur(0);
  }

  100% {
    opacity: 1;
    transform: translateY(0) scale(1);
    filter: blur(0);
  }
}

@keyframes ampersandIn {
  0% {
    opacity: 0;
    transform: translateY(-20px) scale(.7) rotate(-8deg);
  }

  65% {
    opacity: 1;
    transform: translateY(3px) scale(1.12) rotate(2deg);
  }

  100% {
    opacity: 1;
    transform: translateY(0) scale(1) rotate(0);
  }
}

@keyframes nameGoldGlow {
  0%, 100% {
    transform: scale(1);
    filter: drop-shadow(0 0 3px rgba(220,177,101,.18));
  }

  50% {
    transform: scale(1.035);
    filter: drop-shadow(0 0 10px rgba(245,226,190,.45));
  }
}

@keyframes ampersandGlow {
  0%, 100% {
    opacity: .9;
    transform: scale(1);
    text-shadow: 0 0 5px rgba(220,177,101,.24);
  }

  50% {
    opacity: 1;
    transform: scale(1.08);
    text-shadow: 0 0 14px rgba(245,226,190,.55);
  }
}

@keyframes moonGlow {
  0%, 100% {
    transform: translateX(-50%) scale(1);
    filter:
      drop-shadow(0 0 14px rgba(255,238,188,.18))
      drop-shadow(0 0 34px rgba(220,177,101,.12));
  }

  50% {
    transform: translateX(-50%) scale(1.03);
    filter:
      drop-shadow(0 10px 14px rgba(0,0,0,.28))
      drop-shadow(0 0 24px rgba(255,239,196,.34))
      drop-shadow(0 0 60px rgba(220,177,101,.28));
  }
}

/* ==========================================================
   PC
========================================================== */

@media (min-width: 601px) {

  .hero-content {
    transform: none;
  }

  .hero-subtitle {
    margin-top: 67px;
  }

  .hero-subtitle-small {
    margin-top: 3px;
  }

  .couple-names {
    position: relative;
  }

  .hero-cloud {
    width: 65%;
    max-width: 380px;
    bottom: 0;
  }

  .hero-cloud-left,
  .hero-cloud-right {
    --cloud-scale: .9;
  }

  .hero-moon {
    width: 170px;
    top: 5px;
  }

  .hero-scroll-indicator{

   

    animation:heroScrollAppear .8s ease 9s forwards;
}


}