/* BEYOND THE FLOW / V4 ART DIRECTION */
:root{--journey-accent:#c7ff62;--journey-soft:rgba(199,255,98,.18)}
/* Introduce a physical depth to the hero without making content unreadable. */
.hero-stage{isolation:isolate;}
.hero-stage:after{content:"";position:absolute;inset:0;z-index:1;pointer-events:none;background:linear-gradient(110deg,transparent 20%,rgba(199,255,98,.02) 41%,transparent 53%),radial-gradient(ellipse at 46% 55%,transparent 22%,rgba(2,8,9,.4) 100%)}
.hero-stage .stage-top,.hero-stage .stage-bottom,.hero-stage .stage-chip,.hero-stage .stage-center{z-index:3}
.hero-stage:before{content:"";position:absolute;inset:-30%;z-index:2;pointer-events:none;background:linear-gradient(107deg,transparent 37%,rgba(203,255,226,.07) 49.7%,transparent 50.1%);transform:translateX(-60%);animation:heroLight 11s ease-in-out infinite}
@keyframes heroLight{0%,18%{transform:translateX(-75%)}65%,100%{transform:translateX(85%)}}
.hero-copy .hero-flow{text-shadow:0 0 80px rgba(188,255,94,.12)}
.hero h1{transform:translateZ(0)}
.hero .eyebrow{animation:fadeSlide 900ms ease both}
.hero .hero-index{animation:fadeSlide 1000ms .15s ease both}
.hero h1{animation:fadeSlide 1200ms .26s cubic-bezier(.16,1,.3,1) both}
.hero .hero-subrow{animation:fadeSlide 1000ms .38s ease both}
.hero .hero-actions{animation:fadeSlide 900ms .48s ease both}
@keyframes fadeSlide{from{opacity:0;transform:translateY(24px)}to{opacity:1;transform:translateY(0)}}
/* Whole-body chapter transitions: iris-like luminous panels wipe the scene. */
.journey{--hud-line:rgba(199,255,98,.5);}
.journey-sticky{background:#051111}
.journey-render:after{content:"";position:absolute;inset:0;z-index:2;pointer-events:none;background:repeating-linear-gradient(0deg,transparent,transparent 3px,rgba(255,255,255,.008) 4px);opacity:.33;}
.journey-cut{position:absolute;inset:0;z-index:4;pointer-events:none;opacity:0;overflow:hidden;visibility:hidden}
.journey-cut:before,.journey-cut:after{content:"";position:absolute;inset:-18%;transform:translateX(-130%) skewX(-19deg);background:linear-gradient(90deg,transparent 10%,var(--journey-soft) 36%,rgba(199,255,205,.13) 50%,transparent 88%);}
.journey-cut:after{background:linear-gradient(90deg,transparent 0%,var(--journey-accent) 49.7%,transparent 50.6%);opacity:.52;filter:blur(3px);}
.journey-cut.on{visibility:visible;opacity:1;animation:cutPersist .86s ease both}
.journey-cut.on:before{animation:chapterWipe .86s cubic-bezier(.17,.68,.23,.99) both}
.journey-cut.on:after{animation:chapterWipe .7s .10s cubic-bezier(.17,.68,.23,.99) both}
@keyframes chapterWipe{0%{transform:translateX(-130%) skewX(-19deg)}100%{transform:translateX(130%) skewX(-19deg)}}
@keyframes cutPersist{0%{opacity:0}10%{opacity:1}80%{opacity:1}100%{opacity:0}}
.journey-grid{background-size:90px 90px;opacity:.43;animation:trackingGrid 20s linear infinite}
@keyframes trackingGrid{to{background-position:90px 90px}}
.journey-aura{transition:background .8s,transform .6s;transform:translateY(var(--journey-shift,0px))}
.journey-rail{z-index:10}
.journey-rail button.current{box-shadow:0 0 30px rgba(199,255,98,.13)}
.journey-top{z-index:6}
.journey-content h2{position:relative;text-shadow:0 8px 70px rgba(0,0,0,.56)}
.journey-deck{background:linear-gradient(90deg,rgba(5,16,17,.61),transparent);border-left:1px solid var(--journey-accent);padding:9px 16px;backdrop-filter:blur(2px)}
/* New spatial instrument overlay. Not fake operational telemetry: explicitly conceptual. */
.journey-instrument{position:absolute;left:5.6%;top:26%;width:182px;min-height:160px;z-index:5;border:1px solid rgba(180,255,215,.12);background:linear-gradient(130deg,rgba(7,24,23,.44),rgba(7,24,23,.08));padding:15px;box-shadow:inset 0 1px rgba(224,255,228,.08);backdrop-filter:blur(7px);pointer-events:none;display:flex;flex-direction:column;gap:12px}
.journey-instrument .instrument-label{font-size:9px;letter-spacing:.19em;color:#849e90;font-weight:800}
.journey-instrument strong{display:block;font-size:15px;letter-spacing:-.03em;color:#ebf6ec;white-space:nowrap}
.journey-instrument .instrument-code{font-size:9px;color:var(--journey-accent);letter-spacing:.14em;font-weight:850}
.instrument-bars{height:27px;display:flex;align-items:end;gap:5px;}
.instrument-bars i{display:block;width:6px;min-height:5px;height:calc(16% + (var(--i)*7%));background:var(--journey-accent);opacity:.65;animation:signalWave 1.4s calc(var(--i)*-.15s) infinite alternate ease-in-out;}
.instrument-bars i:nth-child(3n){opacity:.3}
@keyframes signalWave{from{transform:scaleY(.32);transform-origin:bottom;opacity:.35}to{transform:scaleY(1);opacity:.92}}
.instrument-status{display:flex;align-items:center;gap:7px;font-size:8px;letter-spacing:.1em;color:#a3b7a9}
.instrument-status:before{content:"";width:5px;height:5px;border-radius:50%;background:var(--journey-accent);box-shadow:0 0 8px var(--journey-accent)}
/* A technical floor marker gives the renderer a clear stage boundary. */
.journey-stage-caption{position:absolute;left:5.6%;bottom:23%;z-index:6;display:flex;align-items:center;gap:11px;letter-spacing:.18em;color:#b9d6c2;font-size:9px;opacity:.63}
.journey-stage-caption:before{content:"";display:block;width:28px;height:1px;background:var(--journey-accent)}
/* Distinct transition to the free-exploration showroom. */
.journey-exit{position:absolute;z-index:5;bottom:0;left:0;right:0;height:160px;background:linear-gradient(0deg,#050b0d 0%,transparent 100%);pointer-events:none}
.experience-v2{position:relative;background:linear-gradient(#050b0d,#080f10 17%,#080d0d);}
.experience-v2:before{content:"INTERACTIVE MODEL VIEWER";display:block;text-align:center;color:rgba(151,186,154,.4);font-size:10px;letter-spacing:.28em;padding-top:35px}
.experience-frame{box-shadow:0 38px 160px rgba(26,92,69,.10),inset 0 0 80px rgba(0,0,0,.32)}
.exp-card,.project-card{transition:transform .38s cubic-bezier(.14,.69,.17,1),box-shadow .4s,border-color .3s}
.exp-card:hover,.project-card:hover{box-shadow:0 25px 100px rgba(85,170,117,.08)}
@media(max-width:900px){.journey-instrument{top:19%;left:4%;width:148px;padding:12px;gap:8px;min-height:140px}.journey-instrument strong{font-size:12px}.journey-stage-caption{bottom:18%;left:4%}}
@media(max-width:700px){
 .hero-stage:before{opacity:.5}.journey-instrument{top:15%;left:20px;min-height:unset;width:145px;padding:10px;gap:6px;background:rgba(6,21,20,.38)}
 .journey-instrument .instrument-label{font-size:7px}.journey-instrument strong{font-size:12px}.journey-instrument .instrument-code{font-size:7px}
 .instrument-bars{height:13px;gap:3px}.instrument-bars i{width:4px}.instrument-status{font-size:7px}
 .journey-stage-caption{display:none}
 .journey-render canvas{height:74%;top:4%;opacity:.9}
 .journey-content{background:linear-gradient(0deg,rgba(4,11,12,.45),transparent);padding-top:5px}
 .journey-step{padding-bottom:111px;}
 .journey-deck{background:none;padding:0 0 0 12px;line-height:1.52}
 .journey-rail{top:24%;right:16px}
 .experience-v2:before{font-size:8px;padding-top:24px}
}
@media(max-width:390px){.journey-instrument{top:14%;left:15px;width:129px}.journey-rail{right:10px;top:25%}}
@media(prefers-reduced-motion:reduce){.hero-stage:before,.hero .eyebrow,.hero .hero-index,.hero h1,.hero .hero-subrow,.hero .hero-actions,.journey-grid,.instrument-bars i,.journey-cut.on,.journey-cut.on:before,.journey-cut.on:after{animation:none!important}.journey-cut{display:none}.journey-render canvas{transition:none}}

/* Vector fallback is an intentional visual alternative, never an empty stage. */
.hero-stage.webgl-fallback,.experience-frame.webgl-fallback{background:radial-gradient(ellipse at 50% 55%,rgba(43,110,75,.32),transparent 65%),#071313}
.hero-stage.webgl-fallback:before,.experience-frame.webgl-fallback:before{content:none!important}
.hero-fallback-art,.showroom-fallback-art{position:absolute;display:block;pointer-events:none;opacity:.94;z-index:1;filter:drop-shadow(0 14px 40px rgba(85,214,129,.12))}
.hero-fallback-art{height:80%;width:140%;left:-21%;top:8%;animation:journeyFloat 8s ease-in-out infinite}
.showroom-fallback-art{height:100%;width:96%;left:2%;top:0;filter:drop-shadow(0 14px 40px rgba(85,214,129,.14))}
.hero-fallback-art .fallback-scene,.showroom-fallback-art .fallback-scene{opacity:0;transition:opacity .45s ease}
.hero-fallback-art .fallback-scene-0{opacity:1}
.experience-frame[data-scene-mode="warehouse"] .showroom-fallback-art .fallback-scene-0,
.experience-frame[data-scene-mode="data"] .showroom-fallback-art .fallback-scene-1,
.experience-frame[data-scene-mode="automation"] .showroom-fallback-art .fallback-scene-2,
.experience-frame[data-scene-mode="energy"] .showroom-fallback-art .fallback-scene-3{opacity:1}
@media(max-width:700px){.hero-fallback-art{width:138%;height:80%;left:-17%;top:9%;}.showroom-fallback-art{width:164%;height:72%;top:7%;left:-32%}}
@media(prefers-reduced-motion:reduce){.hero-fallback-art{animation:none}.showroom-fallback-art .fallback-scene{transition:none}}

/* Final spacing refinements from desktop/mobile regression captures. */
.hero-v2-counter{top:66px;right:3.2%;font-size:8px;opacity:.8}
.journey-step:last-child .journey-content h2{font-size:clamp(55px,4.9vw,79px)}
@media(max-width:700px){.journey-step:last-child .journey-content h2{font-size:clamp(44px,11.4vw,68px)}}