/* Kit de la línea B («cine») — la mecánica. Colores, letras y tamaños van en el CSS de cada sitio.
   Fuente única: herramientas/cine/kit/. Se copia con copiar_kit.sh. */

/* Secuencia: el bloque mide --largo de pantallas; la escena queda fija mientras pasa */
[data-cine="secuencia"] { position: relative; height: calc(var(--largo, 5) * 100vh); height: calc(var(--largo, 5) * 100svh); }
.cine-escena { position: sticky; top: 0; height: 100vh; height: 100svh; overflow: hidden; }
.cine-escena canvas, .cine-escena .cine-poster { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.cine-escena canvas { opacity: 0; transition: opacity 400ms ease; }
.cine-con-cuadros .cine-escena canvas { opacity: 1; }
[data-tramo] { opacity: 0; visibility: hidden; transform: translate3d(0, 24px, 0);
  transition: opacity 420ms cubic-bezier(0.23, 1, 0.32, 1), transform 520ms cubic-bezier(0.23, 1, 0.32, 1), visibility 0s 520ms; }
[data-tramo].es-activo { opacity: 1; visibility: visible; transform: none; transition-delay: 0s; }
[data-barra] { transform-origin: left center; transform: scaleX(var(--p, 0)); }

/* Diapositivas: cada foto entra destapándose desde la derecha y se queda debajo de la siguiente */
[data-cine="diapositivas"] { position: relative; height: calc(var(--largo, 6) * 100vh); height: calc(var(--largo, 6) * 100svh); }
[data-diapo] { position: absolute; inset: 0; margin: 0; overflow: hidden; clip-path: inset(0 0 0 100%);
  transition: clip-path 760ms cubic-bezier(0.77, 0, 0.175, 1); }
[data-diapo] img { width: 100%; height: 100%; object-fit: cover; transform: scale(1.08); transition: transform 1200ms cubic-bezier(0.23, 1, 0.32, 1); }
[data-diapo]:first-child, [data-diapo].es-activa, [data-diapo].es-pasada { clip-path: inset(0); }
[data-diapo].es-activa img, [data-diapo].es-pasada img { transform: none; }
[data-diapo-texto] { opacity: 0; visibility: hidden; transform: translate3d(0, 16px, 0);
  transition: opacity 380ms cubic-bezier(0.23, 1, 0.32, 1), transform 480ms cubic-bezier(0.23, 1, 0.32, 1), visibility 0s 480ms; }
[data-diapo-texto].es-activa { opacity: 1; visibility: visible; transform: none; transition-delay: 120ms, 120ms, 0s; }

/* Diapositivas en arco: cada miniatura se coloca en el centro del círculo, gira y sube --radio
   (de -alfa a +alfa); --giro endereza la foto (1 = tangente al arco, 0 = derecha). La del momento se
   resalta; si hay [data-diapo-grande], esa se ve en grande en el hueco del arco. */
[data-modo="arco"] [data-diapo] { --t: calc((var(--i) / (var(--n) - 1) - 0.5) * 2 * var(--alfa, 60deg));
  inset: auto; left: 50%; top: calc(var(--radio, 420px) + var(--foto-al, 120px) * 0.9); width: var(--foto-an, 160px); height: var(--foto-al, 120px);
  clip-path: none; border-radius: 6px; box-shadow: 0 8px 22px rgba(0,0,0,.14); opacity: .55;
  transform: translate(-50%, -50%) rotate(var(--t)) translateY(calc(-1 * var(--radio, 420px))) rotate(calc(var(--t) * (var(--giro, 1) - 1)));
  transition: transform 560ms cubic-bezier(0.23, 1, 0.32, 1), opacity 400ms ease, box-shadow 400ms ease; }
[data-modo="arco"] [data-diapo] img { transform: none; transition: none; }
[data-modo="arco"] [data-diapo].es-pasada { opacity: .9; }
[data-modo="arco"] [data-diapo].es-activa { z-index: 2; opacity: 1; box-shadow: 0 14px 34px rgba(0,0,0,.26), 0 0 0 3px var(--arco-marca, #fff);
  transform: translate(-50%, -50%) rotate(var(--t)) translateY(calc(-1 * var(--radio, 420px) - var(--foto-al, 120px) * 0.22)) rotate(calc(var(--t) * (var(--giro, 1) - 1))) scale(var(--crece, 1.15)); }
[data-diapo-grande] { position: absolute; inset: 0; margin: 0; opacity: 0; transform: scale(.96); transition: opacity 420ms ease, transform 640ms cubic-bezier(0.23, 1, 0.32, 1); }
[data-diapo-grande] img { width: 100%; height: 100%; object-fit: cover; }
[data-diapo-grande].es-activa { opacity: 1; transform: none; }

/* Sin fijar: el bloque mide lo suyo y avanza al cruzar la pantalla */
[data-cine="diapositivas"][data-avance="vista"] { height: auto; }
/* Desliza: una tira más ancha que la pantalla corre de lado mientras se baja (sin fijar nada) */
.cine-desliza { --avance: clamp(0, (var(--v, 0) - var(--desde, 0.12)) / var(--tramo, 0.62), 1); transform: translate3d(calc(var(--avance) * (100vw - 100%)), 0, 0); will-change: transform; }

/* Perspectiva: la foto arranca cerca y se abre al cruzar la pantalla */
.cine-perspectiva { overflow: hidden; }
.cine-perspectiva > img { transform: scale(calc(1.28 - 0.28 * var(--v, 1))) translate3d(0, calc((0.5 - var(--v, 0.5)) * -6%), 0); will-change: transform; }
/* Capa con parallax: se mueve más lento que el texto */
.cine-capa { transform: translate3d(0, calc((var(--v, 0.5) - 0.5) * var(--vel, -18) * 1vh), 0); will-change: transform; }
/* Cortina: la imagen se abre desde el centro */
.cine-cortina { clip-path: inset(calc((1 - min(var(--v, 1) * 2.4, 1)) * 18%) calc((1 - min(var(--v, 1) * 2.4, 1)) * 26%) round calc((1 - min(var(--v, 1) * 2.4, 1)) * 24px)); }

/* Pista horizontal (pantallas anchas); en el celular, carrusel deslizable con el dedo */
[data-cine="horizontal"] { position: relative; }
[data-cine="horizontal"] .cine-pista-marco { position: sticky; top: 0; height: 100vh; height: 100svh; overflow: hidden; display: flex; align-items: center; }
[data-pista] { display: flex; will-change: transform; }
@media (max-width: 899px) {
  [data-cine="horizontal"] .cine-pista-marco { position: static; height: auto; overflow-x: auto; scroll-snap-type: x mandatory; -webkit-overflow-scrolling: touch; }
  [data-pista] > * { scroll-snap-align: start; }
}

/* Menos movimiento (o sin JavaScript: el poster y los textos se ven completos) */
.cine-quieto [data-cine="secuencia"] { height: auto; }
.cine-quieto .cine-escena { position: relative; height: auto; overflow: visible; }
.cine-quieto .cine-escena canvas { display: none; }
.cine-quieto .cine-escena .cine-poster { position: relative; height: 70vh; }
.cine-quieto [data-tramo], html:not(.cine-vivo):not(.cine-quieto) [data-tramo] { position: static; opacity: 1; visibility: visible; transform: none; }
.cine-quieto .cine-perspectiva > img, .cine-quieto .cine-capa { transform: none; }
.cine-quieto .cine-cortina { clip-path: none; }
.cine-quieto .cine-desliza { transform: none; }
.cine-quieto [data-cine="diapositivas"] { height: auto; }
html:not(.cine-vivo):not(.cine-quieto) [data-diapo-texto], .cine-quieto [data-diapo], .cine-quieto [data-diapo-texto] { position: static; clip-path: none; opacity: 1; visibility: visible; transform: none; }
.cine-quieto [data-diapo] img { transform: none; height: auto; aspect-ratio: 4 / 3; }
.cine-quieto [data-modo="arco"] [data-diapo] { position: static; width: auto; height: auto; transform: none; opacity: 1; }
.cine-quieto [data-diapo-grande] { display: none; }
.cine-foto-tramo { display: block; width: 100%; height: auto; aspect-ratio: 16 / 9; object-fit: cover; }