/* ============================================================
   NCGA Timeline — HIGH-IMPACT POLISH (Version B)
   ------------------------------------------------------------
   Same engine as the original build (Lenis + ScrollTrigger pin,
   SCRUBBED to scroll) and the same faithful 1366x768 XD stage —
   but every cheap tell is surgically fixed: real bottom-up corn
   growth, depth & mouse parallax, a per-era color grade, a
   full-bleed atmosphere, performing numbers, Ken-Burns photos.
   ============================================================ */

@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;
  --green:#58832E;
  --green-bright:#7CB32D;
  --teal:#0F4051;
  --font:'DIN 2014', system-ui, sans-serif;
  /* era-graded atmosphere (written by grade() in JS) */
  --sky-top:#fbf3d0; --sky-mid:#FFF4CB; --sky-low:#ECD89A;
  --sun-core:0.42; --sun-mid:0.12; --grain:0.16;
}

*{ margin:0; padding:0; box-sizing:border-box; }

/* Lenis */
html.lenis,html.lenis body{ height:auto; }
.lenis.lenis-smooth{ scroll-behavior:auto !important; }
.lenis.lenis-smooth [data-lenis-prevent]{ overscroll-behavior:contain; }
.lenis.lenis-stopped{ overflow:hidden; }

body{
  font-family:var(--font);
  background:var(--cream);
  color:var(--teal);
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
  overflow-x:hidden;
}

/* film grain — opacity is era-graded (heavier in 1860, cleaner by 2020) */
.grain{
  position:fixed; inset:-60%; width:220%; height:220%; z-index:200; pointer-events:none;
  opacity:var(--grain,.16); mix-blend-mode:multiply;
  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='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  background-size:170px 170px;
  animation:grain .46s steps(4) infinite, grain-flicker 7.5s ease-in-out infinite;
  will-change:transform,opacity;
}
@keyframes grain{
  0%{transform:translate(0,0)} 20%{transform:translate(-13px,9px)} 40%{transform:translate(9px,-15px)}
  60%{transform:translate(-9px,7px)} 80%{transform:translate(12px,11px)} 100%{transform:translate(0,0)}
}
@keyframes grain-flicker{
  0%,100%{ filter:none } 28%{ filter:opacity(.7) } 52%{ filter:opacity(1.18) } 74%{ filter:opacity(.82) } 90%{ filter:opacity(1.08) }
}
/* cinematic edge darkening across every section (sits just under the grain) */
body::after{
  content:""; position:fixed; inset:0; z-index:199; pointer-events:none;
  background:radial-gradient(125% 115% at 50% 47%, transparent 56%, rgba(15,64,81,.20) 100%);
}

/* ---------------- INTRO ---------------- */
.hero{
  position:relative; height:100vh;
  display:grid; place-items:center;
  background:radial-gradient(140% 120% at 50% 18%, var(--cream) 40%, var(--cream-deep) 130%);
  overflow:hidden;
}
.hero-inner{ text-align:center; padding:0 6vw; position:relative; z-index:2; }
.kicker{
  font-weight:700; letter-spacing:.34em; text-transform:uppercase;
  font-size:clamp(11px,1.05vw,14px); color:var(--green);
  margin-bottom:clamp(20px,3.4vh,38px);
}
.hero-title{ font-weight:800; line-height:.9; letter-spacing:-.012em; color:var(--green); }
.hero-title .line{ display:block; overflow:hidden; padding:0 .04em 0.06em; }
.hero-title .line-in{ display:block; font-size:clamp(46px,8.6vw,140px); }
.hero-title .accent{ color:var(--teal); }
.hero-sub{
  margin-top:clamp(18px,2.8vh,32px); font-weight:600; color:var(--teal);
  font-size:clamp(15px,1.7vw,23px); letter-spacing:.01em;
}
.scroll-hint{
  position:absolute; left:50%; bottom:4.4vh; transform:translateX(-50%);
  display:flex; flex-direction:column; align-items:center; gap:7px; z-index:2;
  color:var(--green); font-weight:700; letter-spacing:.2em; text-transform:uppercase; font-size:11px;
}
.scroll-hint .chev{ animation:bob 1.7s ease-in-out infinite; }
@keyframes bob{ 0%,100%{ transform:translateY(0) } 50%{ transform:translateY(7px) } }

/* ---------------- TIMELINE ---------------- */
.timeline{ position:relative; }
.pin{
  position:relative; height:100vh; width:100%; overflow:hidden;
  background:var(--cream);
}

/* full-bleed atmosphere — fills the WHOLE viewport so the faithful (letterboxed)
   stage reads edge-to-edge. Era-graded via CSS vars. */
.atmosphere{ position:absolute; inset:0; z-index:0; pointer-events:none; will-change:transform; }
.sky{
  position:absolute; inset:0;
  background:linear-gradient(180deg, var(--sky-top) 0%, var(--sky-mid) 52%, var(--sky-low) 100%);
}
.sun{
  position:absolute; left:50%; top:42%; transform:translate(-50%,-50%);
  width:80vmin; height:80vmin; border-radius:50%;
  background:radial-gradient(circle,
    rgba(255,214,92,var(--sun-core)) 0%,
    rgba(124,179,45,var(--sun-mid)) 36%,
    transparent 66%);
  filter:blur(10px);
}
.horizon{
  position:absolute; left:0; right:0; bottom:0; height:34%;
  background:linear-gradient(180deg, transparent 0%, rgba(174,150,70,.16) 100%);
}
.pin::after{   /* cinematic vignette over everything in the pin */
  content:""; position:absolute; inset:0; pointer-events:none; z-index:60;
  background:radial-gradient(125% 95% at 50% 42%, transparent 55%, rgba(15,64,81,.13) 100%);
}

/* the faithful 1366x768 design stage — JS scales it to FIT (no content cropped) */
.stage{
  position:absolute; left:50%; top:50%;
  width:1366px; height:768px;
  transform-origin:center center;   /* JS sets translate(-50%,-50%) scale(s) */
  will-change:transform; z-index:2;
}
/* camera wrapper: receives push-in + mouse drift from the ticker */
.scene{ position:absolute; inset:0; transform-origin:50% 56%; will-change:transform; }
.plane{ will-change:transform; }

/* YEAR (per-digit flip) */
.year-wrap{ position:absolute; left:150px; top:248px; width:470px; height:200px; display:flex; align-items:center; justify-content:center; }
.year{ display:flex; font-weight:800; font-size:157px; line-height:1; letter-spacing:-.01em; color:var(--green); font-variant-numeric:tabular-nums; }
.digit{ position:relative; height:172px; overflow:hidden; }
.digit-roll{ display:flex; flex-direction:column; will-change:transform,filter; }
.digit .d{ height:172px; display:flex; align-items:center; justify-content:center; }

/* CORN */
.corn-area{ position:absolute; left:0; bottom:168px; width:1366px; height:0; z-index:1; }
.corn-layer{
  position:absolute; left:690px; bottom:0; transform:translateX(-50%);
  transform-origin:bottom center; will-change:transform,opacity,clip-path,filter;
  display:none;
}
.corn-sway{ transform-origin:bottom center; display:block; }
.corn-layer svg{ display:block; width:auto; }
@keyframes sway{ 0%{ transform:rotate(-1.35deg) } 100%{ transform:rotate(1.35deg) } }
@keyframes sway-soft{ 0%{ transform:rotate(-.7deg) } 100%{ transform:rotate(.7deg) } }

/* pollen / light particles (depth-distributed; sizes/positions set in JS) */
.particles{ position:absolute; left:470px; bottom:0; width:440px; height:560px; pointer-events:none; }
.particles span{
  position:absolute; bottom:0; border-radius:50%;
  background:radial-gradient(circle, rgba(255,210,80,.95), rgba(124,179,45,.28) 70%, transparent);
  opacity:0; will-change:transform,opacity;
  animation:rise var(--dur,12s) linear var(--delay,0s) infinite;
}
@keyframes rise{
  0%{ transform:translate(0,0) scale(.6); opacity:0 }
  14%{ opacity:var(--peak,.7) }
  82%{ opacity:calc(var(--peak,.7) * .55) }
  100%{ transform:translate(var(--dx,20px),var(--travel,-480px)) scale(1); opacity:0 }
}

/* STATS (faithful XD layout) */
.stats{
  position:absolute; left:880px; top:130px;
  display:flex; flex-direction:column; gap:24px; color:var(--teal);
}
.stats .grp{ display:flex; flex-direction:column; }
.grp-acres{ gap:6px; } .grp-price{ gap:4px; } .grp-prod{ gap:2px; } .grp-yield{ gap:10px; }
.stats .row{ display:flex; align-items:flex-end; gap:8px; }
.stats .value{ font-weight:800; font-size:35px; line-height:1; font-variant-numeric:tabular-nums; }
.stats .desc{ font-weight:600; font-size:19px; line-height:1.05; }
.stats .label{ font-weight:700; font-size:19px; line-height:1; text-transform:uppercase; letter-spacing:.01em; }
.stats .big{ font-weight:800; font-size:122px; line-height:1; color:var(--green); letter-spacing:-.01em; font-variant-numeric:tabular-nums; transform-origin:left center; will-change:transform,filter; }
.stats .divider{ width:218px; height:2px; background:var(--teal); transform-origin:left center; }

/* PHOTOS — film reel with Ken-Burns cells */
.photo-area{ position:absolute; left:0; bottom:0; width:1366px; height:163px; z-index:3; overflow:hidden; }
.photo-strip{ position:absolute; inset:0; display:flex; gap:4px; will-change:transform,filter; }
.photo-strip .cell{
  flex:1 1 0; height:100%; position:relative; overflow:hidden; background-color:#e7ddb0;
}
.photo-strip .cell .img{
  position:absolute; inset:0;
  background-size:cover; background-position:center; background-repeat:no-repeat;
  will-change:transform;
}
/* shutter "gate" blackout between frames */
.gate{ position:absolute; inset:0; z-index:5; pointer-events:none; background:#0c0a07; opacity:0; }
/* soft film edges flashing as the reel advances */
.film-edge{
  position:absolute; left:0; right:0; height:14px; z-index:6; pointer-events:none; opacity:0;
  background:linear-gradient(180deg, rgba(12,10,7,.85), transparent);
}
.film-edge.top{ top:0 } .film-edge.bottom{ bottom:0; transform:scaleY(-1); }

/* light bloom during the transition (hides the corn cut) */
.bloom{
  position:absolute; left:50%; top:50%; transform:translate(-50%,-50%);
  width:120%; height:120%; z-index:55; pointer-events:none; opacity:0; mix-blend-mode:screen;
  background:radial-gradient(circle at 50% 52%, rgba(255,220,120,.5), rgba(255,220,120,.12) 36%, transparent 64%);
}

/* VERTICAL TIMELINE RAIL */
.rail{
  position:absolute; right:clamp(16px,2.4vw,40px); top:50%; transform:translateY(-50%);
  z-index:70; display:flex; flex-direction:column; align-items:flex-end; gap:9px;
}
.rail .yr{
  font-weight:700; font-size:12px; letter-spacing:.06em; color:rgba(15,64,81,.32);
  line-height:1; transition:color .35s, transform .35s, opacity .35s; cursor:pointer;
  transform-origin:right center;
}
.rail .yr.on{ color:var(--green); transform:scale(1.5); }
.rail .yr.near{ color:rgba(15,64,81,.6); }

/* ---------------- OUTRO ---------------- */
.outro{
  min-height:88vh; display:flex; flex-direction:column; justify-content:center; align-items:center;
  text-align:center; gap:16px; padding:10vh 8vw;
  background:radial-gradient(140% 120% at 50% 80%, var(--cream) 45%, var(--cream-deep) 130%);
}
.outro-lead{ font-weight:800; font-size:clamp(26px,4vw,58px); line-height:1.05; max-width:18ch; color:var(--teal); }
.outro-lead strong{ color:var(--green); }
.outro-sub{ font-weight:600; font-size:clamp(16px,2vw,26px); max-width:26ch; color:var(--teal); }
.src{ margin-top:10px; font-weight:600; font-size:12.5px; color:rgba(15,64,81,.55); max-width:60ch; }

@media (prefers-reduced-motion: reduce){
  .scroll-hint .chev,.particles span,.corn-sway,.grain{ animation:none !important; }
}

/* ============================================================
   MOBILE / TOUCH — performance + portrait "stacked" layout
   ============================================================ */

/* --- perf: shed the expensive continuous effects on phones/touch --- */
@media (max-width: 820px), (pointer: coarse){
  /* the animated film-grain (220% fixed, mix-blend multiply) is the heaviest
     repaint — freeze it and make it a faint static texture */
  .grain{ animation:none !important; opacity:.05; mix-blend-mode:normal; }
  .sun{ filter:blur(5px); }
  .photo-strip .cell .img{ animation:none !important; transform:scale(1.04); } /* stop Ken-Burns */
  body::after{ background:radial-gradient(125% 115% at 50% 47%, transparent 60%, rgba(15,64,81,.15) 100%); }
}

/* --- portrait stacked layout: year · production · stats · corn · photos --- */
body.stack{ --photoH: clamp(104px, 15dvh, 168px); --yh: clamp(52px, 15vw, 104px); }

/* the fixed 1366x768 stage becomes a viewport-filling fluid stage
   (JS clears the inline scale transform so this can take over) */
body.stack .stage{ left:0; top:0; width:100% !important; height:100% !important; transform:none !important; }
body.stack .scene{ position:absolute; inset:0; }

/* YEAR — top band, centered, fluid per-digit roll */
body.stack .year-wrap{ left:0; right:0; top:3vh; width:auto; height:auto;
  justify-content:center; align-items:flex-start; z-index:6; }
body.stack .year{ font-size:calc(var(--yh) * .92); }
body.stack .digit{ height:var(--yh); }
body.stack .digit .d{ height:var(--yh); }

/* STATS — centered column under the year; production leads */
body.stack .stats{ left:0; right:0; top:calc(3vh + var(--yh) + 4vh);
  width:auto; align-items:center; text-align:center; gap:clamp(6px,1.5vh,14px); z-index:5; }
body.stack .stats .grp{ align-items:center; }
body.stack .grp-prod{ order:0; } body.stack .grp-acres{ order:1; }
body.stack .grp-price{ order:2; } body.stack .grp-yield{ order:3; }
body.stack .stats .row{ justify-content:center; }
body.stack .stats .big{ font-size:clamp(58px,19vw,128px); transform-origin:center center; }
body.stack .stats .value{ font-size:clamp(20px,5.4vw,32px); }
body.stack .stats .desc,
body.stack .stats .label{ font-size:clamp(12px,3.4vw,18px); }
body.stack .stats .divider{ display:none; }

/* CORN — centered, anchored just above the photo strip (grows upward) */
body.stack .corn-area{ left:0; right:0; width:auto; bottom:var(--photoH); z-index:2; }
body.stack .corn-layer{ left:50%; }

/* PHOTOS — full-width bottom band */
body.stack .photo-area{ left:0; right:0; width:auto; height:var(--photoH); z-index:3; }

/* the side rail is redundant on a phone (the big year already orients you) */
body.stack .rail{ display:none; }