/* Scroll film: a worship clip scrubbed by scroll.
   Base rules = static fallback (no JS, reduced motion, or frames failing).
   .film--live = the pinned, scroll-driven version. */

html.lenis,html.lenis body{height:auto}
.lenis.lenis-smooth{scroll-behavior:auto !important}
.lenis.lenis-stopped{overflow:hidden}

.film{position:relative;background:#080604;color:var(--ink);isolation:isolate}
.film-pin{position:relative;overflow:hidden;padding-block:clamp(72px,10vw,140px)}
.film-media{position:absolute;inset:0;z-index:0;background:#080604 url(../frames/poster.webp) center/cover no-repeat}
.film-canvas{display:none;position:absolute;inset:0;width:100%;height:100%}
.film-shade{position:absolute;inset:0;z-index:1;pointer-events:none;
  background:
    linear-gradient(180deg,#0C0907 0%,rgba(12,9,7,0) 14%,rgba(12,9,7,0) 84%,#0C0907 100%),
    linear-gradient(90deg,rgba(8,6,4,.78) 0%,rgba(8,6,4,.34) 38%,rgba(8,6,4,.12) 50%,rgba(8,6,4,.34) 62%,rgba(8,6,4,.78) 100%)}
.film-dark{position:absolute;inset:0;z-index:2;background:#080604;opacity:0;pointer-events:none}
.film-marquee{display:none}
.film-load{display:none}

.film-sec{position:relative;z-index:3;padding:clamp(28px,5vw,56px) var(--gutter)}
.film-inner{max-width:min(40rem,100%)}
.film-inner .eyebrow{display:block}
.film-heading{font-family:var(--display);font-stretch:112%;font-weight:800;font-size:clamp(2.1rem,5.2vw,4.6rem);line-height:1.02;letter-spacing:-.01em;margin:18px 0 20px;text-wrap:balance;color:var(--ink)}
.film-heading em{font-style:normal;color:var(--gold-bright)}
.film-body{font-size:clamp(1.05rem,1.5vw,1.25rem);line-height:1.6;color:#D8C9B9;max-width:36ch;text-shadow:0 1px 18px rgba(8,6,4,.9)}
.film-note{margin-top:22px;font:500 .78rem/1.5 var(--mono);letter-spacing:.1em;text-transform:uppercase;color:#C7B6A5}
.film-cta{display:flex;flex-wrap:wrap;gap:12px;margin-top:30px}
.film-quote .film-inner{max-width:52rem}

/* ---------- live, pinned version ---------- */
.film--live{height:620vh}
.film--live .film-pin{position:sticky;top:0;height:100vh;height:100svh;padding:0}
.film--live .film-media{background:#080604;clip-path:circle(0% at 50% 50%);will-change:clip-path}
.film--live .film-canvas{display:block}
.film--live .film-sec{position:absolute;inset:0;display:flex;align-items:center;padding:0;pointer-events:none}
.film--live .film-sec a{pointer-events:auto}
.film--live .film-inner{width:100%}
.film--live .align-left .film-inner{margin-left:clamp(20px,5vw,72px);max-width:min(38vw,34rem)}
.film--live .align-right .film-inner{margin-left:auto;margin-right:clamp(20px,5vw,72px);max-width:min(38vw,34rem)}
.film--live .align-center{justify-content:center;text-align:center}
.film--live .align-center .film-inner{margin-inline:auto;max-width:min(52rem,86vw)}
.film--live .align-center .film-body{margin-inline:auto;max-width:44ch}
.film--live .film-sec:not(.is-on){visibility:hidden}

.film--live .film-marquee{display:block;position:absolute;z-index:2;left:0;bottom:5vh;white-space:nowrap;pointer-events:none;opacity:0;will-change:transform,opacity;
  font:800 clamp(5rem,12vw,13rem)/1 var(--display);font-stretch:125%;text-transform:uppercase;letter-spacing:.02em;
  color:transparent;-webkit-text-stroke:1.5px rgba(242,178,92,.55)}

.film--live .film-load{display:flex;position:absolute;z-index:4;left:50%;bottom:28px;transform:translateX(-50%);align-items:center;gap:12px;
  font:500 .72rem/1 var(--mono);letter-spacing:.14em;text-transform:uppercase;color:#A08D7B;opacity:0;transition:opacity .4s;pointer-events:none}
.film--live .film-load.on{opacity:1}
.film-load i{display:block;width:120px;height:2px;background:#2A211A;position:relative;overflow:hidden}
.film-load i b{position:absolute;inset:0;background:var(--gold-bright);transform:scaleX(0);transform-origin:left}

.film-skip{position:absolute;left:12px;top:-60px;z-index:60;background:var(--ink);color:var(--ground);padding:10px 16px;font-weight:600;text-decoration:none}
.film-skip:focus{top:12px}

/* ---------- phones: text drops to the bottom over a darker backdrop ---------- */
@media (max-width:767px){
  .film--live{height:480vh}
  .film--live .film-shade{background:
    linear-gradient(180deg,#0C0907 0%,rgba(12,9,7,0) 12%,rgba(8,6,4,.1) 40%,rgba(8,6,4,.88) 100%)}
  .film--live .film-sec{align-items:flex-end;padding-bottom:12vh}
  .film--live .align-left .film-inner,
  .film--live .align-right .film-inner{margin:0 var(--gutter);max-width:none}
  .film--live .film-heading{font-size:clamp(2rem,9vw,3rem)}
  .film--live .film-body{max-width:none}
  .film--live .film-marquee{bottom:auto;top:12vh;font-size:22vw}
}

@media (prefers-reduced-motion:reduce){
  .film-dark,.film-marquee{display:none !important}
}