/**
 * FleetCrew — Global Animation System
 * =====================================
 * Smooth entrance animations, hover micro-interactions,
 * stagger utilities, and motion-safe fallbacks.
 *
 * Load order: after main.css in header.php
 */

/* ─── 1. Keyframe Definitions ────────────────────────────── */

@keyframes fc-fade-in {
    from { opacity: 0; }
    to   { opacity: 1; }
}

@keyframes fc-fade-up {
    from { opacity: 0; transform: translateY(20px); }
    to   { opacity: 1; transform: translateY(0); }
}

@keyframes fc-fade-down {
    from { opacity: 0; transform: translateY(-14px); }
    to   { opacity: 1; transform: translateY(0); }
}

@keyframes fc-scale-in {
    from { opacity: 0; transform: scale(0.93); }
    to   { opacity: 1; transform: scale(1); }
}

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

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

@keyframes fc-pulse-glow {
    0%, 100% { box-shadow: 0 0 0 0   var(--color-primary-glow); }
    50%       { box-shadow: 0 0 12px 4px transparent; }
}

@keyframes fc-shimmer {
    to { background-position: 200% center; }
}

/* ─── 2. Utility Animation Classes ────────────────────────── */

.anim-fade-in   { animation: fc-fade-in   0.35s ease          both; }
.anim-fade-up   { animation: fc-fade-up   0.42s cubic-bezier(0.22, 1, 0.36, 1) both; }
.anim-fade-down { animation: fc-fade-down 0.35s ease          both; }
.anim-scale-in  { animation: fc-scale-in  0.32s cubic-bezier(0.22, 1, 0.36, 1) both; }

/* Delays for manual use */
.anim-delay-1 { animation-delay:  80ms; }
.anim-delay-2 { animation-delay: 160ms; }
.anim-delay-3 { animation-delay: 240ms; }
.anim-delay-4 { animation-delay: 320ms; }
.anim-delay-5 { animation-delay: 400ms; }

/* ─── 3. Stagger System — apply .anim-stagger to a parent ── */
/* Children receive sequential fade-up with 70ms intervals     */

.anim-stagger > * {
    animation: fc-fade-up 0.45s cubic-bezier(0.22, 1, 0.36, 1) both;
    animation-fill-mode: both;
}
.anim-stagger > *:nth-child(1) { animation-delay:   0ms; }
.anim-stagger > *:nth-child(2) { animation-delay:  70ms; }
.anim-stagger > *:nth-child(3) { animation-delay: 140ms; }
.anim-stagger > *:nth-child(4) { animation-delay: 210ms; }
.anim-stagger > *:nth-child(5) { animation-delay: 280ms; }
.anim-stagger > *:nth-child(6) { animation-delay: 350ms; }
.anim-stagger > *:nth-child(7) { animation-delay: 420ms; }
.anim-stagger > *:nth-child(8) { animation-delay: 490ms; }
.anim-stagger > *:nth-child(n+9) { animation-delay: 540ms; }

/* ─── 4. Button Micro-Interactions ────────────────────────── */

.btn {
    transition:
        background     260ms ease,
        box-shadow     260ms ease,
        border-color   260ms ease,
        filter         260ms ease,
        transform      180ms cubic-bezier(0.34, 1.56, 0.64, 1);
    will-change: transform;
}

.btn:hover:not(:disabled) {
    transform: translateY(-1px);
}

.btn:active:not(:disabled) {
    transform: translateY(0) scale(0.97);
    transition-duration: 80ms;
}

/* ─── 5. Dashboard Tile Hover Enhancement ───────────────── */

.dash-tile {
    transition:
        transform     320ms cubic-bezier(0.22, 1, 0.36, 1),
        box-shadow    320ms cubic-bezier(0.22, 1, 0.36, 1),
        border-color  250ms ease;
    will-change: transform;
}

.dash-tile:hover {
    transform:    translateY(-5px) scale(1.025);
    box-shadow:   0 14px 36px rgba(0, 0, 0, 0.5),
                  0 0 0 1.5px color-mix(in srgb, var(--color-primary) 30%, transparent);
}

.dash-tile:active {
    transform: translateY(-1px) scale(1.005);
}

/* Tile icon hover animation */
.dash-tile:hover .dash-tile-icon svg {
    transform: scale(1.18) rotate(-6deg);
    transition: transform 300ms cubic-bezier(0.34, 1.56, 0.64, 1);
}

.dash-tile-icon svg {
    transition: transform 250ms ease;
}

/* ─── 6. Card Header Icon Hover ─────────────────────────── */

.card-header-icon {
    transition: transform 280ms cubic-bezier(0.34, 1.56, 0.64, 1),
                color     200ms ease;
}

.card:hover .card-header-icon {
    transform: scale(1.12);
}

/* ─── 7. Page-Level Entrance Animation ──────────────────── */
/* The main container sections slide up on page load */

.container > .dash-hero {
    animation: fc-fade-up 0.50s cubic-bezier(0.22, 1, 0.36, 1) both;
    animation-delay: 0ms;
}

.container > .dash-tiles-section {
    animation: fc-fade-up 0.50s cubic-bezier(0.22, 1, 0.36, 1) both;
    animation-delay: 80ms;
}

.container > .dashboard-grid-main {
    animation: fc-fade-up 0.50s cubic-bezier(0.22, 1, 0.36, 1) both;
    animation-delay: 160ms;
}

/* ─── 8. Form Input Focus Enhancement ───────────────────── */

.form-input,
input[type="text"]:not([class]),
input[type="password"],
input[type="email"],
select,
textarea {
    transition:
        border-color 200ms ease,
        box-shadow   200ms ease,
        background   200ms ease;
}

/* ─── 9. Nav Link Transition Smoothing ──────────────────── */

header nav a,
header .nav-link,
header .dropdown-trigger {
    transition:
        color      200ms ease,
        background 200ms ease,
        box-shadow 200ms ease;
}

/* ─── 10. Badge/Chip Hover ──────────────────────────────── */

.badge {
    transition: filter 200ms ease, transform 150ms ease;
}

.badge:hover {
    filter: brightness(1.15);
    transform: scale(1.04);
}

/* ─── 11. Avatar Hover ──────────────────────────────────── */

.avatar,
.rev-avatar,
img[class*="avatar"] {
    transition: transform 250ms cubic-bezier(0.34, 1.56, 0.64, 1),
                box-shadow 250ms ease;
}

.avatar:hover,
.rev-avatar:hover {
    transform: scale(1.08);
    box-shadow: 0 4px 14px rgba(0, 0, 0, 0.5);
}

/* ─── 12. Sidebar / Drawer Link ─────────────────────────── */

.sidebar-link,
.rev-tree-item,
.dep-card {
    transition:
        background   200ms ease,
        border-color 200ms ease,
        transform    200ms ease,
        box-shadow   200ms ease;
}

/* ─── 13. Smooth Page-Exit Transition (JS-driven) ───────── */

body.page-exit {
    opacity: 0;
    transition: opacity 220ms ease;
}

/* ─── 14. Reduced Motion Respect ────────────────────────── */

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