/* ============================================================
   MAEStudio · rail.css — EL RAÍL (2026-07-27)
   Capa que convierte el scroll vertical en scroll en profundidad.
   Todo cuelga de .rail-on en <html>: quitando esa clase (o poniendo
   R.ON=false en rail.js) la web vuelve al comportamiento de siempre.
   Ver src/js/rail.js y CONTEXTO-ANTES-DE-EMPEZAR.md
   ============================================================ */

/* El raíl necesita control exacto del scroll: el desplazamiento suave
   del navegador falsea toda medida inmediata tras un salto. */
.rail-on { scroll-behavior: auto !important; }

/* El espaciador es quien da al documento la altura del raíl. Así el
   scroll sigue siendo NATIVO: teclado, barra del navegador, arrastre
   y lector de pantalla funcionan sin que interceptemos nada. */
#railEspaciador { width: 1px; pointer-events: none; }

/* Los actos dejan de ser cajas con alto (sus secciones son fijas), así
   que dejan de pintar: el arco de luz pasa a #railArco. */
.rail-on .acto { display: contents; }

/* ------------------------------------------------------------
   ARCO DE LUZ — noche → destello → papel → apagón → noche.
   Antes vivía en el alto de cada acto; ahora es una capa fija que
   el raíl colorea fotograma a fotograma.
   ------------------------------------------------------------ */
#railArco {
  position: fixed; inset: 0; z-index: 0; pointer-events: none;
  background-color: #0A0E1A;
}
/* ------------------------------------------------------------
   EL FONDO QUE LLEGA, SUBIENDO (2026-07-29, encargo de Mau)
   En un borde de grupo el fondo del grupo que se va NO se mueve; el
   del que llega sube desde abajo y su borde superior es la línea que
   los separa. Dentro de un grupo esto no aparece: allí el fondo muta
   en el sitio (la profundidad).
   Sin `z-index`: va justo detrás de #bgNoche en el DOM, así que tapa
   el FONDO y no el primer plano, que se apila después.
   ------------------------------------------------------------ */
#railSube {
  position: fixed; inset: 0; pointer-events: none;
  visibility: hidden;
  transform: translate3d(0, 100%, 0);
  will-change: transform;
  background-color: #0A0E1A;
}
/* la línea: un filo claro sobre el borde de arriba, que es la frontera */
.rail-sube__linea {
  position: absolute; left: 0; right: 0; top: 0; height: 1px;
  background: rgba(242, 240, 235, 0.55);
  box-shadow: 0 0 12px rgba(242, 240, 235, 0.28);
}

.rail-arco__reticula {
  position: absolute; inset: 0; opacity: 0;
  background:
    linear-gradient(rgba(43, 47, 56, 0.05) 1px, transparent 1px) 0 0 / 56px 56px,
    linear-gradient(90deg, rgba(43, 47, 56, 0.05) 1px, transparent 1px) 0 0 / 56px 56px;
}
.rail-arco__vineta {
  position: absolute; inset: 0;
  background: radial-gradient(120% 90% at 50% 45%,
              transparent 55%, rgba(180, 172, 155, 0.4) 100%);
  opacity: var(--luz, 0);
}

/* ------------------------------------------------------------
   LAS SECCIONES — capas fijas apiladas, no una tira que se desliza.
   Sólo la que está en juego se ve; sólo la que está en su parada
   recibe clics.
   ------------------------------------------------------------ */
/* Se usan las propiedades INDEPENDIENTES `translate` y `scale`, no `transform`.
   Motivo medido (2026-07-27): el cubo del hero ya tiene su propia animación de
   `transform` (flotación) y pisaba la nuestra — la escala del primer plano
   nunca llegaba a aplicarse. `translate`/`scale` componen con `transform` en
   vez de competir con él, así que cada capa conserva su movimiento. */
.rail-on .sec {
  position: fixed; inset: 0; z-index: 2;
  min-height: 0; margin: 0;
  visibility: hidden; pointer-events: none;
  opacity: var(--sec-op, 0);
  translate: 0 var(--sec-y, 0px);
  will-change: translate, opacity;
  backface-visibility: hidden;
}
.rail-on .sec.en-juego  { visibility: visible; }
.rail-on .sec.es-parada { pointer-events: auto; }

/* PRIMER PLANO — viaja con el scroll. Nunca es invisible: entra desde
   el fondo a 0.8, se queda en 1 durante la parada y se acerca hasta
   1.2 al irse. (Escalas dictadas por Mau, 2026-07-27.) */
.rail-on .pl-primero {
  scale: var(--pl-escala, 1);
  transform-origin: 50% 50%;
  will-change: scale;
}

/* CONTENIDO — textos, tarjetas, HUD. NO viaja: aparece y desaparece
   en su parada. Es lo único invisible del modelo. */
.rail-on .pl-contenido {
  opacity: var(--cont-op, 0);
  transition: opacity var(--rail-cont-ms, 300ms) ease-out;
}

/* Los reveals los dispara el raíl al llegar a la parada, no el
   IntersectionObserver: con las secciones fijas ya no "entran" nunca en
   pantalla. La clase .on sigue siendo la misma de siempre — se reutiliza el
   mecanismo entero, aquí no hace falta ninguna regla nueva. */

/* ------------------------------------------------------------
   reduced-motion (D-052, WCAG 2.1 · 2.3.3)
   El viaje es decorativo; el contenido es esencial. Se pierde el
   viaje, no las secciones.
   ------------------------------------------------------------ */
@media (prefers-reduced-motion: reduce) {
  .rail-on .sec { translate: none; }
  .rail-on .pl-primero { scale: none; }
  .rail-on .pl-contenido { transition: none; opacity: 1; }
}
/* Mismo camino, forzado con ?rm=1 para poder verificarlo en pantalla. */
.rail-quieto .sec { translate: none; }
.rail-quieto .pl-primero { scale: none; }
.rail-quieto .pl-contenido { transition: none; opacity: 1; }