/* BEYOND THE FLOW V6 — editorial direction, spectral gate, scroll choreography */
:root{--v6-cream:#edf5ec;--v6-emerald:#bfff6a;--v6-mist:#99b9ab;--v6-line:rgba(202,242,215,.13)}
/* Calm, deliberate design tokens. The industrial data interface never replaces the real content. */
body{background:#05090a}
.nav{backdrop-filter:blur(18px) saturate(1.1);-webkit-backdrop-filter:blur(18px) saturate(1.1)}
.nav-contact,.btn-lime,.journey-cta{background:#c9ff71;color:#071008}
.nav-contact:hover,.btn-lime:hover,.journey-cta:hover{background:#e3ffa5}
.hero{min-height:100svh;background:radial-gradient(ellipse at 75% 48%,rgba(48,116,89,.11),transparent 40%),#060b0c;isolation:isolate}
.hero::before{content:"";position:absolute;inset:0;z-index:0;pointer-events:none;background:linear-gradient(90deg,transparent 49.8%,rgba(190,250,208,.04) 50%,transparent 50.2%);opacity:.45}
.hero-copy{z-index:2;transition:opacity .15s linear,translate .15s linear;opacity:var(--hero-copy-opacity,1);translate:0 var(--hero-copy-translate,0px)}
.hero-stage{z-index:1;transform:scale(var(--hero-stage-scale,1)) translate3d(0,var(--hero-stage-y,0px),0);transition:none;will-change:transform;background:radial-gradient(ellipse at 50% 52%,rgba(28,81,67,.16),transparent 48%),#071010}
.hero-stage::after{background:radial-gradient(ellipse at 51% 52%,rgba(190,255,110,.11),transparent 23%),radial-gradient(circle at 53% 48%,rgba(82,213,200,.04),transparent 37%),radial-gradient(ellipse at 48% 50%,transparent 22%,rgba(2,8,9,.5) 100%)}
.hero-stage .stage-center{display:none}
.hero-stage .stage-orbit{border-color:rgba(176,247,174,.17);opacity:.6}
.hero-stage .stage-top,.hero-stage .stage-bottom{letter-spacing:.14em;color:#b5c9bd}
.hero-stage .stage-chip{border-color:rgba(211,255,194,.17)!important;background:rgba(9,24,20,.54)!important;box-shadow:0 8px 40px rgba(0,0,0,.12);color:#e7f3e5}
.hero-stage .stage-chip small{color:#8cae9e}
.hero-v2-counter{top:64px;right:3.6%;letter-spacing:.18em}
.hero .hero-index{color:#a8b7ac}
.hero .hero-subrow{max-width:560px}
.hero .hero-footer{z-index:4}
/* Subtle physical framing in lieu of a generic full-page tech wallpaper. */
.hero-stage::before{opacity:.47;animation-duration:14s}
.hero .hero-flow{color:#caff80;background:linear-gradient(110deg,#e6ffb6 10%,#c7ff69 38%,#7effc9 93%);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent}
/* THE SPECTRAL GATE — separates opening identity from the four specific industrial models. */
.threshold{position:relative;height:225svh;min-height:1150px;background:#040a0b;isolation:isolate;--t:0;--ease-t:0;--pointer-x:0;--pointer-y:0}
.threshold-sticky{position:sticky;inset:0 auto auto 0;top:0;width:100%;height:100svh;min-height:560px;overflow:hidden;background:radial-gradient(ellipse at 50% 46%,rgba(35,99,89,.18),transparent 42%),linear-gradient(145deg,#03090b,#081516 52%,#041011);color:#ecf5ea}
.threshold-sticky::before{content:"";position:absolute;inset:0;z-index:2;pointer-events:none;background:radial-gradient(ellipse at 50% 46%,transparent 15%,rgba(3,9,11,.22) 52%,#030809 100%)}
.threshold-sticky::after{content:"";position:absolute;inset:0;z-index:3;pointer-events:none;opacity:.24;background:linear-gradient(transparent 97%,rgba(202,255,217,.06) 98%);background-size:100% 6px;mix-blend-mode:screen}
.threshold-canvas{position:absolute;inset:0;width:100%;height:100%;opacity:.63;filter:drop-shadow(0 0 12px rgba(162,255,167,.1));pointer-events:none}
.threshold-halo{position:absolute;width:65vmax;height:65vmax;top:50%;left:50%;border-radius:50%;border:1px solid rgba(197,255,186,.14);pointer-events:none;z-index:1;box-shadow:0 0 60px rgba(80,255,144,.045),inset 0 0 80px rgba(80,255,144,.045);transform:translate(-50%,-50%) rotate(var(--outer-spin,0deg)) scale(var(--outer-scale,.38))}
.threshold-halo-b{width:38vmax;height:38vmax;border-color:rgba(117,239,222,.17);transform:translate(-50%,-50%) rotate(var(--inner-spin,0deg)) scale(var(--inner-scale,.28));box-shadow:0 0 100px rgba(67,226,202,.065)}
.threshold-rings{position:absolute;inset:0;z-index:1;display:grid;place-items:center;pointer-events:none;perspective:900px}
.threshold-rings i{position:absolute;width:46vmin;height:46vmin;max-width:540px;max-height:540px;border-radius:50%;border:1px solid rgba(194,255,191,.25);transform:rotateX(67deg) rotateZ(var(--ring-a-spin,25deg)) scale(var(--ring-a-scale,.6));box-shadow:0 0 22px rgba(164,255,179,.05)}
.threshold-rings i:nth-child(2){width:32vmin;height:32vmin;border-color:rgba(128,245,222,.38);transform:rotateY(61deg) rotateZ(var(--ring-b-spin,-40deg)) scale(var(--ring-b-scale,.7))}
.threshold-rings i:nth-child(3){width:20vmin;height:20vmin;border-color:rgba(208,255,191,.34);transform:rotateX(72deg) rotateY(12deg) rotateZ(var(--ring-c-spin,60deg)) scale(var(--ring-c-scale,.6))}
.threshold-scan{position:absolute;top:-20%;left:calc(20% + var(--pointer-x)*9%);width:25%;height:150%;transform:skewX(-21deg) translateX(var(--scan-offset,-135%));background:linear-gradient(90deg,transparent,rgba(177,255,178,.065),transparent);filter:blur(10px);pointer-events:none;z-index:1}
.threshold-copy{position:absolute;inset:0;z-index:5;display:flex;align-items:center;justify-content:center;flex-direction:column;text-align:center;padding:110px 24px 100px;transform:translate3d(0,var(--copy-offset,13px),0);pointer-events:none}
.threshold-kicker{display:flex;gap:10px;align-items:center;justify-content:center;color:#b9e0bc;font-size:10px;letter-spacing:.24em;font-weight:800;margin:0 0 20px}
.threshold-copy h2{font-size:clamp(54px,9.6vw,165px);font-weight:950;line-height:.83;letter-spacing:-.095em;margin:0;text-transform:uppercase;color:#f3fbf0;text-shadow:0 18px 90px rgba(0,0,0,.48)}
.threshold-copy h2 span{color:#c9ff75}
.threshold-copy h2 b{color:#80e3c1;font-weight:950}
.threshold-copy h2:first-of-type{opacity:var(--first-opacity,1);transform:translateY(var(--first-offset,0px)) scale(var(--first-scale,1));transition:opacity .06s linear}
.threshold-line{width:clamp(70px,20vw,300px);height:1px;background:linear-gradient(90deg,transparent,#c7ff86,transparent);margin:35px auto;opacity:var(--line-opacity,.12);transform:scaleX(var(--line-scale,.2))}
.threshold-copy .threshold-second{position:absolute;opacity:var(--second-opacity,0);transform:translateY(var(--second-offset,70px)) scale(var(--second-scale,.83));transition:opacity .05s linear}
.threshold-second em{font-style:normal;color:#c9ff75}
.threshold-caption{position:absolute;bottom:17%;max-width:450px;color:#aecab8;font-size:clamp(13px,1.1vw,16px);line-height:1.65;opacity:var(--caption-opacity,0);transform:translateY(var(--caption-offset,18px))}
.threshold-ui{position:absolute;z-index:6;left:5.5%;right:5.5%;display:flex;align-items:center;justify-content:space-between;gap:14px;color:#aac3b2;font-size:10px;letter-spacing:.2em;font-weight:750;pointer-events:none}
.threshold-ui-top{top:110px}.threshold-ui-bottom{bottom:7.4%}
.threshold-ui-bottom b{font-size:15px;color:#caff80;margin-left:16px}
.threshold-progress{height:2px;position:absolute;bottom:0;left:0;right:0;z-index:7;background:rgba(180,255,197,.13)}
.threshold-progress span{display:block;width:var(--progress-width,0%);height:100%;background:#caff80;box-shadow:0 0 20px rgba(165,255,106,.65)}
/* A continuous colour and framing bridge into the scrollytelling stage. */
.journey{background:linear-gradient(#041011,#050b0d 8%);margin-top:-1px}
.journey-sticky{background:radial-gradient(circle at 17% 50%,rgba(15,73,63,.33),transparent 43%),#060e10}
.journey-sticky::after{content:"";position:absolute;inset:0;pointer-events:none;z-index:2;opacity:.75;background:linear-gradient(180deg,rgba(4,10,11,.36),transparent 25% 82%,rgba(4,10,11,.44))}
.journey-content h2{font-size:clamp(52px,6.5vw,109px);font-weight:950;letter-spacing:-.084em}
.journey-content h2 em{color:var(--journey-accent)}
.journey-atlas{box-shadow:0 12px 60px rgba(0,0,0,.36);border-color:rgba(196,255,202,.12)}
.journey-step.is-active .journey-content{filter:none}
.journey-render canvas{filter:drop-shadow(0 16px 30px rgba(95,255,165,.07))}
.journey-stage-caption{opacity:.45}
.journey-device{font-weight:700}
/* Restful reading after the intense experience: editorial sections on calmer surfaces. */
.ticker{border-block:1px solid rgba(198,255,204,.09);background:#080e10}
.manifesto{background:radial-gradient(ellipse at 75% 30%,rgba(77,133,102,.035),transparent 49%),#090e0f}
.manifesto-grid h2{letter-spacing:-.06em}
.experience-v2{background:linear-gradient(#070c0e,#0a1112 20%,#070c0e)}
.experience-frame{border:1px solid rgba(193,245,201,.12);box-shadow:0 40px 180px rgba(29,89,60,.1)}
.section-label{letter-spacing:.15em}
.exp-card,.project-card,.lab-shell{box-shadow:0 18px 100px rgba(0,0,0,.09)}
.exp-card:hover,.project-card:hover{border-color:rgba(199,255,112,.3);box-shadow:0 20px 100px rgba(65,169,102,.09)}
.project-info h3{letter-spacing:-.07em}
.contact-main{position:relative}
.contact-main::before{content:"";position:absolute;inset:12% 19%;z-index:-1;pointer-events:none;filter:blur(30px);background:radial-gradient(ellipse,rgba(127,215,151,.08),transparent 67%)}
/* Decorative cursor aura scoped to non-touch viewport; default pointer still visible */
@media(hover:hover) and (pointer:fine){
 .hero-stage{cursor:crosshair}
 .threshold{cursor:default}
}
@media(max-width:1050px){
 .threshold-copy h2{font-size:clamp(61px,10vw,115px)}
 .threshold-ui-top{top:92px}
 .threshold-caption{bottom:20%}
}
@media(max-width:700px){
 .hero-stage{will-change:auto}
 .hero::before{display:none}
 .hero .hero-flow{background:linear-gradient(120deg,#dfffaa,#8cfbbb);-webkit-background-clip:text;background-clip:text}
 .hero-stage .stage-chip{box-shadow:none}
 .threshold{height:190svh;min-height:1000px}
 .threshold-sticky{min-height:540px}
 .threshold-copy{padding:115px 16px 115px}
 .threshold-copy h2{font-size:clamp(47px,11.1vw,74px);line-height:.9}
 .threshold-line{margin:25px auto}
 .threshold-kicker{font-size:8px;letter-spacing:.13em}
 .threshold-caption{bottom:19%;font-size:12px;max-width:290px;line-height:1.52}
 .threshold-ui{left:20px;right:20px;font-size:7px;letter-spacing:.1em}
 .threshold-ui-top{top:83px}.threshold-ui-bottom{bottom:8%}
 .threshold-rings i{width:66vmin;height:66vmin}
 .threshold-halo{width:105vmax;height:105vmax}
 .threshold-halo-b{width:58vmax;height:58vmax}
 .journey-content h2{font-size:clamp(45px,11.5vw,74px)}
 .journey-atlas{top:53px;right:14px;width:160px;padding:10px 10px 8px}
 .journey-atlas strong{font-size:13px;margin-bottom:5px}
 .journey-atlas p{font-size:10px;margin-bottom:7px}
 .journey-atlas-tags span{font-size:7px;padding:4px 6px}
 .journey-render canvas{filter:none}
 .manifesto{padding-top:75px}
}
@media(max-width:390px){.threshold-copy h2{font-size:clamp(43px,10.7vw,55px)}.threshold-ui-top{top:80px}.threshold-caption{bottom:17%}.journey-atlas{width:145px;right:10px}}
@media(prefers-reduced-motion:reduce){
 .hero-stage,.hero-copy{transform:none!important;translate:none!important;opacity:1!important}
 .threshold-copy,.threshold-copy h2,.threshold-copy .threshold-second,.threshold-caption,.threshold-halo,.threshold-halo-b,.threshold-rings i,.threshold-scan{transition:none!important;transform:none!important}
 .threshold-copy h2:first-of-type{opacity:1!important;position:relative;font-size:clamp(40px,7vw,85px)}
 .threshold-copy .threshold-second{opacity:1!important;position:relative;font-size:clamp(40px,7vw,85px)}
 .threshold-caption{opacity:1!important}
 .threshold-line{opacity:1!important}
}
/* V6 correction: illustrations are visible without WebGL, all chapter text stays clear. */
.journey-sticky.webgl-fallback .journey-fallback-art{z-index:1;opacity:.98;animation:journeyFloat 9s ease-in-out infinite}
.journey-fallback-art .fallback-scene{transition:opacity .65s ease}
.journey-atlas{right:auto;top:auto;left:5.6%;bottom:17%;width:310px;background:linear-gradient(130deg,rgba(7,24,23,.53),rgba(7,24,23,.32));}
.journey-side{display:none}
.journey-stage-caption{bottom:10.5%;opacity:.53}
.journey-bottom{opacity:.45}
@media(max-width:1050px){.journey-atlas{left:4%;bottom:16%;width:245px}}
@media(max-width:700px){
 .journey-atlas{display:none!important}
 .journey-instrument{top:118px!important;left:18px!important;width:164px!important;min-height:0!important;padding:10px 12px!important;gap:5px!important}
 .journey-instrument .instrument-label{font-size:7px}
 .journey-instrument strong{font-size:12px}
 .journey-instrument .instrument-code{font-size:8px}
 .journey-instrument .instrument-bars,.journey-instrument .instrument-status{display:none}
 .journey-sticky.webgl-fallback .journey-fallback-art{left:-22%!important;top:21%!important;width:162%!important;height:50%!important;filter:drop-shadow(0 7px 26px rgba(112,255,166,.17))}
 .journey-rail{top:24%!important;right:12px!important}
 .journey-vignette{background:linear-gradient(180deg,#060c0f 0%,rgba(6,12,15,.17) 14%,rgba(5,11,13,.07) 25%,rgba(5,11,13,.13) 43%,#060c0ff0 69%,#060c0f 100%)}
 .journey-content h2{font-size:clamp(44px,10.9vw,70px);letter-spacing:-.084em}
 .journey-top{top:84px}
 .journey-stage-caption{display:none}
}
@media(prefers-reduced-motion:reduce){.journey-sticky.webgl-fallback .journey-fallback-art{animation:none!important}.journey-fallback-art .fallback-scene{transition:none!important}}
/* Final handset framing — keep a meaningful slice of the hero object in the first viewport. */
@media(max-width:700px){
 .hero-copy{min-height:525px!important;padding-top:31px;padding-bottom:24px}
 .hero-stage{height:455px!important}
 .journey-sticky.webgl-fallback .journey-fallback-art{left:-10%!important;top:15%!important;width:149%!important;height:60%!important}
 .journey-fallback-art text{display:none}
}
@media(max-width:390px){.hero-copy{min-height:518px!important}.hero-stage{height:430px!important}}