:root {
    --motion-gold: #c99432;
    --motion-ink: #17211e;
    --motion-ease: cubic-bezier(.22, 1, .36, 1);
}

html.motion-enabled { scroll-behavior: smooth; }

.scroll-progress {
    position: fixed;
    inset: 0 0 auto;
    z-index: 9999;
    height: 3px;
    overflow: hidden;
    pointer-events: none;
    background: rgba(201,148,50,.08);
}

.scroll-progress__bar {
    width: 100%;
    height: 100%;
    transform: scaleX(0);
    transform-origin: left center;
    background: linear-gradient(90deg, #9f6e1e, #e6bd68 55%, #f4dc9d);
    box-shadow: 0 0 16px rgba(225,184,95,.45);
    will-change: transform;
}

.motion-enabled .motion-reveal {
    --motion-y: 24px;
    --motion-scale: .992;
    opacity: 0;
    filter: blur(3px);
    transform: translate3d(0, var(--motion-y), 0) scale(var(--motion-scale));
    transition:
        opacity .62s var(--motion-ease),
        transform .78s var(--motion-ease),
        filter .58s var(--motion-ease);
    transition-delay: var(--motion-delay, 0ms);
    will-change: opacity, transform, filter;
}

.motion-enabled .motion-reveal.motion-from-down { --motion-y: 24px; }
.motion-enabled .motion-reveal.motion-from-up { --motion-y: -24px; }
.motion-enabled .motion-reveal.motion-scale { --motion-y: 18px; --motion-scale: .965; }

.motion-enabled .motion-reveal.is-motion-visible {
    opacity: 1;
    filter: blur(0);
    transform: translate3d(0, 0, 0) scale(1);
    will-change: auto;
}

.motion-scroll-header {
    transition: transform .48s var(--motion-ease), box-shadow .32s ease !important;
    will-change: transform;
}

body.is-scrolling-down .motion-scroll-header { transform: translate3d(0, -110%, 0); }
body.is-scrolling-up .motion-scroll-header { transform: translate3d(0, 0, 0); box-shadow: 0 12px 30px rgba(15,20,17,.12); }

.scroll-top {
    position: fixed;
    right: clamp(1rem, 2vw, 1.75rem);
    bottom: clamp(1rem, 2vw, 1.75rem);
    z-index: 120;
    width: 46px;
    height: 46px;
    display: grid;
    place-items: center;
    border: 1px solid rgba(225,184,95,.38);
    border-radius: 14px;
    background: rgba(23,33,30,.94);
    color: #e6bd68;
    box-shadow: 0 16px 34px rgba(12,18,15,.22);
    opacity: 0;
    visibility: hidden;
    transform: translate3d(0, 14px, 0) scale(.9);
    transition: opacity .25s ease, visibility .25s ease, transform .42s var(--motion-ease), background .2s ease;
    backdrop-filter: blur(12px);
}

.scroll-top span { display: block; font-size: 1.1rem; font-weight: 900; line-height: 1; transform: translateY(-1px); }
body.has-scrolled .scroll-top { opacity: 1; visibility: visible; transform: translate3d(0,0,0) scale(1); }
.scroll-top:hover { background: #263630; color: #f1d48e; transform: translate3d(0,-3px,0) scale(1); }
.scroll-top:active { transform: translate3d(0,0,0) scale(.96); }
.scroll-top:focus-visible { outline: 3px solid rgba(201,148,50,.42); outline-offset: 3px; }

@media (max-width: 640px) {
    .scroll-progress { height: 2px; }
    .scroll-top { width: 42px; height: 42px; border-radius: 12px; }
    .motion-enabled .motion-reveal { --motion-y: 18px; }
    .motion-enabled .motion-reveal.motion-from-down { --motion-y: 18px; }
    .motion-enabled .motion-reveal.motion-from-up { --motion-y: -18px; }
}

@media (prefers-reduced-motion: reduce) {
    html.motion-enabled { scroll-behavior: auto; }
    .scroll-progress { display: none; }
    .motion-enabled .motion-reveal,
    .motion-enabled .motion-reveal.motion-from-down,
    .motion-enabled .motion-reveal.motion-from-up,
    .motion-enabled .motion-reveal.motion-scale,
    .motion-enabled .motion-reveal.is-motion-visible {
        opacity: 1 !important;
        filter: none !important;
        transform: none !important;
        transition: none !important;
    }
    .motion-scroll-header { transform: none !important; transition: none !important; }
    .scroll-top { transition: none; }
}