/* Motion supports the product narrative without changing layout or scroll. */
:root{--motion-ease:cubic-bezier(.22,.8,.25,1)}
.site-header{transition:background .35s ease,box-shadow .35s ease}
.site-header.has-scrolled{background:#08090af2;box-shadow:0 12px 36px #0003}
.screen-underlay{translate:0 var(--layer-drift,0px)}
.layered-shot>.image-open{translate:0 calc(var(--layer-drift,0px) * -.25)}
.js .chapter-heading.in-view h2{animation:title-arrive .85s var(--motion-ease) both}
.js .chapter-heading.in-view .chapter-description{animation:copy-arrive .85s var(--motion-ease) .14s both}
.js .layered-shot.in-view>.screen-underlay{animation:back-arrive 1.35s var(--motion-ease) both}
.js .layered-shot.in-view>.image-open{animation:front-arrive 1.15s var(--motion-ease) .14s both}
.layered-shot:before{animation:ambient-light 9s ease-in-out infinite alternate;animation-play-state:paused}
.motion-active .layered-shot.motion-visible:before{animation-play-state:running}
.js .feature-specs.in-view button,.js .update-list.in-view button{animation:item-arrive .65s var(--motion-ease) both;animation-delay:calc(var(--item-order,0) * 75ms)}
.hero-controls [role=group]{position:relative;isolation:isolate;padding:4px;gap:0;background:#ffffff04;border-radius:999px}
.hero-controls [data-scene-button]{position:relative;padding:10px 18px;min-height:42px;z-index:1;transition:color .25s}
.scene-indicator{position:absolute;z-index:0;left:0;top:4px;bottom:4px;border-radius:999px;background:linear-gradient(160deg,#ffffff0d,#ffffff06);box-shadow:inset 0 1px 0 #ffffff0a;transform-origin:left center;pointer-events:none}
.hero-controls .scene-progress{left:25%;width:50%;bottom:4px;background:#c8bbdf88}
.feature-specs button{transition:color .2s ease}
.feature-specs button>span{transition:color .2s,rotate .35s var(--motion-ease)}
.feature-specs button:hover>span,.feature-specs button:focus-visible>span{rotate:90deg;color:var(--accent)}
.hero-download span,.update-list button>span,.principle-cards button>span{display:inline-block;transition:color .2s,rotate .3s var(--motion-ease)}
.hero-download:hover span,.update-list button:hover>span,.principle-cards button:hover>span{rotate:45deg;color:var(--lavender)}
.button,.nav-download{transition:background .2s,color .2s,box-shadow .3s}
.button-primary:hover,.nav-download:hover{box-shadow:0 0 32px #ffffff0a}
dialog[open]:not(.spec-dialog){animation:modal-arrive .32s var(--motion-ease) both}
dialog[open]:not(.spec-dialog)::backdrop{animation:backdrop-arrive .32s ease both}
@keyframes title-arrive{from{opacity:0;transform:translateY(22px)}to{opacity:1;transform:none}}
@keyframes copy-arrive{from{opacity:0;transform:translateY(18px)}to{opacity:1;transform:none}}
@keyframes back-arrive{from{opacity:0;transform:perspective(1600px) translate(-24px,38px) rotateX(4deg) rotateY(5deg)}to{opacity:.55;transform:perspective(1600px) rotateX(2deg) rotateY(3deg)}}
@keyframes front-arrive{from{opacity:0;transform:translate(24px,40px) scale(.985)}to{opacity:1;transform:none}}
@keyframes item-arrive{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}
@keyframes ambient-light{from{opacity:.55}to{opacity:1}}
@keyframes modal-arrive{from{opacity:0;transform:translateY(12px) scale(.985)}to{opacity:1;transform:none}}
@keyframes backdrop-arrive{from{opacity:0}to{opacity:1}}
@media(max-width:540px){.hero-controls{gap:12px}.hero-controls [data-scene-button]{padding:9px 12px;white-space:nowrap}.hero-controls [role=group]{gap:0;flex-shrink:0}.scene-pause{flex-shrink:0}.js .layered-shot.in-view>.screen-underlay{animation-name:back-arrive-mobile}.screen-underlay,.layered-shot>.image-open{translate:none}}
@keyframes back-arrive-mobile{from{opacity:0;transform:translate(-10px,20px)}to{opacity:.5;transform:none}}
@media(prefers-reduced-motion:reduce){.js .chapter-heading.in-view h2,.js .chapter-heading.in-view .chapter-description,.js .layered-shot.in-view>.screen-underlay,.js .layered-shot.in-view>.image-open,.js .feature-specs.in-view button,.js .update-list.in-view button,.layered-shot:before,dialog[open]:not(.spec-dialog),dialog[open]:not(.spec-dialog)::backdrop{animation:none!important}.screen-underlay,.layered-shot>.image-open{translate:none!important}.site-header,.hero-controls [data-scene-button],.feature-specs button,.feature-specs button>span,.hero-download span,.update-list button>span,.principle-cards button>span,.button,.nav-download{transition:none!important}}