/*
 * Motion layer: short, purposeful animations across the whole app (app, admin and auth layouts).
 * Rules of thumb: 150-300ms, ease-out, small distances, nothing that moves on its own forever.
 * Entrances are pure CSS; public/js/motion.js adds the loading bar, number count-up, copy feedback
 * and image fade-in. Everything is off with prefers-reduced-motion.
 */

:root {
    --motion-fast: 150ms;
    --motion-base: 240ms;
    --motion-ease: cubic-bezier(0.16, 1, 0.3, 1);
}

/* 1. Cards, stat tiles and the first table rows ease in on page load, slightly staggered.
 *    Pure CSS: no flicker, and nothing can stay hidden if a script fails. "backwards" fill keeps the
 *    starting state during the stagger delay but releases transform afterwards, so hover lifts still work. */
.horizontal-card,
.stat-card,
.card,
.table > tbody > tr:nth-child(-n+12) {
    animation: motion-fade-up var(--motion-base) var(--motion-ease) backwards;
}
.row > :nth-child(2) > :is(.horizontal-card, .stat-card, .card),
.table > tbody > tr:nth-child(2) { animation-delay: 40ms; }
.row > :nth-child(3) > :is(.horizontal-card, .stat-card, .card),
.table > tbody > tr:nth-child(3) { animation-delay: 80ms; }
.row > :nth-child(4) > :is(.horizontal-card, .stat-card, .card),
.table > tbody > tr:nth-child(4) { animation-delay: 120ms; }
.row > :nth-child(5) > :is(.horizontal-card, .stat-card, .card),
.table > tbody > tr:nth-child(5) { animation-delay: 160ms; }
.row > :nth-child(n+6) > :is(.horizontal-card, .stat-card, .card),
.table > tbody > tr:nth-child(n+6) { animation-delay: 200ms; }
/* Cards inside modals, dropdowns and toasts appear with their container instead */
.modal :is(.horizontal-card, .card),
.dropdown-menu :is(.horizontal-card, .card) { animation: none; }

/* 2. Top loading bar while the next page loads */
#motion-progress {
    position: fixed;
    top: 0;
    left: 0;
    height: 3px;
    width: 0;
    z-index: 11000;
    background: linear-gradient(90deg, #2563eb, #7c3aed);
    box-shadow: 0 0 8px rgba(37, 99, 235, 0.5);
    opacity: 0;
    pointer-events: none;
}
#motion-progress.is-loading {
    opacity: 1;
    animation: motion-progress 8s cubic-bezier(0.1, 0.7, 0.2, 1) forwards;
}
@keyframes motion-progress {
    0% { width: 0; }
    20% { width: 45%; }
    100% { width: 92%; }
}

/* 3. Dropdowns and popovers open with a quick fade and scale */
.dropdown-menu.show {
    animation: motion-pop var(--motion-fast) var(--motion-ease);
    transform-origin: top right;
}
@keyframes motion-pop {
    from { opacity: 0; transform: translateY(-4px) scale(0.98); }
    to { opacity: 1; transform: none; }
}

/* 4. Alerts and tab panels fade in */
.alert {
    animation: motion-fade-up var(--motion-base) var(--motion-ease);
}
.tab-pane.active.show {
    animation: motion-fade-up var(--motion-base) var(--motion-ease);
}
@keyframes motion-fade-up {
    from { opacity: 0; transform: translateY(4px); }
    to { opacity: 1; transform: none; }
}

/* 5. Table rows: gentle hover highlight */
.table > tbody > tr {
    transition: background-color var(--motion-fast) ease;
}
.table-hover > tbody > tr:hover > *,
.table > tbody > tr:hover > * {
    --bs-table-bg-state: rgba(37, 99, 235, 0.035);
}

/* 6. Inputs: smooth focus ring, and a single shake when a field comes back invalid */
.form-control,
.form-select,
.filter-input-studio {
    transition: border-color var(--motion-fast) ease, box-shadow var(--motion-fast) ease, background-color var(--motion-fast) ease;
}
.form-control.is-invalid,
.form-select.is-invalid {
    animation: motion-shake 320ms ease-in-out 1;
}
@keyframes motion-shake {
    0%, 100% { transform: translateX(0); }
    20% { transform: translateX(-4px); }
    40% { transform: translateX(4px); }
    60% { transform: translateX(-3px); }
    80% { transform: translateX(2px); }
}

/* 7. Progress bars fill smoothly */
.progress-bar {
    transition: width 400ms var(--motion-ease);
}

/* 8. Images (artwork, avatars) fade in once loaded instead of popping in */
html.motion-ready img[data-fade] {
    opacity: 0;
    transition: opacity var(--motion-base) ease-out;
}
html.motion-ready img[data-fade].is-loaded {
    opacity: 1;
}

/* 9. Copy buttons confirm with a tick */
.motion-copied {
    animation: motion-pop var(--motion-fast) var(--motion-ease);
}
.motion-copied i {
    color: #16a34a !important;
}

/* 10. Login / register card arrives with the page */
.auth-card {
    animation: motion-fade-up 320ms var(--motion-ease);
}

/* 11. Links inside cards and sidebar get a subtle colour transition */
a {
    transition: color var(--motion-fast) ease, background-color var(--motion-fast) ease, opacity var(--motion-fast) ease;
}

/* Smooth in-page scrolling (anchors) */
html {
    scroll-behavior: smooth;
}

/* Everything off for people who asked their device for less motion */
@media (prefers-reduced-motion: reduce) {
    .horizontal-card,
    .stat-card,
    .card,
    .table > tbody > tr {
        animation: none !important;
    }
    html.motion-ready img[data-fade] {
        opacity: 1 !important;
        transform: none !important;
    }
    #motion-progress { display: none !important; }
    .dropdown-menu.show,
    .alert,
    .tab-pane.active.show,
    .auth-card,
    .motion-copied,
    .form-control.is-invalid,
    .form-select.is-invalid {
        animation: none !important;
    }
    html { scroll-behavior: auto; }
}