/* One movement language. No scroll hijacking, continuous effects or permanent layers. */
:root {
    --motion-settle: cubic-bezier(.22, 1, .36, 1);
    /* A touch of overshoot for interactions that should feel alive rather than merely eased -
       hover lifts, panel reveals, the nav stagger. Reserved for those; settling motion (press
       release, focus rings) keeps --motion-settle so nothing feels bouncy that shouldn't. */
    --motion-spring: cubic-bezier(.34, 1.56, .64, 1);
    --motion-quick: 160ms;
    --motion-hover: 260ms;
}

/* A light layer behind card content preserves original backgrounds and hit areas. */
@media (prefers-reduced-motion: no-preference) and (hover: hover) and (pointer: fine) {
    #app :where(.tool, .widget-watch, .widget-note, .concept-widget) { position: relative; isolation: isolate; }
    #app :where(.tool, .widget-watch, .widget-note, .concept-widget)::after {
        content: "";
        position: absolute;
        inset: 0;
        z-index: -1;
        pointer-events: none;
        border-radius: inherit;
        opacity: 0;
        background: radial-gradient(420px circle at var(--light-x, 50%) var(--light-y, 0%),
            color-mix(in srgb, var(--accent) 22%, transparent), transparent 75%);
        transition: opacity 420ms var(--motion-settle);
    }
    #app :where(.tool, .widget-watch, .widget-note, .concept-widget)[data-motion-lit]::after { opacity: 1; }
    #app .intro[data-motion-lit] {
        box-shadow: inset 0 1px 0 color-mix(in srgb, var(--accent) 45%, transparent),
            0 24px 64px -24px color-mix(in srgb, var(--accent) 25%, transparent);
    }
}

html { scroll-padding-top: 6rem; }
#main-content :where([id]) { scroll-margin-top: 6rem; }

/* Color/focus feedback also remains useful without animation and on touch. */
#app :where(button, a.btn, a.hero-link, [role="tab"]):not(.ascii-illustration *) {
    transition: color var(--motion-quick) ease, background-color var(--motion-hover) ease,
        border-color var(--motion-hover) ease, box-shadow var(--motion-hover) ease,
        translate var(--motion-hover) var(--motion-settle), scale 240ms var(--motion-settle);
}
#app :where(a[href], button, input, select, textarea, summary):focus-visible {
    outline: 2px solid var(--accent);
    outline-offset: 4px;
}
#app :where(.watchlist a, .nav-more-panel a, .site-nav a, .site-footer-links a) {
    transition: color var(--motion-quick) ease, background-color var(--motion-hover) ease,
        translate var(--motion-hover) var(--motion-settle);
}

@media (prefers-reduced-motion: no-preference) {
    /* One finite metal highlight per hover/focus; no looping shine or extra DOM. */
    #app :where(a.btn, button.btn, .hero-link) {
        background-image: linear-gradient(110deg, transparent 30%, rgb(255 255 255 / .24) 48%, transparent 66%);
        background-size: 250% 100%;
        background-position: 160% 0;
        background-repeat: no-repeat;
    }
    @media (hover: hover) and (pointer: fine) {
        #app :where(a.btn, button.btn, .hero-link):not(:disabled, [aria-disabled="true"]):hover {
            animation: metal-pass 480ms var(--motion-settle);
        }
    }
    #app :where(a.btn, button.btn, .hero-link):not(:disabled, [aria-disabled="true"]):focus-visible {
        animation: metal-pass 480ms var(--motion-settle);
    }
    @keyframes metal-pass { from { background-position: 160% 0; } to { background-position: -60% 0; } }

    /* Nav items follow the panel instead of appearing as one hard block. */
    #app .nav-more-panel.is-open .nav-item {
        animation: nav-follow 360ms var(--motion-spring) backwards;
    }
    #app .nav-more-panel.is-open .nav-item:nth-child(2) { animation-delay: 45ms; }
    #app .nav-more-panel.is-open .nav-item:nth-child(3) { animation-delay: 90ms; }
    #app .nav-more-panel.is-open .nav-item:nth-child(n+4) { animation-delay: 135ms; }
    @keyframes nav-follow { from { opacity: 0; translate: -18px 0; } to { opacity: 1; translate: 0 0; } }

    /* Native scroll timeline: no wheel handler, no permanent animation loop. */
    @supports (animation-timeline: scroll()) {
        #app :where(.topbar, .site-header)::before {
            content: "";
            position: absolute;
            height: 2px;
            inset: auto 0 -1px;
            pointer-events: none;
            background: linear-gradient(90deg, var(--accent), var(--accent-bright));
            transform-origin: left;
            animation: reading-line linear both;
            animation-timeline: scroll(root block);
        }
        @keyframes reading-line { from { scale: 0 1; } to { scale: 1 1; } }
    }
    /* Independent transform properties do not overwrite component positioning. */
    @media (hover: hover) and (pointer: fine) {
        #app :where(.btn, .hero-link, .theme-swatch, .frame-tile, .pattern-tile):not(:disabled, [aria-disabled="true"]):hover {
            translate: 0 -4px;
            transition-timing-function: var(--motion-spring);
        }
        #app .btn:hover { transform: none; }
        #app :where(.nav-more-panel a, .watchlist a):hover { translate: 5px 0; }
        #app :where(a.mode-card, a.widget, button.pt-card):not(:disabled, [aria-disabled="true"]):hover {
            translate: 0 -7px;
            scale: 1.012;
            transition-timing-function: var(--motion-spring);
            box-shadow: 0 18px 34px -16px color-mix(in srgb, var(--ink) 42%, transparent);
        }
    }

    /* Press wins over hover; releasing settles back without delaying the action. */
    #app :where(button, a.btn, a.hero-link, [role="tab"]):not(:disabled, [aria-disabled="true"], .ascii-illustration *):active {
        scale: .95;
        translate: 0 2px;
        transition-duration: 80ms;
    }
    #app .btn:active:not(:disabled, [aria-disabled="true"]) { transform: none; }
    #app .hero-link > [aria-hidden="true"] {
        transition: translate 280ms var(--motion-spring);
    }
    @media (hover: hover) and (pointer: fine) {
        #app .hero-link:hover > [aria-hidden="true"] { translate: 6px -6px; }
    }

    /* Let display stay present only for the exit transition; closing panels cannot be clicked. */
    @supports (transition-behavior: allow-discrete) {
        .app-shell .nav-more .nav-more-panel {
            opacity: 0;
            translate: 0 -14px;
            scale: .96;
            pointer-events: none;
            transition: opacity 180ms ease, translate 320ms var(--motion-spring),
                scale 320ms var(--motion-spring), display 320ms allow-discrete;
        }
        .app-shell .nav-more .nav-more-panel.is-open {
            opacity: 1;
            translate: 0 0;
            scale: 1;
            pointer-events: auto;
            animation: none;
        }
        @starting-style {
            .app-shell .nav-more .nav-more-panel.is-open { opacity: 0; translate: 0 -14px; scale: .96; }
        }
        @media (max-width: 900px) {
            #app .app-shell .primary-nav {
                opacity: 0;
                translate: 0 -16px;
                pointer-events: none;
                transition: opacity 180ms ease, translate 340ms var(--motion-spring), display 340ms allow-discrete;
            }
            #app .app-shell .primary-nav.is-open {
                opacity: 1;
                translate: 0 0;
                pointer-events: auto;
                animation: none;
            }
            @starting-style {
                #app .app-shell .primary-nav.is-open { opacity: 0; translate: 0 -16px; }
            }
        }
    }
    .app-shell .nav-more-toggle::after { transition: transform 240ms var(--motion-settle); }
    .app-shell .nav-more-toggle[aria-expanded="true"]::after { transform: rotate(225deg); }
}

/* Touch must not retain the desktop button lift after a tap. */
@media (hover: none) {
    #app .btn:hover { transform: none; box-shadow: none; }
}
@media (prefers-reduced-motion: reduce) {
    #app :where(button, a.btn, a.hero-link, [role="tab"], .nav-more-panel, .watchlist a) {
        translate: none !important;
        scale: none !important;
    }
}