/* Portones de apertura — módulo compartido (elegible por invitación con d.gateStyle)
   Autónomo: no depende del CSS del portón inline de cada plantilla. Usa vars del tema con fallback. */

/* Evita el parpadeo del "sobre" inline: las plantillas traen un sobre en el HTML que se
   ve mientras llega el dato del evento. Se oculta hasta que renderGate arma el portón real
   (que usa clases .pg-*, no .env-stage/.env-wrap, así que este ocultado no le afecta).
   #gSeal y #gName siguen legibles para renderGate aunque estén visibility:hidden. */
#gate .env-stage, #gate .env-wrap{visibility:hidden}
/* El portón toma el color de SU invitación: si el tema es claro (pastel), el portón es claro;
   si es oscuro (esmeralda), es oscuro. Cadena de respaldo para Dalia/mármol, que usa otras vars. */
.porton{--pg-ink:var(--ink,var(--tinta,#2A2320));
        --pg-bg:var(--bg,var(--marfil,#0B0907));
        --pg-accent:var(--accent,var(--oro,#C9A96A));
        --pg-accent-lt:var(--accent-lt,var(--oro,#E7D4A6));
        --pg-accent-dp:var(--accent-deep,var(--accent,var(--oro,#A9884A)));}
#gate.porton{position:fixed;inset:0;z-index:50;overflow:hidden;cursor:pointer;background:var(--pg-bg);
  transition:opacity 1s var(--ease,cubic-bezier(.2,.7,.2,1)),visibility 1s var(--ease,cubic-bezier(.2,.7,.2,1));}
.porton *{box-sizing:border-box}
/* Encuadre alto: en fotos verticales (la mayoría de las portadas) el rostro vive en el
   tercio superior. Con "center" el recorte se comía las caras y dejaba el vestido. */
.porton .pg-bg{position:absolute;inset:0;background-size:cover;background-position:center 25%;transform:scale(1.06);animation:pgken 24s ease-in-out infinite alternate}
@keyframes pgken{to{transform:scale(1.15)}}
/* velo del color del tema sobre la foto: aclara en temas claros y oscurece en los oscuros */
.porton .pg-scrim{position:absolute;inset:0;
  background:radial-gradient(120% 95% at 50% 42%,
    color-mix(in srgb,var(--pg-bg) 40%,transparent) 18%,
    color-mix(in srgb,var(--pg-bg) 74%,transparent))}
/* canvas es elemento reemplazado: necesita width/height explícitos, inset:0 no lo estira */
.porton .pg-fx{position:absolute;inset:0;width:100%;height:100%;z-index:8;pointer-events:none}
.porton .pg-stage{position:absolute;inset:0;z-index:6;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:22px;text-align:center;padding:26px;
  transition:transform 1s var(--ease,cubic-bezier(.2,.7,.2,1)),opacity 1s var(--ease,cubic-bezier(.2,.7,.2,1))}
/* el halo es del color del fondo, así el texto se despega de la foto en claro y en oscuro */
.porton .pg-tag{font-family:var(--sans,system-ui,sans-serif);text-transform:uppercase;letter-spacing:.42em;font-size:11px;font-weight:500;color:color-mix(in srgb,var(--pg-accent-dp) 62%,var(--pg-ink));text-shadow:0 0 6px var(--pg-bg),0 0 14px var(--pg-bg),0 1px 2px var(--pg-bg);animation:pgpulse 2.6s ease-in-out infinite}
.porton .pg-names{font-family:var(--serif,Georgia,serif);font-style:italic;font-weight:600;font-size:clamp(30px,8vw,50px);line-height:1;color:var(--pg-ink);text-shadow:0 0 22px var(--pg-bg),0 2px 6px color-mix(in srgb,var(--pg-bg) 85%,transparent)}
.porton .pg-names i{font-style:italic;color:var(--pg-accent);display:block;font-size:.6em;margin:2px 0}
.porton .pg-tap{font-family:var(--sans,system-ui,sans-serif);text-transform:uppercase;letter-spacing:.3em;font-size:10px;font-weight:500;color:color-mix(in srgb,var(--pg-accent-dp) 62%,var(--pg-ink));text-shadow:0 0 6px var(--pg-bg),0 0 14px var(--pg-bg),0 1px 2px var(--pg-bg);animation:pgpulse 2.4s ease-in-out infinite}
@keyframes pgpulse{0%,100%{opacity:.52}50%{opacity:1}}

/* ── 1 · SOBRE con SELLO DE CERA REAL ───────────────────────────── */
.porton .pg-env{position:relative;width:min(84vw,360px);aspect-ratio:3/2;filter:drop-shadow(0 34px 46px rgba(0,0,0,.5))}
.porton .pg-pocket{position:absolute;inset:0;background:#FCFAF5;border:1px solid #141414;border-radius:9px;overflow:hidden}
.porton .pg-pocket::before{content:"";position:absolute;inset:0;background:linear-gradient(#FEFDFA,#F2ECDF);clip-path:polygon(0 100%,50% 40%,100% 100%)}
.porton .pg-pocket::after{content:"";position:absolute;inset:0;background:linear-gradient(115deg,rgba(90,70,30,.05),transparent 42%),linear-gradient(-115deg,rgba(90,70,30,.05),transparent 42%)}
.porton .pg-flap{position:absolute;top:0;left:0;right:0;height:58%;background:linear-gradient(#EFE5CF,#E0D3B6);clip-path:polygon(0 0,100% 0,50% 100%);transform-origin:top center;
  transition:transform 1s var(--ease,cubic-bezier(.2,.7,.2,1));z-index:5;
  filter:drop-shadow(1px 0 0 #141414) drop-shadow(-1px 0 0 #141414) drop-shadow(0 1px 0 #141414) drop-shadow(0 -1px 0 #141414)}
.porton .pg-wax{position:absolute;top:52%;left:50%;transform:translate(-50%,-50%);width:86px;height:95px;z-index:6;
  transition:transform .6s var(--ease,cubic-bezier(.2,.7,.2,1)),opacity .5s var(--ease,cubic-bezier(.2,.7,.2,1))}
.porton .pg-waxsvg{width:100%;height:100%;display:block;filter:drop-shadow(0 7px 11px rgba(90,40,30,.5))}
#gate.porton.p-sobre.go .pg-flap{transform:rotateX(180deg)}
#gate.porton.p-sobre.go .pg-wax{transform:translate(-50%,-50%) scale(.28) rotate(-9deg);opacity:0}
#gate.porton.p-sobre.go .pg-stage{transform:translateY(-24px);opacity:0}
#gate.porton.p-sobre.go{opacity:0;transition:opacity .9s var(--ease,cubic-bezier(.2,.7,.2,1)) .95s}

/* ── 2 · VELO DE LUZ ────────────────────────────────────────────── */
#gate.porton.p-velo{background:linear-gradient(160deg,color-mix(in srgb,var(--pg-accent) 14%,var(--pg-bg)),var(--pg-bg))}
.porton.p-velo .pg-scrim{background:linear-gradient(160deg,color-mix(in srgb,var(--pg-accent) 18%,transparent),transparent),radial-gradient(120% 95% at 50% 42%,color-mix(in srgb,var(--pg-bg) 40%,transparent) 20%,color-mix(in srgb,var(--pg-bg) 74%,transparent))}
.porton .pg-sweep{position:absolute;top:-25%;left:-65%;width:56%;height:150%;transform:rotate(16deg);z-index:7;pointer-events:none;
  background:linear-gradient(90deg,transparent,rgba(255,255,255,.9),transparent);opacity:0;animation:pgambient 4.4s ease-in-out infinite}
@keyframes pgambient{0%{left:-65%;opacity:0}35%{opacity:.42}75%,100%{left:132%;opacity:0}}
#gate.porton.p-velo.go .pg-sweep{animation:pgvsweep 1.1s ease-in-out forwards}
@keyframes pgvsweep{0%{left:-65%;opacity:1}100%{left:132%;opacity:1}}
#gate.porton.p-velo.go{opacity:0;transform:scale(1.04);transition:opacity 1s var(--ease,cubic-bezier(.2,.7,.2,1)) 1.05s}

/* ── 3 · DESTELLO DORADO ────────────────────────────────────────── */
#gate.porton.p-destello{background:radial-gradient(70% 55% at 50% 42%,color-mix(in srgb,var(--pg-accent) 16%,var(--pg-bg)),var(--pg-bg))}
.porton.p-destello .pg-scrim{background:radial-gradient(70% 55% at 50% 42%,color-mix(in srgb,var(--pg-bg) 40%,transparent),color-mix(in srgb,var(--pg-bg) 76%,transparent))}
.porton .pg-burst{position:absolute;left:50%;top:44%;z-index:7;width:16px;height:16px;border-radius:50%;pointer-events:none;
  background:radial-gradient(#fff,rgba(230,206,147,.6),transparent 70%);transform:translate(-50%,-50%) scale(0);opacity:0}
#gate.porton.p-destello.go .pg-burst{animation:pgbloom 1.1s ease-out forwards}
@keyframes pgbloom{0%{transform:translate(-50%,-50%) scale(0);opacity:1}60%{opacity:1}100%{transform:translate(-50%,-50%) scale(48);opacity:0}}
#gate.porton.p-destello.go .pg-stage{opacity:0;transition:opacity .35s ease}
#gate.porton.p-destello.go{opacity:0;transition:opacity .6s ease .55s}

/* ── 4 · CORAZÓN ────────────────────────────────────────────────── */
#gate.porton.p-corazon{background:linear-gradient(165deg,color-mix(in srgb,var(--pg-accent) 14%,var(--pg-bg)),var(--pg-bg))}
.porton.p-corazon .pg-scrim{background:linear-gradient(165deg,color-mix(in srgb,var(--pg-accent) 16%,transparent),transparent),radial-gradient(120% 95% at 50% 42%,color-mix(in srgb,var(--pg-bg) 40%,transparent) 20%,color-mix(in srgb,var(--pg-bg) 74%,transparent))}
.porton .pg-heart{width:96px;height:96px;position:relative;animation:pgbeat 1.4s ease-in-out 1.7s infinite}
.porton .pg-heart .hpath{fill:none;stroke:#E7A3AE;stroke-width:5;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:340;stroke-dashoffset:340;animation:pgdraw 1.6s var(--ease,cubic-bezier(.2,.7,.2,1)) .2s forwards}
.porton .pg-heart .hfill{fill:#E7A3AE;opacity:0;transform-origin:50% 55%;animation:pgfill 1s ease 1.5s forwards}
@keyframes pgdraw{to{stroke-dashoffset:0}}
@keyframes pgfill{0%{opacity:0;transform:scale(.6)}100%{opacity:.2;transform:scale(1)}}
@keyframes pgbeat{0%,100%{transform:scale(1)}50%{transform:scale(1.08)}}
#gate.porton.p-corazon.go{opacity:0;transition:opacity .8s var(--ease,cubic-bezier(.2,.7,.2,1)) .4s}

/* ── 5 · PÉTALOS ────────────────────────────────────────────────── */
#gate.porton.p-petalos{background:linear-gradient(165deg,color-mix(in srgb,var(--pg-accent) 14%,var(--pg-bg)),var(--pg-bg))}
.porton.p-petalos .pg-scrim{background:linear-gradient(165deg,color-mix(in srgb,var(--pg-accent) 16%,transparent),transparent),radial-gradient(120% 95% at 50% 42%,color-mix(in srgb,var(--pg-bg) 40%,transparent) 20%,color-mix(in srgb,var(--pg-bg) 74%,transparent))}
.porton .pg-glow{position:absolute;inset:0;z-index:7;pointer-events:none;background:radial-gradient(closest-side at 50% 46%,rgba(255,255,255,.9),transparent 70%);opacity:0;transition:opacity .8s ease}
#gate.porton.p-petalos.go .pg-glow{opacity:1}
#gate.porton.p-petalos.go{opacity:0;transform:scale(1.04);transition:opacity 1s var(--ease,cubic-bezier(.2,.7,.2,1)) .25s,transform 1s var(--ease,cubic-bezier(.2,.7,.2,1)) .25s}

@media (prefers-reduced-motion: reduce){
  .porton .pg-bg,.porton .pg-sweep,.porton .pg-heart,.porton .pg-heart .hpath,.porton .pg-heart .hfill{animation:none!important}
}