/*
 * SPARK runtime performance layer.
 * Keeps the interface responsive on older Intel GPUs by moving persistent
 * motion to cheap transform/opacity paths and avoiding repaint-heavy effects.
 */

.header-banner::before {
    animation: spark-perf-banner-drift 36s ease-in-out infinite alternate !important;
    transform: translate3d(-0.6%, -0.35%, 0) scale(1.035) !important;
    will-change: transform !important;
    backface-visibility: hidden;
}

@keyframes spark-perf-banner-drift {
    from {
        transform: translate3d(-0.6%, -0.35%, 0) scale(1.035);
    }

    to {
        transform: translate3d(0.6%, 0.35%, 0) scale(1.035);
    }
}

.navbar {
    animation: spark-perf-navbar-enter 0.35s ease-out both !important;
}

@keyframes spark-perf-navbar-enter {
    from {
        opacity: 0.96;
        transform: translate3d(0, -6px, 0);
    }

    to {
        opacity: 1;
        transform: translate3d(0, 0, 0);
    }
}

.header-banner .center-badge-container,
.mode-toggle-btn,
.dashboard-content-surface,
.dashboard-surface-loading-overlay,
.report-card,
.stat-card,
.modal-spark-backdrop {
    -webkit-backdrop-filter: none !important;
    backdrop-filter: none !important;
}

.mode-toggle-btn,
.sidebar,
.content,
.stat-card,
.report-card,
.action-card,
.user-action-card,
.reports-list .report-row,
.coverage-item,
.mode-pill {
    transition-property: color, background-color, border-color, box-shadow, opacity, transform !important;
}

.mode-toggle-btn:hover,
.stat-card:hover,
.report-card:hover,
.action-card:hover,
.user-action-card:hover,
.reports-list .report-row:hover,
.coverage-item:hover,
.mode-pill:hover {
    transition-duration: 140ms !important;
    transition-timing-function: cubic-bezier(0.2, 0, 0, 1) !important;
}

/* Enable Cross-Document View Transitions for smooth page animations */
@view-transition {
    navigation: auto;
}

.header-banner {
    view-transition-name: spark-header-banner;
}

.header-banner,
.stat-card,
.report-card,
.action-card,
.user-action-card,
.quick-actions-section,
.modern-greeting-card {
    contain: paint;
}

.stats-grid:has(#coverage-card:hover) > .stat-card:not(#coverage-card),
.stats-grid:has(#coverage-card:hover) > #coverage-card {
    transform: none !important;
}

body.spark-mode-active #spark-container video {
    transform: translateZ(0);
    will-change: transform;
}

.gradient-title,
.spark-big-logo,
.gradient-accent {
    animation-name: spark-perf-fade-up !important;
    animation-duration: 520ms !important;
    animation-timing-function: cubic-bezier(0.2, 0, 0, 1) !important;
}

@keyframes spark-perf-fade-up {
    from {
        opacity: 0;
        transform: translate3d(0, 10px, 0);
    }

    to {
        opacity: 1;
        transform: translate3d(0, 0, 0);
    }
}

@media (prefers-reduced-motion: reduce) {
    .header-banner::before {
        animation: none !important;
        transform: scale(1.035) !important;
        will-change: auto !important;
    }

    *,
    *::before,
    *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        scroll-behavior: auto !important;
        transition-duration: 0.01ms !important;
    }

    video {
        display: none !important;
    }
}