/* =========================================================================
   Wiehag — The Life Cycle of Wood  ·  scrollytelling prototype  (v2)
   -------------------------------------------------------------------------
   This version replaces "scroll past sections" with SCROLL-DRIVEN CINEMATIC
   SCENES: a section is pinned while a GSAP timeline, scrubbed by scroll,
   plays out. Two signature moments:
     · Descent  — a 3D camera dolly down through depth slabs of trees (Z-axis).
     · Parting  — two groves slide apart to reveal the forest video clearing.
   Plus a data payoff: CO₂ blocks that stack up while the numbers count.
   Comments flag the technique decisions for a hand-off team.
   ========================================================================= */

:root {
  --bg:#FAF7F2; --wood:#B8763E; --forest:#5C7A52; --text:#2B2620; --accent:#E26A2C;
  --maxw:1040px;
  --ease:cubic-bezier(0.22,0.61,0.36,1);
}
* { box-sizing:border-box; }
html { scroll-behavior:smooth; }   /* fallback if Lenis/JS are unavailable */
html, body {
  margin:0; padding:0; background:var(--bg); color:var(--text);
  font-family:"Inter",system-ui,-apple-system,"Segoe UI",sans-serif;
  -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility;
}
img { display:block; max-width:100%; }
h1,h2,h3 { font-weight:600; letter-spacing:-0.02em; margin:0; }
p { line-height:1.6; }

/* ---- Fixed UI : chapter nav + sound toggle ---------------------------- */
.chapter-nav {
  position:fixed; top:22px; left:22px; z-index:60;
  display:flex; flex-direction:column; gap:8px;
  padding:12px 14px; background:rgba(250,247,242,0.82); backdrop-filter:blur(8px);
  border-radius:16px; box-shadow:0 6px 24px rgba(43,38,32,0.10);
}
.chapter-nav button {
  display:flex; align-items:center; gap:9px; border:0; background:transparent;
  color:var(--text); font:inherit; font-size:13px; cursor:pointer;
  padding:4px 6px; border-radius:8px; opacity:0.55;
  transition:opacity .3s var(--ease), background .3s var(--ease);
}
.chapter-nav .dot { width:9px; height:9px; border-radius:50%; background:var(--forest); flex:none; transition:transform .3s var(--ease), background .3s var(--ease); }
.chapter-nav button:hover { opacity:.9; }
.chapter-nav button.active { opacity:1; background:rgba(92,122,82,0.12); }
.chapter-nav button.active .dot { transform:scale(1.5); background:var(--accent); }

.sound-toggle {
  position:fixed; top:22px; right:22px; z-index:60;
  display:flex; align-items:center; gap:8px; border:0; cursor:pointer;
  font:inherit; font-size:13px; color:var(--text); padding:10px 14px;
  background:rgba(250,247,242,0.82); backdrop-filter:blur(8px); border-radius:999px;
  box-shadow:0 6px 24px rgba(43,38,32,0.10); transition:background .3s var(--ease);
}
.sound-toggle:hover { background:rgba(250,247,242,0.98); }
.sound-toggle .icon { width:18px; height:18px; }
.sound-toggle .label-on { display:none; }
.sound-toggle.is-on .label-off { display:none; }
.sound-toggle.is-on .label-on { display:inline; }

/* ---- HERO ------------------------------------------------------------- */
.hero {
  position:relative; min-height:100svh; display:flex; flex-direction:column;
  align-items:center; justify-content:center; text-align:center; gap:26px; padding:6vh 5vw;
  background:linear-gradient(180deg, var(--bg) 0%, #e9efe0 100%);
}
.hero__eyebrow { text-transform:uppercase; letter-spacing:.32em; font-size:12px; color:var(--wood); }
.hero__title { font-size:clamp(2.4rem,7vw,5.2rem); line-height:1.05; max-width:14ch; }
.hero__title em { color:var(--forest); font-style:normal; }
.hero__sub { max-width:46ch; opacity:.75; font-size:1.05rem; }
.scroll-prompt { position:absolute; bottom:34px; left:50%; transform:translateX(-50%); display:flex; flex-direction:column; align-items:center; gap:8px; font-size:12px; letter-spacing:.18em; text-transform:uppercase; opacity:.6; }
.scroll-prompt .mouse { width:22px; height:36px; border:2px solid var(--text); border-radius:12px; position:relative; }
.scroll-prompt .mouse::after { content:""; position:absolute; top:6px; left:50%; width:3px; height:7px; margin-left:-1.5px; background:var(--text); border-radius:2px; animation:wheel 1.8s var(--ease) infinite; }
@keyframes wheel { 0%{opacity:0;transform:translateY(0);} 30%{opacity:1;} 100%{opacity:0;transform:translateY(12px);} }

/* =========================================================================
   SCENES  ·  a tall .scene gives scroll length; its .pin is held fixed by
   ScrollTrigger while the timeline scrubs.
   ========================================================================= */
.scene { position:relative; width:100%; }
/* Scene height = how much scroll drives the animation. The taller the scene,
   the MORE scroll maps to the animation, so each trackpad swipe nudges it a
   little = a smooth gradual scrub (Apple-style) instead of jumping a chunk.
   Each scene = a slow scrubbed reveal, then the visual HOLDS (pinned) so you
   dwell on it before moving on. */
.scene--descent { height:300vh; }   /* slow, smooth dive into the forest */
.scene--forest  { height:250vh; }   /* gradual reveal, then a short hold */
.scene--impact  { height:210vh; }   /* stacks build gradually, then a short hold */

.pin { position:relative; height:100svh; overflow:hidden; }

/* ---- Scene 1 : DESCENT (3D) ------------------------------------------- */
.sky {
  position:absolute; inset:0;
  background:linear-gradient(180deg,#dfe9d4 0%,#bcccaa 38%,#8aa479 64%,#5c7a52 100%);
}
/* perspective container = the "camera lens"; .world is the moving camera. */
.stage3d { position:absolute; inset:0; overflow:hidden; perspective:600px; perspective-origin:50% 46%; }
.world   { position:absolute; inset:0; transform-style:preserve-3d; will-change:transform; }
/* each depth slab sits at a fixed Z; perspective scales it. JS sets --z. */
.depth   { position:absolute; inset:0; transform-style:preserve-3d; transform:translateZ(var(--z,0)); }
.tree    { position:absolute; bottom:var(--b,0); left:var(--x,50%); transform:translateX(-50%) scale(var(--s,1)); transform-origin:50% 100%; will-change:transform; pointer-events:none; }

/* fog we sink through, plus a vignette for depth-of-field feel */
.fog {
  position:absolute; left:0; right:0; bottom:0; height:55%;
  background:linear-gradient(180deg, rgba(140,164,121,0) 0%, rgba(120,150,104,.55) 60%, #6f8a5f 100%);
  pointer-events:none;
}
.scene__cap { position:absolute; bottom:40px; left:0; right:0; text-align:center; font-size:12px; letter-spacing:.2em; text-transform:uppercase; color:#fff; opacity:.8; text-shadow:0 1px 8px rgba(0,0,0,.3); }

/* ---- Scene 2 : PARTING → forest video --------------------------------- */
.scene--forest .pin { background:#3f5538; }   /* deep forest behind everything */
.clearing { position:absolute; inset:0; display:flex; align-items:center; justify-content:center; z-index:1; }
.clearing__glow {
  position:absolute; top:50%; left:50%; width:70vw; height:70vw; max-width:900px; max-height:900px;
  transform:translate(-50%,-50%); border-radius:50%;
  background:radial-gradient(circle, rgba(255,249,232,.85) 0%, rgba(255,249,232,.25) 40%, rgba(255,249,232,0) 70%);
  pointer-events:none;
}
.scene--forest .stage { position:relative; z-index:2; width:min(var(--maxw),92vw); display:flex; flex-direction:column; align-items:center; gap:20px; }

/* foreground groves: two walls of close trees that meet in the middle, then
   slide apart. They overlap (>50% each) so there's no gap at the start. */
.grove { position:absolute; top:0; bottom:0; width:60%; z-index:5; pointer-events:none; will-change:transform; }
.grove--left  { left:0; }
.grove--right { right:0; }
.grove .tree { bottom:var(--b,-4%); }

/* video panel inside the clearing */
.video-wrap {
  position:relative; aspect-ratio:16/9; width:100%; border-radius:18px; overflow:hidden;
  box-shadow:0 30px 80px rgba(20,30,15,.45);
  background:linear-gradient(135deg,#6f8a5f,#2f4528);
}
.video-wrap video { width:100%; height:100%; object-fit:cover; display:block; }
.video-fallback { position:absolute; inset:0; display:none; align-items:center; justify-content:center; color:rgba(255,255,255,.92); font-size:14px; padding:20px; text-align:center; }
.video-wrap.has-error video { display:none; }
.video-wrap.has-error .video-fallback { display:flex; }

.station__head { text-align:center; }
.station__index { font-size:13px; letter-spacing:.28em; text-transform:uppercase; color:var(--accent); margin-bottom:8px; }
.scene--forest .station__title { font-size:clamp(1.8rem,4.5vw,3rem); color:#fff; text-shadow:0 2px 16px rgba(0,0,0,.4); }
.scene--forest .station__index { color:#ffd9b8; }
.station__lead { opacity:.75; margin-top:10px; }

/* floating data labels (revealed with a stagger by GSAP) */
.data-label-group { position:absolute; inset:0; pointer-events:none; z-index:3; }
.data-label {
  position:absolute; background:rgba(250,247,242,.95); color:var(--text);
  padding:12px 16px; border-radius:12px; box-shadow:0 10px 30px rgba(20,30,15,.3);
  font-size:14px; max-width:230px; border-left:3px solid var(--accent);
  opacity:0; transform:translateY(14px);
}
.data-label .num { font-weight:700; font-size:18px; color:var(--accent); display:block; }
.data-label .cap { opacity:.75; }
.data-label.pos-tl { top:4%;  left:-3%; }
.data-label.pos-tr { top:14%; right:-4%; }
.data-label.pos-bl { bottom:18%; left:-2%; }

.continue-hint { position:absolute; bottom:-44px; left:50%; transform:translateX(-50%) translateY(6px); display:inline-flex; gap:8px; align-items:center; font-size:13px; letter-spacing:.12em; text-transform:uppercase; color:#ffd9b8; opacity:0; transition:opacity .6s var(--ease), transform .6s var(--ease); }
.continue-hint.show { opacity:.9; transform:translateX(-50%) translateY(0); }
.continue-hint .arrow { animation:nudge 1.6s var(--ease) infinite; }
@keyframes nudge { 0%,100%{transform:translateY(0);} 50%{transform:translateY(4px);} }

/* =========================================================================
   SCENE 3 : CO₂ STACKS (Impact)
   ========================================================================= */
.scene--impact .pin { display:flex; flex-direction:column; align-items:center; justify-content:center; gap:28px; padding:8vh 5vw; background:linear-gradient(180deg,#eef0e6 0%,#dfe5d4 100%); }
.scene--impact .station__title { font-size:clamp(1.8rem,4.5vw,3rem); }
.scene--impact .station__lead { max-width:46ch; margin:10px auto 0; }

.stacks { display:flex; gap:clamp(28px,8vw,90px); align-items:flex-end; min-height:340px; }
.stack { display:flex; flex-direction:column; align-items:center; }
/* blocks stack upward; column grows from the bottom */
.stack__col { display:flex; flex-direction:column-reverse; align-items:center; justify-content:flex-start; min-height:1px; }
.stack__col .block { width:120px; height:46px; margin-top:-14px; /* overlap for the iso look */ opacity:0; transform:translateY(-26px) scale(.9); }
.stack__col .block:first-child { margin-top:0; }
.stack__val { font-weight:700; font-size:30px; margin-top:14px; }
.stack__col--wood ~ .stack__val { color:var(--forest); }
.stack__label { font-size:14px; letter-spacing:.06em; opacity:.7; margin-top:2px; }
.co2__note { font-size:12px; opacity:.55; max-width:50ch; text-align:center; }

/* ---- OUTRO ------------------------------------------------------------ */
.outro { min-height:100svh; display:flex; flex-direction:column; align-items:center; justify-content:center; text-align:center; gap:24px; padding:6vh 5vw; background:linear-gradient(180deg,#dfe5d4 0%,var(--bg) 100%); }
.outro__line { font-size:clamp(1.6rem,4vw,2.6rem); max-width:20ch; line-height:1.2; }
.cta { display:inline-block; padding:15px 30px; background:var(--wood); color:#fff; text-decoration:none; border-radius:999px; font-size:15px; transition:transform .3s var(--ease), background .3s var(--ease); }
.cta:hover { transform:translateY(-2px); background:#a3672f; }
.outro__foot { font-size:12px; opacity:.5; }

/* =========================================================================
   RESPONSIVE  ·  <768px  — fewer trees (set in JS), shorter scenes, labels
   stack under the video, dots-only nav.
   ========================================================================= */
@media (max-width:768px) {
  .scene--descent { height:250vh; }
  .scene--forest  { height:215vh; }
  .scene--impact  { height:185vh; }
  .grove { width:72%; }
  .chapter-nav .label { display:none; }

  .data-label-group { position:static; margin-top:14px; display:flex; flex-direction:column; gap:10px; }
  .data-label { position:static !important; max-width:none; opacity:1; transform:none; }
  .continue-hint { position:static; transform:none; margin-top:10px; }
  .stack__col .block { width:84px; height:34px; margin-top:-10px; }
}

/* =========================================================================
   REDUCED MOTION  ·  no camera fly-throughs; show end states statically.
   (JS also skips the scrubbed timelines when this matches.)
   ========================================================================= */
@media (prefers-reduced-motion:reduce) {
  html { scroll-behavior:auto; }
  *,*::before,*::after { animation-duration:.001ms !important; animation-iteration-count:1 !important; transition-duration:.001ms !important; }
  .scene--descent { display:none; }              /* skip the fly-in entirely */
  .grove { display:none; }                        /* reveal the clearing */
  .scene--forest, .scene--impact { height:auto; }
  .scene--forest .pin, .scene--impact .pin { height:auto; min-height:100svh; }
  .data-label { opacity:1; transform:none; }
  .stack__col .block { opacity:1; transform:none; }
}