@layer primitives {
    .ui-reveal { animation: ui-reveal var(--reveal-duration, var(--motion-reveal)) var(--ease-out) backwards; animation-delay: calc(var(--reveal-start-delay, 0ms) + min(var(--motion-stagger-max), var(--reveal-order, 0) * var(--motion-stagger))); }
    .ui-thumbnail { display: block; overflow: hidden; border-radius: var(--radius-lg); }
    .ui-thumbnail > img { transition: transform var(--motion-layout) var(--ease-thumbnail); }
    :is(a, button):is(:hover, :focus-visible) .ui-thumbnail > img { transform: scale(var(--motion-thumbnail-scale)); }
    .ui-scroll-shelf { scroll-behavior: smooth; scroll-snap-type: x mandatory; overscroll-behavior-x: contain; scrollbar-width: none; }
    .ui-scroll-shelf > * { scroll-snap-align: start; }
    .ui-scroll-shelf::-webkit-scrollbar { display: none; }
    .ui-popup { transform-origin: var(--popup-origin, top right); }
    .tab-btn { transition: color var(--motion-fast) var(--ease-standard), background-color var(--motion-fast) var(--ease-standard), border-color var(--motion-fast) var(--ease-standard); }
    .ui-popup[data-motion-state="open"] { animation: ui-popup-in var(--motion-fast) var(--ease-menu-in) backwards; }
    .ui-popup[data-motion-state="closing"] { animation: ui-popup-out var(--motion-menu-exit) var(--ease-menu-out) both; pointer-events: none; }
    .ui-dialog[data-motion-state="open"] { animation: ui-dialog-in var(--dialog-motion-duration, var(--motion-normal)) var(--dialog-motion-ease, var(--ease-standard)) backwards; }
    .ui-dialog[data-motion-state="closing"] { animation: ui-dialog-out var(--dialog-motion-duration, var(--motion-normal)) var(--dialog-motion-ease, var(--ease-standard)) both; pointer-events: none; }
    .ui-dialog-overlay { animation: ui-fade-in var(--dialog-motion-duration, var(--motion-normal)) var(--dialog-motion-ease, var(--ease-standard)) backwards; }
    .ui-dialog-overlay[data-motion-state="closing"] { animation: ui-fade-out var(--dialog-motion-duration, var(--motion-normal)) var(--dialog-motion-ease, var(--ease-standard)) both; }
    .ui-dialog[data-motion-state="open"]::backdrop { animation: ui-fade-in var(--dialog-motion-duration, var(--motion-normal)) var(--dialog-motion-ease, var(--ease-standard)) backwards; }
    .ui-dialog[data-motion-state="closing"]::backdrop { animation: ui-fade-out var(--dialog-motion-duration, var(--motion-normal)) var(--dialog-motion-ease, var(--ease-standard)) both; }
    .ui-drawer { --dialog-closed-translate: 100% 0; --dialog-closed-scale: 1; --dialog-motion-duration: var(--motion-layout); --dialog-motion-ease: var(--ease-out); --dialog-margin: 0 0 0 auto; --dialog-width: calc(100% - var(--space-48)); --dialog-max-height: 100dvh; --dialog-radius: 0; height: 100dvh; max-width: 28rem; }
    .ui-bottom-sheet { --dialog-closed-translate: 0 var(--space-16); }
    .skeleton { animation: ui-pulse var(--motion-pulse) var(--ease-pulse) infinite; }
    .ui-spinner { animation: ui-spin var(--motion-spin) linear infinite; }
    [data-loading="true"] { position: relative; color: transparent; user-select: none; }
    [data-loading="true"] > * { visibility: hidden; }
    [data-loading="true"]::after { content: ''; position: absolute; inset: 0; margin: auto; width: var(--space-16); height: var(--space-16); border: 2px solid var(--button-color, var(--color-text)); border-right-color: transparent; border-radius: var(--radius-full); animation: ui-spin var(--motion-spin) linear infinite; }
    @keyframes ui-reveal { from { opacity: 0; translate: 0 var(--reveal-distance, var(--motion-reveal-distance)); } to { opacity: 1; translate: 0 0; } }
    @keyframes ui-fade-in { from { opacity: 0; } to { opacity: 1; } }
    @keyframes ui-fade-out { from { opacity: 1; } to { opacity: 0; } }
    @keyframes ui-popup-in { from { opacity: 0; scale: var(--motion-popup-scale); } to { opacity: 1; scale: 1; } }
    @keyframes ui-popup-out { from { opacity: 1; scale: 1; } to { opacity: 0; scale: var(--motion-popup-scale); } }
    @keyframes ui-dialog-in { from { opacity: 0; scale: var(--dialog-closed-scale, var(--motion-popup-scale)); translate: var(--dialog-closed-translate, 0 0); } to { opacity: 1; scale: 1; translate: 0 0; } }
    @keyframes ui-dialog-out { from { opacity: 1; scale: 1; translate: 0 0; } to { opacity: 0; scale: var(--dialog-closed-scale, var(--motion-popup-scale)); translate: var(--dialog-closed-translate, 0 0); } }
    @keyframes ui-spin { to { transform: rotate(360deg); } }
    @keyframes ui-pulse { 50% { opacity: .5; } }
    @media (prefers-reduced-motion: reduce) {
        .ui-reveal, .ui-popup, .ui-dialog, .ui-dialog::backdrop, .ui-dialog-overlay, .skeleton, .ui-spinner, [data-loading="true"]::after { animation: none !important; }
        .ui-thumbnail > img { transform: none !important; transition: none; }
        .ui-scroll-shelf { scroll-behavior: auto; }
    }
}