/* Azula XV · Gate de medianoche.
   Contrato: .kc/gate-spec.json (plate 1080x2340). Todo en % de plate; el movimiento lo dicta
   theme/gate-cenicienta.js (transform + opacity). Idle del held = solo CSS.
   Nada de fondo blanco: pedido de la darling. */

/* Hand-off al core: el gate se desvanece (.6 s) sobre html/body; navy sobre navy, cero destello claro. */
html, body { background: var(--azu-night); }
#kc-gate { background: var(--azu-night); overflow: hidden; }
#kc-gate .kc-gate-bg { background: var(--azu-night); }
/* El Hero del esqueleto pintaba #1c1c1c: la noche del Gate debe aterrizar en noche. Solo el fondo; el Hero se diseña en su fase. */
#kc-hero .kc-hero-bg { background: var(--azu-night); }
#kc-gate .kc-gate-content { position: absolute; inset: 0; display: block; padding: 0; gap: 0; }

/* Nombre accesible del Gate: presente para lectores de pantalla, invisible a la vista. */
#kc-gate .kc-gate-label {
  position: absolute; width: 1px; height: 1px; margin: -1px; overflow: hidden;
  clip-path: inset(50%); white-space: nowrap;
}

/* ── Stage: cover en vertical, contain en ancho; telón navy alrededor ── */
.azu-stage {
  --azu-w: max(100vw, calc(100vh * 1080 / 2340));
  --azu-h: calc(var(--azu-w) * 2340 / 1080);
  position: absolute; left: 50%; top: 50%;
  width: var(--azu-w); height: var(--azu-h);
  margin-left: calc(var(--azu-w) / -2); margin-top: calc(var(--azu-h) / -2);
  overflow: hidden; background: var(--azu-night);
}
@supports (height: 100dvh) { .azu-stage { --azu-w: max(100vw, calc(100dvh * 1080 / 2340)); } }
@media (min-aspect-ratio: 3/4) {
  .azu-stage { --azu-w: min(100vw, calc(100vh * 1080 / 2340)); }
  @supports (height: 100dvh) { .azu-stage { --azu-w: min(100vw, calc(100dvh * 1080 / 2340)); } }
}

/* ── Capas ── */
.azu-film, .azu-layer, .azu-fx, .azu-ink { position: absolute; inset: 0; width: 100%; height: 100%; }
.azu-film, .azu-layer, .azu-fx { object-fit: fill; pointer-events: none; }
.azu-ink { pointer-events: none; overflow: hidden; }
.azu-film { opacity: 0; }
.azu-stage[data-azu-film="on"] .azu-film { opacity: 1; }
.azu-layer, .azu-sprite, .azu-fx { opacity: 0; }
.azu-stage[data-azu-layers="on"] .azu-layer,
.azu-stage[data-azu-layers="on"] .azu-sprite { opacity: 1; }
.azu-stage[data-azu-layers="on"] .azu-film { opacity: 0; visibility: hidden; }

.azu-sprite { position: absolute; left: 0; top: 0; pointer-events: none; }
.azu-slipper img { display: block; width: 100%; height: 100%; }

/* ── Tinta (SVG): todo se define por clase; var() no resuelve en atributos de presentación ── */
.azu-frame-stroke { fill: none; stroke: var(--azu-silver); stroke-width: 3.2px; stroke-linecap: round; stroke-linejoin: round; stroke-dasharray: 1; stroke-dashoffset: 1; }
.azu-rule-in { stroke-width: 2px; }
.azu-eyebrow, .azu-xv, .azu-name { fill: var(--azu-silver); }
.azu-eyebrow {
  font-family: var(--azu-font-serif); font-size: 40px; font-variant: small-caps; letter-spacing: .16em; opacity: 0;
}
.azu-xv { font-family: var(--azu-font-script); font-size: 128px; opacity: 0; }
.azu-name { font-family: var(--azu-font-script); font-size: 210px; fill: var(--azu-silver-hi); }
#azu-name-strokes { fill: none; stroke: var(--azu-silver-hi); stroke-linecap: round; stroke-linejoin: round; }
#azu-name-strokes path { visibility: hidden; }
.azu-name-final { opacity: 0; }
.azu-ring { fill: none; stroke: var(--azu-celeste); stroke-width: 2.5px; opacity: 0; }
/* Halo del nombre: trazo celeste ancho y tenue detrás de la letra (sin filtros: barato en móvil) */
.azu-name-halo { font-family: var(--azu-font-script); font-size: 210px; fill: none; stroke: var(--azu-glass); stroke-width: 10px; stroke-linejoin: round; opacity: .3; }
/* Medianoche: la carátula se enciende una vez (midnight → held comparten la animación, no se reinicia) */
.azu-dial-glow { fill: url(#azu-dial-light); opacity: 0; }
#kc-gate[data-azu-phase="midnight"] .azu-dial-glow, #kc-gate[data-azu-phase="held"] .azu-dial-glow { animation: azu-dial 1.8s ease-out both; }
@keyframes azu-dial { 0% { opacity: 0; transform: scale(.7); } 22% { opacity: 1; transform: scale(1.05); } 100% { opacity: 0; transform: scale(1.25); } }
.azu-pen { opacity: 0; }
.azu-pen-halo { fill: var(--azu-glass); opacity: .22; }
.azu-pen-core { fill: var(--azu-glass); }
.azu-ribbon { stroke: var(--azu-glass); stroke-width: 14px; stroke-linecap: round; stroke-linejoin: round; visibility: hidden; }
.azu-burst use { fill: var(--azu-celeste); opacity: 0; }
.azu-twinkle { fill: var(--azu-celeste); opacity: 0; }

/* ── Brillo de cristal: franja dentro de una caja enmascarada con la silueta de la zapatilla ── */
.azu-glint {
  position: absolute; inset: 0; overflow: hidden; pointer-events: none;
  -webkit-mask-image: url(../assets/gate/slipper.webp); mask-image: url(../assets/gate/slipper.webp);
  -webkit-mask-size: 100% 100%; mask-size: 100% 100%; -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat;
}
.azu-glint::before {
  content: ""; position: absolute; top: -10%; bottom: -10%; left: 0; width: 32%; opacity: 0;
  background: linear-gradient(100deg, transparent 0, rgba(202,236,246,.0) 14%, rgba(238,242,246,.9) 50%, rgba(202,236,246,.0) 86%, transparent 100%);
  transform: translateX(-140%) skewX(-18deg);
}

/* ── Pajaritos ── */
.azu-bird {
  position: absolute; left: 0; top: 0; width: 24.0741%; height: 8.3333%;
  background: url(../assets/birds/bird-panuelo-fly.webp) 0 0 / 600% 100% no-repeat;
  visibility: hidden; pointer-events: none;
}
/* Elenco (kit assets/birds, calcado de las refes): 1.º Pañuelo, 2.º Gorro (entra por la derecha, espejado), 3.º Azul */
.azu-bird + .azu-bird { background-image: url(../assets/birds/bird-gorro-fly.webp); }
.azu-bird + .azu-bird + .azu-bird { background-image: url(../assets/birds/bird-azul-fly.webp); }
#kc-gate[data-azu-phase="exiting"] .azu-bird, #kc-gate[data-azu-phase="done"] .azu-bird { visibility: visible; }

/* ── CTA: botón transparente sobre la zapatilla (x300–780, y1470–1990) ── */
#kc-gate .kc-gate-cta {
  position: absolute; left: 27.7778%; top: 62.8205%; width: 44.4444%; height: 22.2222%; min-width: 44px; min-height: 44px;
  border: 0; border-radius: 0; background: transparent; color: var(--azu-glass);
  display: block; transform: none; transition: none; touch-action: manipulation; -webkit-tap-highlight-color: transparent;
}
#kc-gate .kc-gate-cta:hover { transform: none; }
#kc-gate .kc-gate-cta:focus-visible { outline: 2px solid var(--azu-silver); outline-offset: -4px; border-radius: 26px; }
#kc-gate .kc-gate-cta-icon { display: none; }
#kc-gate .kc-gate-cta-text {
  position: absolute; left: 0; right: 0; top: 88.4615%; transform: translateY(-50%); text-align: center; white-space: nowrap;
  font-family: var(--azu-font-serif); font-variant: small-caps; letter-spacing: .16em; color: var(--azu-glass);
  font-size: calc(var(--azu-w) * 40 / 1080); opacity: 0;
}
#kc-gate[data-azu-phase="held"] .kc-gate-cta-text { opacity: 1; transition: opacity .5s ease-out; }

/* ── Crédito: pequeño, abajo, legible sobre la escalera ── */
#kc-gate .kc-gate-credit {
  position: absolute; left: 0; right: 0; bottom: calc(max(10px, env(safe-area-inset-bottom)) + 24px); text-align: center; pointer-events: none;
  font-family: var(--azu-font-serif); font-size: .72rem; letter-spacing: .18em; text-transform: uppercase;
  color: var(--azu-silver); text-shadow: 0 1px 8px var(--azu-night), 0 0 2px var(--azu-night);
}

/* ── Noche de cierre ── */
.azu-night { position: absolute; inset: 0; background: var(--azu-night); opacity: 0; pointer-events: none; }

/* ── Idle del held: solo CSS ── */
#kc-gate[data-azu-phase="held"] .azu-glint::before { animation: azu-glint 3.2s ease-in-out infinite; }
#kc-gate[data-azu-phase="held"] .azu-twinkle { animation: azu-twinkle 2.8s ease-in-out infinite; }
#kc-gate[data-azu-phase="held"] .azu-beam { animation: azu-breathe 4.8s ease-in-out infinite; }
@keyframes azu-glint {
  0% { opacity: 0; transform: translateX(-140%) skewX(-18deg); }
  6% { opacity: 1; }
  34% { opacity: 1; transform: translateX(420%) skewX(-18deg); }
  36%, 100% { opacity: 0; transform: translateX(420%) skewX(-18deg); }
}
@keyframes azu-twinkle {
  0%, 100% { opacity: 0; transform: scale(.4); }
  45% { opacity: 1; transform: scale(1); }
}
/* Segundero vivo: tic de 1 s mientras el Gate espera y durante la salida */
#kc-gate[data-azu-phase="held"] .azu-hand-sec, #kc-gate[data-azu-phase="exiting"] .azu-hand-sec { animation: azu-sec 60s steps(60) infinite; }
@keyframes azu-sec { from { transform: rotate(0deg); } to { transform: rotate(360deg); } }
@keyframes azu-breathe { 0%, 100% { opacity: 1; } 50% { opacity: .85; } }

/* ── Movimiento reducido: estado final inmediato, sin idle ── */
@media (prefers-reduced-motion: reduce) {
  .azu-film { display: none; }
  #kc-gate[data-azu-phase] .azu-glint::before,
  #kc-gate[data-azu-phase] .azu-twinkle,
  #kc-gate[data-azu-phase] .azu-beam,
  #kc-gate[data-azu-phase] .azu-dial-glow,
  #kc-gate[data-azu-phase] .azu-hand-sec { animation: none; }
  #kc-gate[data-azu-phase="held"] .azu-twinkle { opacity: .75; transform: none; }
  #kc-gate[data-azu-phase="held"] .kc-gate-cta-text { transition: none; }
}