/* PROTOTYPE: "Forge" strategy section. A full-bleed pinned scene: a top-down blueprint plan of Nurture tools,
   lit and connected by light as you scroll. Scroll position drives every beat, so scrolling back reverses it. */
.forge{position:relative;height:360vh;background:#050f0a;color:#f4efdf}
.forge-pin{position:sticky;top:0;height:100vh;height:100dvh;overflow:hidden;isolation:isolate}
.forge-pin::before{content:'';position:absolute;inset:0;z-index:-1;background:
  radial-gradient(60% 55% at 50% 62%,rgba(28,92,60,.38),transparent 70%),
  radial-gradient(40% 30% at 50% 0%,rgba(201,162,74,.10),transparent 70%),#050f0a}

/* copy beats */
.forge-copy{position:absolute;left:0;right:0;top:clamp(84px,11vh,120px);z-index:5;text-align:center;padding:0 20px;pointer-events:none}
.forge-copy .eyebrow{color:var(--gold,#c9a24a)}
.forge-beats{position:relative;display:grid;margin-top:12px}
.forge-beat{grid-area:1/1;opacity:0;transform:translateY(18px);transition:opacity .5s cubic-bezier(.16,1,.3,1),transform .6s cubic-bezier(.16,1,.3,1)}
.forge-beat.on{opacity:1;transform:none}
.forge-beat h2{font:500 clamp(30px,3.8vw,54px)/1.06 var(--serif);letter-spacing:-.025em;margin:0 auto;max-width:26ch;color:#f4efdf;text-wrap:balance}
.forge-beat h2 em{color:var(--orange-warm,#e8763a);font-style:italic}
.forge-beat p{margin:14px auto 0;max-width:56ch;font-size:clamp(15px,1.25vw,17.5px);line-height:1.6;color:#c3d1c4;text-wrap:balance}
.forge-rail{position:absolute;left:50%;bottom:clamp(18px,4vh,36px);transform:translateX(-50%);z-index:5;display:flex;gap:clamp(14px,3vw,40px);font:700 11px/1 var(--sans);letter-spacing:.14em;text-transform:uppercase;color:#93a99a;white-space:nowrap}
.forge-rail span{display:inline-flex;align-items:center;gap:9px;transition:color .3s}
.forge-rail i{position:relative;display:block;width:44px;height:2px;border-radius:2px;background:#22382b;overflow:hidden}
.forge-rail i::after{content:'';position:absolute;inset:0;transform-origin:left;transform:scaleX(var(--f,0));background:var(--gold,#c9a24a)}
.forge-rail span.on{color:#f4efdf}

/* the plan */
.forge-world{position:absolute;left:50%;top:61%;width:min(1240px,90vw,112vh);container:forge/inline-size;aspect-ratio:16/9;transform:translate(-50%,-50%);perspective:1700px;perspective-origin:50% 0%}
.forge-plane{position:absolute;inset:0;transform-style:preserve-3d;transform:rotateX(var(--tilt,40deg)) scale(var(--zoom,.8));transform-origin:50% 50%;will-change:transform}
.forge-grid{position:absolute;inset:-12% -8%;border-radius:28px;opacity:var(--grid,0);
  background:
   linear-gradient(rgba(201,162,74,.13) 1px,transparent 1px) 0 0/80px 80px,
   linear-gradient(90deg,rgba(201,162,74,.13) 1px,transparent 1px) 0 0/80px 80px,
   linear-gradient(rgba(201,162,74,.05) 1px,transparent 1px) 0 0/16px 16px,
   linear-gradient(90deg,rgba(201,162,74,.05) 1px,transparent 1px) 0 0/16px 16px;
  -webkit-mask:radial-gradient(70% 70% at 50% 50%,#000 40%,transparent 78%);mask:radial-gradient(70% 70% at 50% 50%,#000 40%,transparent 78%)}
.forge-svg{position:absolute;inset:0;width:100%;height:100%;overflow:visible}
.forge-svg .base{fill:none;stroke:rgba(201,162,74,.16);stroke-width:1.5;stroke-dasharray:3 7}
.forge-svg .glow{fill:none;stroke-width:14;stroke-linecap:round;opacity:.22}
.forge-svg .beam{fill:none;stroke-width:2.6;stroke-linecap:round}
.forge-svg .beam.spine{stroke-width:5.5}
.forge-svg .glow.spine{stroke-width:22;opacity:.3}
.forge-svg .pulse{fill:#fff4d6}
.forge-svg .pulse-halo{fill:rgba(255,226,150,.28)}
.forge-svg .spark{fill:#ff7a2e}

/* nodes stand up off the plan like pieces on a board */
.fnode{position:absolute;left:var(--x);top:var(--y);width:var(--s,clamp(58px,6.4vw,104px));margin-top:calc(var(--s,clamp(58px,6.4vw,104px)) * -.5);transform:translateX(-50%) translateZ(60px) rotateX(calc(var(--tilt,40deg) * -1));transform-origin:50% calc(var(--s,80px) * .5);text-align:center;z-index:2}
.fnode .disc{position:relative;display:block;width:100%;aspect-ratio:1;border-radius:50%;overflow:hidden;background:#071a12;
  box-shadow:0 0 0 1.5px rgba(201,162,74,.35),0 14px 30px -12px #000;filter:grayscale(.85) brightness(.42);transition:filter .5s,box-shadow .5s}
.fnode .disc img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;clip-path:circle(50%)}
.fnode b{display:block;width:max-content;margin:9px auto 0;padding:2px 8px;border-radius:8px;background:rgba(5,15,10,.82);text-shadow:none;font:600 clamp(11px,.95vw,13.5px)/1.2 var(--sans);letter-spacing:.02em;color:#7f9585;white-space:nowrap;transition:color .5s}
.fnode::after{content:'';position:absolute;left:50%;top:88%;width:120%;height:30%;transform:translate(-50%,-50%);border-radius:50%;background:radial-gradient(closest-side,rgba(110,220,150,.0),transparent);transition:background .6s;z-index:-1}
.fnode.lit .disc{filter:none;box-shadow:0 0 0 2px rgba(232,200,120,.85),0 0 34px -4px rgba(110,220,150,.55),0 18px 36px -14px #000}
.fnode.lit b{color:#f4efdf}
.fnode.lit::after{background:radial-gradient(closest-side,rgba(110,220,150,.35),transparent)}
.fnode.stage{--s:clamp(54px,5vw,80px);opacity:var(--sa,0);transition:opacity .25s linear}
.fnode.stage .disc{display:flex;align-items:center;justify-content:center;filter:none;background:#06130d url('/assets/forge/stage-medallion.webp?v=1') center/100% 100% no-repeat;box-shadow:0 14px 30px -12px #000}
.fnode.stage .disc em{font:italic 500 clamp(17px,1.6vw,26px)/1 var(--serif);color:#f4efdf;text-shadow:0 2px 8px #02100a;transition:color .5s}
.fnode.stage b{font:500 clamp(14px,1.35vw,20px)/1.1 var(--serif);letter-spacing:-.01em}
.fnode.stage small{display:block;width:max-content;margin:3px auto 0;padding:1px 6px;border-radius:6px;background:rgba(5,15,10,.82);font:700 9.5px/1.2 var(--sans);letter-spacing:.14em;text-transform:uppercase;color:#8aa292;white-space:nowrap;transition:color .5s}
.fnode.stage.lit .disc{filter:none;box-shadow:0 0 40px -6px rgba(232,200,120,.55),0 0 26px -8px rgba(110,220,150,.6),0 18px 36px -14px #000}
.fnode.stage.lit .disc em{color:#f6e3b0}.fnode.stage.lit small{color:#b9c9bb}
.fnode.tool{--s:clamp(60px,5.6vw,92px);opacity:var(--ta,0)}
.fnode.tool .disc{filter:grayscale(.4) brightness(.6)}
.fnode.tool.lit .disc{filter:none;box-shadow:0 0 0 2px rgba(232,200,120,.85),0 0 38px -4px rgba(110,220,150,.6),0 18px 36px -14px #000}

/* gap callouts sit on the plan too and face the camera */
.fgap{position:absolute;left:var(--x);top:var(--y);transform:translate(-50%,-50%) translateZ(70px) rotateX(calc(var(--tilt,40deg) * -1)) scale(var(--gs,0));opacity:var(--go,0);transform-origin:50% 50%;pointer-events:none;z-index:4}
.fgap span{display:block;white-space:nowrap;padding:7px 11px;border-radius:999px;font:700 clamp(10.5px,.85vw,12px)/1 var(--sans);letter-spacing:.02em;background:rgba(30,12,4,.86);color:#ffc49c;border:1px solid rgba(255,140,70,.6);box-shadow:0 0 26px -4px rgba(255,110,40,.6)}
.fgap .fx{display:none;background:rgba(14,30,20,.9);color:#f3e2b4;border-color:rgba(232,200,120,.7);box-shadow:0 0 26px -4px rgba(232,200,120,.5)}
.fgap.fixed .gp{display:none}.fgap.fixed .fx{display:block}

/* phones and portrait screens: the journey runs top to bottom; stage names sit beside each disc */
@media (max-width:760px),(max-aspect-ratio:1/1){
  .forge{height:400vh}
  .forge-world{width:min(84vw,41vh);aspect-ratio:9/15;top:57%;perspective:1200px}
  .fgap.fixed{opacity:0!important}
  .forge-copy{top:78px}
  .forge-beat p{display:none}
  .fnode{--s:clamp(46px,7vw,64px)}.fnode.stage{--s:clamp(40px,6vw,56px)}.fnode.stage small{display:none}.fnode b{font-size:clamp(10.5px,1.5vw,13px);margin-top:6px}
  .fnode.stage b{position:absolute;left:calc(100% + 8px);top:50%;margin:0;transform:translateY(-50%)}
  .fgap span{font-size:10px;padding:5px 8px}
  .forge-rail{display:none}
}

/* reduced motion and no JS: a static, finished plan with all three beats readable */
.forge.static{height:auto}
.forge.static .forge-pin{position:relative;height:auto;min-height:0;padding:96px 0 120px}
.forge.static .forge-copy{position:relative;top:0}
.forge.static .forge-beat{position:relative;grid-area:auto;opacity:1;transform:none;margin-bottom:22px}
.forge.static .forge-world{position:relative;left:auto;top:auto;transform:none;margin:24px auto 0}
.forge.static .forge-rail{display:none}
.forge.static .forge-beat p{display:block}
.forge.static:not(.built) .forge-world{display:none}
.forge.static .forge-pin{padding-bottom:40px}
.forge.static .forge-world{width:min(1240px,94vw)}

/* narrow plans: smaller gap labels, and once a gap is filled its label steps aside (the tools carry the meaning) */
@container forge (max-width:1100px){
  .fgap span{font-size:9.5px;padding:4px 7px;letter-spacing:0}
}
@container forge (max-width:900px){
  .fgap.fixed{opacity:0!important;transition:opacity .3s}
}
/* short laptop screens: headline only, so the plan can use more width */
@media (min-width:761px) and (max-height:780px){
  .forge-beat p{display:none}
  .forge-world{width:min(1240px,90vw,132vh);top:60%}
}