/* ============================================================
   NCGA Timeline — CINEMATIC REBUILD (Version A)
   Scroll = a camera dolly travelling forward through one
   continuous corn field as 160 years pass.
   Layered depth · per-era color grade · organic growth ·
   performing numbers · atmosphere that breathes at rest.
   Design space = fixed 1366x768 "stage" scaled to fit (JS).
   ============================================================ */

@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;
  --gold:#E7A700;
  --font:'DIN 2014', system-ui, sans-serif;
  /* fluid layout tokens — scale across all screen sizes incl. >1400px */
  --photoH: clamp(96px, 15.5vh, 220px);   /* bottom photo strip height */
  --gutter: clamp(18px, 5.5vw, 170px);     /* left/right safe gutter */
}

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

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);     /* stage fills the screen; cream avoids any dark flash */
  color:var(--teal);
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
  overflow-x:hidden;
}

/* ===== global film grain (era-driven opacity via --grain) ===== */
.grain{
  position:fixed; inset:-60%; width:220%; height:220%; z-index:240; pointer-events:none;
  opacity:var(--grain,.10); 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)}
}

/* ===== HERO ===== */
.hero{
  position:relative; height:100vh; display:grid; place-items:center; overflow:hidden;
  background:radial-gradient(150% 130% at 50% 12%, #fff7d6 0%, var(--cream) 42%, var(--cream-deep) 120%);
}
.hero-vignette{ position:absolute; inset:0; pointer-events:none;
  background:radial-gradient(120% 90% at 50% 38%, transparent 52%, rgba(26,18,6,.22) 120%); }
.hero-inner{ position:relative; z-index:3; text-align:center; padding:0 6vw; }
.kicker{
  font-weight:700; letter-spacing:.4em; text-transform:uppercase;
  font-size:clamp(11px,1.05vw,14px); color:var(--green);
  margin-bottom:clamp(20px,3.4vh,40px);
}
.hero-title{ font-weight:800; line-height:.86; letter-spacing:-.014em; color:var(--green); }
.hero-title .line{ display:block; overflow:hidden; padding:0 .04em .08em; }
.hero-title .line-in{ display:block; font-size:clamp(46px,8.8vw,150px); }
.hero-title .accent{ color:var(--teal); }
.hero-sub{
  margin-top:clamp(18px,2.8vh,34px); font-weight:600; color:var(--teal);
  font-size:clamp(15px,1.7vw,24px); letter-spacing:.02em;
}
/* a tiny seed that sprouts under the title */
.hero-seed{ position:absolute; left:50%; bottom:13vh; transform:translateX(-50%); z-index:3; }
.hero-seed svg{ display:block; overflow:visible; }
.scroll-hint{
  position:absolute; left:50%; bottom:4.2vh; transform:translateX(-50%); z-index:4;
  display:flex; flex-direction:column; align-items:center; gap:7px;
  color:var(--green); font-weight:700; letter-spacing:.24em; 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 (paged stepper) ===== */
.timeline{ position:relative; height:100vh; }
.pin{ position:relative; height:100vh; width:100%; overflow:hidden; background:var(--cream); }
/* while the stepper holds the page, the pin is locked to the viewport */
.tl-engaged .pin{ position:fixed; inset:0; height:100%; z-index:50; }

/* the stage now FILLS the viewport (fully responsive, no letterbox) */
.stage{
  position:absolute; inset:0;
  width:100%; height:100%;
  will-change:transform; z-index:2;
  background:var(--cream);
  overflow:hidden;
}

/* the camera — everything that dollies/pushes lives in here */
.scene{
  position:absolute; inset:0; transform-origin:50% 56%;
  will-change:transform;
}

/* generic depth plane (parallax via JS transform) */
.plane{ position:absolute; will-change:transform; }

/* ---- atmosphere (graded, parallax-slow, behind everything) ---- */
.atmosphere{ inset:0; z-index:0; }
.sky{ position:absolute; inset:-8%;
  background:linear-gradient(180deg,
     var(--sky-top,#fffbe6) 0%,
     var(--sky-mid,#FFF4CB) 46%,
     var(--sky-low,#F4E4A0) 100%); }
.sun{
  position:absolute; left:50%; top:30%; transform:translate(-50%,-50%);
  width:64vmin; height:64vmin; border-radius:50%; pointer-events:none;
  background:radial-gradient(circle,
     rgba(255,224,120,var(--sun-core,.55)) 0%,
     rgba(231,167,0,var(--sun-mid,.18)) 34%,
     transparent 66%);
  filter:blur(6px); mix-blend-mode:screen;
}
/* god-rays sweeping from the sun */
.rays{
  position:absolute; left:50%; top:30%; width:120vmin; height:120vmin;
  transform:translate(-50%,-50%); pointer-events:none; mix-blend-mode:screen;
  opacity:var(--rays,.35);
  background:repeating-conic-gradient(from 0deg at 50% 50%,
     rgba(255,235,150,.0) 0deg, rgba(255,235,150,.22) 3deg, rgba(255,235,150,0) 7deg);
  -webkit-mask:radial-gradient(circle, #000 0%, transparent 60%);
          mask:radial-gradient(circle, #000 0%, transparent 60%);
  animation:rayspin 60s linear infinite;
}
@keyframes rayspin{ to{ transform:translate(-50%,-50%) rotate(360deg) } }
/* distant haze band at the horizon */
.haze{ position:absolute; left:-10%; right:-10%; bottom:var(--photoH); height:clamp(160px,30vh,300px);
  background:linear-gradient(180deg, transparent 0%, rgba(246,231,168,.0) 0%, var(--haze,#F0DE98) 70%, var(--haze,#F0DE98) 100%);
  filter:blur(10px); opacity:.85; }
.horizon{ position:absolute; left:-10%; right:-10%; bottom:var(--photoH); height:2px;
  background:linear-gradient(90deg, transparent, rgba(15,64,81,.18) 20%, rgba(15,64,81,.18) 80%, transparent); }
/* soft ground glow where the plant roots */
.ground{ position:absolute; left:50%; bottom:calc(var(--photoH) - 20px); width:clamp(420px,56vw,900px); height:clamp(90px,16vh,160px); transform:translateX(-50%);
  background:radial-gradient(60% 100% at 50% 0%, rgba(63,103,41,.22), transparent 70%); filter:blur(8px); }

/* ---- giant ghost year (depth watermark behind the plant) ---- */
.year-echo{ inset:0; z-index:1; display:flex; align-items:center; justify-content:center; pointer-events:none; }
.year-echo .e{
  font-weight:800; font-size:clamp(260px,44vw,820px); line-height:1; letter-spacing:-.03em;
  color:var(--green); opacity:.05; font-variant-numeric:tabular-nums; white-space:nowrap;
  will-change:transform,opacity,filter;
}

/* ---- corn (hero) ---- */
.corn-area{ inset:0; z-index:2; }
.corn-layer{
  position:absolute; left:50%; bottom:var(--photoH); transform:translateX(-50%);
  transform-origin:bottom center; display:none;
  filter:drop-shadow(0 18px 22px rgba(15,64,81,.18));
  will-change:transform,opacity,clip-path;
}
.corn-sway{ transform-origin:bottom center; display:block; will-change:transform; }
.corn-layer svg{ display:block; width:auto; height:auto; }
@keyframes sway{ 0%{transform:rotate(-1.4deg)} 100%{transform:rotate(1.4deg)} }
@keyframes sway-soft{ 0%{transform:rotate(-.75deg)} 100%{transform:rotate(.75deg)} }

/* ---- atmosphere particles (pollen / dust / light motes) ---- */
.particles{ left:0; right:0; bottom:var(--photoH); top:8vh; z-index:3; pointer-events:none; }
.particles span{
  position:absolute; bottom:0; border-radius:50%;
  background:radial-gradient(circle, rgba(255,224,120,.95), rgba(124,179,45,.3) 60%, transparent 72%);
  opacity:0; will-change:transform,opacity;
  animation:rise var(--dur,11s) linear var(--delay,0s) infinite;
}
@keyframes rise{
  0%{ transform:translate(0,0) scale(.5); opacity:0 }
  10%{ opacity:var(--peak,.9) }
  85%{ opacity:calc(var(--peak,.9) * .5) }
  100%{ transform:translate(var(--dx,20px), calc(var(--travel,-560px))) scale(1.05); opacity:0 }
}

/* ---- YEAR (sharp, left, rack-focus swap) ---- */
.year-wrap{ position:absolute; left:var(--gutter); top:0; bottom:0; width:clamp(280px,42vw,620px);
  display:flex; align-items:center; z-index:4; }
.year{ position:relative; font-weight:800; font-size:clamp(72px,12.6vw,300px); line-height:1; letter-spacing:-.018em;
  color:var(--green); font-variant-numeric:tabular-nums; }
.year .yr{ display:block; transform-origin:42% 50%; will-change:transform,filter,opacity; }
.year .yr-a{ position:relative; }
.year .yr-b{ position:absolute; left:0; top:0; }
.year-tag{ position:absolute; left:6px; top:clamp(-44px,-2.6vw,-26px); font-weight:700;
  font-size:clamp(11px,1vw,16px); letter-spacing:.34em;
  text-transform:uppercase; color:var(--teal); opacity:.55; z-index:2; }

/* ---- STATS (right, depth-forward, performing numbers) ---- */
.stats{ position:absolute; right:var(--gutter); top:0; bottom:0;
  width:clamp(240px,30vw,460px); display:flex; flex-direction:column; justify-content:center;
  gap:clamp(14px,2.4vh,30px);
  color:var(--teal); z-index:5; align-items:flex-start; }
.stats .grp{ display:flex; flex-direction:column; will-change:transform,opacity; }
.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:9px; }
.stats .value{ font-weight:800; font-size:clamp(24px,2.7vw,48px); line-height:1; font-variant-numeric:tabular-nums;
  will-change:transform,filter; }
.stats .desc{ font-weight:600; font-size:clamp(14px,1.4vw,24px); line-height:1.05; }
.stats .label{ font-weight:700; font-size:clamp(13px,1.4vw,24px); line-height:1; text-transform:uppercase; letter-spacing:.02em; }
.stats .big{ font-weight:800; font-size:clamp(64px,9.4vw,170px); line-height:.96; color:var(--green);
  letter-spacing:-.018em; font-variant-numeric:tabular-nums; will-change:transform,filter; }
.stats .big.landed{ animation:bignum-pop .6s cubic-bezier(.22,1.2,.36,1); }
@keyframes bignum-pop{ 0%{ transform:scale(1) } 30%{ transform:scale(1.045) } 100%{ transform:scale(1) } }
.stats .divider{ height:2px; background:var(--teal); transform-origin:left center; }
.divider.d-acres{ width:clamp(150px,16vw,280px); } .divider.d-yield{ width:clamp(150px,16vw,280px); }
.stats .value.pulse{ animation:val-pulse .5s ease-out; }
@keyframes val-pulse{ 0%{ filter:brightness(1.6); transform:translateY(-2px) } 100%{ filter:brightness(1); transform:translateY(0) } }

/* ---- PHOTOS (film strip, Ken-Burns, masked reveal) ---- */
.photo-area{ position:absolute; left:0; right:0; bottom:0; height:var(--photoH); z-index:6; overflow:hidden;
  background:#0c0a07; }
.photo-strip{ position:absolute; inset:0; display:flex; gap:3px; will-change:transform,opacity; }
.photo-strip .cell{
  position:relative; flex:1 1 0; height:100%; overflow:hidden; background:#1a160c;
  will-change:clip-path;
}
.photo-strip .cell .img{
  position:absolute; inset:-6%; background-size:cover; background-position:center;
  will-change:transform,filter; /* Ken Burns */
}
.photo-area .film-edge{ position:absolute; left:0; right:0; height:10px; z-index:7; pointer-events:none;
  background:repeating-linear-gradient(90deg,#0a0805 0 12px, transparent 12px 26px); opacity:.0; }
.film-edge.top{ top:0 } .film-edge.bottom{ bottom:0 }
.photo-area .gate{ position:absolute; inset:0; z-index:8; background:#0a0805; opacity:0; pointer-events:none; }

/* ---- foreground cinematic overlays ---- */
.bloom{ position:absolute; inset:0; z-index:30; pointer-events:none; mix-blend-mode:screen; opacity:0;
  background:radial-gradient(60% 60% at 50% 46%, rgba(255,244,200,.9), rgba(255,224,120,.25) 45%, transparent 70%);
  will-change:opacity; }
.lightleak{ position:absolute; top:-10%; right:-6%; width:60%; height:70%; z-index:31; pointer-events:none;
  mix-blend-mode:screen; opacity:.0;
  background:radial-gradient(closest-side, rgba(231,167,0,.55), transparent 70%); will-change:opacity,transform; }
.vignette{ position:absolute; inset:0; z-index:32; pointer-events:none;
  background:radial-gradient(125% 100% at 50% 42%, transparent 54%, rgba(15,40,30,.20) 92%, rgba(8,20,15,.34) 100%); }
.letterbox{ position:absolute; left:0; right:0; height:0; background:#0a0805; z-index:33; pointer-events:none; }
.letterbox.top{ top:0 } .letterbox.bottom{ bottom:0 }

/* ---- progress rail ---- */
.rail{ position:absolute; right:clamp(14px,2vw,40px); top:50%; transform:translateY(-50%); z-index:80;
  display:flex; flex-direction:column; align-items:flex-end; gap:clamp(7px,1.1vh,13px); }
.rail .yr{ position:relative; font-weight:700; font-size:clamp(10px,.85vw,14px); letter-spacing:.05em;
  color:rgba(15,64,81,.30); line-height:1; transition:color .4s, transform .4s, opacity .4s;
  transform-origin:right center; padding-right:14px; cursor:pointer; }
.rail .yr::after{ content:""; position:absolute; right:0; top:50%; width:6px; height:6px; border-radius:50%;
  transform:translateY(-50%) scale(.7); background:rgba(15,64,81,.25); transition:.4s; }
.rail .yr.on{ color:var(--green); transform:scale(1.45); }
.rail .yr.on::after{ background:var(--green-bright); transform:translateY(-50%) scale(1.3);
  box-shadow:0 0 10px rgba(124,179,45,.8); }
.rail .yr.near{ color:rgba(15,64,81,.55); }

/* scrub progress bar at the very bottom of the frame */
.scrubbar{ position:absolute; left:0; bottom:0; height:3px; width:100%; z-index:81;
  background:rgba(15,64,81,.12); }
.scrubbar i{ display:block; height:100%; width:0%; transform-origin:left;
  background:linear-gradient(90deg, var(--green), var(--green-bright)); box-shadow:0 0 8px rgba(124,179,45,.6); }

/* ===== OUTRO ===== */
.outro{ position:relative; min-height:100vh; display:flex; flex-direction:column; justify-content:center;
  align-items:center; text-align:center; gap:18px; padding:12vh 8vw; overflow:hidden;
  background:radial-gradient(150% 130% at 50% 84%, #fff7d6 0%, var(--cream) 46%, var(--cream-deep) 122%); }
.outro .multiplier{ font-weight:800; font-size:clamp(80px,18vw,300px); line-height:.86; color:var(--green);
  letter-spacing:-.03em; }
.outro-lead{ font-weight:800; font-size:clamp(24px,3.6vw,52px); line-height:1.06; max-width:20ch; color:var(--teal); }
.outro-lead strong{ color:var(--green); }
.outro-sub{ font-weight:600; font-size:clamp(16px,2vw,26px); max-width:28ch; color:var(--teal); }
.src{ margin-top:12px; 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,.rays{ 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 overlay) is the single
     heaviest repaint — freeze it and make it a faint static texture */
  .grain{ animation:none !important; opacity:.05; mix-blend-mode:normal; }
  .rays{ display:none; }                              /* conic-gradient spin: gone */
  .haze{ filter:none; }
  .sun{ filter:blur(4px); }
  .photo-strip .cell .img{ animation:none !important; } /* stop perpetual Ken-Burns */
  .lightleak{ display:none; }
}

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

/* tame the giant ghost-year watermark so it doesn't fight the stacked text */
body.stack .year-echo .e{ font-size:42vw; opacity:.045; }

/* YEAR — top band, centered */
body.stack .year-wrap{ left:0; right:0; top:3vh; bottom:auto; width:auto; height:auto;
  justify-content:center; z-index:6; }
body.stack .year{ font-size:var(--yh); text-align:center; }
body.stack .year-tag{ left:50%; transform:translateX(-50%); top:clamp(-30px,-7vw,-20px); }

/* STATS — centered column under the year; production leads */
body.stack .stats{ left:0; right:0; top:calc(3vh + var(--yh) + 4vh); bottom:auto;
  width:auto; align-items:center; text-align:center; justify-content:flex-start;
  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; z-index:2; }
body.stack .corn-layer{ left:50%; }

/* PHOTOS — full-width bottom band (already full-bleed; just track --photoH) */
body.stack .photo-area{ left:0; right:0; }

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