/* BEYOND THE FLOW V3 — cinematic scroll experience. All effects degrade without JS/WebGL. */
:root { --journey-accent: #c7ff62; --journey-soft: rgba(199,255,98,.17); }
html { scroll-behavior: smooth; }
body { overflow-x: clip; }
.hero { overflow: hidden; }
.hero .hero-copy, .hero .hero-stage { will-change: auto; }
.hero-stage::before { background-size: 100% 100%; }
.hero-stage .stage-chip { transition: transform .55s cubic-bezier(.2,.75,.2,1),opacity .55s ease; }
.hero-stage:hover .stage-chip-a { transform:translate3d(9px,-11px,0); }
.hero-stage:hover .stage-chip-c { transform:translate3d(-8px,8px,0); }
/* Immersive chapter: the canvas stays pinned while the story moves past it. */
.journey { position:relative; isolation:isolate; background:#050b0d; }
.journey-sticky { position:sticky; top:0; height:100svh; min-height:590px; overflow:hidden; isolation:isolate; z-index:0; background:linear-gradient(108deg,#06140f 1%,#071012 50%,#09151a); }
.journey-render, .journey-grid, .journey-aura, .journey-vignette { position:absolute; inset:0; pointer-events:none; }
.journey-render { z-index:0; transform:translateZ(0); }
.journey-render canvas { position:absolute; inset:0; width:100%; height:100%; display:block; opacity:.96; transition:opacity .38s ease,filter .7s ease; }
.journey-render canvas.is-transitioning { opacity:.22; filter:blur(8px); }
.journey-grid { z-index:1; opacity:.75; background-image:linear-gradient(rgba(153,255,186,.025) 1px, transparent 1px),linear-gradient(90deg,rgba(153,255,186,.025) 1px,transparent 1px);background-size:76px 76px;mask-image:linear-gradient(90deg,#000,transparent 81%); }
.journey-aura { z-index:2; background:radial-gradient(circle at 31% 51%,var(--journey-soft),transparent 36%); transition:background .55s; }
.journey-vignette { z-index:3; background:linear-gradient(90deg,rgba(4,9,12,.14) 0%,rgba(5,11,12,.08) 36%,rgba(4,9,11,.8) 65%,#060c0f 100%),linear-gradient(0deg,#050b0d 0%,transparent 22% 83%,rgba(4,11,13,.8)); }
.journey-chrome { position:absolute;inset:0; z-index:6;pointer-events:none; color:#d4dfd6; }
.journey-top { position:absolute;top:104px;left:5.6%;right:5.6%;display:flex;justify-content:space-between;gap:20px;font-size:10px;letter-spacing:.17em;font-weight:800;color:#bed0c0; }
.journey-top b { color:#607966; padding:0 6px; }
.signal-live { display:inline-block;width:6px;height:6px;background:#c7ff62;border-radius:100%;margin-right:9px;box-shadow:0 0 15px #c7ff62;vertical-align:middle; }
.journey-device { opacity:.62; }
.journey-side { position:absolute;left:5.6%;bottom:13%;display:flex;align-items:center;gap:16px;font-size:9px;letter-spacing:.13em;font-weight:750;color:#a6b8a6; }
.journey-line { display:block;height:1px;width:62px;background:#b5dbb9;opacity:.5; }
.journey-bottom { position:absolute;bottom:6%;left:5.6%;right:5.6%;border-top:1px solid #7da39444;padding-top:17px;display:flex;gap:20px;justify-content:space-between;color:#9db4a4;font-size:9px;letter-spacing:.10em;font-weight:750; }
.journey-progress { position:absolute;bottom:0;left:0;width:100%;height:3px;background:#17342c; }
.journey-progress span { display:block;background:var(--journey-accent);height:100%;width:0;box-shadow:0 0 15px var(--journey-accent); }
.journey-rail { position:absolute;right:4.7%;top:28%;display:flex;flex-direction:column;gap:10px;pointer-events:auto; }
.journey-rail button { cursor:pointer;border:1px solid rgba(170,218,181,.26);height:44px;width:44px;background:rgba(13,29,26,.52);color:#8faa9a;font-size:10px;font-weight:750;transition:background .25s,color .25s,border .25s,transform .25s;backdrop-filter:blur(7px); }
.journey-rail button:hover,.journey-rail button:focus-visible,.journey-rail button.current { background:var(--journey-accent);color:#06110c;border-color:var(--journey-accent);transform:translateX(-3px); }
.journey-steps { position:relative;z-index:2;margin-top:-100svh;pointer-events:none; }
.journey-step { height:100svh;min-height:590px;display:flex;align-items:center;justify-content:flex-end;padding:120px clamp(78px,11vw,175px) 100px 53%;scroll-margin-top:0; }
.journey-content { position:relative;width:min(100%,630px);pointer-events:auto;opacity:.24;transform:translateY(44px) scale(.975);filter:blur(4px);transition:opacity .6s ease,transform .8s cubic-bezier(.16,1,.3,1),filter .6s ease; }
.journey-step.is-active .journey-content { opacity:1;transform:translateY(0) scale(1);filter:blur(0); }
.journey-count { display:flex;align-items:center;gap:12px;color:var(--journey-accent);font-size:10px;font-weight:800;letter-spacing:.19em; }
.journey-count i { width:40px;height:1px;background:currentColor; }
.journey-content h2 { margin:29px 0 24px;font-size:clamp(52px,6.55vw,116px);font-weight:950;letter-spacing:-.092em;line-height:.91;color:#f0f8ee;overflow-wrap:normal; }
.journey-content h2 em { color:var(--journey-accent);font-style:normal; }
.journey-deck { color:#cad6cb; font-size:clamp(14px,1.22vw,19px);line-height:1.73;max-width:440px; }
.journey-meta { display:flex;flex-wrap:wrap;gap:8px;margin-top:30px; }
.journey-meta span { display:inline-flex;padding:9px 11px;border:1px solid #7bb29a42;background:rgba(20,45,38,.5);font-size:9px;font-weight:750;letter-spacing:.08em;color:#bdd2c0; }
.journey-vertical { display:none; }
.journey-cta { display:inline-flex;align-items:center;gap:22px;margin-top:33px;background:var(--journey-accent);color:#091309;padding:16px 22px;font-size:12px;font-weight:900;letter-spacing:.02em;transition:transform .2s,background .2s; }
.journey-cta:hover { transform:translateY(-3px);background:#edffbc; }
.journey.is-static .journey-content { opacity:1;filter:none;transform:none; }
.journey.is-static .journey-steps { margin-top:-100svh; }
.journey-fallback-art { display:none;position:absolute;left:-4%;top:10%;width:68%;height:78%;filter:drop-shadow(0 22px 45px rgba(57,200,124,.22)); }
.journey-sticky.webgl-fallback .journey-render canvas { display:none; }
.journey-sticky.webgl-fallback .journey-fallback-art {display:block;}
.fallback-scene {opacity:0;transition:opacity .55s ease;}
.journey[data-journey-active="0"] .fallback-scene-0,
.journey[data-journey-active="1"] .fallback-scene-1,
.journey[data-journey-active="2"] .fallback-scene-2,
.journey[data-journey-active="3"] .fallback-scene-3 {opacity:1;}
@keyframes journeyFloat { 0%,100%{transform:translateY(0) rotate(-1deg)}50%{transform:translateY(-10px) rotate(1deg)} }
.journey-sticky.webgl-fallback .journey-fallback-art {animation:journeyFloat 8s ease-in-out infinite;}

 .journey-sticky.webgl-fallback:before {display:none;}
/* Reveal the portfolio after the immersive journey without an abrupt hard cut. */
.experience-v2 { box-shadow:inset 0 60px 100px rgba(2,10,9,.45); }
.experience-heading h2 { text-wrap:balance; }
@media (min-width:1400px) { .journey-step { padding-right:clamp(140px,12vw,220px); } }
@media (max-width:900px) {
 .journey-sticky{min-height:560px;}
 .journey-steps{margin-top:-100svh;}
 .journey-step{min-height:560px;padding:115px 80px 95px 45%;}
 .journey-content h2{font-size:clamp(48px,7vw,80px);}
 .journey-vignette{background:linear-gradient(90deg,rgba(4,9,12,.07) 0%,rgba(4,9,11,.6) 48%,#060c0f 100%),linear-gradient(0deg,#050b0d,transparent 19% 78%,#050b0dcc);}
 .journey-rail{right:20px;}
}
@media (max-width:700px) {
 .journey-sticky{height:100svh;min-height:620px;}
 .journey-steps{margin-top:-100svh;}
 .journey-step{height:100svh;min-height:620px;align-items:flex-end;justify-content:flex-start;padding:90px 25px 120px;}
 .journey-render canvas { height:75%;top:5%;opacity:.85; }
 .journey-fallback-art {left:-20%;top:17%;width:140%;height:52%;}
 .journey-vignette{background:linear-gradient(180deg,#060c0f 0%,transparent 16% 25%,rgba(5,11,13,.25) 45%,#060c0fec 75%,#060c0f 100%);}
 .journey-aura{background:radial-gradient(circle at 48% 32%,var(--journey-soft),transparent 53%);}
 .journey-grid{mask-image:linear-gradient(180deg,#000,transparent 80%)}
 .journey-top{left:24px;right:24px;top:86px;font-size:8px;letter-spacing:.11em;}
 .journey-device{display:none}
 .journey-content{width:100%;max-width:520px;}
 .journey-content h2{font-size:clamp(48px,12vw,81px);line-height:.9;margin:15px 0 13px;}
 .journey-deck{font-size:13px;line-height:1.55;max-width:390px;}
 .journey-meta{margin-top:13px;gap:5px;}
 .journey-meta span{font-size:8px;padding:6px 8px;}
 .journey-count{font-size:9px;}
 .journey-rail{right:18px;top:30%;gap:7px;}
 .journey-rail button{width:33px;height:33px;font-size:9px;}
 .journey-side{display:none;}
 .journey-side span:first-child{display:none}
 .journey-line{width:29px}
 .journey-bottom{display:none;}
 .journey-bottom span:last-child{display:none}
 .journey-cta{margin-top:17px;padding:11px 16px;font-size:11px;}
}
@media (max-width:390px){ .journey-step{padding:70px 18px 115px;} .journey-top{left:18px;top:82px;} .journey-content h2{font-size:clamp(44px,12.5vw,61px)} .journey-deck{font-size:12px} .journey-rail{right:12px;top:26%} }
@media (prefers-reduced-motion:reduce){
 html{scroll-behavior:auto}
 .journey-content,.journey-render canvas,.journey-cta,.journey-rail button{transition:none!important;filter:none!important;transform:none!important}
 .journey-fallback-art{animation:none!important;}
 .journey-content{opacity:1!important}
}
/* The generic V2 WebGL fallback has a diagnostic message. Use our custom
   chapter-specific isometric illustration instead, not the generic diagnostic. */
.journey-render.webgl-fallback::before { display:none!important; }
@media (max-width:700px) {
 .journey-fallback-art { left:-11%;top:17%;width:154%;height:52%; }
 .journey-content h2 { letter-spacing:-.079em; }
}