/* ═══════════════════════════════════════════════════════════
   CSIwild — CINEMA
   Full-bleed, scroll-driven documentary layer.
   Layered on top of csiwild.css + home.css. Dark by default,
   with deliberate pure-black and bright bone moments for contrast.
═══════════════════════════════════════════════════════════ */

:root{
  --bone:#EDE7DA;          /* bright high-contrast moment */
  --bone-ink:#0B0F0A;
  --pitch:#000000;         /* pure black moment */
  --gold:#C8A96E;
}

/* full-bleed breakout helper */
.cine,.cine-scene,.hscroll,.cine-strip,.cine-light,.cine-pitch{
  width:100vw;margin-left:calc(50% - 50vw);
}

/* ═══ SCROLL-LINKED PRIMITIVES (driven by cinema.js) ═══════
   Each element exposes --p (0→1 progress through viewport).
   We read it in calc() so motion is tied to scroll, not time. */
[data-zoom]{overflow:hidden}
[data-zoom] > img,[data-zoom] > image-slot,[data-zoom] > .zoom-target{
  display:block;width:100%;height:100%;object-fit:cover;
  transform:scale(calc(1.18 - 0.18 * var(--p,0)));
  transition:transform 0.05s linear;will-change:transform;
}
[data-rise]{--p:0}
.kine{will-change:transform}

/* ═══ CINEMATIC FULL-SCREEN SCENE ═════════════════════════
   A 100vh stage with a parallax photo, gradient, and a caption
   that floats up. Used as section dividers / chapter openers. */
.cine-scene{
  position:relative;height:100vh;min-height:560px;overflow:hidden;background:var(--pitch);
  display:flex;align-items:flex-end;
}
.cine-scene .cs-media{position:absolute;inset:-8% 0;width:100%;height:116%;will-change:transform}
.cine-scene .cs-media image-slot,.cine-scene .cs-media img{width:100%;height:100%;object-fit:cover;display:block}
.cine-scene .cs-grad{position:absolute;inset:0;z-index:1;pointer-events:none;
  background:linear-gradient(to top,rgba(0,0,0,0.92) 0%,rgba(0,0,0,0.25) 48%,rgba(0,0,0,0.55) 100%)}
.cine-scene .cs-vignette{position:absolute;inset:0;z-index:1;pointer-events:none;
  background:radial-gradient(120% 90% at 50% 50%,transparent 55%,rgba(0,0,0,0.6) 100%)}
.cine-scene .cs-body{position:relative;z-index:3;padding:0 clamp(1.5rem,6vw,6rem) clamp(3rem,9vh,7rem);max-width:1400px;width:100%}
.cs-chapter{font-family:var(--font-sub);font-size:0.74rem;font-weight:700;letter-spacing:0.4em;text-transform:uppercase;color:var(--lime);display:flex;align-items:center;gap:0.9rem;margin-bottom:1.4rem}
.cs-chapter::before{content:'';width:46px;height:2px;background:var(--alert)}
.cs-chapter .num{color:rgba(255,255,255,0.4)}
.cs-title{font-family:var(--font-head);font-weight:800;font-size:clamp(2.8rem,7vw,7rem);line-height:0.92;text-transform:uppercase;color:#fff;letter-spacing:-0.025em;text-wrap:balance;text-shadow:0 6px 50px rgba(0,0,0,0.5)}
.cs-title .green{color:var(--lime)}.cs-title .red{color:var(--alert)}
.cs-sub{font-family:var(--font-accent);font-style:italic;font-weight:500;font-size:clamp(1.15rem,2vw,1.7rem);color:rgba(238,244,232,0.92);max-width:52ch;line-height:1.5;margin-top:1.4rem;text-shadow:0 2px 24px rgba(0,0,0,0.5)}

/* ═══ PINNED STATEMENT ════════════════════════════════════
   A tall section; inside, a sticky 100vh holds a giant line of
   type over a slow-zooming photo while you scroll past it. */
.pin-wrap{position:relative}
.pin-stage{position:sticky;top:0;height:100vh;overflow:hidden;display:flex;align-items:center;justify-content:center;background:var(--pitch)}
.pin-stage .pin-media{position:absolute;inset:0;width:100%;height:100%}
.pin-stage .pin-media image-slot,.pin-stage .pin-media img{width:100%;height:100%;object-fit:cover;display:block;opacity:0.82}
.pin-stage .pin-media::after{content:'';position:absolute;inset:0;background:radial-gradient(115% 95% at 50% 50%,rgba(0,0,0,0.22),rgba(0,0,0,0.62))}
.pin-statement{position:relative;z-index:2;max-width:1300px;padding:0 clamp(1.5rem,6vw,5rem);text-align:center}
.pin-statement .ps-eyebrow{font-family:var(--font-sub);font-size:0.74rem;font-weight:700;letter-spacing:0.36em;text-transform:uppercase;color:var(--lime);margin-bottom:1.6rem;display:block}
.pin-statement h2{font-family:var(--font-head);font-weight:800;font-size:clamp(2.6rem,6.5vw,6.5rem);line-height:0.98;text-transform:uppercase;color:#fff;letter-spacing:-0.02em;text-wrap:balance}
.pin-statement h2 .red{color:var(--alert)}.pin-statement h2 .green{color:var(--lime)}
.pin-statement h2 .word{display:inline-block;opacity:0.16;transition:opacity 0.5s ease;will-change:opacity}
.pin-statement h2 .word.lit{opacity:1}

/* ═══ DRAMATIC STAT SCENE (count-ups over a dark photo) ═══ */
.cine-stats{position:relative;overflow:hidden;background:var(--pitch);padding:clamp(4.5rem,10vh,8rem) clamp(1.5rem,5vw,4rem)}
.cine-stats .cst-bg{position:absolute;inset:0;width:100%;height:100%}
.cine-stats .cst-bg image-slot,.cine-stats .cst-bg img{width:100%;height:100%;object-fit:cover;opacity:0.22;filter:grayscale(0.35) contrast(1.05)}
.cine-stats::after{content:'';position:absolute;inset:0;background:radial-gradient(120% 100% at 50% 40%,rgba(0,0,0,0.55),rgba(0,0,0,0.92))}
.cst-inner{position:relative;z-index:2;max-width:1200px;margin:0 auto}
.cst-head{text-align:center;font-family:var(--font-sub);font-size:0.76rem;font-weight:700;letter-spacing:0.34em;text-transform:uppercase;color:var(--lime);display:flex;align-items:center;justify-content:center;gap:0.9rem;margin-bottom:clamp(2rem,5vh,3.5rem)}
.cst-head::before,.cst-head::after{content:'';width:40px;height:2px;background:var(--alert)}
.cst-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:clamp(1rem,3vw,3rem)}
.cst-cell{text-align:center;position:relative;padding:0.5rem}
.cst-num{font-family:var(--font-head);font-weight:800;font-size:clamp(3.4rem,7vw,6.5rem);line-height:0.85;color:#fff;letter-spacing:-0.03em;display:block}
.cst-num .accent{color:var(--lime)}.cst-num .red{color:var(--alert)}
.cst-label{font-family:var(--font-sub);font-size:clamp(0.72rem,1vw,0.86rem);font-weight:600;letter-spacing:0.12em;text-transform:uppercase;color:rgba(200,220,192,0.72);line-height:1.4;margin-top:1rem;display:block;text-wrap:balance}
.cst-rule{width:34px;height:3px;background:var(--alert);margin:1rem auto 0}

/* ═══ HORIZONTAL SCROLL (the dogs) ════════════════════════ */
.hscroll{position:relative;background:var(--black)}
.hscroll-pin{position:relative;min-height:100vh;overflow:hidden;display:flex;flex-direction:column;justify-content:center;padding-block:clamp(3rem,8vh,6rem)}
.hscroll-head{position:absolute;top:clamp(5.5rem,12vh,8rem);left:clamp(1.5rem,5vw,4rem);z-index:4;pointer-events:none}
.hscroll-head .hh-eyebrow{font-family:var(--font-sub);font-size:0.74rem;font-weight:700;letter-spacing:0.32em;text-transform:uppercase;color:var(--lime);display:flex;align-items:center;gap:0.8rem;margin-bottom:0.8rem}
.hscroll-head .hh-eyebrow::before{content:'';width:40px;height:2px;background:var(--alert)}
.hscroll-head h2{font-family:var(--font-head);font-weight:800;font-size:clamp(2.4rem,5vw,4.5rem);line-height:0.92;text-transform:uppercase;color:#fff;letter-spacing:-0.02em}
.hscroll-head h2 .green{color:var(--lime)}
.hscroll-track{display:flex;gap:clamp(1rem,2vw,1.75rem);padding:0 clamp(1.5rem,5vw,4rem);align-items:center;overflow-x:auto;overflow-y:hidden;scroll-snap-type:x proximity;-webkit-overflow-scrolling:touch;scrollbar-width:none}
.hscroll-track::-webkit-scrollbar{display:none}
.hcard{scroll-snap-align:center}
.hcard{position:relative;flex:0 0 auto;width:clamp(280px,30vw,440px);aspect-ratio:3/4;overflow:hidden;background:var(--forest);box-shadow:0 30px 70px rgba(0,0,0,0.5)}
.hcard:first-child{margin-left:0}
.hcard image-slot,.hcard img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;transition:transform 0.9s cubic-bezier(0.16,1,0.3,1)}
.hcard:hover image-slot,.hcard:hover img{transform:scale(1.05)}
.hcard-ov{position:absolute;inset:0;z-index:2;display:flex;flex-direction:column;justify-content:flex-end;padding:1.5rem;
  background:linear-gradient(to top,rgba(0,0,0,0.92) 0%,transparent 60%)}
.hcard-ov::before{content:'';position:absolute;top:0;left:0;width:40px;height:3px;background:var(--alert)}
.hcard-name{font-family:var(--font-head);font-weight:700;font-size:1.9rem;text-transform:uppercase;color:#fff;line-height:0.95;letter-spacing:0.02em}
.hcard-role{font-family:var(--font-sub);font-size:0.8rem;font-weight:500;letter-spacing:0.06em;color:var(--lime);margin-top:0.35rem}
.hcard-loc{font-family:var(--font-sub);font-size:0.66rem;font-weight:400;letter-spacing:0.14em;text-transform:uppercase;color:rgba(200,220,192,0.5);margin-top:0.2rem}
.hscroll-progress{position:absolute;bottom:clamp(2rem,6vh,3.5rem);left:clamp(1.5rem,5vw,4rem);right:clamp(1.5rem,5vw,4rem);height:2px;background:rgba(255,255,255,0.12);z-index:4}
.hscroll-progress > i{display:block;height:100%;width:0;background:var(--alert);box-shadow:0 0 10px rgba(204,34,0,0.6)}
.hscroll-hint{position:absolute;bottom:clamp(2.6rem,7vh,4rem);right:clamp(1.5rem,5vw,4rem);z-index:5;font-family:var(--font-sub);font-size:0.62rem;font-weight:600;letter-spacing:0.2em;text-transform:uppercase;color:rgba(200,220,192,0.5);display:flex;align-items:center;gap:0.5rem}

/* ═══ BRIGHT / PURE-BLACK CONTRAST MOMENTS ════════════════ */
.cine-light{background:var(--bone);color:var(--bone-ink);padding:clamp(5rem,11vh,9rem) clamp(1.5rem,6vw,5rem)}
.cine-light .cl-inner{max-width:1200px;margin:0 auto}
.cine-light .cl-eyebrow{font-family:var(--font-sub);font-size:0.74rem;font-weight:700;letter-spacing:0.3em;text-transform:uppercase;color:var(--alert);display:flex;align-items:center;gap:0.8rem;margin-bottom:1.5rem}
.cine-light .cl-eyebrow::before{content:'';width:40px;height:2px;background:var(--alert)}
.cine-light h2{font-family:var(--font-head);font-weight:800;font-size:clamp(2.6rem,5.5vw,5rem);line-height:0.96;text-transform:uppercase;color:var(--bone-ink);letter-spacing:-0.02em;margin-bottom:1.5rem;text-wrap:balance}
.cine-light h2 .red{color:var(--alert)}.cine-light h2 .green{color:var(--olive)}
.cine-light p{font-family:var(--font-accent);font-size:clamp(1.1rem,1.6vw,1.4rem);line-height:1.6;color:rgba(11,15,10,0.78);max-width:62ch;text-wrap:pretty}
.cine-light .cl-quote{font-family:var(--font-accent);font-style:italic;font-size:clamp(1.6rem,3.2vw,2.8rem);line-height:1.32;color:var(--bone-ink);max-width:24ch;text-wrap:balance}
.cine-light .cl-cite{font-family:var(--font-sub);font-size:0.74rem;font-weight:700;letter-spacing:0.2em;text-transform:uppercase;color:var(--alert);margin-top:1.5rem;display:block}

/* ═══ KINETIC OUTLINE STRIP (scroll-velocity reactive) ════ */
.cine-strip{overflow:hidden;white-space:nowrap;background:var(--pitch);padding:clamp(2rem,5vh,3.5rem) 0;border-top:1px solid var(--border);border-bottom:1px solid var(--border)}
.cine-strip .ks-track{display:inline-flex;align-items:center;gap:2.5rem;will-change:transform}
.cine-strip .ks-item{font-family:var(--font-head);font-weight:800;font-size:clamp(2.2rem,5vw,4.5rem);text-transform:uppercase;letter-spacing:-0.01em;display:inline-flex;align-items:center;gap:2.5rem;color:transparent;-webkit-text-stroke:1.5px rgba(186,222,158,0.5)}
.cine-strip .ks-item .solid{color:#fff;-webkit-text-stroke:0}
.cine-strip .ks-item .dot{width:13px;height:13px;background:var(--alert);border-radius:50%;-webkit-text-stroke:0}

/* ═══ REVEAL TUNING for cinema elements ═══════════════════ */
.cine-scene .cs-body > *{opacity:0;transform:translateY(40px);transition:opacity 0.9s ease,transform 1s cubic-bezier(0.16,1,0.3,1)}
.cine-scene.in-view .cs-body > *{opacity:1;transform:none}
.cine-scene.in-view .cs-body > *:nth-child(2){transition-delay:0.12s}
.cine-scene.in-view .cs-body > *:nth-child(3){transition-delay:0.24s}

@media(prefers-reduced-motion:reduce){
  [data-zoom] > img,[data-zoom] > image-slot,[data-zoom] > .zoom-target{transform:none}
  .pin-statement h2 .word{opacity:1}
  .cine-scene .cs-body > *{opacity:1;transform:none}
}

/* ═══ SCROLL-DRIVEN MAP PINS ═══════════════════════════════ */
[data-mapscroll] .map-pin{opacity:0;transform:translate(-50%,-50%) scale(0.3);
  transition:opacity 0.5s ease,transform 0.6s cubic-bezier(0.16,1,0.3,1)}
[data-mapscroll] .map-pin.revealed{opacity:1;transform:translate(-50%,-50%) scale(1)}

/* horizontal-scroll CTA card */
.hcard-cta{background:var(--ranger)!important}
.hcard-cta .hcard-ov::before{display:none}

/* ═══ ODOMETER "FLICK UP" NUMBERS (cine-stats) ════════════ */
.flick-host{display:inline-flex;align-items:flex-end;line-height:1;font-variant-numeric:tabular-nums}
.flick-col{display:inline-block;height:1em;overflow:hidden;line-height:1}
.flick-reel{display:block;transform:translateY(0);will-change:transform}
.flick-digit{display:block;height:1em;line-height:1;text-align:center}
.flick-static{display:inline-block}

/* ═══ MOBILE ══════════════════════════════════════════════ */
@media(max-width:860px){
  .cst-grid{grid-template-columns:1fr 1fr;gap:2rem 1rem}
  .pin-statement h2{font-size:clamp(2.2rem,9vw,3.4rem)}
  .hcard:first-child{margin-left:1.5rem}
  .hcard{width:72vw}
}
@media(max-width:768px){
  .cine-scene{height:86vh;min-height:460px}
  .cine-light{padding:3.5rem 1.5rem}
}