/* cine.css — structure for cine.js. Copy into site/ unchanged; style the look in style.css. */
:root {
  --cine-ease: cubic-bezier(.16, 1, .3, 1);
  --cine-tshadow: 0 1px 2px rgb(8 7 6 / .85), 0 3px 12px rgb(8 7 6 / .6), 0 10px 40px rgb(8 7 6 / .5);
  --cine-shade: 10 9 8; /* RGB triplet */
}

/* ---- hero ---- */
.cine { position: relative; height: calc(var(--cine-span, 5) * 100svh); }
.cine-stage { position: sticky; top: 0; height: 100svh; overflow: hidden; isolation: isolate; }
.cine-poster, .cine-stage > video {
  position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: 0;
}
.cine-stage > video { opacity: 0; transition: opacity .5s ease; }
.cine.is-playing .cine-stage > video { opacity: 1; }

/* Base shade so no frame is ever raw behind text; deepen it per site with --cine-p. */
.cine-shade {
  position: absolute; inset: 0; z-index: 1; pointer-events: none;
  background: radial-gradient(ellipse 120% 90% at 50% 45%, transparent 35%, rgb(var(--cine-shade) / .55) 100%);
}
.cine-layer { position: absolute; z-index: 2; pointer-events: none; will-change: transform; }

.cine-band {
  position: absolute; z-index: 3;
  left: clamp(20px, 6vw, 96px); bottom: clamp(40px, 10svh, 112px);
  max-width: min(88vw, 34ch);
  opacity: var(--o, 0);
  transform: translate3d(0, var(--ty, 0px), 0);
  will-change: opacity, transform;
  text-shadow: var(--cine-tshadow);
}
.cine-band :is(a, button) { text-shadow: none; }
/* Local shade that rides the band's own fade: dims the picture only while this caption is on. */
.cine-band::before {
  content: ""; position: absolute; inset: -40% -18%; z-index: -1; pointer-events: none;
  background: radial-gradient(closest-side, rgb(var(--cine-shade) / var(--band-shade, .55)), transparent);
}
.cine-band[data-hidden] { pointer-events: none; }
[data-move] { will-change: transform, opacity; transform-origin: 50% 50%; }

/* Loading ring (fills with --cine-load) */
.cine-ring {
  position: absolute; z-index: 4; right: 24px; bottom: 24px; width: 28px; height: 28px; border-radius: 50%;
  background: conic-gradient(currentColor calc(var(--cine-load, 0) * 360deg), rgb(255 255 255 / .18) 0);
  -webkit-mask: radial-gradient(farthest-side, transparent 78%, #000 80%);
          mask: radial-gradient(farthest-side, transparent 78%, #000 80%);
  opacity: 0; transition: opacity .3s;
}
.cine.is-loading .cine-ring { opacity: .9; }

/* ---- static hero: reduced motion, failed media, save-data, phones without a phone film ---- */
.cine.is-static { height: auto; }
.cine.is-static .cine-stage {
  position: relative; height: auto; min-height: 100svh; box-sizing: border-box;
  display: flex; flex-direction: column; justify-content: flex-end; gap: clamp(20px, 4svh, 40px);
  padding: clamp(96px, 16svh, 160px) clamp(20px, 6vw, 96px) clamp(40px, 8svh, 96px);
}
.cine.is-static .cine-stage > video, .cine.is-static .cine-ring, .cine.is-static [data-static-hide] { display: none; }
.cine.is-static .cine-band { position: relative; inset: auto; opacity: 1; transform: none; }
.cine.is-static [data-move] { transform: none !important; opacity: 1 !important; }
.cine:not(.is-static) [data-static-only] { display: none; }
html:not(.cine-js) .cine { height: auto; }
html:not(.cine-js) .cine-stage { position: relative; min-height: 100svh; height: auto; }
html:not(.cine-js) .cine-band { position: relative; opacity: 1; }

/* ---- reveals ---- */
[data-reveal] > * {
  opacity: 0; transform: translate3d(0, 24px, 0);
  transition: opacity .9s var(--cine-ease), transform .9s var(--cine-ease);
  transition-delay: calc(var(--i, 0) * 90ms);
}
[data-reveal].is-in > * { opacity: 1; transform: none; }
[data-reveal].is-done > * { transition-delay: 0s; }
html:not(.cine-js) [data-reveal] > * { opacity: 1; transform: none; }

[data-magnetic] { transition: transform .4s var(--cine-ease); }

@media (prefers-reduced-motion: reduce) {
  [data-reveal] > *, [data-magnetic] { transition: none !important; opacity: 1; transform: none !important; }
  .cine-stage > video { transition: none; }
}