/* ===================================================================
   KPI Card Animations
   @property for typed custom properties (animatable threshold colors)
   Scroll-driven entrance animations (progressive enhancement)
   =================================================================== */

/* Typed custom property — browser can interpolate this as a color */
@property --perf-color {
    syntax: '<color>';
    inherits: false;
    initial-value: #1e7e34;
}

@property --kpi-progress {
    syntax: '<number>';
    inherits: false;
    initial-value: 0;
}

@layer components {
    .kpi-card {
        border-left: 4px solid var(--perf-color);
        transition: --perf-color 0.6s ease;
        position: relative;
        overflow: hidden;

        /* Threshold color classes — set via data attribute or class */
        &[data-status="success"],
        &.kpi-success {
            --perf-color: var(--status-success, #1e7e34);
        }

        &[data-status="warning"],
        &.kpi-warning {
            --perf-color: var(--status-warning, #b36b00);
        }

        &[data-status="error"],
        &.kpi-danger {
            --perf-color: var(--status-error, #dc3545);
        }

        &[data-status="info"],
        &.kpi-info {
            --perf-color: var(--status-info, #117a8b);
        }
    }

    .kpi-value {
        font-size: var(--text-2xl, 1.728rem);
        font-weight: 700;
        color: var(--text-primary, #111827);
        line-height: 1.2;
    }

    .kpi-label {
        font-size: var(--text-sm, 0.875rem);
        color: var(--text-muted, #6B7280);
        margin-top: 0.25rem;
    }

    .kpi-change {
        display: inline-flex;
        align-items: center;
        gap: 0.25rem;
        font-size: var(--text-xs, 0.75rem);
        font-weight: 600;
        margin-top: 0.5rem;
        padding: 0.2rem 0.5rem;
        border-radius: 4px;

        &.kpi-change--positive {
            color: var(--status-success, #1e7e34);
            background: var(--status-success-bg, #d4edda);
        }

        &.kpi-change--negative {
            color: var(--status-error, #dc3545);
            background: var(--status-error-bg, #f8d7da);
        }

        &.kpi-change--neutral {
            color: var(--text-muted, #6B7280);
            background: var(--gray-100, #F3F4F6);
        }
    }

    /* Progress bar using typed @property for smooth animation */
    .kpi-progress-bar {
        height: 4px;
        border-radius: 2px;
        background: var(--gray-200, #E5E7EB);
        margin-top: 0.75rem;
        overflow: hidden;

        &::after {
            content: '';
            display: block;
            height: 100%;
            width: calc(var(--kpi-progress) * 1%);
            background: var(--perf-color);
            border-radius: 2px;
            transition: width 0.8s cubic-bezier(0.4, 0, 0.2, 1), --kpi-progress 0.8s ease;
        }
    }

    /* === Scroll-driven entrance animation (progressive enhancement) === */
    @supports (animation-timeline: view()) {
        @keyframes kpi-enter {
            from {
                opacity: 0;
                translate: 0 24px;
            }
            to {
                opacity: 1;
                translate: 0 0;
            }
        }

        .kpi-card {
            animation: kpi-enter linear both;
            animation-timeline: view();
            animation-range: entry 0% entry 30%;
        }
    }

    /* Respect reduced motion */
    @media (prefers-reduced-motion: reduce) {
        .kpi-card {
            transition: none;
            animation: none;
        }

        .kpi-progress-bar::after {
            transition: none;
        }
    }
}