/* Cinematic engine v1 — layout and motion layer. Theme tokens come from the site's own CSS. */

.cine {
  --cine-length: 320vh;         /* scroll distance for a scrub film; override per section */
  --cine-scrim: linear-gradient(180deg, rgb(0 0 0 / 0.55) 0%, rgb(0 0 0 / 0.10) 38%, rgb(0 0 0 / 0.30) 62%, rgb(0 0 0 / 0.72) 100%);
  --cine-p: 0;
  position: relative;
  color: var(--cine-ink, #fff);
  background: var(--cine-bg, #05070b);
}

/* Scrub films get a tall track; the stage sticks while the film plays. */
.cine[data-cine="scrub"].cine--live { height: var(--cine-length); }
.cine[data-cine="loop"] { min-height: 100svh; }

.cine__stage {
  position: relative;
  height: 100svh;
  overflow: hidden;
  isolation: isolate;
}
.cine--live[data-cine="scrub"] .cine__stage { position: sticky; top: 0; }

.cine__canvas,
.cine__video,
.cine__poster {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  z-index: -2;
}
.cine__poster { z-index: -3; }
.cine__scrim { position: absolute; inset: 0; z-index: -1; background: var(--cine-scrim); pointer-events: none; }

/* Copy sits in a safe area away from the sticky header and the controls. */
.cine__copy {
  position: absolute;
  inset: auto clamp(1rem, 5vw, 4.5rem) clamp(5.5rem, 12vh, 8rem);
  max-width: min(46rem, 100% - 2rem);
}

/* Beats: lines of copy tied to a progress range. All stay in the DOM so
   screen readers and search engines get the full text in order. */
.cine__beat {
  margin: 0;
  opacity: 0;
  transform: translateY(1.25rem);
  transition: opacity 600ms cubic-bezier(.2,.7,.2,1), transform 600ms cubic-bezier(.2,.7,.2,1);
}
.cine--live .cine__beats { display: grid; }
.cine--live .cine__beats > .cine__beat { grid-area: 1 / 1; }
.cine__beat.is-on { opacity: 1; transform: none; }

/* Thin progress rail so visitors know the film has an end. */
.cine__rail {
  position: absolute;
  left: clamp(1rem, 5vw, 4.5rem);
  right: clamp(1rem, 5vw, 4.5rem);
  bottom: 2.25rem;
  height: 2px;
  background: rgb(255 255 255 / 0.22);
}
.cine__rail::after {
  content: "";
  position: absolute;
  inset: 0;
  transform-origin: left center;
  transform: scaleX(var(--cine-p));
  background: var(--cine-accent, #fff);
}
.cine--still .cine__rail { display: none; }

/* Skip link and loop toggle: real buttons/links, 44px targets, visible focus. */
.cine__skip,
.cine__toggle {
  position: absolute;
  bottom: 3.25rem;
  min-height: 44px;
  min-width: 44px;
  padding: 0.6rem 1rem;
  border: 1px solid rgb(255 255 255 / 0.55);
  border-radius: 999px;
  background: rgb(0 0 0 / 0.45);
  color: #fff;
  font: inherit;
  font-size: 0.9375rem;
  text-decoration: none;
  cursor: pointer;
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
}
.cine__skip { right: clamp(1rem, 5vw, 4.5rem); }
.cine__toggle { left: clamp(1rem, 5vw, 4.5rem); }
.cine__skip:focus-visible,
.cine__toggle:focus-visible { outline: 3px solid var(--cine-focus, #ffd166); outline-offset: 3px; }
.cine--still .cine__skip { display: none; }

/* Still mode: poster only, beats stacked as normal copy. */
/* The still frame is the poster when one exists; otherwise the canvas holds
   one frame chosen by data-cine-still-at. Nothing moves either way. */
.cine--still .cine__video { display: none; }
.cine--still:has(.cine__poster) .cine__canvas { display: none; }
.cine--still .cine__copy { position: relative; inset: auto; padding: 22vh clamp(1rem, 5vw, 4.5rem) 4rem; }
.cine--still .cine__stage { height: auto; min-height: 100svh; }
/* Stacked copy covers more of the frame, so the still gets a heavier side scrim. */
.cine--still .cine__scrim { background: linear-gradient(90deg, rgb(0 0 0 / 0.68) 0%, rgb(0 0 0 / 0.45) 55%, rgb(0 0 0 / 0.18) 100%); }
.cine--still .cine__beat { opacity: 1; transform: none; margin-top: 1rem; }

@media (prefers-reduced-motion: reduce) {
  .cine__beat { transition: none; }
}