/* ============================================================
   NCGA Timeline — cinematic scroll (v2)
   Faithful XD layout per decade; cinematic motion is ours.
   Design space = fixed 1366x768 "stage" scaled to fit (main.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;
  --green:#58832E;
  --green-bright:#7CB32D;
  --teal:#0F4051;
  --font:'DIN 2014', system-ui, sans-serif;
}

*{ 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 — animated over the WHOLE site for a rustic, video-immersive surface */
.grain{
  position:fixed; inset:-60%; width:220%; height:220%; z-index:200; pointer-events:none;
  opacity:.17; 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)}
}
/* slow projector flicker so the grain "breathes" like a video transfer */
@keyframes grain-flicker{
  0%,100%{ opacity:.17 } 28%{ opacity:.12 } 52%{ opacity:.21 } 74%{ opacity:.14 } 90%{ opacity:.19 }
}
/* 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; }
.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;
  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);
}
.pin::after{   /* cinematic vignette */
  content:""; position:absolute; inset:0; pointer-events:none; z-index:60;
  background:radial-gradient(125% 95% at 50% 40%, transparent 56%, rgba(15,64,81,.10) 100%);
}
/* warm ambient light behind the plant */
.sun{
  position:absolute; left:50%; top:46%; transform:translate(-50%,-50%);
  width:60vmin; height:60vmin; pointer-events:none; z-index:0;
  background:radial-gradient(circle, rgba(124,179,45,.16) 0%, rgba(255,202,0,.05) 38%, transparent 68%);
  filter:blur(8px);
}

.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;
}

/* 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; }
.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;
  display:none; filter:drop-shadow(0 12px 16px rgba(15,64,81,.14));
}
.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 */
.particles{ position:absolute; left:560px; bottom:0; width:280px; height:520px; pointer-events:none; }
.particles span{
  position:absolute; bottom:0; width:7px; height:7px; border-radius:50%;
  background:radial-gradient(circle, rgba(255,202,0,.9), rgba(124,179,45,.25) 70%, transparent);
  opacity:0; will-change:transform,opacity;
  animation:rise var(--dur,9s) linear var(--delay,0s) infinite;
}
@keyframes rise{
  0%{ transform:translate(0,0) scale(.6); opacity:0 }
  12%{ opacity:.9 }
  80%{ opacity:.55 }
  100%{ transform:translate(var(--dx,20px),-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; }
.stats .divider{ width:218px; height:2px; background:var(--teal); transform-origin:left center; }

/* PHOTOS — film reel */
.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; }
.photo-strip .cell{
  flex:1 1 0; height:100%;
  background-size:cover; background-position:center; background-repeat:no-repeat;
  background-color:#e7ddb0; overflow:hidden;
  transform-origin:center bottom; will-change:transform,opacity;
}
/* shutter "gate" blackout between frames */
.gate{ position:absolute; inset:0; z-index:5; pointer-events:none; background:#0c0a07; opacity:0; }
/* sprocket perforations, only visible while the reel advances */
.film-perf{
  position:absolute; left:-40px; right:-40px; height:15px; z-index:6; pointer-events:none; opacity:0;
  background:repeating-linear-gradient(90deg, #14100a 0 22px, transparent 22px 37px);
  will-change:opacity,background-position;
}
.film-perf.top{ top:0 } .film-perf.bottom{ bottom:0 }

/* VERTICAL TIMELINE RAIL */
.rail{
  position:absolute; right:34px; 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;
  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; }
}