/* ============================================================
   NCGA Timeline — HORIZON (horizontal travel rebuild)
   ------------------------------------------------------------
   Model: you walk SIDEWAYS across one continuous field while
   160 years pass. Left = 1860, right = 2020.
   - The sun arcs across the sky: one day = one century and a half.
   - The corn grows taller the further you travel.
   - The photographs unspool as one long film reel along the floor.
   - Parallax depth (sky / clouds / hills / far corn / grass) makes
     it a diorama you move THROUGH, not a flat page that slides.
   Everything is sized in viewport units so it is resolution-proof.
   ============================================================ */

@font-face { font-family:'DIN 2014'; src:url('../assets/fonts/DIN2014-Regular.otf')  format('opentype'); font-weight:400; font-display:swap; }
@font-face { font-family:'DIN 2014'; src:url('../assets/fonts/DIN2014-DemiBold.otf') format('opentype'); font-weight:600; font-display:swap; }
@font-face { font-family:'DIN 2014'; src:url('../assets/fonts/DIN2014-Bold.otf')     format('opentype'); font-weight:700; font-display:swap; }
@font-face { font-family:'DIN 2014'; src:url('../assets/fonts/DIN2014-ExtraBold.otf') format('opentype'); font-weight:800; font-display:swap; }

:root{
  --cream:#FFF4CB;
  --cream-deep:#F6E7A8;
  --cream-warm:#FBEAB0;
  --green:#58832E;
  --green-bright:#7CB32D;
  --green-deep:#3F6729;
  --teal:#0F4051;
  --teal-soft:#2A5A6B;
  --gold:#E7A700;
  --font:'DIN 2014', system-ui, sans-serif;

  /* vertical bands (fluid). The reel band is driven by the FRAME aspect ratio:
     frames are a locked width (gapless strip), so a true 16:9 forces the height —
     which is also why they read larger. --frameH is set by JS from the frame width;
     the band = frame + film border, capped so ultrawide screens don't run away. */
  --reelPad: clamp(8px, 1.15vh, 16px);   /* dark film border above/below each frame */
  --frameH: 16.76vw;                     /* 16:9 of the gapless frame width (JS overrides) */
  --reelH: min(calc(var(--frameH) + 2 * var(--reelPad)), 46vh); /* film reel along the floor */
  --railH: clamp(42px, 6.2vh, 66px);     /* decade scrubber above it  */
  --floor: calc(var(--reelH) + var(--railH)); /* where the corn roots */
  --gutter: clamp(20px, 5vw, 120px);

  /* set live by JS — kept here so first paint is sane */
  --grain: .12;
}

*{ margin:0; padding:0; box-sizing:border-box; }
html,body{ height:100%; }
html{ background:#0c0a07; }
body{
  font-family:var(--font);
  background:var(--cream);
  color:var(--teal);
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
  overflow-x:hidden;
}

/* Lenis */
.lenis.lenis-smooth{ scroll-behavior:auto !important; }
.lenis.lenis-stopped{ overflow:hidden; }

/* ===== film grain over everything ===== */
.grain{
  position:fixed; inset:-60%; width:220%; height:220%; z-index:240; pointer-events:none;
  opacity:var(--grain,.12); mix-blend-mode:overlay;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='200'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  background-size:200px 200px;
  animation:grain .5s steps(4) infinite; will-change:transform;
}
@keyframes grain{
  0%{transform:translate(0,0)} 25%{transform:translate(-14px,8px)} 50%{transform:translate(10px,-12px)}
  75%{transform:translate(-7px,11px)} 100%{transform:translate(0,0)}
}

/* ===== pinned stage ===== */
.timeline{ position:relative; }
.stage{
  position:relative; width:100vw; height:100vh; overflow:hidden;
  background:var(--cream);
}
/* the breathing camera (mouse parallax + idle sway live here) */
.camera{ position:absolute; inset:0; will-change:transform; }

/* ---- generic parallax band: a wide tiling layer scrolled by background-position ---- */
.band{ position:absolute; left:0; right:0; will-change:background-position; pointer-events:none; }

/* ---- SKY ---- */
.sky{ position:absolute; inset:0; z-index:0;
  background:
    radial-gradient(140% 120% at var(--sun-x,30%) var(--sun-y,68%),
        rgba(255,247,214,.0) 0%, rgba(255,247,214,.0) 40%, transparent 70%),
    linear-gradient(180deg,
        var(--sky-top,#FBF3D0) 0%,
        var(--sky-mid,#FFF4CB) 50%,
        var(--sky-low,#ECD89A) 100%);
}
/* the travelling sun */
.sun{ position:absolute; z-index:1; pointer-events:none;
  left:var(--sun-x,30%); top:var(--sun-y,68%); transform:translate(-50%,-50%);
  width:34vmin; height:34vmin; border-radius:50%; mix-blend-mode:screen;
  background:radial-gradient(circle,
     rgba(255,238,170,var(--sun-core,.85)) 0%,
     rgba(255,210,90,var(--sun-mid,.45)) 30%,
     rgba(231,167,0,.12) 56%, transparent 70%);
  filter:blur(2px);
}
.rays{ position:absolute; z-index:1; pointer-events:none; mix-blend-mode:screen;
  left:var(--sun-x,30%); top:var(--sun-y,68%); width:160vmin; height:160vmin;
  transform:translate(-50%,-50%); opacity:var(--rays,.3);
  background:repeating-conic-gradient(from 0deg at 50% 50%,
     rgba(255,235,150,0) 0deg, rgba(255,235,150,.16) 2.5deg, rgba(255,235,150,0) 7deg);
  -webkit-mask:radial-gradient(circle, #000 0%, transparent 58%);
          mask:radial-gradient(circle, #000 0%, transparent 58%);
  animation:rayspin 90s linear infinite;
}
@keyframes rayspin{ to{ transform:translate(-50%,-50%) rotate(360deg) } }

/* ---- CLOUDS (far, slow) ---- */
.clouds{ top:0; height:62vh; z-index:2; opacity:.7;
  background-repeat:repeat-x; background-size:auto 100%;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='1100' height='400'%3E%3Cg fill='%23ffffff' fill-opacity='0.55'%3E%3Cellipse cx='180' cy='150' rx='150' ry='42'/%3E%3Cellipse cx='300' cy='130' rx='110' ry='38'/%3E%3Cellipse cx='760' cy='90' rx='170' ry='40'/%3E%3Cellipse cx='900' cy='110' rx='120' ry='34'/%3E%3C/g%3E%3C/svg%3E");
}
/* ---- HILLS (mid) ---- */
.hills{ bottom:var(--floor); height:34vh; z-index:3; opacity:.9;
  background-repeat:repeat-x; background-position-y:bottom; background-size:auto 100%;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='1600' height='340' preserveAspectRatio='none'%3E%3Cpath d='M0 340 L0 200 C 220 120 360 250 560 190 C 760 130 940 250 1180 180 C 1360 130 1500 210 1600 180 L1600 340 Z' fill='%23E7D391'/%3E%3C/svg%3E");
}
/* ---- BACKGROUND CORN ROWS (individually generated stalks, faint, parallax) ---- */
.cornrow{ position:absolute; left:0; bottom:var(--floor); height:30vh; z-index:4;
  will-change:transform; pointer-events:none; }
.cornrow.mid{ z-index:4; }
.fstalk{ position:absolute; bottom:0; transform-origin:bottom center; }
.fstalk svg{ display:block; }

/* the warm ground band + horizon line */
.ground{ position:absolute; left:0; right:0; bottom:var(--floor); height:42vh; z-index:5; pointer-events:none;
  background:linear-gradient(180deg, transparent 0%, rgba(231,211,145,.0) 40%, rgba(214,189,120,.5) 100%); }
.horizon{ position:absolute; left:0; right:0; bottom:var(--floor); height:2px; z-index:6; pointer-events:none;
  background:linear-gradient(90deg, transparent, rgba(15,64,81,.16) 12%, rgba(15,64,81,.16) 88%, transparent); }

/* ===================================================================
   CONTENT TRACK — one panel per chapter (intro · 14 decades · outro),
   each 100vw wide, translated horizontally by JS.
   =================================================================== */
.track{ position:absolute; top:0; bottom:0; left:0; z-index:8; will-change:transform; }
.panel{ position:absolute; top:0; bottom:0; width:100vw; }

/* faint giant year echo (depth watermark).
   Sized by min(vw, vh): the vw term keeps a 4-digit year narrower than its own
   100vw panel (so it never bleeds into the neighbouring slide's year), while the
   vh term lets it scale on tall/large displays. No hard cap -> scales past 1400px. */
.echo{ position:absolute; left:50%; top:46%; transform:translate(-50%,-50%); z-index:1;
  font-weight:800; font-size:min(40vw, 52vh); line-height:.8; color:var(--green); opacity:.06;
  letter-spacing:-.03em; font-variant-numeric:tabular-nums; white-space:nowrap; pointer-events:none; }

/* the readable chapter year (the milepost you pass) */
.milepost{ position:absolute; left:var(--gutter); top:50%; transform:translateY(-50%); z-index:3; pointer-events:none; }
.milepost .tag{ display:block; font-weight:700; letter-spacing:.34em; text-transform:uppercase;
  font-size:clamp(11px,1vw,18px); color:var(--teal); opacity:.6; margin-bottom:.4em; }
.milepost .yr{ display:block; font-weight:800; font-size:clamp(72px, min(15vw,34vh), 320px); line-height:.84;
  letter-spacing:-.02em; color:var(--green); font-variant-numeric:tabular-nums; }
.milepost .era{ display:block; margin-top:.45em; font-weight:600; font-size:clamp(13px,1.5vw,30px);
  color:var(--teal); max-width:16ch; line-height:1.12; }

/* hero corn — roots on the floor, centred a touch right of the year */
.cornslot{ position:absolute; left:54%; bottom:var(--floor); transform:translateX(-50%);
  transform-origin:bottom center; z-index:2; display:none; will-change:transform,opacity; }
.cornslot.live{ display:block; }
/* a cheap static ground shadow (the SVG itself carries no per-frame drop-shadow) */
.cornshadow{ position:absolute; left:50%; bottom:-2.4vh; width:16vh; height:4.4vh; transform:translateX(-50%);
  background:radial-gradient(50% 100% at 50% 50%, rgba(15,64,81,.26), transparent 72%); filter:blur(3px); z-index:-1; }
.cornsway{ transform-origin:bottom center; display:block; will-change:transform; }
.cornslot svg{ display:block; }
@keyframes sway{ 0%{transform:rotate(-1.3deg)} 100%{transform:rotate(1.3deg)} }
@keyframes sway-soft{ 0%{transform:rotate(-.7deg)} 100%{transform:rotate(.7deg)} }

/* ---- INTRO panel ---- */
.intro{ display:grid; place-items:center; text-align:center; padding:0 8vw; }
.intro .kick{ font-weight:700; letter-spacing:.42em; text-transform:uppercase;
  font-size:clamp(11px,1.05vw,16px); color:var(--green); margin-bottom:clamp(18px,3vh,34px); }
.intro h1{ font-weight:800; line-height:.86; letter-spacing:-.015em; color:var(--green);
  font-size:clamp(40px, min(8.6vw,15vh), 190px); }
.intro h1 .accent{ color:var(--teal); display:block; }
.intro .sub{ margin-top:clamp(18px,3vh,32px); font-weight:600; color:var(--teal);
  font-size:clamp(15px,1.8vw,30px); letter-spacing:.02em; }
.intro .seed{ margin-top:clamp(26px,4vh,52px); }
.intro .go{ margin-top:clamp(22px,3.4vh,40px); display:inline-flex; align-items:center; gap:12px;
  font-weight:700; letter-spacing:.24em; text-transform:uppercase; font-size:12px; color:var(--green); }
.intro .go svg{ animation:nudge 1.6s ease-in-out infinite; }
@keyframes nudge{ 0%,100%{ transform:translateX(0) } 50%{ transform:translateX(8px) } }

/* ---- OUTRO panel ---- */
.outro{ display:grid; place-items:center; text-align:center; padding:0 8vw; }
.outro .mult{ font-weight:800; font-size:clamp(88px, min(20vw,40vh), 460px); line-height:.82; color:var(--green); letter-spacing:-.03em; }
.outro .lead{ margin-top:.2em; font-weight:800; font-size:clamp(22px,3.4vw,62px); line-height:1.05; max-width:22ch; color:var(--teal); }
.outro .lead strong{ color:var(--green); }
.outro .note{ margin-top:1em; font-weight:600; font-size:clamp(14px,1.7vw,30px); max-width:30ch; color:var(--teal); }
.outro .src{ margin-top:1.6em; font-weight:600; font-size:clamp(11px,.9vw,16px); color:rgba(15,64,81,.55); max-width:60ch; }

/* ===================================================================
   FOREGROUND life
   =================================================================== */
/* drifting pollen / motes */
.motes{ position:absolute; left:0; right:0; top:6vh; bottom:var(--floor); z-index:16; pointer-events:none; overflow:hidden; }
.motes span{ position:absolute; bottom:0; border-radius:50%; opacity:0;
  background:radial-gradient(circle, rgba(255,228,130,.95), rgba(124,179,45,.32) 60%, transparent 72%);
  will-change:transform,opacity; animation:rise var(--dur,16s) linear var(--delay,0s) infinite; }
@keyframes rise{
  0%{ transform:translate(0,0) scale(.5); opacity:0 }
  12%{ opacity:var(--peak,.85) }
  85%{ opacity:calc(var(--peak,.85) * .4) }
  100%{ transform:translate(var(--dx,30px), var(--travel,-60vh)) scale(1.06); opacity:0 }
}

/* a flock that drifts across now and then */
.flock{ position:absolute; top:14vh; left:0; z-index:15; pointer-events:none; opacity:.0;
  animation:flyover 26s linear infinite; }
.flock svg{ display:block; }
.flock .b{ animation:flap 1.1s ease-in-out infinite; transform-origin:center; }
.flock .b:nth-child(2){ animation-delay:.18s } .flock .b:nth-child(3){ animation-delay:.36s }
.flock .b:nth-child(4){ animation-delay:.1s } .flock .b:nth-child(5){ animation-delay:.28s }
@keyframes flyover{
  0%{ transform:translate(-12vw, 0); opacity:0 }
  8%{ opacity:.5 } 70%{ opacity:.5 }
  100%{ transform:translate(112vw, -7vh); opacity:0 }
}
@keyframes flap{ 0%,100%{ transform:scaleY(1) } 50%{ transform:scaleY(.55) } }

/* ===================================================================
   HUD — fixed in the viewport (does not travel)
   =================================================================== */
.hud{ position:absolute; inset:0; z-index:30; pointer-events:none; }

/* top-left brand line */
.brand{ position:absolute; left:var(--gutter); top:clamp(16px,3vh,30px);
  font-weight:700; letter-spacing:.26em; text-transform:uppercase; font-size:clamp(10px,.92vw,16px);
  color:var(--teal); opacity:.62; }
.brand b{ color:var(--green); font-weight:800; }

/* the live stat read-outs (right, vertically centred) */
.stats{ position:absolute; right:var(--gutter); top:0; bottom:var(--floor);
  display:flex; flex-direction:column; justify-content:center; align-items:flex-end; text-align:right;
  gap:clamp(12px,2.2vh,26px); color:var(--teal); transition:opacity .4s; }
.stats .grp{ display:flex; flex-direction:column; align-items:flex-end; }
.stats .value{ font-weight:800; font-size:clamp(22px,2.6vw,58px); line-height:1; font-variant-numeric:tabular-nums; }
.stats .desc{ font-weight:600; font-size:clamp(12px,1.25vw,24px); line-height:1.05; opacity:.85; margin-top:.2em; }
.stats .label{ font-weight:700; font-size:clamp(11px,1.15vw,22px); text-transform:uppercase; letter-spacing:.06em; }
.stats .big{ font-weight:800; font-size:clamp(56px, min(8.2vw,22vh), 200px); line-height:.92; color:var(--green);
  letter-spacing:-.02em; font-variant-numeric:tabular-nums; }
.stats .rule{ height:2px; width:clamp(120px,14vw,240px); background:var(--teal); opacity:.7; margin:.15em 0; }

/* ===================================================================
   FILM REEL — the photographs, one long strip along the floor
   =================================================================== */
.reel-wrap{ position:absolute; left:0; right:0; bottom:0; height:var(--reelH); z-index:20; overflow:hidden;
  background:#0c0a07; box-shadow:0 -2px 0 rgba(15,64,81,.25), 0 -16px 30px rgba(12,10,7,.25); }
.reel{ position:absolute; top:0; bottom:0; left:0; will-change:transform; }
/* film border top & bottom -> frame height == --frameH == 16:9 of its locked width */
.frame{ position:absolute; top:var(--reelPad); bottom:var(--reelPad);
  overflow:hidden; background:#1a160c; border:1px solid rgba(12,10,7,.6); }
.frame .img{ position:absolute; inset:-4%; background-size:cover; background-position:center;
  will-change:transform; }
/* sprocket holes top & bottom */
.reel-wrap::before, .reel-wrap::after{ content:""; position:absolute; left:0; right:0; height:clamp(7px,1.2vh,12px);
  z-index:3; pointer-events:none;
  background:repeating-linear-gradient(90deg, transparent 0 9px, rgba(255,244,200,.0) 9px 11px,
     #14110b 11px 23px, rgba(255,244,200,.0) 23px 25px); }
/* render the holes as actual punched rectangles */
.reel-wrap .perf{ position:absolute; left:0; right:0; height:clamp(8px,1.3vh,13px); z-index:4; pointer-events:none;
  background-image:radial-gradient(circle at center, #000 0 42%, transparent 46%);
  background-size:clamp(18px,2vw,26px) 100%; background-repeat:repeat-x; opacity:.85; }
.reel-wrap .perf.top{ top:0 } .reel-wrap .perf.bot{ bottom:0 }

/* ===================================================================
   DECADE SCRUBBER RAIL — horizontal, above the reel
   =================================================================== */
.rail{ position:absolute; left:0; right:0; bottom:var(--reelH); height:var(--railH); z-index:22;
  display:flex; align-items:center; padding:0 var(--gutter);
  background:linear-gradient(180deg, rgba(255,244,203,0), rgba(255,244,203,.92) 60%); }
.rail .line{ position:absolute; left:var(--gutter); right:var(--gutter); top:50%; height:2px;
  transform:translateY(-50%); background:rgba(15,64,81,.16); }
.rail .fill{ position:absolute; left:var(--gutter); top:50%; height:2px; width:0;
  transform:translateY(-50%); transform-origin:left;
  background:linear-gradient(90deg,var(--green),var(--green-bright));
  box-shadow:0 0 8px rgba(124,179,45,.6); }
.rail .ticks{ position:relative; flex:1; height:100%; }
.rail .tick{ position:absolute; top:50%; transform:translate(-50%,-50%);
  display:flex; flex-direction:column; align-items:center; gap:6px; cursor:pointer; pointer-events:auto; }
.rail .tick .dot{ width:8px; height:8px; border-radius:50%; background:rgba(15,64,81,.28);
  transition:transform .35s, background .35s, box-shadow .35s; }
.rail .tick .lbl{ position:absolute; top:calc(50% + 10px); font-weight:700; font-size:clamp(9px,.78vw,15px);
  letter-spacing:.04em; color:rgba(15,64,81,.4); transition:color .35s, transform .35s; white-space:nowrap; }
.rail .tick:hover .dot{ transform:scale(1.5); background:var(--green); }
.rail .tick.on .dot{ background:var(--green-bright); transform:scale(1.7);
  box-shadow:0 0 0 4px rgba(124,179,45,.18), 0 0 12px rgba(124,179,45,.7); }
.rail .tick.on .lbl{ color:var(--green); transform:scale(1.12); }
.rail .tick.near .lbl{ color:rgba(15,64,81,.7); }

/* a moving "you are here" marker that glides along the rail */
.marker{ position:absolute; top:50%; transform:translate(-50%,-50%); z-index:23;
  width:clamp(12px,1.1vw,16px); height:clamp(12px,1.1vw,16px); border-radius:50%;
  background:var(--green-bright); box-shadow:0 0 0 4px var(--cream), 0 0 14px rgba(124,179,45,.8);
  pointer-events:none; }

/* ===== overlays ===== */
.bloom{ position:absolute; inset:0; z-index:34; pointer-events:none; mix-blend-mode:screen; opacity:0;
  background:radial-gradient(60% 60% at var(--sun-x,50%) 40%, rgba(255,244,200,.9), rgba(255,224,120,.25) 45%, transparent 70%); }
.vignette{ position:absolute; inset:0; z-index:35; pointer-events:none;
  background:radial-gradient(125% 100% at 50% 44%, transparent 56%, rgba(15,40,30,.16) 92%, rgba(8,20,15,.3) 100%); }

/* scroll hint */
.scroll-hint{ position:absolute; left:50%; bottom:calc(var(--floor) + clamp(18px,4vh,40px));
  transform:translateX(-50%); z-index:36; display:flex; align-items:center; gap:10px;
  color:var(--green); font-weight:700; letter-spacing:.24em; text-transform:uppercase; font-size:clamp(10px,.9vw,15px);
  opacity:0; transition:opacity .6s; pointer-events:none; }
.scroll-hint svg{ animation:nudge 1.6s ease-in-out infinite; }

@media (prefers-reduced-motion: reduce){
  .grain,.rays,.cornsway,.motes span,.flock,.clouds,.scroll-hint svg,.intro .go svg{ animation:none !important; }
}

/* ===================================================================
   LOW-POWER / MOBILE  (class set by JS on <html>)
   Strip the effects that cost the most on phone GPUs and read the least
   on a small screen: full-viewport mix-blend layers (grain / bloom), the
   160vmin spinning ray cone, and the 58 always-promoted reel-frame layers.
   The travel, corn, count-ups, sky grade and film reel all stay intact.
   =================================================================== */
.low-power .grain,            /* full-screen mix-blend-mode:overlay + infinite jitter */
.low-power .rays,             /* 160vmin masked conic-gradient spinning forever */
.low-power .bloom{ display:none !important; }   /* full-screen mix-blend-mode:screen */

/* drop the permanent compositor layers we no longer animate on mobile */
.low-power .camera,
.low-power .frame .img{ will-change:auto; }
.low-power .sun{ filter:none; }                 /* skip the blur() pass on the glow */