/* Native-scroll camera movement through three digital gallery chambers. */
.walk-space,.walk-instruction{display:none}
/* Text remains readable; the background and interface carry the motion. */
.motion-enabled body:has(.digital-evolution) .scroll-reveal{opacity:1!important}
.motion-enabled body:has(.digital-evolution) :is(h1,h2).scroll-reveal{transform:none!important}
body:has(.digital-evolution) .bridge-stage h2,
body:has(.digital-evolution) .bridge-stage h2>span{opacity:1!important;transform:none!important}
body:has(.digital-evolution) .bridge-stage{gap:0}
body:has(.digital-evolution) .bridge-stage h2{line-height:1.18;margin:36px 0;max-width:22ch}
body:has(.digital-evolution) .bridge-stage .text-link{position:relative;margin-top:0;line-height:1.4;flex:none}
body:has(.digital-evolution) .transformation-story .story-chapters li{opacity:1}
body:has(.digital-evolution) .transformation-story .story-chapters li.is-current{border-left:2px solid #799893;padding-left:12px}
/* Arrival motion only: comparison controls never follow scroll. */
.redesign-comparison{touch-action:pan-y}
/* A visible, replayable entrance begins when the preview itself is in view. */
.comparison-entrance-slot{perspective:1200px;position:relative}
.motion-enabled body:has(.digital-evolution) .comparison-in-view .comparison{
 animation:comparison-surface-arrival 1600ms cubic-bezier(.18,.72,.2,1) both,comparison-frame-light 2100ms ease-out both;
 transform-origin:center 70%;
}
.motion-enabled body:has(.digital-evolution) .comparison-in-view .scene-tabs{animation:comparison-tabs-arrival 1000ms cubic-bezier(.16,1,.3,1) both}
@keyframes comparison-surface-arrival{
 0%{translate:0 85px;scale:.88;transform:rotateX(9deg)}
 65%{translate:0 -5px;scale:1.008;transform:rotateX(-.6deg)}
 100%{translate:0 0;scale:1;transform:rotateX(0)}
}
@keyframes comparison-frame-light{
 0%{box-shadow:0 35px 45px -20px #25393c66,0 0 0 1px #d0b88e00}
 35%{box-shadow:0 20px 35px -15px #25393c55,0 0 0 3px #d0b88eaa,0 0 25px #d0b88e44}
 100%{box-shadow:0 8px 18px -12px #25393c33,0 0 0 0 #d0b88e00}
}
@keyframes comparison-tabs-arrival{from{translate:0 18px}to{translate:0 0}}
/* Separate readable lines settle in sequence; none waits at reduced opacity. */
.motion-enabled body:has(.digital-evolution) .bridge-stage.motion-arrived h2>span{animation:bridge-line-arrival 1100ms cubic-bezier(.16,1,.3,1) both;--arrival-x:-45px}
.motion-enabled body:has(.digital-evolution) .bridge-stage.motion-arrived h2>span:nth-child(2){--arrival-x:45px;animation-delay:140ms}
.motion-enabled body:has(.digital-evolution) .bridge-stage.motion-arrived h2>span:nth-child(3){--arrival-x:-30px;animation-delay:280ms}
body:has(.digital-evolution) .bridge-stage h2 em{position:relative;display:inline-block}
body:has(.digital-evolution) .bridge-stage h2 em:after{content:'';position:absolute;left:0;right:0;bottom:-.06em;height:1px;background:linear-gradient(90deg,transparent,#d0b88e 20%,#f8e5b9 75%,transparent);scale:0 1;transform-origin:left}
.motion-enabled body:has(.digital-evolution) .bridge-stage.motion-arrived h2 em:after{animation:bridge-gold-trace 1600ms cubic-bezier(.2,.7,.2,1) 450ms both}
.motion-enabled body:has(.digital-evolution) .bridge-stage.motion-arrived .text-link>span{animation:bridge-arrow-arrival 1300ms ease-in-out 500ms both}
@keyframes bridge-line-arrival{from{translate:var(--arrival-x) 28px;scale:.98}to{translate:0 0;scale:1}}
@keyframes bridge-gold-trace{0%{scale:0 1;opacity:0}25%{opacity:1}100%{scale:1 1;opacity:1}}
@keyframes bridge-arrow-arrival{0%,100%{translate:0 0}45%{translate:0 9px}}
@media(prefers-reduced-motion:reduce){
 body:has(.digital-evolution) .signature-lab,
 body:has(.digital-evolution) .comparison-in-view .comparison,
 body:has(.digital-evolution) .comparison-in-view .scene-tabs,
 body:has(.digital-evolution) .bridge-stage h2>span,
 body:has(.digital-evolution) .bridge-stage h2 em:after,
 body:has(.digital-evolution) .bridge-stage .text-link>span{animation:none!important;translate:none;scale:none}
}
/* A single JS playhead owns motion; CSS transitions must not lag behind it. */
.walk-live .work-scene,.walk-live .walk-room,.walk-live .scene-site,.walk-live .scene-canvas>img{transition:none!important}
.atelier-live .digital-walkthrough{height:430svh!important}
body:has(.digital-evolution) .digital-walkthrough .worlds-stage{background:radial-gradient(ellipse at 50% 45%,#34464b 0%,#1a242b 48%,#111a20 90%);isolation:isolate}
.walk-live .worlds-stage{padding:24px 5% 24px;overflow:clip}
.walk-live .worlds-heading{position:relative;z-index:25;flex:none;padding-bottom:16px}
.walk-live .walk-instruction{position:relative;z-index:25;display:flex;align-items:center;gap:18px;padding:12px 0;font:11px var(--ui);color:#b9c9c7}
.walk-position{margin-left:auto;color:#d4c2a2}
.walk-route{display:flex;align-items:center;gap:5px}.walk-route i{display:block;width:6px;height:6px;border:1px solid #a0b9b7;border-radius:50%}.walk-route i.is-current{background:#d0b88e;border-color:#d0b88e;box-shadow:0 0 12px #d0b88e77}.walk-route b{display:block;width:20px;height:1px;background:#819a9b66}
.atelier-live .walk-live .worlds-track{perspective:1050px;perspective-origin:50% 52%;overflow:clip;isolation:isolate;transform-style:preserve-3d;margin:10px 0 14px}
.walk-live .walk-space{display:block;position:absolute;inset:0;transform-style:preserve-3d;pointer-events:none}
.walk-room{position:absolute;inset:0;transform-style:preserve-3d;transform:translateX(var(--walk-pan,0px)) translateZ(var(--room-z,0px));opacity:var(--room-opacity,1);will-change:transform;--room-tint:#9aa9a3}
.walk-room[data-room="1"]{--room-tint:#b19baa}.walk-room[data-room="2"]{--room-tint:#88a49e}
.walk-room:before{content:'';position:absolute;inset:0;transform:translateZ(-1450px);background:radial-gradient(ellipse at 50% 50%,#32474e,#14212a 80%)}
.room-frame{position:absolute;inset:-5% -3%;border:1px solid #b8c2ba88;box-shadow:0 0 0 9px #25363ccc,0 0 0 10px #9caaa44d,inset 0 0 50px #07151a77;background:linear-gradient(90deg,#9baea818,transparent 8%,transparent 92%,#9baea818);transform:translateZ(-120px);border-radius:3px}
.room-frame>span{position:absolute;right:18px;top:12px;font:12px var(--ui);letter-spacing:.2em;color:var(--room-tint)}
.room-wall{position:absolute;top:-5%;height:110%;width:1500px;background:linear-gradient(0deg,#101c24,#30464c 60%,#14232d);border:1px solid #80979555;backface-visibility:hidden}
.room-left{left:-3%;transform-origin:left center;transform:rotateY(90deg)}
.room-right{right:-3%;transform-origin:right center;transform:rotateY(-90deg)}
.room-floor,.room-ceiling{position:absolute;left:-3%;width:106%;height:1500px;background-color:#1e2c32;background-image:linear-gradient(90deg,#b8c8ba22 1px,transparent 1px),linear-gradient(#b8c8ba22 1px,transparent 1px);background-size:90px 130px;border:1px solid #82968b44}
.room-floor{top:105%;transform-origin:center top;transform:rotateX(-90deg);box-shadow:inset 0 0 180px #070d13}
.room-ceiling{bottom:105%;transform-origin:center bottom;transform:rotateX(90deg);background:linear-gradient(90deg,#18262e,#3a4b50 50%,#18262e)}
.room-light{position:absolute;left:8%;right:8%;height:2px;top:-4%;background:#d8ded0;box-shadow:0 0 12px #e2e4ca,0 0 50px 8px #c6d5c433;transform:translateZ(100px)}
.room-light{opacity:calc(1 - var(--room-away,0))}
.atelier-live .walk-live .work-scene{inset:5% 4%;padding:14px 0;gap:5%;grid-template-columns:.7fr 1.5fr;transform:translateX(calc(var(--room-pass,0)*-140%)) translateZ(var(--room-z,0px)) rotateY(calc(var(--room-pass,0)*-60deg));opacity:var(--room-opacity,1);transform-origin:15% center;will-change:transform;backface-visibility:hidden}
.atelier-live .walk-live .work-scene:nth-of-type(2){transform:translateX(calc(var(--room-pass,0)*140%)) translateZ(var(--room-z,0px)) rotateY(calc(var(--room-pass,0)*60deg));transform-origin:85% center}
.walk-live .scene-editorial{position:relative;z-index:2;padding:20px;background:linear-gradient(90deg,#17232bef,#17232bc4);border-left:1px solid #b6bca966;box-shadow:0 14px 50px #02080c44}
body:has(.digital-evolution) .walk-live .scene-editorial h3{font-size:clamp(29px,3vw,43px);line-height:1.04;margin:15px 0}
body:has(.digital-evolution) .walk-live .scene-editorial>p{font-size:17px}
.walk-live .scene-editorial .text-link{font-size:16px}
body:has(.digital-evolution) .walk-live .scene-site{transform:none!important;box-shadow:0 30px 75px #0009,0 0 25px #d9e3cc11;border-color:#99aaa488;background-clip:padding-box}
.atelier-live .walk-live .scene-canvas{height:clamp(190px,33svh,370px)}
.walk-live .worlds-bottom{position:relative;z-index:30;padding-top:16px;background:linear-gradient(transparent,#152028 28%)}
.walk-live .worlds-bottom>p{font-size:12px}
.walk-live .worlds-stops button{font-size:13px}
.walk-live .scene-site-copy>p{font-size:clamp(29px,3.3vw,48px)}
@media(max-width:899px){
 .walk-live .worlds-stage{padding:18px 6% 20px}
 .walk-live .worlds-heading h2{font-size:32px}
 .walk-live .walk-instruction{font-size:10px;gap:10px;padding:10px 0}
 .walk-route b{width:12px}
 .atelier-live .walk-live .worlds-track{perspective:850px;margin:8px 0 16px}
 .atelier-live .walk-live .work-scene{inset:4% 2%;gap:12px;padding:5px 0;justify-content:center}
 .walk-live .scene-editorial{padding:10px 13px;box-shadow:none;border-left:2px solid #acb7ad88}
 body:has(.digital-evolution) .walk-live .scene-editorial h3{font-size:25px;margin:7px 0}
 .walk-live .scene-editorial .text-link{font-size:13px;min-height:28px}
 .atelier-live .walk-live .scene-site{flex:1;display:flex;flex-direction:column;min-height:180px}
 .atelier-live .walk-live .scene-canvas{height:auto;flex:1;min-height:0}
 .atelier-live .walk-live .scene-nav,.atelier-live .walk-live .scene-foot{flex:none}
 .walk-live .scene-site-copy{top:14%}
 .walk-live .scene-site-copy>p{margin:9px 0 12px!important}
 .walk-live .scene-site-copy>p{font-size:clamp(26px,5vw,38px)}
 .walk-live .room-frame{inset:0 -2%;transform:translateZ(-100px)}
 .walk-live .room-frame>span{display:none}
 .walk-live .worlds-bottom>p{font-size:11px}
 .walk-live .worlds-stops{padding-right:0;gap:5px}
 .walk-live .worlds-stops button{font-size:12px;padding:8px 9px;flex:1}
 .walk-live .worlds-bottom{padding-bottom:44px}
}
@media(max-width:480px){
 .walk-live .worlds-heading h2{font-size:28px}
 .walk-live .walk-route{display:none}
 body:has(.digital-evolution) .walk-live .scene-editorial h3{font-size:22px}
 .walk-live .scene-editorial .eyebrow{font-size:9px}
 .walk-live .scene-nav b{font-size:17px}.walk-live .scene-nav>span{font-size:8px}
 .walk-live .scene-foot{font-size:9px}
 .walk-live .worlds-stops button{font-size:10px;padding:8px 5px}
 .walk-live .scene-site-copy>span:first-child{font-size:9px}
 .walk-live .scene-link{font-size:10px}
}
@media(prefers-reduced-motion:reduce){.walk-space,.walk-instruction{display:none!important}}
@media(max-width:899px) and (min-height:650px) and (max-height:739px){
 .walk-live .worlds-heading .eyebrow,.walk-live .worlds-bottom>p,.walk-live .scene-editorial .eyebrow{display:none}
 .walk-live .worlds-heading{padding-bottom:8px}
 .walk-live .worlds-heading h2{font-size:26px}
 .walk-live .walk-instruction{padding:6px 0}
 .walk-live .scene-editorial{padding:7px 10px}
 body:has(.digital-evolution) .walk-live .scene-editorial h3{font-size:20px;margin:5px 0}
 .walk-live .scene-site-copy>span:first-child{display:none}
 body:has(.digital-evolution) .walk-live .scene-site-copy>p{font-size:25px}
 .walk-live .scene-site-copy{top:12%;bottom:auto}
 .walk-live .worlds-bottom{padding-top:8px}
}