/* cinematic-seq.css — base styles for cinematic-seq.js */
.seq { position: relative; height: 560vh; background: #000; color: #fff; }
.seq .sticky { position: sticky; top: 0; height: 100vh; height: 100svh; overflow: hidden; }
.seq-canvas { position: absolute; inset: 0; width: 100%; height: 100%; display: block; transform: scale(var(--zoom, 1)); }
.seq-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. */
.seq-shade { position: absolute; inset: 0; pointer-events: none; background: radial-gradient(120% 90% at 55% 50%, transparent 55%, rgba(0,0,0,.75)); }
.seq-progress { position: absolute; right: 22px; top: 50%; transform: translateY(-50%); width: 2px; height: 120px; background: rgba(255,255,255,.12); }
.seq-progress i { position: absolute; inset: 0 0 auto; height: calc(var(--p, 0) * 100%); background: #fff; }
.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; }
.stage.on { opacity: 1; filter: none; transform: none; }
.stage.on * { pointer-events: auto; }
.stage.past { transform: translateY(-24px); }
.anchor { position: absolute; left: var(--ax, 50%); top: var(--ay, 50%); transform: translate(-50%, -50%) scale(var(--as, 1)); }
@media (max-width: 760px) { .seq { height: 480vh; } .seq-progress { right: 10px; height: 80px; } }
@media (prefers-reduced-motion: reduce) { .stage { transition: none; filter: none; } }