/* R07: preserve the composition. Scroll owns the story; CSS owns quiet presence. */
html,body,.hero-story{overflow-anchor:none}
.hero-story{height:1669.03097834svh}
.world-float,.is-ready .world-float{animation:presence-drift 22s ease-in-out infinite alternate;animation-play-state:running}
.atmosphere{animation:ambient-atmosphere 27s ease-in-out infinite alternate;will-change:transform,opacity}
.surface-reflection,.is-ready .surface-reflection{animation:ambient-glass 31s ease-in-out infinite alternate;opacity:.30;will-change:transform}
.praxis-signal[data-mode=arrival] .signal-flow{stroke-width:3;stroke:#a1e6d9}
.praxis-signal[data-mode=arrival] .signal-head{r:3.7px}
.praxis-signal[data-mode=responsive] .signal-flow{stroke-width:2.6;stroke:#a1d7cd;stroke-dasharray:.29 1;stroke-dashoffset:calc(.29 - var(--route-progress))}
.praxis-signal[data-mode=settle] .signal-flow{stroke:#d99a62;stroke-width:3}
.praxis-signal[data-mode=settle] .signal-bed{opacity:.12;stroke:#d99a62}
@keyframes presence-drift{from{translate:-1px -3px;rotate:-.10deg}to{translate:1px 3px;rotate:.10deg}}
@keyframes ambient-atmosphere{from{translate:-1.5% -.6%;opacity:.68}to{translate:1.5% .6%;opacity:.9}}
@keyframes ambient-glass{from{transform:translate3d(-24%,0,0)}to{transform:translate3d(24%,0,0)}}
.ambient-paused *,.ambient-paused *::before,.ambient-paused *::after{animation-play-state:paused!important}
.scroll-active .world-float,.scroll-active .surface-reflection,.scroll-active .atmosphere{animation-play-state:paused!important}
.reduced-scene .world-float,.reduced-scene .atmosphere,.reduced-scene .surface-reflection{animation:none!important;transform:none;translate:none;rotate:none}
@media(max-width:600px){.hero-story{height:1417.98602180svh}.world-float,.is-ready .world-float{animation-duration:28s}.surface-reflection{opacity:.20}}
.reduced-scene .hero-story{height:100svh}
@media(prefers-reduced-motion:reduce){.world-float,.atmosphere,.surface-reflection{animation:none!important;transform:none;translate:none;rotate:none}}

/* R09: shorter anticipation, deliberate craft, unchanged R08 hold travel. */

.scroll-active.is-story-hold:not(.motion-paused):not(.ambient-paused):not(.reduced-scene) :is(.world-float,.surface-reflection,.atmosphere){animation-play-state:running!important}

/* During the portrait showcase, lighting recedes while the product takes the space. */
:root{--showcase:0;--portrait-presence:0}
.environment{background:radial-gradient(ellipse at 79% 45%,rgb(18 56 61 / calc(.396 - var(--showcase)*.10)),transparent 50%),linear-gradient(130deg,#07090b 28%,#101a1e 69%,#0a0f12)}
@keyframes ambient-atmosphere{from{translate:-1.5% -.6%;opacity:calc(.68*(1 - var(--showcase)*.28))}to{translate:1.5% .6%;opacity:calc(.9*(1 - var(--showcase)*.28))}}
.beam-one{opacity:calc(1 - var(--showcase)*.25)}
.beam-two{opacity:calc(.48 - var(--showcase)*.16)}
.is-transforming .beam-two{opacity:calc(.12 - var(--showcase)*.03)}
.story-heading{translate:0 calc(var(--portrait-presence)*-34px)}
.product-shell{border-radius:calc(10px + var(--tablet-shape)*4px + var(--phone-shape)*16px)}
@media(max-width:600px){.beam-one{opacity:calc(.35 - var(--showcase)*.09)}.story-heading{translate:0 calc(var(--portrait-presence)*-18px)}.product-shell{border-radius:calc(7px + var(--tablet-shape)*3px + var(--phone-shape)*10px)}}