/* ============================================================
   DK VISUALS — DEPTH & MOTION SYSTEM
   Layered parallax · rack focus · mask reveals · velocity ·
   pinned horizontal cinematic sequence
   Driven by js/motion.js (sets per-element CSS vars each frame)
   ============================================================ */

/* ---------- RACK FOCUS (multiple planes of focus) ----------
   --f : 0 (far / out of focus)  →  1 (sharp, on the focal plane)
   set by motion.js as element passes through viewport centre   */
[data-focus]{ overflow:hidden; position:relative; }
[data-focus] img{
  --f:1;
  filter:blur(calc((1 - var(--f)) * 7px))
         saturate(calc(.72 + var(--f) * .38))
         brightness(calc(.84 + var(--f) * .16))
         contrast(calc(.96 + var(--f) * .08));
  transform:scale(calc(1.08 - var(--f) * .08)) translateZ(0);
  transition:filter .12s linear;
  will-change:filter,transform;
}
/* keep focus authoritative even on hover (overrides app.css hover scale) */
[data-focus]:hover img{ transform:scale(calc(1.08 - var(--f) * .08 + .03)) translateZ(0); }

/* softer variant for dense grids — blur + light only, no scale jump */
[data-focus-soft] img{
  --f:1;
  filter:blur(calc((1 - var(--f)) * 4px))
         saturate(calc(.74 + var(--f) * .36))
         brightness(calc(.88 + var(--f) * .12));
  transition:filter .12s linear;
  will-change:filter;
}

/* ---------- GENERIC DEPTH PARALLAX ----------
   motion.js sets --py (px) on any [data-depth] element            */
[data-depth]{ will-change:transform; }

/* ---------- VELOCITY MOTION (cinematic motion-stretch) ----------
   --vel : signed scroll velocity, smoothed, on :root            */
:root{ --vel:0; }
[data-vel]{
  transform:scaleY(calc(1 + min(0.05, max(-0.05, var(--vel) * 0.0008)) ));
  transform-origin:center;
  will-change:transform;
}

/* ============================================================
   LAYERED CHAPTER HEADER (multiple planes)
   a blurred oversized "ghost" plate sits behind the giant title;
   a sharp foreground plate sits in front — they drift apart
   ============================================================ */
.ch-layered{ position:relative; }
.ch-stage{
  position:relative;
  min-height:min(86vh,860px);
  display:flex;
  align-items:center;
  isolation:isolate;
}
/* far plane — big, blurred, slow */
.ch-ghost{
  position:absolute; z-index:0;
  width:min(56vw,720px); aspect-ratio:4/5;
  right:clamp(20px,6vw,140px); top:50%;
  transform:translateY(calc(-50% + var(--gy,0px)));
  overflow:hidden;
  opacity:.85;
  will-change:transform;
}
.ch-ghost img{
  width:100%; height:100%; object-fit:cover;
  filter:blur(3px) brightness(.6) saturate(.9);
  transform:scale(1.14);
  will-change:transform;
}
.ch-ghost::after{
  content:""; position:absolute; inset:0;
  background:linear-gradient(90deg,var(--bg) 0%,rgba(8,8,10,.2) 40%,rgba(8,8,10,.55) 100%);
}
/* mid plane — the giant title */
.ch-stage .ch-headline{ position:relative; z-index:2; pointer-events:none; max-width:min(70vw,900px); }
.ch-stage .ch-headline .ch-tag{ pointer-events:auto; }
.ch-stage .ch-title{ mix-blend-mode:normal; text-shadow:0 6px 60px rgba(0,0,0,.6); }
.ch-stage .ch-meta{ pointer-events:auto; margin-top:26px; }
/* near plane — sharp foreground card, fast */
.ch-fore{
  position:absolute; z-index:3;
  width:clamp(180px,22vw,320px); aspect-ratio:3/4;
  left:clamp(20px,42vw,640px); bottom:6%;
  overflow:hidden;
  box-shadow:0 50px 90px -30px rgba(0,0,0,.8);
  transform:translateY(var(--fy,0px));
  will-change:transform;
}
.ch-fore img{ width:100%; height:100%; object-fit:cover; transform:scale(1.08); }
.ch-fore .ch-fore-cap{
  position:absolute; left:14px; bottom:12px; z-index:2;
  font-family:var(--mono); font-size:9.5px; letter-spacing:.18em; text-transform:uppercase;
  color:var(--ink); text-shadow:0 1px 10px rgba(0,0,0,.9);
}
@media(max-width:820px){
  .ch-stage{ min-height:auto; flex-direction:column; align-items:flex-start; gap:24px; }
  .ch-ghost{ position:relative; width:100%; right:auto; top:auto; transform:none; aspect-ratio:16/10; }
  .ch-fore{ display:none; }
}

/* ============================================================
   PINNED HORIZONTAL CINEMATIC SEQUENCE  (the Paramaribo story)
   outer .pin-rail is tall; inner .pin-stage sticks; .pin-track
   translates on X driven by vertical scroll progress.
   ============================================================ */
.pin-rail{ position:relative; }
.pin-stage{
  position:sticky; top:0;
  height:100svh;
  overflow:hidden;
  display:flex; align-items:center;
}
.pin-track{
  display:flex; align-items:center;
  gap:clamp(28px,4vw,72px);
  padding:0 clamp(20px,8vw,180px);
  height:74vh;
  will-change:transform;
}
.pin-frame{
  position:relative; flex:none; height:100%;
  overflow:hidden;
  background:var(--bg-2);
  box-shadow:0 60px 120px -50px rgba(0,0,0,.9);
}
.pin-frame.p{ aspect-ratio:2/3; }
.pin-frame.l{ aspect-ratio:3/2; }
.pin-frame .pf-media{ position:absolute; inset:-10% -14%; }
.pin-frame img{
  width:100%; height:120%; object-fit:cover;
  will-change:transform;            /* intra-frame parallax via --px */
  transform:translateX(var(--px,0px)) scale(1.12);
  filter:saturate(.98);
}
.pin-frame::after{
  content:""; position:absolute; inset:0; z-index:1;
  background:linear-gradient(180deg,rgba(0,0,0,.15),transparent 30%,transparent 62%,rgba(0,0,0,.72));
}
.pin-cap{
  position:absolute; left:20px; bottom:20px; z-index:2;
  transform:translateY(12px); opacity:0; transition:.6s var(--ease);
}
.pin-frame.near .pin-cap{ opacity:1; transform:none; }
.pin-cap .t{ font-family:var(--serif); font-style:italic; font-size:clamp(20px,2vw,30px); line-height:1; }
.pin-cap .c{ font-family:var(--mono); font-size:9.5px; letter-spacing:.2em; text-transform:uppercase; color:var(--accent); margin-top:7px; }
.pin-frame .pf-no{
  position:absolute; top:16px; left:18px; z-index:2;
  font-family:var(--mono); font-size:10px; letter-spacing:.2em; color:var(--ink-2);
  text-shadow:0 1px 8px #000;
}
/* progress + intro overlay inside the pinned stage */
.pin-intro{
  position:absolute; left:clamp(20px,4vw,52px); top:clamp(80px,12vh,130px); z-index:5;
  max-width:440px; pointer-events:none; mix-blend-mode:difference;
}
.pin-intro .ch-tag{ font-family:var(--mono); font-size:11px; letter-spacing:.2em; text-transform:uppercase; color:var(--accent); margin-bottom:14px; }
.pin-intro h2{ font-family:var(--serif); font-size:clamp(40px,6vw,92px); font-weight:500; line-height:.92; text-transform:uppercase; letter-spacing:-.01em; }
.pin-intro h2 em{ font-style:italic; font-weight:300; color:var(--accent); }
.pin-intro p{ color:var(--ink-2); font-size:14.5px; margin-top:18px; max-width:36ch; }
.pin-stage .pin-prog{
  position:absolute; left:clamp(20px,4vw,52px); right:clamp(20px,4vw,52px); bottom:clamp(34px,6vh,64px); z-index:5;
  height:1px; background:var(--line);
}
.pin-stage .pin-prog span{ display:block; height:100%; width:0; background:var(--accent); }
.pin-stage .pin-count{
  position:absolute; right:clamp(20px,4vw,52px); bottom:calc(clamp(34px,6vh,64px) + 14px); z-index:5;
  font-family:var(--mono); font-size:11px; letter-spacing:.18em; color:var(--ink-2);
}
.pin-hint{
  position:absolute; left:50%; bottom:clamp(34px,6vh,64px); transform:translateX(-50%); z-index:5;
  font-family:var(--mono); font-size:10px; letter-spacing:.28em; text-transform:uppercase; color:var(--ink-3);
  display:flex; align-items:center; gap:10px;
}
.pin-hint::after{ content:""; width:40px; height:1px; background:var(--ink-3); position:relative; overflow:hidden; }

/* touch / reduced-motion fallback: plain draggable strip, no pin */
.pin-fallback .pin-stage{ position:relative; height:auto; }
.pin-fallback .pin-track{
  height:64vh; overflow-x:auto; scroll-snap-type:x proximity;
  scrollbar-width:none; -ms-overflow-style:none; transform:none!important;
}
.pin-fallback .pin-track::-webkit-scrollbar{ display:none; }
.pin-fallback .pin-rail{ height:auto!important; }
.pin-fallback .pin-frame{ scroll-snap-align:center; }
.pin-fallback .pin-frame img{ transform:scale(1.06)!important; }
.pin-fallback .pin-cap{ opacity:1; transform:none; }
.pin-fallback .pin-prog,.pin-fallback .pin-count,.pin-fallback .pin-hint{ display:none; }

/* ============================================================
   MASK / WIPE REVEALS for standout images
   --r : 0 (hidden) → 1 (fully revealed), set by motion.js
   ============================================================ */
[data-wipe]{ position:relative; overflow:hidden; }
[data-wipe] img{
  clip-path:inset(calc((1 - var(--r,0)) * 100%) 0 0 0);
  transform:scale(calc(1.12 - var(--r,0) * .12));
  will-change:clip-path,transform;
}

/* ============================================================
   HERO DEPTH LAYERS (parallax planes on mouse + scroll)
   ============================================================ */
.hero-depth{ position:absolute; inset:0; z-index:3; pointer-events:none; }
.hero-vig{
  position:absolute; inset:0; z-index:3; pointer-events:none;
  background:radial-gradient(120% 90% at 50% 38%, transparent 30%, rgba(8,8,10,.55) 100%);
}
/* floating frame number that drifts with scroll */
.hero-fno{
  position:absolute; right:clamp(20px,4vw,52px); top:clamp(110px,16vh,150px); z-index:4;
  font-family:var(--mono); font-size:11px; letter-spacing:.26em; text-transform:uppercase; color:var(--ink-3);
  text-align:right; line-height:1.7; will-change:transform;
}
.hero-fno b{ color:var(--accent); font-weight:400; }

/* parallax drift on hero title lines (set --hy by motion.js) */
.hero-title{ will-change:transform; }

/* atmospheric drifting dust/particles layer over dark sections */
.depth-noise{ position:relative; }

/* section seam — a thin breathing rule that ties chapters together */
.seam{ height:1px; background:linear-gradient(90deg,transparent,var(--line) 18%,var(--line) 82%,transparent); margin:0 clamp(20px,4vw,52px); opacity:.0; transform:scaleX(.4); transform-origin:center; transition:opacity 1.2s var(--ease),transform 1.4s var(--ease); }
.seam.in{ opacity:1; transform:scaleX(1); }

@media (prefers-reduced-motion: reduce){
  [data-focus] img,[data-focus-soft] img{ filter:none!important; transform:none!important; }
  [data-wipe] img{ clip-path:none!important; transform:none!important; }
  [data-vel]{ transform:none!important; }
  .ch-ghost img,.ch-fore img,.pin-frame img{ transform:scale(1.04)!important; }
}