/* ==========================================================================
   INVITATION — layout de las 7 secciones + animaciones de scroll
   ========================================================================== */

.invitation { position: relative; }

/* Cada sección ocupa al menos el alto de pantalla en mobile */
.section {
  position: relative;
  padding-block: var(--sp-9);
  display: grid;
  align-items: center;
  min-height: 100svh;
  overflow: hidden;
}
.section--alt { background: var(--nude-200); }

/* Portada y cierre con fondo degradado más cálido */
.section--hero,
.section--cta {
  background:
    radial-gradient(120% 80% at 50% 0%, var(--nude-50), var(--nude-100) 60%, var(--nude-200));
}

/* ---- Reveal al hacer scroll ---- */
[data-reveal] {
  opacity: 0;
  transform: translateY(24px);
  transition: opacity 0.9s var(--ease-out), transform 0.9s var(--ease-out);
  will-change: opacity, transform;
}
[data-reveal].is-visible {
  opacity: 1;
  transform: none;
}

/* ---- Portada ---- */
.hero__content { display: grid; gap: var(--sp-5); justify-items: center; }
.hero__names {
  font-size: var(--fs-3xl);
  margin-top: var(--sp-2);
}
.hero__and { color: var(--gold); font-style: italic; font-weight: 500; }
.hero__lead {
  font-size: var(--fs-lg);
  color: var(--ink-soft);
  font-style: italic;
}
.hero__date { margin-top: var(--sp-2); }

/* Indicador de scroll */
.scroll-cue {
  margin-top: var(--sp-6);
  width: 2.4rem; height: 2.4rem;
  border: 1px solid var(--gold-light);
  border-radius: 50%;
  display: grid; place-items: center;
  animation: cue-bounce 2s ease-in-out infinite;
}
.scroll-cue__chevron {
  width: 0.6rem; height: 0.6rem;
  border-right: 1.5px solid var(--gold);
  border-bottom: 1.5px solid var(--gold);
  transform: rotate(45deg) translate(-1px, -1px);
}
@keyframes cue-bounce {
  0%, 100% { transform: translateY(0); }
  50%      { transform: translateY(6px); }
}

/* ---- Placeholder de secciones a definir ---- */
.section__placeholder {
  margin-top: var(--sp-5);
  color: var(--ink-soft);
  font-size: var(--fs-md);
  max-width: 32ch;
  margin-inline: auto;
}
.section__placeholder em { color: var(--ink-muted); font-size: var(--fs-sm); }

/* ---- Sección CTA (confirmación) ---- */
.cta__text {
  margin-top: var(--sp-5);
  color: var(--ink-soft);
  font-size: var(--fs-lg);
  font-style: italic;
}
.cta__btn { margin-top: var(--sp-6); }
.cta__signature {
  margin-top: var(--sp-7);
  font-size: 2.4rem;
  color: var(--gold-dark);
  line-height: 1;
}

/* ---- Desktop: la invitación no se estira feo, se centra en columna ---- */
@media (min-width: 48rem) {
  .section { min-height: 100vh; }
  .hero__content { gap: var(--sp-6); }
}