/* Active scene: one calibrated seated camera, native2560×1440. */
.immersive-hero.hero {height:100svh;min-height:700px;background:transparent;--desk-width:100%;}
.hero .workstation-stage.scene-stage {width:min(calc(100% - 48px),calc((100svh - 32px) * 2560 / 1440));aspect-ratio:2560/1440;bottom:12px;overflow:visible;}
.scene-native {position:absolute;left:0;top:0;width:2560px;height:1440px;transform:scale(var(--scene-scale,.5));transform-origin:0 0;isolation:isolate;pointer-events:none;}
.scene-native .scene-layer,.scene-hardware {position:absolute;max-width:none;display:block;pointer-events:none;}
.scene-native .scene-hardware {inset:0;width:2560px;height:1440px;z-index:3;clip-path:inset(1150px 0 0 0);}
.scene-monitor-assembly {position:absolute;inset:0;width:2560px;height:1440px;transform-origin:0 0;z-index:3;pointer-events:none;}
.scene-native .scene-monitor-hardware {clip-path:inset(0 0 290px 0);}
.immersive-hero .scene-native .scene-sun.white-halo.sun-stage {left:338px;top:151px;width:322px;height:322px;transform:none;z-index:2!important;}
.scene-brand {position:absolute;z-index:6;left:920px;top:213px;width:1480px;pointer-events:auto;}
.scene-eyebrow {font-size:18px;letter-spacing:.18em;color:#a8b7c6;margin:0 0 24px;}
.hero .scene-brand h1.scene-title {font:780 64.4px/.98 Archivo,sans-serif;letter-spacing:-.065em;margin:0;color:#f7fff5;white-space:nowrap;}
.hero .scene-brand h1.scene-title b {color:#19e50f;font-weight:500;}
.hero .scene-brand h1.scene-title .outline {-webkit-text-stroke:1.6px #23d92a;color:transparent;}
.scene-intro {font:500 32px/1.4 Manrope,sans-serif;color:#bdc6cb;margin:27px 0 20px;}
.scene-work-link {color:#d8e4e5;font-size:20px;text-decoration:none;display:inline-flex;gap:30px;padding:6px 0;}
.scene-work-link span {color:#19e50f;}
.scene-native .scene-control[hidden] {display:none;}
.scene-native .scene-control {position:absolute;z-index:7;border:0;padding:0;background:transparent;cursor:pointer;pointer-events:auto;outline-offset:7px;}
.scene-control img {display:block;width:100%;height:100%;transition:filter .22s,transform .2s;}
.scene-control:hover img {filter:brightness(1.12);}
.scene-control:active img,.scene-control.is-pressed img {transform:translateY(3px);}
.scene-control:focus-visible {outline:3px solid #39ff14;border-radius:50%;}
.scene-screen {position:absolute;left:0;top:0;width:800px;height:420px;transform-origin:0 0;z-index:9;overflow:hidden;background:#020604;pointer-events:auto;border-radius:2px;box-shadow:inset 0 0 18px #000a;will-change:auto;}
.scene-carousel {position:absolute;inset:0;background:#04080b;}
.scene-screen-kicker {position:absolute;z-index:3;left:22px;top:17px;font-size:16px;letter-spacing:.09em;color:#edf5f4;padding:8px 12px;background:#02070cd9;border:1px solid #e6f4ee22;border-radius:3px;}
.scene-screen-kicker b {color:#39ff14;font-weight:500;}
.scene-project-slide {position:absolute;inset:0;display:block;color:white;opacity:0;visibility:hidden;pointer-events:none;transition:opacity .8s ease;}
.scene-project-slide.is-active {opacity:1;visibility:visible;pointer-events:auto;}
.scene-project-slide video {display:block;width:100%;height:100%;object-fit:cover;object-position:center top;}
.scene-project-caption {position:absolute;bottom:0;left:0;right:0;min-height:106px;background:linear-gradient(0deg,#02070df5,#02070db8 70%,transparent);display:flex;align-items:center;justify-content:space-between;gap:20px;padding:23px 26px 39px;}
.scene-project-caption>span {display:flex;flex-direction:column;gap:8px;}
.scene-project-caption small {font:400 15px Manrope,sans-serif;color:#afc5cd;}
.scene-project-caption strong {font:650 33px/1.05 Archivo,sans-serif;letter-spacing:-.035em;}
.scene-project-caption>span:last-child {font-size:28px;color:#39ff14;}
.scene-project-dots {position:absolute;z-index:4;bottom:10px;left:18px;right:18px;display:flex;gap:7px;align-items:center;}
.scene-project-dots button {border:0;background:none;color:#dceae6;padding:9px;cursor:pointer;min-width:35px;min-height:30px;}
.scene-project-dots button span {display:block;height:3px;width:29px;background:#dce9e951;transition:background .4s,width .4s;}
.scene-project-dots button[aria-pressed=true] span {background:#19e50f;width:52px;box-shadow:0 0 3px #19e50f88;}
.scene-project-dots .carousel-pause {margin-left:auto;font:500 18px Manrope,sans-serif;}
.scene-textmode .textmode-canvas,.scene-textmode .textmode-fallback {width:100%;height:100%;display:block;}
.scene-flow-caption {position:absolute;bottom:16px;left:21px;font-size:13px;letter-spacing:.15em;color:#b4d5b0;opacity:.65;pointer-events:none;}
.scene-coming {display:flex;flex-direction:column;justify-content:center;align-items:flex-start;padding:33px 50px;text-decoration:none;color:#edf6f2;background:radial-gradient(ellipse at 90% 10%,#34524766,transparent 67%),linear-gradient(135deg,#080f13,#020504 80%);}
.coming-kicker {position:relative;z-index:2;font-size:16px;letter-spacing:.18em;color:#89ae9d;margin-bottom:22px;}
.scene-coming strong {position:relative;z-index:2;font:800 118px/.85 Archivo,sans-serif;letter-spacing:-.055em;}
.scene-coming strong em {font-style:normal;color:transparent;-webkit-text-stroke:1.7px #39ff14;filter:drop-shadow(0 0 2px #19e50f66);}
.coming-project {position:relative;z-index:2;margin-top:24px;font:600 34px/1.2 Archivo,sans-serif;}
.coming-project span {color:#39ff14;display:inline-block;transition:transform .3s;}
.scene-coming:hover .coming-project span {transform:translate(5px,-5px);}
.coming-caption {position:relative;z-index:2;color:#a4b6ad;font-size:17px;margin-top:12px;}
.coming-grid {position:absolute;inset:0;opacity:.12;background-image:linear-gradient(#b3f7c120 1px,transparent 1px),linear-gradient(90deg,#b3f7c120 1px,transparent 1px);background-size:43px 43px;transform:perspective(400px) rotateY(-30deg) scale(1.5);transform-origin:right;}
.coming-portal {position:absolute;right:-220px;top:-80px;width:580px;height:580px;transform:rotate(-20deg) scaleX(.64);opacity:.8;}
.coming-portal i {position:absolute;inset:0;border:2px solid #b8cfc054;border-top-color:#d6ffe3;border-left-color:#39ff1499;border-radius:50%;box-shadow:inset 0 0 22px #5ba57910,0 0 7px #d8e6dc12;animation:comingOrbit 22s linear infinite;}
.coming-portal i:nth-child(2) {inset:45px;animation-direction:reverse;animation-duration:31s;border-width:1px;}
.coming-portal i:nth-child(3) {inset:95px;animation-duration:17s;border-color:#738d8170;border-bottom-color:#39ff14;}
@keyframes comingOrbit {to{transform:rotate(360deg)}}
.table-flow-mask {position:absolute;inset:0;z-index:5;pointer-events:none;mix-blend-mode:screen;mask:url('../scene/table-matrix-mask.webp') 0 0/2560px 1440px no-repeat;-webkit-mask:url('../scene/table-matrix-mask.webp') 0 0/2560px 1440px no-repeat;}
.table-flow-video {position:absolute;left:0;top:0;width:2400px;height:1350px;max-width:none;transform-origin:0 0;display:block;opacity:1;object-fit:fill;pointer-events:none;}
.keyboard-backlight {position:absolute;z-index:10;pointer-events:none;background:#a855f796;mask:url('../scene/keyboard-labels.webp') 0 0/100% 100% no-repeat;-webkit-mask:url('../scene/keyboard-labels.webp') 0 0/100% 100% no-repeat;filter:none;}
.galaxy-light-pulse {animation:galaxyDeskLight 19s ease-in-out infinite;}
@keyframes galaxyDeskLight {0%,29%,62%,100%{opacity:.045}39%{opacity:.32}46%{opacity:.95}52%{opacity:.4}57%{opacity:.13}}
@keyframes galaxyRayTravel {0%,28%{stroke-dashoffset:2200;opacity:0}38%{opacity:.85}57%{stroke-dashoffset:0;opacity:0}100%{stroke-dashoffset:0;opacity:0}}
.scene-mobile-intro {display:none;}
.space-background .galaxy-position {left:calc(50% + var(--scene-unit, .5px)*491);top:calc(var(--scene-top,0px) + var(--scene-unit,.5px)*953);width:calc(var(--scene-unit,.5px)*1936);height:auto;aspect-ratio:1;}
.space-background .galaxy-rotator {animation:none;will-change:auto;}
.space-background .galaxy-rotator>.round-galaxy {width:100%;}
.space-background .galaxy-rotator::before {content:"";position:absolute;inset:15%;background:radial-gradient(ellipse,#b8c9eb2b,transparent 66%);opacity:0;animation:galaxyDeskLight 19s ease-in-out infinite;pointer-events:none;}
.sky-twinkles {position:absolute;inset:0;z-index:4;pointer-events:none;}
.sky-star {position:absolute;width:2px;height:2px;border-radius:50%;background:#eaf6ff;box-shadow:0 0 4px #c1e1ffb0;opacity:.2;animation:starBreathe var(--star-period) ease-in-out infinite;animation-delay:var(--star-delay);}
@keyframes starBreathe {0%,41%,78%,100%{opacity:.08;transform:scale(.6)}52%{opacity:.92;transform:scale(1.15)}61%{opacity:.31;transform:scale(.75)}}
html.studio-tab-hidden .sky-star,html.studio-tab-hidden .galaxy-rotator::before,.scene-paused *,html.studio-save-data .sky-star {animation-play-state:paused!important;}
.hero.comparison-ready .compare-labels {top:140px;bottom:auto;left:3%;right:3%;}
.hero.comparison-ready.immersive-hero .compare-handle {top:48%!important;}
@media(max-width:760px) {
 .immersive-hero.hero {min-height:780px;height:100svh;}
 .hero .workstation-stage.scene-stage {width:calc(100% - 24px);bottom:8px;}
 .scene-brand {display:none;}
 .immersive-hero .scene-native .scene-sun.white-halo.sun-stage {left:338px;top:-2600px;width:800px;height:800px;}
 .scene-mobile-intro {position:absolute;display:flex;flex-direction:column;align-items:flex-start;z-index:18;top:310px;left:25px;right:25px;max-width:440px;}
 .scene-mobile-intro>span {font-size:10px;color:#a0bdad;letter-spacing:.1em;}
 .scene-mobile-intro h2 {font:720 clamp(30px,7vw,46px)/1.04 Archivo,sans-serif;letter-spacing:-.04em;margin:15px 0;}
 .scene-mobile-intro p {font-size:13px;line-height:1.55;color:#aebeb9;max-width:300px;margin:0;}
 .scene-mobile-intro .hero-action {font-size:11px;min-height:44px;padding:12px 15px;margin-top:20px;}
 .hero.comparison-ready .compare-labels {top:285px;bottom:auto;left:18px;right:18px;}
 .hero.comparison-ready .compare-labels>span {font-size:6px;}
 .hero.comparison-ready .compare-labels i {font-size:5px;}
 .hero.comparison-ready.immersive-hero .compare-handle {top:270px!important;}
 .space-background .galaxy-position {width:145vw;left:68%;top:67svh;}

}
@media(prefers-reduced-motion:reduce) {
 .sky-star,.galaxy-light-pulse,.coming-portal i,.space-background .galaxy-rotator::before {animation:none!important;}
 .scene-project-slide,.scene-control img {transition:none;}
}
.scene-screen {box-sizing:border-box;}
.immersive-hero .hero-new>.scene-sun.white-halo.sun-stage {position:absolute;left:30px;top:132px;width:142px;height:142px;transform:none;z-index:12!important;}
@media(max-width:760px) {
 .scene-mobile-intro {top:330px;}
 .hero.comparison-ready .compare-labels {left:80px;top:283px;}
 .hero.comparison-ready.immersive-hero .compare-handle {top:299px!important;}
}
.scene-project-slide {visibility:visible;}
.scene-project-poster {position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:center top;}
.scene-project-slide video {position:relative;opacity:0;transition:opacity .3s ease;}
.scene-project-slide.has-video-frame video {opacity:1;}
@media(prefers-reduced-motion:reduce){.scene-project-slide video{transition:none;}}

html.scene-light-paused .galaxy-rotator::before {animation-play-state:paused!important;}

/* Neutral satin chrome is the underlying material. Warm color belongs to the
   external sun reflections, never to an independently bronze monitor frame. */
.scene-native .scene-hardware {filter:grayscale(1);}
.scene-native {--solar-rgb:255 196 119;--solar-strength:.58;}
.scene-object-shadows {position:absolute;inset:0;width:2560px;height:1440px;z-index:6;pointer-events:none;}

.scene-pad-shadow {position:absolute;inset:0;width:2560px;height:1440px;z-index:3;pointer-events:none;}

/* Precisely split native glass/structure: each original pixel appears once. */
.scene-native .scene-tabletop {position:absolute;inset:0;width:2560px;height:1440px;max-width:none;z-index:3;pointer-events:none;filter:grayscale(1);}
/* Floor belongs to the viewport, not the smaller, inset desk coordinate grid.
   Uniform image scaling keeps the original tile perspective and crisp edges. */
.scene-floor {position:absolute;inset:0;z-index:10;overflow:hidden;pointer-events:none;}
.scene-floor .scene-platform {position:absolute;left:0;bottom:0;display:block;width:100%;height:auto;max-width:none;filter:grayscale(1) brightness(.79) contrast(.94);}
.scene-reflection-field {position:absolute;left:0;top:800px;width:2560px;height:640px;z-index:8;pointer-events:none;contain:strict;mask:url('../scene/monitor-reflection-mask.webp') 0 -800px/2560px 1440px no-repeat;-webkit-mask:url('../scene/monitor-reflection-mask.webp') 0 -800px/2560px 1440px no-repeat;}
/* Sunlight is emitted by the whole sphere; atmosphere is its existing round aura. */
.scene-sun .sun-video,.scene-sun .solar-corona-video {will-change:transform;transform:translateZ(0);backface-visibility:hidden;}

/* Isolate the small solar composition from the large workstation backdrop. */
.scene-sun.white-halo.sun-stage {isolation:isolate;mix-blend-mode:screen;contain:layout style;will-change:transform;}

@media(min-width:761px){.immersive-hero .hero-new>.scene-sun.white-halo.sun-stage{z-index:13!important;}}

/* Quiet hero identity: no inherited kinetic title, scan line or text glow. */
.scene-title,.scene-title span,.scene-title b {animation:none;filter:none;text-shadow:none;}
.scene-title::before,.scene-title::after {content:none;}
.scene-project-caption {min-height:0;padding:14px 26px 46px;}
.scene-project-caption strong {font-size:25px;}
.scene-mobile-intro h2 {font-size:clamp(21px,4.9vw,32.2px);}
.scene-mobile-intro h2 span {color:transparent;-webkit-text-stroke:1px #23d92a;}

.scene-detective img {display:block;width:100%;height:100%;object-fit:cover;object-position:center;}

/* Color only: no blur or glow is added to keyboard lettering. */
.table-flow-video {filter:url('#matrix-laser-green');}
.scene-native .scene-keyboard {filter:url('#keyboard-violet');}
.scene-recording.has-video-frame video {opacity:1;}
.hero[data-comparison-hidden] .hero-old,
.hero.comparison-ready[data-comparison-hidden] .compare-handle,
.hero.comparison-ready[data-comparison-hidden] .compare-labels,
.hero.comparison-ready[data-comparison-hidden] .comparison-overlay {display:none!important;}

/* Mobile stability: baked source pixels, no large SVG color-filter surfaces or
   nested assembly perspective layer. Live screen/video content stays separate. */
.scene-picture {display:contents;}
.scene-mobile-hardware {display:none;}
@media(max-width:760px){
 .scene-native .scene-mobile-hardware {position:absolute;inset:0;display:block;width:2560px;height:1440px;max-width:none;z-index:3;pointer-events:none;}
 .scene-native .scene-hardware,.scene-native .scene-tabletop,.scene-native .scene-layer,.keyboard-backlight {display:none;}
 .scene-monitor-assembly {display:contents;transform:none!important;}
 .scene-native .scene-keyboard,.table-flow-video,.scene-floor .scene-platform {filter:none;}
 .table-flow-mask {mask-image:url('../scene/mobile/matrix-mask.webp');-webkit-mask-image:url('../scene/mobile/matrix-mask.webp');}
 .scene-reflection-field {mask-image:url('../scene/mobile/reflection-mask.webp');-webkit-mask-image:url('../scene/mobile/reflection-mask.webp');}
 .scene-sun .sun-video,.scene-sun .solar-corona-video {will-change:auto;transform:none;}
 .scene-sun.white-halo.sun-stage {will-change:auto;}
}

/* Calibrated seated scene: all geometry, shadows and reflections share one
   offline pinhole camera. Overscan floor and desk use identical pixel scale. */
.immersive-hero {--seated-bottom:12px;}
.seated-native .seated-foreground {position:absolute;inset:0;display:block;width:2560px;height:1440px;max-width:none;z-index:3;pointer-events:none;}
.seated-native .scene-monitor-assembly {display:contents;transform:none;}
.scene-floor .scene-platform {left:50%;bottom:var(--seated-bottom);width:calc(var(--scene-unit,.5px)*4096);height:auto;transform:translateX(-50%);filter:none;}
.seated-native .table-flow-mask {mask-image:url('../scene/seated/glass-mask.webp');-webkit-mask-image:url('../scene/seated/glass-mask.webp');}
.seated-light {position:absolute;left:50%;bottom:var(--seated-bottom);width:calc(var(--scene-unit,.5px)*4096);height:auto;max-width:none;transform:translateX(-50%);z-index:14;pointer-events:none;mix-blend-mode:screen;opacity:0;}
@media(max-width:760px){
 .immersive-hero {--seated-bottom:8px;}
 .seated-native .table-flow-mask {mask-image:url('../scene/seated/glass-mask-mobile.webp');-webkit-mask-image:url('../scene/seated/glass-mask-mobile.webp');}
}
.seated-native .seated-legends {position:absolute;inset:0;display:block;width:2560px;height:1440px;max-width:none;z-index:4;pointer-events:none;}

/* User refinement: rigid frames join at common vertical hinge edges; the
   desk's front edge finishes at the hero bottom with no floating gap. */
.hero .workstation-stage.scene-stage {bottom:0;}
.immersive-hero {--seated-bottom:0px;}
.space-background .galaxy-rotator {animation:galaxyTurn 588.235294s linear infinite;will-change:transform;}
@media(max-width:760px){.space-background .galaxy-rotator {animation-duration:705.882353s;}}
html.scene-light-paused .galaxy-rotator {animation-play-state:paused!important;}
@media(prefers-reduced-motion:reduce){.space-background .galaxy-rotator {animation:none!important;}}
/* Real visible-glass apertures put live content behind the extruded bezels.
   Overscan keeps the complete outer case sides, including their real depth. */
.seated-native .seated-foreground {left:-768px;right:auto;width:4096px;}
.seated-native .scene-screen {z-index:2;}
/* Floor uses the very same transformed native scene, with full-width overscan. */
.seated-native .scene-floor {inset:0 auto auto -768px;width:4096px;height:1440px;z-index:1;overflow:visible;}
.seated-native .scene-floor .scene-platform {left:0;bottom:0;width:4096px;transform:none;}
.scene-title>span:first-child {display:inline-block;color:#f7fff5;-webkit-text-fill-color:#f7fff5;}