/* ============================================================
   CopasSec — Cinematic scroll (GTA VI-style)
   Hero zoom · pinned parallax scenes · depth layers · closing
   Works with Lenis + GSAP ScrollTrigger (see cinematic.js)
   ============================================================ */

/* full-bleed cinematic blocks */
/* single pinned reel holding all cinematic frames stacked */
.reel{ position:relative; height:100vh; min-height:100svh; overflow:hidden; background:#050507; }
.frame{ position:absolute; inset:0; overflow:hidden; will-change:opacity; transform:translateZ(0); }
.frame.scene, .frame.cine-close{ visibility:hidden; }   /* JS reveals via autoAlpha; avoids flash */

.cine-hero,
.scene{ height:100%; overflow:hidden; background:#050507; }

/* layers fill the frame; bg gets vertical overscan for parallax travel */
.layer{ position:absolute; inset:0; will-change:transform; }
.layer-bg{ inset:-14% 0; }            /* extra height so vertical drift never reveals edges */
.layer-bg .fill, .cine-hero .fill{ width:100%; height:100%; display:block; }

/* image-slot sizing */
image-slot.fill{ width:100%; height:100%; display:block; --r:0; }
image-slot.cutout{ display:block; }

/* moody placeholder shown beneath/behind empty slots */
.slot-bg-ph{
  position:absolute; inset:0; z-index:-1;
  background:
    radial-gradient(115% 85% at 72% 6%, color-mix(in srgb,var(--accent) 26%, #0a0a12) 0%, transparent 52%),
    radial-gradient(95% 80% at 6% 100%, color-mix(in srgb,var(--accent-2) 20%, #07070b) 0%, transparent 58%),
    linear-gradient(160deg,#13131d,#070709 72%);
}
.slot-bg-ph::after{
  content:""; position:absolute; inset:0; opacity:.18;
  background-image:
    linear-gradient(transparent 96%, rgba(255,255,255,.05) 96%),
    linear-gradient(90deg, transparent 96%, rgba(255,255,255,.05) 96%);
  background-size:54px 54px;
}
.scanlines{
  position:absolute; inset:0; pointer-events:none; z-index:4; opacity:.22; transform:translateZ(0);
  background:repeating-linear-gradient(0deg, rgba(0,0,0,.5) 0 1px, transparent 1px 3px);
}
.vignette{
  position:absolute; inset:0; pointer-events:none; z-index:5; transform:translateZ(0);
  background:
    radial-gradient(130% 100% at 50% 42%, transparent 52%, rgba(0,0,0,.55) 100%),
    linear-gradient(180deg, transparent 62%, rgba(0,0,0,.8) 100%);
}
.grain{
  position:absolute; inset:0; pointer-events:none; z-index:6; opacity:.05; transform:translateZ(0);
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}
/* mobile background pan image: full height, overflow width, GPU layer */
.mbg{ position:absolute; top:0; left:0; height:100%; width:auto; max-width:none; will-change:transform; }

/* drop affordance label (hidden once filled) */
.slot-label{
  display:none;   /* authoring drop hint — hidden in production */
  position:absolute; left:24px; bottom:22px; z-index:7; pointer-events:none;
  font-family:var(--font-mono); font-size:11px; letter-spacing:.18em; text-transform:uppercase;
  color:color-mix(in srgb,var(--accent) 85%, #fff); align-items:center; gap:8px;
}
.slot-label::before{ content:""; width:9px; height:9px; border:1.5px solid currentColor; }
.slot-label.fg{ left:auto; right:24px; }
image-slot[data-filled] ~ .slot-label{ display:none; }
/* once a slot has a real image, drop the placeholder backdrop behind it
   (otherwise it shows through a transparent PNG cut-out). */
.layer-bg:has(image-slot[data-filled]) > .slot-bg-ph,
.cutout-wrap:has(image-slot[data-filled]) > .slot-bg-ph{ display:none; }

/* legibility — soft dark shadow so copy stays readable over busy background images */
.scene-copy,
.cine-hero .h-kicker,
.cine-hero .h-sub,
.cine-close .close-copy{
  text-shadow:0 2px 20px rgba(0,0,0,.72), 0 1px 3px rgba(0,0,0,.6);
}

/* ---------------- HERO (zoom) ---------------- */
.cine-hero .layer-hero{ inset:-8% -8%; }
.cine-hero .hero-veil{
  position:absolute; inset:0; z-index:3;
  background:linear-gradient(180deg, rgba(5,5,7,.55) 0%, rgba(5,5,7,.25) 40%, rgba(5,5,7,.92) 100%);
}
.cine-hero .hero-copy{
  position:absolute; inset:0; z-index:8; display:flex; flex-direction:column;
  align-items:center; justify-content:center; text-align:center; padding:var(--pad);
}
.cine-hero .h-kicker{ font-family:var(--font-mono); font-size:13px; letter-spacing:.34em; text-transform:uppercase; color:var(--accent); margin-bottom:26px; }
.cine-hero h1{
  font-family:var(--font-display); font-weight:400; font-synthesis:none;
  font-size:clamp(64px,16vw,260px); line-height:.9; letter-spacing:.02em; text-transform:uppercase;
}
.cine-hero .h-sub{ margin-top:26px; max-width:46ch; font-size:clamp(16px,1.6vw,21px); color:var(--fg-dim); }
.scroll-cue{
  position:absolute; left:50%; bottom:30px; transform:translateX(-50%); z-index:9;
  font-family:var(--font-mono); font-size:11.5px; letter-spacing:.24em; text-transform:uppercase;
  color:color-mix(in srgb,var(--accent) 92%, #fff);
  display:flex; flex-direction:column; align-items:center; gap:12px;
  animation:cue-bob 2.4s var(--ease) infinite;
}
.scroll-cue .sc-chev{ width:27px; height:44px; border:2px solid var(--accent); border-radius:14px; position:relative; box-shadow:0 0 18px -4px var(--accent); }
.scroll-cue .sc-chev::before{ content:""; position:absolute; left:50%; top:8px; width:4px; height:9px; border-radius:2px; background:var(--accent); transform:translateX(-50%); animation:cue-dot 1.6s ease-in-out infinite; }
.scroll-cue .sc-label{ text-shadow:0 1px 10px rgba(0,0,0,.6); }
@keyframes cue-dot{ 0%{opacity:0; transform:translate(-50%,0)} 25%{opacity:1} 75%{opacity:1} 100%{opacity:0; transform:translate(-50%,16px)} }
@keyframes cue-bob{ 0%,100%{ transform:translateX(-50%) translateY(0) } 50%{ transform:translateX(-50%) translateY(8px) } }

/* ---------------- SCENES ---------------- */
.scene-copy{
  position:absolute; top:0; bottom:0; z-index:8; width:min(46vw,560px);
  display:flex; flex-direction:column; justify-content:center; gap:22px; padding-block:var(--pad);
  will-change:transform;
}
.scene[data-dir="left"]  .scene-copy{ right:var(--pad); }
.scene[data-dir="right"] .scene-copy{ left:var(--pad); }
.scene-chapter{ font-family:var(--font-mono); font-size:13px; letter-spacing:.26em; text-transform:uppercase; color:var(--accent); }
.scene-copy h2{
  font-family:var(--font-display); font-weight:400; font-synthesis:none;
  font-size:clamp(40px,6.5vw,108px); line-height:1; letter-spacing:.01em; text-transform:uppercase;
}
.scene-copy p{ font-size:clamp(15px,1.5vw,19px); color:var(--fg-dim); max-width:42ch; }
.scene-stat{ display:flex; align-items:baseline; gap:14px; }
.scene-stat .n{ font-family:var(--font-display); font-weight:400; font-synthesis:none; font-size:clamp(40px,5vw,72px); line-height:.9; letter-spacing:.01em; }
.scene-stat .l{ font-family:var(--font-mono); font-size:12px; letter-spacing:.14em; text-transform:uppercase; color:var(--fg-mute); }
.scene-cta{ margin-top:6px; }

/* foreground cut-out anchored to a side */
.cutout-wrap{ position:absolute; bottom:0; z-index:7; --cw:min(34vw,440px); --lean:10vw; width:var(--cw); height:52vh; left:50%; margin-left:calc(var(--cw) / -2); will-change:transform; }
.scene[data-dir="left"]  .cutout-wrap{ margin-left:calc(var(--cw) / -2 - var(--lean)); }
.scene[data-dir="right"] .cutout-wrap{ margin-left:calc(var(--cw) / -2 + var(--lean)); }
.cutout-wrap--wide{ --cw:min(42vw,560px); --lean:20vw; height:52vh; }
.cutout-wrap image-slot.cutout{ width:100%; height:100%; }
.cutout-wrap .slot-bg-ph{
  background:
    radial-gradient(60% 70% at 50% 40%, color-mix(in srgb,var(--accent) 22%, transparent) 0%, transparent 70%),
    linear-gradient(180deg, transparent 30%, rgba(5,5,7,.85) 92%, rgba(5,5,7,1) 100%);
}

/* ---------------- CLOSING ---------------- */
.cine-close{ height:100%; display:flex; align-items:center; overflow:hidden; }
.cine-close .layer-bg{ inset:0; }
.cine-close .close-copy{ position:relative; z-index:8; width:100%; text-align:center; padding:24px var(--pad); }
.cine-close .close-mark{
  font-family:var(--font-display); font-weight:400; font-synthesis:none;
  font-size:clamp(40px,8vw,118px); line-height:.9; letter-spacing:.02em; text-transform:uppercase;
}
.cine-close .close-sub{ margin:18px auto 26px; max-width:48ch; color:var(--fg-dim); font-size:clamp(15px,1.5vw,19px); }
.cine-close .close-cta{ display:flex; gap:14px; justify-content:center; flex-wrap:wrap; }
.cine-close .close-stats{ display:flex; gap:clamp(20px,4vw,64px); justify-content:center; flex-wrap:wrap; margin-top:32px; padding-top:26px; border-top:1px solid var(--line); }
.cine-close .close-stats .stat .num{ font-size:clamp(26px,3vw,42px); }
.cine-close .close-stats .stat .num .pls{ color:var(--accent); }
.cine-close .close-stats .stat .lbl{ margin-top:6px; }

/* ---------------- mobile / responsive ---------------- */
@media (max-width:820px){
  .scene-copy{ width:auto; left:var(--pad); right:var(--pad); top:auto; bottom:5vh; justify-content:flex-end; z-index:8; }
  .scene[data-dir="left"] .scene-copy,
  .scene[data-dir="right"] .scene-copy{ left:var(--pad); right:var(--pad); }
  /* mobile bg fits the viewport exactly so the pan reveals the full image */
  .scene .layer-bg{ inset:0; overflow:hidden; }
  /* foreground sits in the UPPER area, smaller, so the bottom text never overlaps the subject */
  .cutout-wrap{ width:auto!important; height:34vh; top:7vh; bottom:auto; left:18vw!important; right:18vw!important; margin-inline:0!important; }
  .scene-copy h2{ font-size:clamp(34px,10vw,56px); }
  .scene-copy p{ font-size:clamp(14px,3.7vw,17px); }
  /* readability scrim under the bottom text */
  .scene::after{ content:""; position:absolute; inset:0; z-index:7; pointer-events:none; background:linear-gradient(transparent 42%, rgba(5,5,7,.9) 100%); }
  .cine-hero h1{ font-size:clamp(40px,13vw,120px); }
  /* mobile GPU relief. The full-bleed overlays we kill here have to be
     re-blended by the compositor every frame of the scrubbed scroll.
     Hero veil stays — it's the readability scrim for the title. */
  .grain,
  .scenes .scanlines,
  .scene .scanlines,
  .scene .vignette,
  .cine-close .scanlines,
  .cine-close .vignette{ display:none; }
  /* Mobile: bg is static now (no .mbg pan), cut-out only fades — neither
     element animates a transform per frame, so they don't need GPU layers. */
  .frame, .layer, .scene-copy, .mbg, .cutout-wrap{ will-change:auto; }
}
@media (max-width:560px){
  .nav{ padding-inline:16px; }
  .nav-cta{ padding:11px 14px; font-size:11px; }
}

/* ---------------- reduced motion / static fallback ---------------- */
.static .reel{ height:auto; min-height:auto; }
.static .frame{ position:relative; inset:auto; visibility:visible!important; }
.static .frame + .frame{ border-top:1px solid var(--line); }
.static .cine-hero,
.static .scene,
.static .cine-close{ height:auto; min-height:auto; }
.static .layer,
.static .cutout-wrap,
.static .scene-copy{ position:relative; transform:none!important; opacity:1!important; inset:auto; }
.static .cine-hero .layer-hero,
.static .scene .layer-bg,
.static .cutout-wrap{ height:56vh; }
.static .scene{ display:grid; gap:0; }
.static .hero-copy,
.static .scene-copy,
.static .close-copy{ position:relative; padding-block:clamp(48px,8vw,90px); }
.static .scene-copy{ width:auto; left:auto; right:auto; }
.static .scanlines,.static .grain{ display:none; }