/* =====================================================================
   Entrada inmersiva — el portón que se pinta (v2)
   Clases y keyframes con prefijo/únicos para NO chocar con el contenido.
   Usa los tokens de estilos.css (se carga después).
   ===================================================================== */
:root{--f-disp:var(--f-display);--f-tit:var(--f-titulo);--f-cue:var(--f-cuerpo)}

/* La entrada solo existe con JS (sin JS, el contenido se ve directo). */
.stage{display:none}
.js .stage{display:flex}

.stage{position:fixed;inset:0;z-index:200;align-items:center;justify-content:center;
  overflow:hidden;transition:opacity .7s ease}
.stage.gone{opacity:0;pointer-events:none}
/* El fondo cálido vive en capas propias (::before gradiente + ::after viñeta) para poder
   disolverlo por OPACIDAD: un gradient no se puede transicionar y saltaría de golpe. */
.stage::before{content:"";position:absolute;inset:0;z-index:0;pointer-events:none;transition:opacity 1.7s ease;
  background:radial-gradient(130% 120% at 50% 38%, #FDFBF6 0%, #F5EFE3 55%, #EAE1D0 100%)}
.stage::after{content:"";position:absolute;inset:0;z-index:0;pointer-events:none;transition:opacity 1.7s ease;
  background:radial-gradient(120% 110% at 50% 45%, transparent 55%, rgba(120,100,70,.10) 100%)}
/* Fusión con el hero: se disuelven suavemente las capas cálidas dejando ver la página real. */
.stage.fusing::before,.stage.fusing::after{opacity:0}
.dust{position:absolute;inset:0;pointer-events:none;z-index:2;overflow:hidden;transition:opacity 1.1s ease}
.stage.fusing .dust{opacity:0}

/* Ramas de acuarela a los lados: llenan el espacio libre en pantallas anchas (p. ej. 1080p).
   Aparecen al terminar de pintarse la reja (.florido) y se disuelven en la fusión. */
.pe-flor{position:absolute;z-index:2;width:clamp(190px,15vw,310px);height:auto;
  pointer-events:none;opacity:0;transition:opacity 1.4s ease}
.stage.florido .pe-flor{opacity:.92}
.stage.fusing .pe-flor{opacity:0;transition:opacity .8s ease}
.pe-flor--a{left:clamp(18px,4.5vw,110px);top:clamp(26px,10vh,130px);transform:rotate(-9deg)}
.pe-flor--b{right:clamp(18px,4.5vw,110px);bottom:clamp(26px,10vh,130px);transform:scaleX(-1) rotate(-9deg)}
@media (max-aspect-ratio: 3/2){.pe-flor{display:none}}

/* ---- Pantalla de bienvenida (detrás del portón; se ve al abrir y se funde con el hero) ---- */
.reveal{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;
  gap:10px;z-index:8;opacity:0;visibility:hidden;transform:scale(.965);filter:blur(8px);
  transition:opacity 1.2s ease .5s, transform 1.6s cubic-bezier(.5,0,.2,1) .4s, filter 1.4s ease .5s}
.stage.open .reveal{opacity:1;visibility:visible;transform:scale(1);filter:blur(0)}
/* Fondo propio de la bienvenida (se disuelve durante la fusión, dejando los nombres). */
.reveal__bg{position:absolute;inset:0;z-index:-1;transition:opacity 1.7s ease;
  background:radial-gradient(120% 100% at 50% 42%, #FDFBF6, #F4EEE2 70%, #E9E0CF 100%)}
.reveal__names{font-family:var(--f-disp);font-size:clamp(46px,9vw,104px);color:var(--marino);line-height:.92;will-change:transform}
.reveal__amp{color:var(--azul);font-size:.5em;display:inline-block;transform:translateY(-.15em)}
.reveal__date{font-family:var(--f-tit);letter-spacing:.3em;text-transform:uppercase;font-size:clamp(15.5px,2.9vw,19px);color:var(--oro)}
.reveal__hint{margin-top:8px;font-style:italic;color:var(--salvia);font-size:21px}

/* ---- Portón ---- */
.portal{position:relative;z-index:3;width:min(1300px,94vw,118vh);aspect-ratio:2003/1503;
  perspective:1600px;transform:rotateX(0) rotateY(0);transition:transform .4s ease-out}
.pe-gate{position:absolute;inset:0;transform-style:preserve-3d}
.leaf{position:absolute;inset:0;backface-visibility:hidden;transition:transform 1.75s cubic-bezier(.66,.01,.28,1)}
.gate-navy,.gate-gold{position:absolute;inset:0}
.gate-navy svg,.gate-gold svg{width:100%;height:100%;display:block;overflow:visible}
.gate-navy svg path{fill:var(--marino)}
.gate-gold svg path{fill:var(--oro-vivo)}
/* Capa navy: se revela de abajo hacia arriba con borde suave (brocha) */
.gate-navy{
  -webkit-mask-image:linear-gradient(to top, #000 calc(var(--p,-24)*1%), transparent calc((var(--p,-24) + 16)*1%));
  mask-image:linear-gradient(to top, #000 calc(var(--p,-24)*1%), transparent calc((var(--p,-24) + 16)*1%))}
/* Capa dorada: franja al FRENTE del barrido (pan de oro fresco → se asienta en navy) */
.gate-gold{
  -webkit-mask-image:linear-gradient(to top, transparent calc((var(--p,-24) - 8)*1%), #000 calc((var(--p,-24) - 1)*1%), #000 calc((var(--p,-24) + 6)*1%), transparent calc((var(--p,-24) + 15)*1%));
  mask-image:linear-gradient(to top, transparent calc((var(--p,-24) - 8)*1%), #000 calc((var(--p,-24) - 1)*1%), #000 calc((var(--p,-24) + 6)*1%), transparent calc((var(--p,-24) + 15)*1%))}
.leaf--l{clip-path:inset(0 50% 0 0);transform-origin:left center}
.leaf--r{clip-path:inset(0 0 0 50%);transform-origin:right center}
.stage.open .leaf--l{transform:rotateY(-112deg)}
.stage.open .leaf--r{transform:rotateY(112deg)}

.brush{position:absolute;left:-4%;right:-4%;height:12%;bottom:calc(var(--p,-12) * 1%);
  transform:translateY(50%);z-index:4;pointer-events:none;opacity:0;
  background:radial-gradient(60% 100% at 50% 50%, rgba(233,214,166,.9), rgba(201,162,78,.35) 45%, transparent 75%);
  filter:blur(6px);mix-blend-mode:screen}
.bloom{position:absolute;z-index:4;border-radius:50%;pointer-events:none;
  transform:translate(-50%,-50%) scale(.5);opacity:0;filter:blur(2px);
  background:radial-gradient(circle, rgba(150,196,255,.85), rgba(95,146,176,.5) 45%, transparent 72%)}
.shimmer{position:absolute;inset:0;z-index:5;pointer-events:none;opacity:0;mix-blend-mode:screen;
  background:linear-gradient(115deg, transparent 42%, rgba(233,214,166,.55) 50%, transparent 58%);
  background-size:250% 100%;background-position:120% 0}
.corehalo{position:absolute;left:50%;top:52%;width:44%;aspect-ratio:1;transform:translate(-50%,-50%);
  z-index:3;border-radius:50%;pointer-events:none;opacity:0;mix-blend-mode:screen;
  background:radial-gradient(circle, rgba(201,162,78,.32), rgba(150,186,222,.14) 45%, transparent 68%);
  transition:opacity 1.4s ease}
.portal.lit .corehalo{opacity:1;animation:pe-breathe 6s ease-in-out infinite 1.4s}

/* ---- Centro: invitación + ENTRAR ---- */
.center{position:absolute;left:50%;top:52%;transform:translate(-50%,-50%);z-index:6;
  display:flex;flex-direction:column;align-items:center;text-align:center;gap:clamp(8px,1.4vw,16px);
  width:min(90%,520px);transition:opacity .6s ease,transform .7s ease}
.center::before{content:"";position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);z-index:-1;
  width:215%;height:250%;border-radius:50%;pointer-events:none;
  background:radial-gradient(ellipse 62% 52% at 50% 50%, rgba(251,248,242,.98) 0%, rgba(251,248,242,.94) 38%, rgba(251,248,242,.6) 58%, rgba(251,248,242,0) 80%);
  filter:blur(5px)}
.stage.open .center{opacity:0;transform:translate(-50%,-64%);pointer-events:none}
.center>*{opacity:0}
.c-para{margin:0 0 4px;font-family:var(--f-cue);font-style:italic;font-size:clamp(15px,2.3vw,20px);color:var(--oro)}
.center.show .c-para{animation:pe-rise .7s ease 0s both}
.center.show .c-invite{animation:pe-rise .7s ease .0s both}
.center.show .c-names{animation:pe-rise .75s ease .1s both}
.center.show .c-enter{animation:pe-rise .75s ease .2s both}
.center.show .c-hint{animation:pe-rise .75s ease .32s both, pe-gleam 2.8s ease-in-out 1.3s infinite}
.c-invite{margin:0;font-family:var(--f-tit);font-weight:600;letter-spacing:.2em;text-transform:uppercase;
  font-size:clamp(12.5px,1.8vw,16.5px);line-height:1.7;color:#2A3F54;max-width:22em}
.c-names{font-family:var(--f-disp);font-size:clamp(40px,8vw,84px);line-height:.9;color:var(--marino);
  text-shadow:0 2px 18px rgba(201,162,78,.25)}
.c-names .amp{color:var(--azul);font-size:.6em;display:inline-block;transform:translateY(-.1em)}
.c-enter{margin-top:8px;cursor:pointer;background:rgba(250,247,241,.55);color:var(--marino);
  border:1.4px solid var(--oro);padding:14px 46px;font-family:var(--f-tit);font-weight:600;
  letter-spacing:.32em;text-transform:uppercase;font-size:14px;border-radius:2px;transition:.3s;
  backdrop-filter:blur(2px);box-shadow:0 6px 26px -12px rgba(176,138,78,.6)}
.c-enter:hover{background:var(--oro-vivo);color:#FBF7EE;border-color:var(--oro-vivo)}
.c-hint{margin:0;font-family:var(--f-tit);font-weight:600;letter-spacing:.24em;text-transform:uppercase;
  font-size:clamp(11px,2.2vw,13px);color:#6E5B3C}
.flash{position:absolute;inset:0;z-index:7;pointer-events:none;opacity:0;
  background:radial-gradient(circle at 50% 50%, rgba(255,249,232,.9), rgba(233,214,166,.4) 34%, transparent 66%)}

/* ---- Keyframes (prefijo pe- para no chocar con estilos.css) ---- */
@keyframes pe-rise{from{opacity:0;transform:translateY(26px)}to{opacity:1;transform:translateY(0)}}
@keyframes pe-gleam{0%,100%{opacity:.55}50%{opacity:1}}
@keyframes pe-breathe{0%,100%{opacity:.7}50%{opacity:1}}
@keyframes pe-floatUp{to{transform:translateY(-108vh)}}
@keyframes pe-sway{from{transform:translateX(-9px)}to{transform:translateX(9px)}}
@keyframes pe-shimmerSweep{from{background-position:120% 0}to{background-position:-120% 0}}

@media (max-aspect-ratio: 5/6){
  .center{width:min(84%,420px)}
  .c-names{font-size:clamp(34px,10vw,64px)}
}
@media (prefers-reduced-motion: reduce){
  .stage *{animation-duration:.001ms!important;transition-duration:.001ms!important}
}