/* ═══════════════════════════════════════════════════════════════════════════
   settle-animations.css
   Chainsaw Legends — Settle Animation System
   ═══════════════════════════════════════════════════════════════════════════

   PHILOSOPHY: Every element arrives with momentum and decelerates into place.
   Like a chainsaw chain coming to rest — heavy, deliberate, satisfying.
   Nothing bouncy. Everything has weight.

   EASING: cubic-bezier(0.22, 0.61, 0.36, 1) — "settle" curve
   Fast attack, smooth deceleration, no overshoot.
   ═══════════════════════════════════════════════════════════════════════════ */

/* ─── EASING TOKENS ─────────────────────────────────────────────────────── */
:root {
    /* Primary settle — the signature curve */
    --cl-ease-settle: cubic-bezier(0.22, 0.61, 0.36, 1);
    /* Heavier variant for larger elements */
    --cl-ease-settle-heavy: cubic-bezier(0.16, 0.73, 0.29, 1);
    /* Quick settle for micro-interactions */
    --cl-ease-settle-snap: cubic-bezier(0.33, 0.68, 0.40, 1);
    /* Exit — reverse momentum, accelerating out */
    --cl-ease-exit: cubic-bezier(0.55, 0, 0.67, 0.19);
    /* Duration tokens */
    --cl-duration-fast: 180ms;
    --cl-duration-normal: 320ms;
    --cl-duration-slow: 480ms;
    --cl-duration-heavy: 600ms;
}


/* ═══════════════════════════════════════════════════════════════════════════
   1. PAGE-LEVEL SETTLE ANIMATIONS
   Applied via cl-animate-in on page root containers.
   Content fades up from 18px below with opacity transition.
   ═══════════════════════════════════════════════════════════════════════════ */

@keyframes cl-settle-up {
    from {
        opacity: 0;
        transform: translateY(18px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

@keyframes cl-settle-up-heavy {
    from {
        opacity: 0;
        transform: translateY(28px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.cl-animate-in {
    animation: cl-settle-up var(--cl-duration-normal) var(--cl-ease-settle) both;
}

.cl-animate-in-heavy {
    animation: cl-settle-up-heavy var(--cl-duration-heavy) var(--cl-ease-settle-heavy) both;
}


/* ═══════════════════════════════════════════════════════════════════════════
   2. STAGGER ANIMATIONS
   Apply cl-stagger to a parent container. Direct children get staggered
   settle-in delays. Like sawdust particles settling after a cut.
   ═══════════════════════════════════════════════════════════════════════════ */

@keyframes cl-stagger-child {
    from {
        opacity: 0;
        transform: translateY(14px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.cl-stagger > * {
    animation: cl-stagger-child var(--cl-duration-normal) var(--cl-ease-settle) both;
}

    .cl-stagger > *:nth-child(1) {
        animation-delay: 0ms;
    }

    .cl-stagger > *:nth-child(2) {
        animation-delay: 60ms;
    }

    .cl-stagger > *:nth-child(3) {
        animation-delay: 120ms;
    }

    .cl-stagger > *:nth-child(4) {
        animation-delay: 180ms;
    }

    .cl-stagger > *:nth-child(5) {
        animation-delay: 240ms;
    }

    .cl-stagger > *:nth-child(6) {
        animation-delay: 300ms;
    }

    .cl-stagger > *:nth-child(7) {
        animation-delay: 360ms;
    }

    .cl-stagger > *:nth-child(8) {
        animation-delay: 420ms;
    }

    .cl-stagger > *:nth-child(9) {
        animation-delay: 480ms;
    }

    .cl-stagger > *:nth-child(10) {
        animation-delay: 540ms;
    }

    .cl-stagger > *:nth-child(n+11) {
        animation-delay: 600ms;
    }


/* ═══════════════════════════════════════════════════════════════════════════
   3. FADE ANIMATIONS
   ═══════════════════════════════════════════════════════════════════════════ */

@keyframes cl-fade-in-kf {
    from {
        opacity: 0;
    }

    to {
        opacity: 1;
    }
}

@keyframes cl-fade-out-kf {
    from {
        opacity: 1;
    }

    to {
        opacity: 0;
    }
}

.cl-fade-in {
    animation: cl-fade-in-kf var(--cl-duration-fast) var(--cl-ease-settle) both;
}

.cl-fade-out {
    animation: cl-fade-out-kf var(--cl-duration-fast) var(--cl-ease-exit) both;
}


/* ═══════════════════════════════════════════════════════════════════════════
   4. SCALE ANIMATIONS
   For modals, dialogs, confirmation popups. Arrives from slightly smaller
   with opacity — like a saw blade spinning up to speed.
   ═══════════════════════════════════════════════════════════════════════════ */

@keyframes cl-scale-settle {
    from {
        opacity: 0;
        scale: 0.92;
    }

    to {
        opacity: 1;
        scale: 1;
    }
}

.cl-animate-in-scale {
    animation: cl-scale-settle var(--cl-duration-normal) var(--cl-ease-settle) both;
}


/* ═══════════════════════════════════════════════════════════════════════════
   5. DRAWER / SLIDE ANIMATIONS
   Panel slides from right edge with settle physics. The overlay fades in
   behind it. Like pulling a saw guide bar into position.
   ═══════════════════════════════════════════════════════════════════════════ */

@keyframes cl-drawer-slide-in {
    from {
        transform: translateX(100%);
        opacity: 0.5;
    }

    to {
        transform: translateX(0);
        opacity: 1;
    }
}

@keyframes cl-drawer-slide-out {
    from {
        transform: translateX(0);
        opacity: 1;
    }

    to {
        transform: translateX(100%);
        opacity: 0;
    }
}

@keyframes cl-overlay-settle {
    from {
        opacity: 0;
    }

    to {
        opacity: 1;
    }
}

.cl-drawer-settle-in {
    animation: cl-drawer-slide-in var(--cl-duration-slow) var(--cl-ease-settle-heavy) both;
}

.cl-drawer-settle-out {
    animation: cl-drawer-slide-out var(--cl-duration-normal) var(--cl-ease-exit) both;
}

.cl-drawer-overlay-in {
    animation: cl-overlay-settle var(--cl-duration-fast) var(--cl-ease-settle) both;
}


/* ═══════════════════════════════════════════════════════════════════════════
   6. SIDEBAR SLIDE (Mobile)
   ═══════════════════════════════════════════════════════════════════════════ */

@keyframes cl-sidebar-slide-in {
    from {
        transform: translateX(-100%);
        opacity: 0.6;
    }

    to {
        transform: translateX(0);
        opacity: 1;
    }
}

/* Applied via .cl-sidebar.open — see layout.css */


/* ═══════════════════════════════════════════════════════════════════════════
   7. HOVER SETTLE
   Interactive elements get a subtle lift + shadow on hover that settles.
   Apply cl-settle-on-hover to any interactive element.
   ═══════════════════════════════════════════════════════════════════════════ */

.cl-settle-on-hover {
    transition: transform var(--cl-duration-fast) var(--cl-ease-settle), box-shadow var(--cl-duration-fast) var(--cl-ease-settle);
}

    .cl-settle-on-hover:hover {
        transform: translateY(-1px);
        box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
    }

    .cl-settle-on-hover:active {
        transform: translateY(0);
        box-shadow: 0 1px 3px rgba(0, 0, 0, 0.06);
        transition-duration: 80ms;
    }


/* ═══════════════════════════════════════════════════════════════════════════
   8. CARD SETTLE HOVER
   Cards get a heavier, more dramatic lift. Like picking up a block of
   freshly carved wood to inspect it.
   ═══════════════════════════════════════════════════════════════════════════ */

.cl-card[data-hover="true"],
.cl-card.cl-card-hover {
    transition: transform var(--cl-duration-normal) var(--cl-ease-settle), box-shadow var(--cl-duration-normal) var(--cl-ease-settle), border-color var(--cl-duration-fast) var(--cl-ease-settle);
    cursor: pointer;
}

    .cl-card[data-hover="true"]:hover,
    .cl-card.cl-card-hover:hover {
        transform: translateY(-3px);
        box-shadow: 0 8px 24px rgba(0, 0, 0, 0.06), 0 2px 6px rgba(0, 0, 0, 0.04);
        border-color: var(--cl-stihl-orange, #F37A1F);
    }

    .cl-card[data-hover="true"]:active,
    .cl-card.cl-card-hover:active {
        transform: translateY(-1px);
        transition-duration: 80ms;
    }


/* ═══════════════════════════════════════════════════════════════════════════
   9. TOAST DROP ANIMATION
   Toasts drop from the top with momentum settle — like a wood chip
   falling from a cut and landing with weight.
   ═══════════════════════════════════════════════════════════════════════════ */

@keyframes cl-toast-drop {
    0% {
        opacity: 0;
        transform: translateY(-24px) scale(0.96);
    }

    70% {
        opacity: 1;
        transform: translateY(2px) scale(1);
    }

    100% {
        opacity: 1;
        transform: translateY(0) scale(1);
    }
}

@keyframes cl-toast-exit {
    from {
        opacity: 1;
        transform: translateY(0) scale(1);
    }

    to {
        opacity: 0;
        transform: translateY(-12px) scale(0.96);
    }
}

.cl-toast-drop {
    animation: cl-toast-drop var(--cl-duration-slow) var(--cl-ease-settle-heavy) both;
}

.cl-toast-exit {
    animation: cl-toast-exit var(--cl-duration-fast) var(--cl-ease-exit) both;
}


/* ═══════════════════════════════════════════════════════════════════════════
   10. SKELETON PULSE
   Loading placeholders pulse with a warm orange tint — echoing the
   Stihl orange brand warmth during loading states.
   ═══════════════════════════════════════════════════════════════════════════ */

@keyframes cl-skeleton-pulse {
    0%, 100% {
        opacity: 0.45;
    }

    50% {
        opacity: 0.75;
    }
}

.cl-skeleton,
.cl-skeleton-bar {
    background: linear-gradient( 90deg, var(--cl-concrete, #E8E5E0) 0%, var(--cl-concrete-light, #F0EDE8) 50%, var(--cl-concrete, #E8E5E0) 100% );
    background-size: 200% 100%;
    animation: cl-skeleton-shimmer 1.6s var(--cl-ease-settle) infinite;
    border-radius: var(--cl-radius, 6px);
}

@keyframes cl-skeleton-shimmer {
    0% {
        background-position: 200% 0;
    }

    100% {
        background-position: -200% 0;
    }
}


/* ═══════════════════════════════════════════════════════════════════════════
   11. PROGRESS BAR SETTLE
   RPM bars, rank progress — fills from left with settle easing, like a
   fuel gauge settling after filling.
   ═══════════════════════════════════════════════════════════════════════════ */

@keyframes cl-progress-fill {
    from {
        width: 0%;
    }
}

.cl-progress-settle .cl-progress-bar-fill,
.cl-progress-bar-settle {
    animation: cl-progress-fill var(--cl-duration-heavy) var(--cl-ease-settle-heavy) both;
    animation-delay: 200ms;
}


/* ═══════════════════════════════════════════════════════════════════════════
   12. SETTLE-IN UTILITY
   Generic single-element settle — apply to anything that should fade-up
   on first render. Lighter than cl-animate-in.
   ═══════════════════════════════════════════════════════════════════════════ */

@keyframes cl-settle-in-kf {
    from {
        opacity: 0;
        transform: translateY(8px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.cl-settle-in {
    animation: cl-settle-in-kf var(--cl-duration-fast) var(--cl-ease-settle-snap) both;
}


/* ═══════════════════════════════════════════════════════════════════════════
   13. CHAINSAW VIBRATION (Easter egg / loading accent)
   A very subtle shake for loading spinners — evokes the idle vibration
   of a chainsaw at rest. Use sparingly.
   ═══════════════════════════════════════════════════════════════════════════ */

@keyframes cl-saw-idle {
    0%, 100% {
        transform: translateX(0);
    }

    25% {
        transform: translateX(-0.5px);
    }

    75% {
        transform: translateX(0.5px);
    }
}

.cl-saw-idle {
    animation: cl-saw-idle 60ms linear infinite;
}

/* Only apply vibration when loading — not permanently */
.cl-spinner.cl-saw-idle {
    animation: cl-spin 800ms linear infinite, cl-saw-idle 60ms linear infinite;
}


/* ═══════════════════════════════════════════════════════════════════════════
   14. NAV LINK ACTIVE INDICATOR
   The orange underline/left-border that settles into position on the
   active nav item.
   ═══════════════════════════════════════════════════════════════════════════ */

.cl-nav-link.active .cl-nav-active-bar,
.cl-nav-link.active::after {
    transition: width var(--cl-duration-normal) var(--cl-ease-settle), opacity var(--cl-duration-fast) var(--cl-ease-settle);
}


/* ═══════════════════════════════════════════════════════════════════════════
   15. REDUCED MOTION
   Respect user preferences. Strip all animation to instant transitions.
   ═══════════════════════════════════════════════════════════════════════════ */

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

    .cl-stagger > * {
        animation-delay: 0ms !important;
    }
}