/* =============================================================
   INTRO — Portada estilo PDF Boda Rivas García
   Verde salvia sólido + florales blancos + nombres script gigante
   + sobre + CTAs + divisores + invitado + reservado para N
   ============================================================= */

body.intro-locked{overflow:hidden}

#intro{
  position:fixed;inset:0;z-index:99999;
  background:#51683d;
  color:#F5EFE6;
  overflow-y:auto;
  overflow-x:hidden;
  will-change:opacity, transform;
  -webkit-overflow-scrolling:touch;
}

/* Marco floral blanco en las 4 esquinas */
.intro-floral{
  position:absolute;
  width:26vw;
  max-width:280px;
  min-width:160px;
  opacity:0;
  pointer-events:none;
  z-index:1;
}
.fl-tl{top:0;left:0}
.fl-tr{top:0;right:0}
.fl-bl{bottom:0;left:0}
.fl-br{bottom:0;right:0}

/* Contenedor centrado — pensado en formato 1080 (portrait mobile)
   Escala fluido para cualquier dispositivo */
.intro-inner{
  position:relative;z-index:2;
  min-height:100%;
  display:flex;flex-direction:column;align-items:center;
  padding:44px 20px 60px;
  gap:0;
  max-width:520px;                    /* ~ formato 1080 visual */
  margin:0 auto;
}

/* ---- Mes y año arriba ---- */
.intro-mes{
  font-family:'Montserrat', sans-serif;
  font-size:clamp(11px, 2.6vw, 13px);
  letter-spacing:.35em;
  color:#F5EFE6;
  margin-bottom:10px;
  opacity:0;
  transform:translateY(-14px);
}

/* ---- Nombres en script English Script EF (fuente comercial cliente) ---- */
.intro-couple{
  font-family:'English Script','Petit Formal Script','Allura','Great Vibes',cursive;
  color:#F5EFE6;
  text-align:center;
  line-height:.95;
  margin-bottom:26px;
  opacity:0;
  transform:translateY(20px);
}
.intro-couple .line1,
.intro-couple .line2{
  display:block;
  font-size:clamp(56px, 12vw, 96px);
  letter-spacing:0;
}
.intro-couple .amp{
  display:block;
  font-size:clamp(38px, 8vw, 62px);
  margin:2px 0;
  font-style:italic;
  opacity:.92;
}

/* ---- Sobre ---- */
.envelope-stage{
  position:relative;
  width:min(320px, 68vw);
  aspect-ratio: 828 / 551;
  cursor:pointer;
  outline:none;
  margin:6px 0 22px;
  perspective:1400px;
  transform-style:preserve-3d;
  z-index:3;
}
.envelope-stage:focus-visible{
  outline:2px dashed #F5EFE6;outline-offset:14px;border-radius:4px;
}
.env-shadow{
  position:absolute;
  left:8%;right:8%;bottom:-2%;
  height:10%;
  background:radial-gradient(ellipse at center, rgba(0,0,0,.35), transparent 70%);
  filter:blur(10px);
  z-index:0;
  opacity:0;
  transform:scaleX(.85);
}
.envelope-closed{
  position:absolute;inset:0;
  width:100%;height:100%;
  object-fit:contain;
  z-index:2;
  opacity:0;
  transform:translateY(30px) scale(.95);
  filter:drop-shadow(0 12px 28px rgba(0,0,0,.35));
  will-change:opacity, transform;
}

/* ---- CTA "Presiona el sello / para abrir la invitación" ---- */
.intro-cta{
  text-align:center;
  margin:6px 0 44px;
  opacity:0;
  color:#F5EFE6;
}
.intro-cta .cta-top{
  font-family:'Montserrat', sans-serif;
  font-size:clamp(10px, 2.4vw, 12px);
  letter-spacing:.35em;
  margin-bottom:6px;
}
.intro-cta .cta-bottom{
  font-family:'English Script','Petit Formal Script','Allura','Great Vibes',cursive;
  font-size:clamp(22px, 5vw, 30px);
  font-style:italic;
  line-height:1;
}

/* ---- Divisor floral ---- */
.intro-divider{
  width:min(240px, 62vw);
  height:auto;
  margin:0 auto;
  opacity:0;
  transform:translateY(10px);
}

/* ---- Nombre del invitado ---- */
.intro-invitado{
  font-family:'English Script','Petit Formal Script','Allura','Great Vibes',cursive;
  font-size:clamp(34px, 7vw, 50px);
  color:#F5EFE6;
  text-align:center;
  margin:14px 0 16px;
  line-height:1;
  opacity:0;
  transform:translateY(12px);
}

/* ---- Reservado para N personas ---- */
.intro-reservado{
  text-align:center;
  margin-top:22px;
  color:#F5EFE6;
  opacity:0;
  transform:translateY(12px);
}
.intro-reservado .rsv-label{
  font-family:'Montserrat', sans-serif;
  font-size:clamp(10px, 2.4vw, 12px);
  letter-spacing:.35em;
  line-height:1.6;
}
.intro-reservado .rsv-count{
  font-family:'Cormorant Garamond','Fraunces', serif;
  font-size:clamp(38px, 8vw, 52px);
  line-height:1;
  margin:6px 0 4px;
  font-weight:400;
}

#intro.opening .envelope-stage,
#intro.opening .intro-cta{pointer-events:none}

/* ---- Responsive — usa clamp para todo, solo ajusto padding y florales ---- */
@media (max-width:600px){
  .intro-inner{padding:32px 18px 48px;max-width:100%}
  .intro-floral{width:34vw;min-width:120px}
  .intro-couple{margin-bottom:20px}
  .envelope-stage{width:76vw}
  .intro-cta{margin:4px 0 30px}
  /* Nombres MÁS GRANDES solo en móvil */
  .intro-couple .line1,
  .intro-couple .line2{font-size:clamp(76px, 18vw, 108px)}
  .intro-couple .amp{font-size:clamp(52px, 13vw, 74px)}
}
@media (max-width:380px){
  .intro-floral{width:38vw;min-width:100px;opacity:.55!important}
}