/* Central interaction contract. Pages compose these primitives; they do not own motion curves. */
@layer foundations {
    .ui-motion-surface {
        transition: background-color var(--ui-motion-normal) var(--ui-ease-standard), border-color var(--ui-motion-normal) var(--ui-ease-standard), color var(--ui-motion-normal) var(--ui-ease-standard), box-shadow var(--ui-motion-normal) var(--ui-ease-standard), transform var(--ui-motion-normal) var(--ui-ease-standard);
    }
    .ui-motion-surface.ui-motion-interactive:hover {
        border-color: var(--ui-hover-border);
        background: var(--ui-hover-surface);
        box-shadow: var(--ui-card-shadow-hover);
        transform: translateY(var(--ui-hover-lift));
    }
    .ui-skeleton {
        overflow: hidden;
        background: linear-gradient(90deg, var(--ui-skeleton-base) 18%, var(--ui-skeleton-highlight) 48%, var(--ui-skeleton-base) 78%);
        background-size: 220% 100%;
        animation: ui-shimmer 1.2s var(--ui-ease-standard) infinite;
    }
    .ui-spinner {
        display: inline-block;
        border-style: solid;
        border-color: color-mix(in srgb, var(--green) 24%, transparent);
        border-top-color: var(--green);
        border-radius: 50%;
        animation: ui-spin .72s linear infinite;
    }
    .ui-progress-indeterminate > span { animation: ui-progress 1.35s var(--ui-ease-emphasized) infinite; }
    .ui-float { animation: ui-float 1.8s var(--ui-ease-emphasized) infinite; }
    @keyframes ui-spin { to { transform: rotate(360deg); } }
    @keyframes ui-shimmer { to { background-position: -220% 0; } }
    @keyframes ui-progress { 0% { transform: translateX(-110%); } 55%, 100% { transform: translateX(280%); } }
    @keyframes ui-float { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-5px); } }
}
@media (prefers-reduced-motion: reduce) {
    @layer foundations {
        .ui-motion-surface, .ui-motion-surface.ui-motion-interactive:hover { transition: none; transform: none; }
        .ui-skeleton, .ui-spinner, .ui-progress-indeterminate > span, .ui-float { animation: none; }
    }
}