/**
 * Motion System — sppagarchive.com
 * Centralized motion tokens, shared keyframes, and reduced-motion support.
 * All animations across the site should reference these tokens.
 */

/* ── MOTION TOKENS ──────────────────────────────────────────────────────────── */
:root {
    /* Duration tokens */
    --motion-fast: 120ms;
    --motion-ui: 180ms;
    --motion-medium: 240ms;
    --motion-slow: 320ms;
    --motion-emphasis: 500ms;

    /* Easing tokens */
    --ease-standard: cubic-bezier(0.2, 0.8, 0.2, 1);
    --ease-emphasized: cubic-bezier(0.2, 0, 0, 1);
    --ease-exit: cubic-bezier(0.4, 0, 1, 1);
    --ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1);
    --ease-smooth: cubic-bezier(0.4, 0, 0.2, 1);

    /* Shadow tokens for hover lift */
    --shadow-rest: 0 1px 3px rgba(0, 0, 0, 0.08), 0 1px 2px rgba(0, 0, 0, 0.06);
    --shadow-hover: 0 8px 24px rgba(0, 0, 0, 0.12), 0 4px 8px rgba(0, 0, 0, 0.08);
    --shadow-active: 0 2px 6px rgba(0, 0, 0, 0.1);
    --shadow-elevated: 0 16px 48px rgba(0, 0, 0, 0.15), 0 6px 16px rgba(0, 0, 0, 0.1);
}

/* ── SHARED KEYFRAMES ───────────────────────────────────────────────────────── */

/* Fade */
@keyframes mo-fade-in {
    from { opacity: 0; }
    to { opacity: 1; }
}

@keyframes mo-fade-out {
    from { opacity: 1; }
    to { opacity: 0; }
}

/* Slide + Fade */
@keyframes mo-slide-up {
    from { opacity: 0; transform: translateY(12px); }
    to { opacity: 1; transform: translateY(0); }
}

@keyframes mo-slide-down {
    from { opacity: 0; transform: translateY(-12px); }
    to { opacity: 1; transform: translateY(0); }
}

@keyframes mo-slide-in-right {
    from { opacity: 0; transform: translateX(24px); }
    to { opacity: 1; transform: translateX(0); }
}

@keyframes mo-slide-out-right {
    from { opacity: 1; transform: translateX(0); }
    to { opacity: 0; transform: translateX(24px); }
}

/* Scale + Fade (modals, popovers) */
@keyframes mo-scale-in {
    from { opacity: 0; transform: scale(0.95); }
    to { opacity: 1; transform: scale(1); }
}

@keyframes mo-scale-out {
    from { opacity: 1; transform: scale(1); }
    to { opacity: 0; transform: scale(0.95); }
}

/* Skeleton shimmer */
@keyframes mo-shimmer {
    0% { background-position: -200% 0; }
    100% { background-position: 200% 0; }
}

/* Spin (single canonical definition) */
@keyframes mo-spin {
    from { transform: rotate(0deg); }
    to { transform: rotate(360deg); }
}

/* Pulse (subtle, not jarring) */
@keyframes mo-pulse {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.7; }
}

/* Hero reveal — staged entry */
@keyframes mo-hero-reveal {
    from {
        opacity: 0;
        transform: translateY(20px) scale(0.98);
    }
    to {
        opacity: 1;
        transform: translateY(0) scale(1);
    }
}

/* Dropdown open */
@keyframes mo-dropdown-in {
    from {
        opacity: 0;
        transform: translateY(-8px) scaleY(0.96);
    }
    to {
        opacity: 1;
        transform: translateY(0) scaleY(1);
    }
}

/* Toast entry */
@keyframes mo-toast-in {
    from {
        opacity: 0;
        transform: translateX(100%) scale(0.95);
    }
    to {
        opacity: 1;
        transform: translateX(0) scale(1);
    }
}

@keyframes mo-toast-out {
    from {
        opacity: 1;
        transform: translateX(0) scale(1);
    }
    to {
        opacity: 0;
        transform: translateX(100%) scale(0.95);
    }
}

/* ── UTILITY CLASSES ────────────────────────────────────────────────────────── */

/* Hover lift — add to cards, buttons, interactive surfaces */
.mo-lift {
    transition: transform var(--motion-ui) var(--ease-standard),
                box-shadow var(--motion-ui) var(--ease-standard);
}
.mo-lift:hover {
    transform: translateY(-3px);
    box-shadow: var(--shadow-hover);
}
.mo-lift:active {
    transform: translateY(-1px);
    box-shadow: var(--shadow-active);
    transition-duration: var(--motion-fast);
}

/* Button press feedback */
.mo-press {
    transition: transform var(--motion-fast) var(--ease-standard),
                box-shadow var(--motion-fast) var(--ease-standard);
}
.mo-press:active {
    transform: scale(0.97);
    box-shadow: var(--shadow-active);
}

/* Fade transition helper */
.mo-fade {
    transition: opacity var(--motion-ui) var(--ease-standard);
}

/* Scale-in for appearing elements */
.mo-appear {
    animation: mo-scale-in var(--motion-medium) var(--ease-spring) both;
}

/* Slide-up entry */
.mo-enter-up {
    animation: mo-slide-up var(--motion-medium) var(--ease-emphasized) both;
}

/* Stagger children — use with .mo-stagger on parent */
.mo-stagger > * {
    animation: mo-slide-up var(--motion-medium) var(--ease-emphasized) both;
}
.mo-stagger > *:nth-child(1) { animation-delay: 0ms; }
.mo-stagger > *:nth-child(2) { animation-delay: 40ms; }
.mo-stagger > *:nth-child(3) { animation-delay: 80ms; }
.mo-stagger > *:nth-child(4) { animation-delay: 120ms; }
.mo-stagger > *:nth-child(5) { animation-delay: 160ms; }
.mo-stagger > *:nth-child(6) { animation-delay: 200ms; }
.mo-stagger > *:nth-child(7) { animation-delay: 240ms; }
.mo-stagger > *:nth-child(8) { animation-delay: 280ms; }

/* Skeleton shimmer loader */
.mo-skeleton {
    background: linear-gradient(90deg,
        rgba(0, 0, 0, 0.06) 25%,
        rgba(0, 0, 0, 0.1) 37%,
        rgba(0, 0, 0, 0.06) 63%
    );
    background-size: 200% 100%;
    animation: mo-shimmer 1.5s ease-in-out infinite;
    border-radius: 6px;
}

/* Spinner */
.mo-spinner {
    animation: mo-spin 0.8s linear infinite;
}

/* Scroll-triggered reveal — initially hidden, revealed by JS */
.mo-reveal {
    opacity: 0;
    transform: translateY(20px);
    transition: opacity var(--motion-slow) var(--ease-emphasized),
                transform var(--motion-slow) var(--ease-emphasized);
}
.mo-reveal.is-visible {
    opacity: 1;
    transform: translateY(0);
}

/* ── TAB CONTENT TRANSITIONS ────────────────────────────────────────────────── */

.tab-content {
    /* Smooth tab entry instead of hard show/hide */
    animation: mo-fade-in var(--motion-ui) var(--ease-standard) both;
}

/* ── MODAL TRANSITIONS ──────────────────────────────────────────────────────── */

.modal-backdrop {
    transition: opacity var(--motion-medium) var(--ease-standard);
}

.modal-content,
[class*="modal"] > [class*="content"],
[class*="modal"] > [class*="dialog"] {
    animation: mo-scale-in var(--motion-medium) var(--ease-spring) both;
}

/* ── DROPDOWN TRANSITIONS ───────────────────────────────────────────────────── */

[class*="dropdown"] > [class*="menu"],
[class*="dropdown"] > ul {
    animation: mo-dropdown-in var(--motion-ui) var(--ease-standard) both;
    transform-origin: top center;
}

/* ── TOAST / NOTIFICATION ───────────────────────────────────────────────────── */

.toast,
.notification-toast,
[class*="notification"][style*="position: fixed"] {
    animation: mo-toast-in var(--motion-medium) var(--ease-spring) both;
}
.toast.exiting,
.notification-toast.exiting {
    animation: mo-toast-out var(--motion-ui) var(--ease-exit) both;
}

/* ── NAV BUTTON TRANSITIONS ─────────────────────────────────────────────────── */

.nav-btn {
    transition: background var(--motion-ui) var(--ease-standard),
                color var(--motion-ui) var(--ease-standard),
                transform var(--motion-fast) var(--ease-standard),
                box-shadow var(--motion-fast) var(--ease-standard);
}
.nav-btn:hover {
    transform: translateY(-1px);
}
.nav-btn:active {
    transform: scale(0.98);
    transition-duration: var(--motion-fast);
}

/* ── FORM FOCUS TRANSITIONS ─────────────────────────────────────────────────── */

input, textarea, select {
    transition: border-color var(--motion-fast) var(--ease-standard),
                box-shadow var(--motion-fast) var(--ease-standard);
}

/* ── LINK & INTERACTIVE TEXT ────────────────────────────────────────────────── */

a {
    transition: color var(--motion-fast) var(--ease-standard);
}

/* ── PREFERS-REDUCED-MOTION ─────────────────────────────────────────────────── */

@media (prefers-reduced-motion: reduce) {
    /* Kill all animations */
    *, *::before, *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
        scroll-behavior: auto !important;
    }

    /* Preserve functional transitions (opacity for show/hide) */
    .tab-content,
    .modal-backdrop {
        transition: opacity 0.01ms !important;
    }

    /* Remove transforms */
    .mo-lift:hover,
    .mo-press:active,
    .nav-btn:hover,
    .nav-btn:active {
        transform: none !important;
    }

    /* Reveal elements immediately */
    .mo-reveal {
        opacity: 1 !important;
        transform: none !important;
    }

    /* Stop infinite animations */
    .mo-spinner,
    .mo-skeleton {
        animation: none !important;
    }
}