/* cine.css — layout for cine.js. Page styles go in the site's own stylesheet. */
.cine-stage { position: fixed; inset: 0; width: 100%; height: 100vh; display: block; z-index: 0; pointer-events: none; transition: opacity .3s; }
.cine-scene { position: relative; z-index: 1; height: calc(var(--len, 3) * 100vh); }
.cine-pin { position: sticky; top: 0; height: 100vh; overflow: hidden; }
@supports (height: 100svh) {
  .cine-scene { height: calc(var(--len, 3) * 100svh); }
  .cine-pin { height: 100svh; }
}

/* Captions: [data-in]/[data-out] are scene-progress windows (0–1). */
.cine-live [data-in] { opacity: 0; transform: translateY(.6em); filter: blur(8px);
  transition: opacity .6s ease, transform .9s cubic-bezier(.2,.7,.1,1), filter .6s ease; }
.cine-live [data-in].is-on { opacity: 1; transform: none; filter: none; }
.cine-live [data-in][data-split] { opacity: 1; transform: none; filter: none; }
.cine-wd { display: inline-block; overflow: hidden; white-space: nowrap; vertical-align: top; padding: .04em .02em .1em; margin: -.04em -.02em -.1em; }
.cine-w { display: inline-block; }
.cine-live .cine-w { transform: translateY(108%); opacity: 0;
  transition: transform .95s cubic-bezier(.2,.75,.15,1) calc(var(--i) * 32ms), opacity .5s ease calc(var(--i) * 32ms); }
.cine-live .is-on .cine-w { transform: none; opacity: 1; }

/* Reduced motion or no WebGL: each scene becomes one poster panel with all its captions. */
.cine-static .cine-stage { display: none; }
.cine-static .cine-scene { height: auto; }
.cine-static .cine-pin { position: relative; height: auto; min-height: 100vh; display: flex; flex-direction: column; justify-content: flex-end; gap: 1.5rem; padding: 14vh 6vw 10vh;
  background: var(--poster, none) center / cover no-repeat, var(--scene-color, #000); }
.cine-static .cine-pin > * { position: static !important; transform: none !important; }
@media (prefers-reduced-motion: reduce) { .cine-w, [data-in] { transition: none !important; } }