/* ==========================================================================
   v7 · EL CINE
   --------------------------------------------------------------------------
   Ocho pantallas de portada clavada. El mecanismo entero son tres reglas:
   la sección mide ocho veces la pantalla, la capa de dentro es `sticky` y
   ocupa una, y los ocho divisores vacíos ponen el resto de la altura.

   Todo lo demás —velo, nubes, tipografía, barra— se apoya encima sin tocar el
   mecanismo, que es lo que permite cambiar el soporte de la película sin
   cambiar una línea de maquetación.
   ========================================================================== */

.cine{ position:relative; z-index:10; }
.cine__cap{ height:100svh; }

.cine__fijo{
  position:sticky; top:0; height:100svh; overflow:hidden;
  background:var(--grafito);
  isolation:isolate;
}
/* Con el motor en vivo, la película **no está aquí dentro**: está en el lienzo
   fijo del sitio, que vive por debajo de esta capa. Si esta capa se queda con
   su fondo opaco, tapa la escena y no se ve nada. Es de esos fallos que se
   diagnostican en un segundo y sólo si se mira la pantalla. */
#cine-video{
  position:absolute; inset:0; width:100%; height:100%; display:block;
  object-fit:cover;
}
#cine-video[hidden]{ display:none; }

/* ------------------------------------------------------------------ nubes
   Tres marquesinas a distinta velocidad y a muy poca tinta. Es el recurso de
   la página de referencia y funciona por lo mismo que funciona en una obra de
   teatro: no se mira, se nota. */
.cine__nubes{ position:absolute; inset:0; pointer-events:none; overflow:hidden; }
.cine__nubes i{
  position:absolute; left:0; top:0;
  width:400%; height:52%;
  background:url("../img/nubes-tira.png") repeat-x center/auto 100%;
  will-change:transform;
}
.cine__nubes i:nth-child(1){ top:2%;  opacity:.16; animation:cruzar 190s linear infinite; }
.cine__nubes i:nth-child(2){ top:16%; opacity:.10; animation:cruzar 128s linear infinite reverse; }
.cine__nubes i:nth-child(3){ top:-6%; opacity:.07; animation:cruzar 260s linear infinite; }
@keyframes cruzar{ from{ transform:translate3d(0,0,0); } to{ transform:translate3d(-50%,0,0); } }

/* El velo: pesa abajo y a la izquierda, que es donde va el texto. Arriba se
   deja limpio porque ahí está el cielo, que es la mitad de la película. */
.cine__velo{
  position:absolute; inset:0; pointer-events:none;
  background:
    linear-gradient(180deg, rgba(19,18,15,.55) 0%, transparent 22%, transparent 46%, rgba(19,18,15,.90) 100%),
    linear-gradient(90deg, rgba(19,18,15,.62) 0%, rgba(19,18,15,.18) 42%, transparent 68%);
}

/* ------------------------------------------------------------ tipografía
   Un rótulo, un titular y una línea. Nada más: si en una pantalla hay que leer
   dos cosas, es que hay dos pantallas. */
.cine__texto{
  position:absolute; left:0; bottom:clamp(96px, 17vh, 190px);
  padding:0 var(--margen);
  max-width:min(46ch, 52vw);
  isolation:isolate;
  transition:opacity .34s var(--e-cine), transform .34s var(--e-cine);
}

/* ⚠ **El fondo del texto, en una capa que desborda el bloque.**
   Hizo falta al cambiar la portada al time-lapse de obra: el velo de arriba
   estaba calibrado para el render oscuro que había antes, y sobre una obra a
   pleno sol no da. Medido el peor píxel bajo cada letra en cinco puntos del
   recorrido, el titular daba **1,00 sobre 1** —el mismo tono exacto que la
   letra— y el rótulo pequeño entre 1,09 y 3,12. Ilegible, y no lo avisa nada:
   el texto está ahí, con su color correcto, encima de una imagen que resulta
   tener su mismo brillo.

   Va en una capa con `inset` negativo y no como `background` del bloque porque
   un degradado se reparte sobre el ancho del elemento y se apagaría **encima de
   las últimas palabras**. Con el desborde, la letra queda siempre sobre la
   parte opaca y el desvanecido cae fuera. */
.cine__texto::before{
  content:""; position:absolute; z-index:-1;
  inset:-74px -240px -48px -140px;
  /* Horizontal: opaco donde está la letra, se apaga ya fuera del bloque.
     ⚠ Con un radial centrado en el bloque, el rótulo pequeño —que va arriba del
     todo— quedaba en el borde del degradado y medía 1,09 sobre 1 mientras el
     titular, en el centro, iba bien. El fondo tiene que ser parejo en vertical;
     lo que puede degradarse es el lado. */
  /* El tramo opaco llega hasta el 62 % y baja más tarde. Con el corte al 52 %
     el capítulo 08 —el edificio entero iluminado de noche— dejaba el titular en
     2,85 sobre 1, justo por debajo del 3 que pide el texto grande. Los demás
     capítulos pasaban: el fotograma más difícil es el que manda. */
  /* El tramo opaco llega al 62 % y baja después; el desvanecido cae ya fuera
     de la letra.

     ⚠ **Y aquí me pasé subiendo opacidades contra ruido.** Llegué a poner el
     núcleo en 0,985 persiguiendo un capítulo que medía 2,85 sobre 1. Resultó
     que la sonda no fijaba el fotograma —el `currentTime` lo mueve un
     amortiguado, así que cada ejecución caía en un fotograma distinto y los
     números saltaban ±2 sin tocar nada— y que además medía el **rectángulo**
     del titular y no sus trazos: el peor píxel estaba en la esquina superior
     derecha de la caja, donde no hay ninguna letra.
     Con el fotograma clavado y midiendo sólo donde hay tinta, este reparto pasa
     de sobra. Un velo más opaco no arreglaba nada y apagaba el vídeo. */
  background:linear-gradient(97deg,
    rgba(12,11,9,.95) 0%, rgba(12,11,9,.93) 60%,
    rgba(12,11,9,.74) 80%, rgba(12,11,9,.26) 93%, transparent 100%);
  /* Y el desvanecido de arriba y abajo lo hace una máscara, no el degradado:
     así el borde no se ve como un rectángulo y el interior sigue siendo parejo. */
  -webkit-mask-image:linear-gradient(180deg, transparent 0%, #000 15%, #000 85%, transparent 100%);
          mask-image:linear-gradient(180deg, transparent 0%, #000 15%, #000 85%, transparent 100%);
}
.cine__texto.cambiando{ opacity:0; transform:translateY(10px); }
/* ⚠ **La portada no sigue el tema del sitio.** Va a sangre sobre metraje, y
   sobre una obra filmada la tipografía tiene que ser clara con el fondo
   oscurecido debajo — da igual que el resto de la página sea papel.

   Esto no es una excepción caprichosa: al pasar el sitio a claro, `--caliza`
   dejó de ser hueso y pasó a ser tinta, y el titular se volvió **negro sobre el
   velo negro del vídeo**. Desapareció entero. Ni un error: los elementos
   estaban ahí, con su tamaño y su posición, del color del fondo.

   Por eso los colores de aquí van escritos y no por variable: son los de la
   portada, no los del tema. */
.cine__titulo{
  font-family:var(--f-display); font-weight:400;
  font-size:clamp(34px, 5.1vw, 76px); line-height:1.02; letter-spacing:-.02em;
  color:#F2ECDF; margin:14px 0 0;
  text-shadow:0 2px 26px rgba(12,11,9,.75);
}
/* ⚠ **El rojo de marca no llega sobre el vídeo de obra.** Medido el peor píxel
   bajo la letra, `--ocre-hi` (#D0272B, L 0,150) se quedaba entre 2,5 y 2,9
   sobre 1; el titular es texto grande, así que el listón es 3:1, y no llegaba.
   Estuve subiendo la opacidad del fondo dos veces antes de darme cuenta de que
   el fondo ya estaba casi negro y quien fallaba era la letra.
   Mismo tono con más luz: L 0,219. Sólo aquí, sobre imagen; el rojo del resto
   del sitio va sobre grafito liso y se queda como está. */
.cine__titulo em{ font-style:italic; color:#E44B3F; }

/* El rótulo de capítulo pide **4,5 y no 3**: son 11 px, no es texto grande. Con
   el mismo rojo del titular se quedaba en 4,40 —a cuatro centésimas— así que
   lleva un paso más de luz. Calculado, no tanteado: medido el fondo más claro
   bajo la letra (L 0,0111), el mínimo que da 4,5 es L 0,235; éste da 5,13, que
   deja margen para que un fotograma algo más claro no lo tumbe. */
#cine-rotulo{ color:#EA6047; }
/* El contador de capítulo va con la misma regla: sobre vídeo, claro. */
#cine-cuenta{ color:rgba(230,223,209,.72); }
.cine__pie{
  margin-top:16px; max-width:46ch;
  font-size:clamp(14.5px, 1.2vw, 17px); line-height:1.7; color:#D6CEBE;
  text-shadow:0 1px 14px rgba(12,11,9,.9);
}

/* --------------------------------------------------------- barra y motor */
/* El conmutador va a la **izquierda**, delante de la barra: a la derecha caía
   justo encima de los botones flotantes de WhatsApp y del asistente, y dos
   controles superpuestos son cero controles. */
.cine__pie-barra{
  position:absolute; left:0; right:0; bottom:0;
  display:flex; align-items:center; gap:clamp(14px,2vw,28px);
  padding:0 calc(var(--margen) + 190px) clamp(26px,4vh,44px) var(--margen);
}
.cine__barra{
  flex:1 1 auto; height:1px; background:rgba(233,224,206,.20); position:relative;
}
.cine__barra i{
  /* Claro, no `var(--caliza)`: esta barra va sobre el vídeo. Con el tema en
     papel, `--caliza` es tinta y el relleno de la barra se volvió negro sobre
     negro — la barra existía y marcaba el avance sin que se viera nada. */
  position:absolute; inset:0; background:#F2ECDF;
  transform:scaleX(0); transform-origin:left;
}
/* El conmutador de soportes se retiró: la portada tiene un solo soporte, el
   time-lapse de obra. Sus estilos se van con él — CSS muerto apuntando a un
   elemento que no existe es la clase de cosa que dentro de un mes hace dudar
   de si falta algo en el HTML. */

@media (max-width:900px){
  .cine__texto{ max-width:none; bottom:clamp(120px,20vh,200px); }
  .cine__velo{
    background:linear-gradient(180deg, rgba(19,18,15,.62) 0%, transparent 26%, rgba(19,18,15,.94) 100%);
  }
}

/* La película se mueve sola aunque nadie se desplace: con movimiento reducido,
   las nubes se paran. El resto sigue funcionando con la rueda, que es una
   acción del visitante y no una animación impuesta. */
@media (prefers-reduced-motion: reduce){
  .cine__nubes i{ animation:none; }
  .cine__texto{ transition:none; }
}