/* cinematic-seq.css — base styles for cinematic-seq.js */
.zt { position: relative; height: 560vh; background: #000; color: #fff; }
.zt .zt-sticky { position: sticky; top: 0; height: 100vh; height: 100svh; overflow: hidden; }
.zt-canvas { position: absolute; inset: 0; width: 100%; height: 100%; display: block; transform: scale(var(--zoom, 1)); }
.zt-flash { position: absolute; inset: 0; pointer-events: none; opacity: var(--flash, 0); mix-blend-mode: screen;
  background: radial-gradient(circle at 50% 50%, rgba(255,255,255,.95), var(--flash-color, rgba(255,36,51,.85)) 30%, var(--flash-edge, rgba(80,0,0,.9)) 70%, #000); }
/* Tint: set --flash-color (core) and --flash-edge (dark rim) on the section to match the palette. */
.zt-shade { position: absolute; inset: 0; pointer-events: none; background: radial-gradient(120% 90% at 55% 50%, transparent 55%, rgba(0,0,0,.75)); }
.zt-progress { position: absolute; right: 22px; top: 50%; transform: translateY(-50%); width: 2px; height: 120px; background: rgba(255,255,255,.12); }
.zt-progress i { position: absolute; inset: 0 0 auto; height: calc(var(--p, 0) * 100%); background: #fff; }
.zt-stage { position: absolute; inset: 0; pointer-events: none; opacity: 0; filter: blur(10px); transform: translateY(24px);
  transition: opacity .7s cubic-bezier(.2,.7,.2,1), transform .9s cubic-bezier(.2,.7,.2,1), filter .7s; }
.zt-stage.on { opacity: 1; filter: none; transform: none; }
.zt-stage.on * { pointer-events: auto; }
.zt-stage.past { transform: translateY(-24px); }
.zt-anchor { position: absolute; left: var(--ax, 50%); top: var(--ay, 50%); transform: translate(-50%, -50%) scale(var(--as, 1)); }
@media (max-width: 760px) { .zt { height: 480vh; } .zt-progress { right: 10px; height: 80px; } }
@media (prefers-reduced-motion: reduce) { .zt-stage { transition: none; filter: none; } }