:root {
    --kg-motion-instant: 0ms;
    --kg-motion-fast: 160ms;
    --kg-motion-standard: 220ms;
    --kg-motion-tab: 240ms;
    --kg-motion-medium: 300ms;
    --kg-motion-slow: 420ms;
    --kg-ease-standard: cubic-bezier(.22, .61, .36, 1);
    --kg-ease-soft: cubic-bezier(.2, .7, .2, 1);
}

@keyframes kgPageIn {
    from {
        opacity: 0;
        transform: translateY(4px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.page-enter {
    animation:
        kgPageIn
        var(--kg-motion-standard)
        var(--kg-ease-standard)
        both;
}


/* ===== FINAL PROJECT MOTION POLISH ===== */
html:not([data-motion-mode="reduced"]) .detail-back,
html:not([data-motion-mode="reduced"]) .activity-back,
html:not([data-motion-mode="reduced"]) .text-action,
html:not([data-motion-mode="reduced"]) .search-share,
html:not([data-motion-mode="reduced"]) .detail-code-copy,
html:not([data-motion-mode="reduced"]) .detail-action-row button,
html:not([data-motion-mode="reduced"]) .kg-settings-close,
html:not([data-motion-mode="reduced"]) .kg-motion-options button,
html:not([data-motion-mode="reduced"]) .kg-settings-switch,
html:not([data-motion-mode="reduced"]) .nav-item {
    transition:
        transform var(--kg-motion-fast) var(--kg-ease-standard),
        opacity var(--kg-motion-fast) ease,
        background-color var(--kg-motion-fast) ease,
        border-color var(--kg-motion-fast) ease;
}

html:not([data-motion-mode="reduced"]) .detail-back:active,
html:not([data-motion-mode="reduced"]) .activity-back:active,
html:not([data-motion-mode="reduced"]) .text-action:active,
html:not([data-motion-mode="reduced"]) .search-share:active,
html:not([data-motion-mode="reduced"]) .detail-code-copy:active,
html:not([data-motion-mode="reduced"]) .kg-settings-close:active,
html:not([data-motion-mode="reduced"]) .kg-motion-options button:active {
    transform: scale(.96);
}

html[data-motion-mode="reduced"] *,
html[data-motion-mode="reduced"] *::before,
html[data-motion-mode="reduced"] *::after {
    animation: none !important;
    transition: none !important;
    scroll-behavior: auto !important;
}