/* =============================================================
   SEED — "Fifty years in one scroll" cinematic (Sustainability)
   Pinned scroll scene: two wall assemblies live through five
   decades. Drafting-table register, green accent layer.
   Requires GSAP + ScrollTrigger; degrades to a static stacked
   layout without JS / with prefers-reduced-motion.
   ============================================================= */

.endure{ background:var(--ink); color:var(--paper); border-top:1px solid var(--ink); }
.end-viewport{ min-height:100vh; display:flex; flex-direction:column; justify-content:center; padding:clamp(28px,4vh,56px) clamp(20px,5vw,64px); max-width:1280px; margin-inline:auto; box-sizing:border-box; }

.end-head{ display:flex; justify-content:space-between; align-items:flex-end; gap:24px; margin-bottom:clamp(18px,3vh,34px); }
.end-head .eyebrow{ color:color-mix(in oklch, var(--paper) 66%, transparent); }
.end-head .eyebrow::before{ background:var(--green, oklch(0.50 0.105 150)); }
.end-head h2{ color:var(--paper); font-size:clamp(24px,3vw,40px); margin-top:12px; }
.end-year{ font:600 clamp(28px,3.4vw,46px)/1 var(--mono); letter-spacing:0.04em; color:var(--paper); font-variant-numeric:tabular-nums; text-align:right; }
.end-year .yr-cap{ display:block; font-size:10.5px; letter-spacing:0.16em; margin-top:8px; color:color-mix(in oklch, var(--paper) 55%, transparent); text-transform:uppercase; }

.end-body{ display:grid; grid-template-columns:minmax(0,1.75fr) minmax(260px,1fr); gap:clamp(20px,3vw,44px); align-items:stretch; }
.end-scene-wrap{ border:1px solid color-mix(in oklch, var(--paper) 16%, transparent); background:color-mix(in oklch, var(--paper) 4%, transparent); position:relative; }
.end-scene-wrap svg{ display:block; width:100%; height:auto; }

/* narrative panel */
.end-panel{ position:relative; display:flex; flex-direction:column; justify-content:center; min-height:100%; }
.end-step{ position:absolute; inset:auto 0; opacity:0; transform:translateY(14px); transition:opacity .45s var(--ease), transform .45s var(--ease); pointer-events:none; }
.end-step.is-active{ opacity:1; transform:none; pointer-events:auto; }
.end-step .ch{ font:600 11px/1 var(--mono); letter-spacing:0.16em; text-transform:uppercase; color:var(--green, oklch(0.50 0.105 150)); }
.end-step h3{ margin:14px 0 12px; color:var(--paper); font-size:clamp(20px,2.2vw,27px); }
.end-step p{ color:color-mix(in oklch, var(--paper) 72%, transparent); font-size:15px; line-height:1.65; }

/* year ruler / scrub */
.end-scrub{ margin-top:clamp(18px,3vh,30px); }
.end-track{ position:relative; height:34px; border-bottom:1px solid color-mix(in oklch, var(--paper) 22%, transparent);
  background-image:repeating-linear-gradient(to right, color-mix(in oklch, var(--paper) 26%, transparent) 0 1px, transparent 1px 10%);
  background-size:100% 9px; background-position:bottom; background-repeat:no-repeat; }
.end-fill{ position:absolute; left:0; bottom:-1px; height:3px; width:0%; background:var(--green, oklch(0.50 0.105 150)); }
.end-decades{ display:flex; justify-content:space-between; flex-wrap:wrap; gap:4px 10px; margin-top:10px; }
.end-decades button{ background:none; border:0; cursor:pointer; font:600 10.5px/1 var(--mono); letter-spacing:0.14em; color:color-mix(in oklch, var(--paper) 50%, transparent); padding:6px 2px; transition:color .2s var(--ease); }
.end-decades button.is-active, .end-decades button:hover{ color:var(--paper); }

/* SVG drafting helpers (referenced from JS-built scene) */
.endure .mono-label{ font:600 10px/1 var(--mono); letter-spacing:0.14em; text-transform:uppercase; }
.endure .hairline{ stroke:color-mix(in oklch, var(--paper) 30%, transparent); stroke-width:1; }

/* static fallback (no JS / reduced motion): everything visible, stacked */
.endure.is-static .end-viewport{ min-height:0; }
.endure.is-static .end-step{ position:static; opacity:1; transform:none; pointer-events:auto; margin-bottom:26px; }
.endure.is-static .end-panel{ justify-content:flex-start; padding-top:6px; }
.endure.is-static .end-fill{ width:100%; }

@media (max-width:900px){
  .end-body{ grid-template-columns:1fr; }
  .end-panel{ min-height:170px; }
  .end-step{ position:absolute; top:0; }
  .endure.is-static .end-step{ position:static; }
  .end-year{ font-size:24px; }
}