/*
 * NCSOC EDR Registry - rendering performance layer
 * Loaded after style.css/security.css so it can reduce expensive paint effects
 * without changing application layout, functionality, or the existing design CSS.
 */

/* ------------------------------------------------------------
   Global paint-cost reductions
   ------------------------------------------------------------ */

/* Replace very large blurred fixed blobs with equivalent gradient blobs.
   This avoids continuously compositing a 90px CSS blur on every page. */
.ambient {
    filter: none !important;
    width: 500px;
    height: 500px;
    opacity: .15;
    transform: translateZ(0);
}

.ambient-one {
    background: radial-gradient(circle, rgba(194, 30, 58, .72) 0%, rgba(194, 30, 58, .22) 34%, transparent 70%) !important;
}

.ambient-two {
    background: radial-gradient(circle, rgba(115, 16, 32, .66) 0%, rgba(115, 16, 32, .18) 36%, transparent 72%) !important;
}

/* The old login grid is visually redundant with the active cyber treatment and
   creates another full-screen paint layer. */
.login-grid {
    display: none !important;
}

/* Keep the two moving login glows, but render the softness into their gradient
   instead of using a large animated blur filter. Transform animation remains
   compositor-friendly. */
.login-glow {
    width: 500px !important;
    height: 500px !important;
    filter: none !important;
    opacity: .20 !important;
    will-change: transform;
    transform: translateZ(0);
}

.login-glow.glow-one {
    background: radial-gradient(circle, rgba(194, 30, 58, .68) 0%, rgba(194, 30, 58, .20) 36%, transparent 72%) !important;
}

.login-glow.glow-two {
    background: radial-gradient(circle, rgba(123, 15, 32, .62) 0%, rgba(123, 15, 32, .18) 36%, transparent 72%) !important;
}

/* Stop animating a large box-shadow on every frame. The card retains the same
   visual depth with one static shadow. */
.login-page .login-card {
    animation: none !important;
    box-shadow: 0 24px 72px rgba(0, 0, 0, .42), 0 0 24px rgba(194, 30, 58, .08) !important;
}

/* Blue data nodes: preserve the visible particle layer while avoiding animated
   drop-shadow filters. Only transform + opacity are animated. */
.login-page .login-intro::before {
    filter: none !important;
    will-change: transform, opacity;
    transform: translateZ(0);
}

/* The original traffic layer animated background-position over a viewport-sized
   element, causing a full repaint on many GPUs. Move the already-rendered layer
   using transform instead so browsers can composite it efficiently. */
.login-page::after {
    animation: perfTrafficLayerDrift 14s ease-in-out infinite alternate !important;
    will-change: transform;
    transform: translate3d(-3%, -2%, 0) scale(1.03);
}

@keyframes perfTrafficLayerDrift {
    0% {
        transform: translate3d(-4%, -3%, 0) scale(1.03);
    }
    50% {
        transform: translate3d(3%, 2%, 0) scale(1.05);
    }
    100% {
        transform: translate3d(5%, -1%, 0) scale(1.03);
    }
}

/* ------------------------------------------------------------
   Adaptive low-end mode
   app.js enables html.performance-lite when the browser reports limited CPU,
   low memory, data-saver, or reduced-motion preferences.
   ------------------------------------------------------------ */

.performance-lite .sidebar,
.performance-lite .topbar,
.performance-lite .stat-card,
.performance-lite .panel,
.performance-lite .login-card,
.performance-lite .scan-card {
    -webkit-backdrop-filter: none !important;
    backdrop-filter: none !important;
}

.performance-lite .sidebar {
    background: rgba(8, 9, 12, .97) !important;
}

.performance-lite .topbar {
    background: rgba(8, 9, 12, .95) !important;
}

.performance-lite .stat-card,
.performance-lite .panel {
    background: rgba(18, 20, 25, .97) !important;
    box-shadow: 0 10px 28px rgba(0, 0, 0, .20) !important;
}

.performance-lite .login-card,
.performance-lite .scan-card {
    background: rgba(17, 19, 24, .98) !important;
}

/* One ambient layer is enough on constrained hardware. */
.performance-lite .ambient-two,
.performance-lite .login-glow.glow-two {
    display: none !important;
}

/* Keep a moving particle/glow feel, but remove the expensive full-viewport
   traffic layer on constrained devices. */
.performance-lite .login-page::after {
    display: none !important;
}

.performance-lite .login-page .login-intro::before {
    animation: activeNodeDriftReverse 20s ease-in-out infinite alternate !important;
    opacity: .52 !important;
}

.performance-lite .login-glow {
    animation-duration: 14s !important;
}

.performance-lite .reveal {
    transition-duration: .18s !important;
    transition-delay: 0s !important;
}

/* ------------------------------------------------------------
   Mobile: keep the cyber feel but avoid multiple full-screen animated layers.
   ------------------------------------------------------------ */
@media (max-width: 700px) {
    .login-page::after {
        display: none !important;
    }

    .login-glow.glow-two {
        display: none !important;
    }

    .login-page .login-intro::before {
        animation-duration: 20s !important;
        opacity: .50 !important;
    }
}

/* Respect OS accessibility/performance preference across the whole app. */
@media (prefers-reduced-motion: reduce) {
    .ambient,
    .login-glow,
    .login-page::after,
    .login-page .login-intro::before,
    .reveal {
        animation: none !important;
        transition: none !important;
    }
}