.scroll-top{position:fixed;z-index:8;right:22px;bottom:22px;border:1px solid #ddc9a766;background:#171411c9;color:#eee5d5;border-radius:30px;padding:10px 16px;font:9px 'DM Sans',sans-serif;letter-spacing:1px;backdrop-filter:blur(10px)}
@media(prefers-reduced-motion:no-preference){
html.motion-on .hero-slide{transition:opacity 1.8s ease;transform:scale(1.035)}
html.motion-on .hero-slide.is-drifting{animation:photo-drift 12s ease-out both}
html.motion-on .hero-copy{animation:hero-arrive 1.8s .15s both}
html.motion-on .hero-bottom>a span{display:inline-block;animation:thread-down 2.4s ease-in-out infinite}
html.motion-on .welcome-logomark{animation:mark-rock 4.5s ease-in-out infinite alternate}
html.motion-on .motion-reveal{opacity:0;translate:0 36px;transition:opacity 1.2s ease,translate 1.2s cubic-bezier(.2,.7,.2,1);transition-delay:var(--reveal-delay,0ms)}
html.motion-on .motion-reveal.is-visible{opacity:1;translate:0 0}
html.motion-on .study-frame img,html.motion-on .winter-image img,html.motion-on .interlude>img{translate:0 var(--photo-shift,0px);scale:1.09;will-change:translate}
html.motion-on .winter-image,html.motion-on .study-frame{overflow:hidden}
html.motion-on .slide-controls .selected{position:relative;border-color:transparent}
html.motion-on .slide-controls .selected:after{content:'';position:absolute;left:0;bottom:0;width:100%;height:1px;background:var(--gold);transform-origin:left;animation:slide-progress 9s linear both}
html.motion-paused *,html.motion-paused *:before,html.motion-paused *:after{animation-play-state:paused!important}
html.motion-on .product-image img{transition:transform .9s cubic-bezier(.2,.7,.2,1)}
html.motion-on .product:hover img{transform:scale(1.07)}
html.motion-on dialog[open]{animation:dialog-arrive .35s ease-out}
@keyframes photo-drift{from{transform:scale(1.035) translateX(0)}to{transform:scale(1.105) translateX(-.6%)}}
@keyframes hero-arrive{from{opacity:0;translate:0 24px}to{opacity:1;translate:0 0}}
@keyframes thread-down{0%,100%{transform:translateY(0);opacity:.6}50%{transform:translateY(8px);opacity:1}}
@keyframes mark-rock{from{rotate:-8deg}to{rotate:8deg}}
@keyframes slide-progress{from{transform:scaleX(0)}to{transform:scaleX(1)}}
@keyframes dialog-arrive{from{opacity:0;translate:0 12px}to{opacity:1;translate:0 0}}
}
html.motion-paused .motion-reveal{opacity:1;translate:0 0;transition:none}
@media(max-width:480px){.scroll-top{right:12px;bottom:12px;font-size:8px;padding:9px 12px}}

@media(max-width:800px){.hero-bottom{flex-wrap:wrap;gap:10px}.hero-bottom>.hero-caption{display:block;order:-1;flex-basis:100%;font-size:8px;letter-spacing:1.4px}.slide-controls{gap:9px}}

.scroll-top[hidden]{display:none}.scroll-top{cursor:pointer}.scroll-top:hover,.scroll-top:focus-visible{border-color:#ddc9a7;background:#232b29}

@media(prefers-reduced-motion:no-preference){
html.motion-on .interlude>img{scale:1.24}
html.motion-on .interlude-logomark{animation:interlude-mark-rock 7s ease-in-out infinite alternate;transform-origin:50% 65%;will-change:rotate}
@keyframes interlude-mark-rock{from{rotate:-5deg}to{rotate:5deg}}
}