/* Motion is opt-in via JS; without JS the page stays visible. */
:root{--ease-out:cubic-bezier(.2,.75,.25,1)}
#motionToggle{width:32px;height:32px;flex-shrink:0;border:1px solid var(--line);border-radius:50%;background:transparent;color:var(--purple);font-size:17px;line-height:1}
.motion-on .reveal-pending{opacity:0}
.motion-on header{animation:header-enter .7s var(--ease-out) both}
.motion-on .hero-caption{animation:soft-enter .8s .12s var(--ease-out) both}
.motion-on .hero-center>.eyebrow{animation:soft-enter .8s .2s var(--ease-out) both}
.motion-on h1{animation:title-enter 1s .28s var(--ease-out) both}
.motion-on .hero-center>p{animation:soft-enter .8s .4s var(--ease-out) both}
.motion-on .hero-buttons{animation:soft-enter .8s .5s var(--ease-out) both}
.motion-on .hero-center .status{animation:soft-enter .8s .62s var(--ease-out) both}
.motion-on .hero-bottom{animation:soft-enter .9s .7s var(--ease-out) both}
.motion-on .art-a{--angle:-9deg;--drift:-10px;animation:window-enter 1s .15s var(--ease-out) backwards,window-float 7s 1.2s ease-in-out infinite}
.motion-on .art-b{--angle:8deg;--drift:10px;animation:window-enter 1.1s .35s var(--ease-out) backwards,window-float 8s 1.6s ease-in-out infinite}
.motion-on .art-c{--angle:5deg;--drift:-7px;animation:window-enter .9s .55s var(--ease-out) backwards,window-float 6.5s 1.9s ease-in-out infinite}
.collage figure{transition:translate .7s var(--ease-out),box-shadow .35s var(--ease-out)}
.motion-on .star{animation:star-drift 6s ease-in-out infinite;transform-origin:center}
.motion-on .star-two{animation-delay:-3s}
.motion-on .status i{animation:status-glow 3s ease-in-out infinite}
.motion-on .brand img{transition:rotate .5s var(--ease-out)}
.motion-on .brand:hover img{rotate:-12deg}
.motion-on button,.motion-on .button,.motion-on .socials a{transition:background-color .3s,border-color .3s,color .3s,box-shadow .3s,transform .35s var(--ease-out)}
.motion-on nav a{position:relative}
.motion-on nav a:after{content:'';position:absolute;left:0;right:0;bottom:-6px;height:2px;background:var(--purple);transform:scaleX(0);transform-origin:left;transition:transform .3s var(--ease-out)}
.motion-on nav a:hover:after,.motion-on nav a:focus-visible:after{transform:scaleX(1)}
.motion-on .gallery img{transition:transform .65s var(--ease-out),filter .5s}
.motion-on .gallery button:hover{box-shadow:0 10px 25px #57317725}
.motion-on .gallery button:hover img{transform:scale(1.045)}
.motion-on .socials a:hover{transform:translateY(-4px);box-shadow:0 6px 0 #bda4d144}
.motion-on .chips span{transition:background .3s,transform .3s}
.motion-on .chips span:hover{transform:rotate(-3deg) translateY(-2px);background:#e6d3f5}
.motion-on .matrix-row button:hover{transform:translateY(-2px);border-color:var(--purple)}
.motion-on .check input{transition:scale .2s}
.motion-on .check input:checked{scale:1.12}
.motion-on .break-row{animation:soft-enter .32s var(--ease-out) both}
.motion-on dialog[open]{animation:dialog-enter .35s var(--ease-out)}
.motion-on dialog[open]::backdrop{animation:backdrop-enter .35s ease-out}
#total,#deposit,#count{font-variant-numeric:tabular-nums}
.motion-rest .collage figure,.motion-rest .star,.motion-rest .status i{animation-play-state:paused!important}
@keyframes soft-enter{from{opacity:0;translate:0 16px}to{opacity:1;translate:0 0}}
@keyframes header-enter{from{opacity:0;translate:0 -16px}to{opacity:1;translate:0 0}}
@keyframes title-enter{from{opacity:0;translate:0 22px;scale:.96}to{opacity:1;translate:0 0;scale:1}}
@keyframes window-enter{from{opacity:0;transform:translateY(35px) rotate(0deg) scale(.94)}to{opacity:1;transform:translateY(0) rotate(var(--angle)) scale(1)}}
@keyframes window-float{0%,100%{transform:translateY(0) rotate(var(--angle))}50%{transform:translateY(var(--drift)) rotate(calc(var(--angle) + 1deg))}}
@keyframes star-drift{0%,100%{transform:translateY(0) rotate(-7deg);opacity:.85}50%{transform:translateY(-8px) rotate(8deg);opacity:1}}
@keyframes status-glow{0%,100%{box-shadow:0 0 0 3px #e8d8f6}50%{box-shadow:0 0 0 7px #e8d8f600}}
@keyframes dialog-enter{from{opacity:0;translate:0 16px;scale:.98}to{opacity:1;translate:0 0;scale:1}}
@keyframes backdrop-enter{from{opacity:0}to{opacity:1}}
@media(hover:hover){.motion-on .collage figure:hover{box-shadow:8px 18px 30px #56306425}}
@media(max-width:600px){.header-actions{gap:7px}#motionToggle{width:26px;height:26px;font-size:14px}.motion-on .art-a,.motion-on .art-b,.motion-on .art-c{--drift:-4px}.motion-on .star{animation-duration:9s}}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto!important}*,*::before,*::after{animation:none!important;transition:none!important}.reveal-pending{opacity:1!important}.collage figure{translate:none!important}}

@media(max-width:600px){
 .motion-on .hero .collage .art-a{--angle:-4deg;--drift:-3px}
 .motion-on .hero .collage .art-b{--angle:4deg;--drift:-3px}
 .motion-on .hero .collage .art-c{--angle:2deg;--drift:-2px}
 .hero .collage figure{translate:none!important}
}