/* Puerta de Karu — primera pantalla del sitio (aprobada por Axel el 16/09/2026). Boceto:
 * la llama del logo en negro sobre blanco; al bajar se entra por la llama; la cámara pasa cuatro veces
 * al lado de Karu bajando el abanico (izquierda, derecha, izquierda, derecha) y cae en el hero, que se
 * queda quieto un tramo y se funde con el hero real que está debajo.
 * Movimientos del catálogo: `entrada-avanzando` (variante DOM) + `vuelo-por-el-mosaico` (DOM, perspectiva
 * proyectada en JS a translate + scale: ver puerta.js) con
 * `secuencia-scrub` en cada pasada. Lógica en assets/js/puerta.js, números en #guion-puerta.
 */

/* La sección se come 100svh hacia abajo: al terminar el pin, el hero real queda justo debajo de la
   etapa, alineado con el último cuadro, y el fundido de salida lo destapa sin salto. */
.puerta { position: relative; z-index: 30; height: 800vh; height: 800svh; margin-bottom: -100vh; margin-bottom: -100svh; }
.puerta__etapa { background: var(--negro-escena); }

.puerta__mundo { position: absolute; inset: 0; overflow: hidden; isolation: isolate; }

/* Karu: más alta que la pantalla, con los bordes fundidos al negro para que no se vea el rectángulo
   del video (el fondo del clip ya es el mismo #0D0D0D).
   Las pasadas se pisan (en un teléfono, siempre: la capa es más ancha que la pantalla). Se pintan en
   orden del DOM y no de profundidad, así que la más lejana quedaba encima de la cercana y
   su fondo negro le cortaba el fuego en un rectángulo. `lighten` se queda con el más claro de los dos:
   el negro del clip no tapa nada y el fuego se ve entero. El z-index por profundidad (puerta.js) deja
   la cercana encima si un navegador no mezcla. */
.puerta__capa {
  --h: 112vh;
  position: absolute; left: 50%; top: 50%; height: var(--h); width: calc(var(--h) * 0.5625);
  margin: calc(var(--h) / -2) 0 0 calc(var(--h) * -0.28125);
  opacity: 0; visibility: hidden; will-change: transform, opacity; backface-visibility: hidden;
  mix-blend-mode: lighten;
  -webkit-mask-image: linear-gradient(to bottom, transparent 0, #000 9%, #000 86%, transparent 100%), linear-gradient(to right, transparent 0, #000 14%, #000 86%, transparent 100%);
  -webkit-mask-composite: source-in;
          mask-image: linear-gradient(to bottom, transparent 0, #000 9%, #000 86%, transparent 100%), linear-gradient(to right, transparent 0, #000 14%, #000 86%, transparent 100%);
          mask-composite: intersect;
}
.puerta__capa > canvas { display: block; width: 100%; height: 100%; }

.puerta__cuadro--hero {
  --w: 56vw;
  position: absolute; left: 50%; top: 50%; width: var(--w); height: calc(var(--w) * 0.5625);
  margin: calc(var(--w) * -0.28125) 0 0 calc(var(--w) / -2);
  overflow: hidden; background: var(--negro-escena); opacity: 0; will-change: transform, opacity;
}
.puerta__cuadro--hero > video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block; }

/* El fuego que se ve por el hueco de la llama mientras el logo está cerrado. Selector con la etapa
   delante: motion-base.css estira a pantalla completa todo canvas hijo de .mw-pin__etapa (z-index 1). */
.puerta__etapa > .puerta__brasa { inset: auto; left: 50%; top: 50%; height: 52vh; width: calc(52vh * 0.5625); transform: translate(-50%, -50%); z-index: 1; }
.puerta__logo { position: absolute; inset: 0; width: 100%; height: 100%; display: block; pointer-events: none; z-index: 2; }
.puerta__pista { z-index: 3; }

/* Nombre de la marca debajo de la llama: es lo único escrito de la pantalla de entrada. */
.puerta__marca {
  position: absolute; left: 50%; top: 50%; margin: 0; z-index: 3; white-space: nowrap;
  font-family: var(--font-display); font-weight: 500; text-transform: uppercase;
  font-size: clamp(1.05rem, 0.7rem + 1.5vw, 2.1rem); letter-spacing: 0.26em; line-height: 1;
  color: var(--negro-escena);
}
.puerta__marca em { font-style: normal; color: rgba(13, 13, 13, 0.55); }

/* Copia del titular del hero: entra apenas el hero llena la pantalla, antes de que el recorrido
   termine y aparezca el hero real (que trae el mismo texto en el mismo lugar). */
.puerta__copia { position: absolute; inset: 0; min-height: 0; z-index: 4; opacity: 0; pointer-events: none; }
.puerta__pista {
  position: absolute; left: 50%; bottom: 2.2rem; transform: translateX(-50%); margin: 0;
  /* mismo chevron animado que "Sigue bajando" de la galería (.galeria__chevron en galeria.css) */
  display: flex; align-items: center; gap: 0.6rem; white-space: nowrap;
  color: var(--ink-muted-on-light); font-family: var(--font-support); font-size: 0.72rem; letter-spacing: 0.2em; text-transform: uppercase;
}

/* Mientras dura la puerta no hay nav: la pantalla es solo el logo. */
body[data-en-puerta] .nav, body[data-en-puerta] .pildora, body[data-en-puerta] .barra { opacity: 0 !important; pointer-events: none !important; }

@media (max-width: 767px) {
  .puerta__pista { bottom: 4.8rem; }   /* por encima del botón de música */
  .puerta__capa { --h: 100vh; }
  /* El video del hero en teléfono es 9:16: un cuadro 16:9 lo mostraba recortado a una franja y, al
     llenar la pantalla, con otro encuadre que el hero real de abajo. En 9:16 el cuadro que cubre la
     pantalla recorta igual que el object-fit del hero real y el fundido no salta. */
  .puerta__cuadro--hero { --w: 62vw; height: calc(var(--w) * 16 / 9); margin-top: calc(var(--w) * -8 / 9); }
}

/* Sin JS o con reduced-motion no hay puerta: la página arranca en el hero. html.js lo pone
   assets/js/js-activo.js en el <head>, antes de la primera pintura. */
html:not(.js) .puerta { display: none; }
@media (prefers-reduced-motion: reduce) { .puerta { display: none; } }
html[data-motion="estatico"] .puerta { display: none; }