/* Native snapping keeps wheel, touch, keyboard and anchor scrolling usable. */
@media(min-width:761px){
 html:not([data-mobile-onboarding=ready]){scroll-snap-type:y mandatory;scroll-padding-top:96px;scroll-behavior:smooth}
 body[data-edition=cloud] #welcome>[data-onboarding-panel]{min-height:calc(100svh - 96px);padding-block:clamp(40px,7svh,90px);scroll-snap-align:start;scroll-snap-stop:always;scroll-margin-top:0;align-content:center}
 body[data-edition=cloud] #welcome>.hero{min-height:calc(100svh - 96px);align-content:center}
 #welcome>.meaning-section,#welcome>.closing-section{display:grid;align-content:center}
 .landing-footer{scroll-snap-align:end}
}
/* The how-it-works chapter stays one chapter; its buttons reveal each step. */
html[data-story-mode=tabs] .journey-track{height:auto;min-height:0}
html[data-story-mode=tabs] .journey-sticky{position:relative;min-height:0}
html[data-story-mode=tabs] .demo-scene{display:none}
html[data-story-mode=tabs] [data-active-step="0"] [data-scene="0"],html[data-story-mode=tabs] [data-active-step="1"] [data-scene="1"],html[data-story-mode=tabs] [data-active-step="2"] [data-scene="2"],html[data-story-mode=tabs] [data-active-step="3"] [data-scene="3"]{display:block;animation:chapter-appear 260ms ease-out}
@keyframes chapter-appear{from{opacity:0;translate:0 10px}to{opacity:1;translate:0 0}}
#welcome>[data-onboarding-panel]::after{content:"";position:absolute;inset:0 calc((100vw - 100%)/-2);z-index:-1;pointer-events:none;background:radial-gradient(ellipse at 72% 30%,#a77be51c,transparent 58%);transform:translate3d(var(--chapter-x,0px),var(--chapter-y,0px),0);opacity:var(--chapter-glow,.7)}
html[data-motion=running] #welcome>[data-onboarding-panel]>.section-intro,html[data-motion=running] #welcome>[data-onboarding-panel]>.section-heading,html[data-motion=running] #welcome>[data-onboarding-panel]>.meaning-statement{translate:0 var(--chapter-copy,0px)}
@media(max-width:760px),(max-height:500px) and (pointer:coarse){
 html[data-mobile-onboarding=ready] #welcome{scroll-behavior:smooth}
 html[data-mobile-onboarding=ready] #welcome>[data-onboarding-panel]::after{inset:0}
}
html[data-motion=paused] #welcome>[data-onboarding-panel]::after{transform:none}
html[data-motion=paused],html[data-motion=paused] #welcome{scroll-behavior:auto!important}
@media(prefers-reduced-motion:reduce){html,#welcome{scroll-behavior:auto!important}#welcome>[data-onboarding-panel]::after{transform:none!important}#welcome>[data-onboarding-panel]>*{translate:none!important;animation:none!important}}
