/**
 * TexnoX Adaptive Performance Styles — adaptive-perf.css
 * ========================================================
 * Provides tier-based CSS overrides for .perf-low, .perf-medium, .perf-high.
 * Applied to html element by perf-tier.js before first paint.
 *
 * Design principles:
 *   - HIGH:   Full visual polish, all effects enabled.
 *   - MEDIUM: Simplified blur, slower animations, lighter shadows.
 *   - LOW:    No blur, no animations, rgba background fallbacks only.
 *             The site must still look elegant — NOT broken.
 */

/* ==================================================================
   1. AURORA BACKGROUND BLOBS
   ================================================================== */

/* HIGH (default): Full animation, strong blur */
.perf-high .blob {
    animation: moveBlob 15s infinite alternate ease-in-out;
    filter: blur(90px);
    opacity: var(--blob-opacity, 0.6);
}

/* MEDIUM: Slower animation, lighter blur */
.perf-medium .blob {
    animation: moveBlob 30s infinite alternate ease-in-out;
    filter: blur(50px);
    opacity: 0.4;
}

/* LOW: Blobs frozen completely (no animation, minimal blur, very faint) */
/* We keep them to preserve background color tones, but cost is near-zero */
.perf-low .blob {
    animation: none !important;
    filter: blur(20px) !important;
    /* cheap: small radius = cheap on GPU */
    opacity: 0.25 !important;
    transform: none !important;
    will-change: auto !important;
    /* Release GPU layer */
}

/* ==================================================================
   2. GLASSMORPHISM — backdrop-filter: blur()
   ================================================================== */

/*
 * backdrop-filter is the #1 GPU killer on mobile.
 * Strategy:
 *   HIGH  → full backdrop-filter blur
 *   MEDIUM→ reduced blur radius
 *   LOW   → remove backdrop-filter, use solid rgba fallback
 */

/* Navbar */
.perf-medium #main-nav {
    backdrop-filter: blur(8px) !important;
    -webkit-backdrop-filter: blur(8px) !important;
}

.perf-low #main-nav {
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
    background: rgba(13, 17, 23, 0.92) !important;
}

.perf-low.light-mode #main-nav,
.perf-low .light-mode #main-nav {
    background: rgba(255, 255, 255, 0.96) !important;
}

/* Live Info Capsule */
.perf-medium .live-info-capsule {
    backdrop-filter: blur(8px) !important;
    -webkit-backdrop-filter: blur(8px) !important;
}

.perf-low .live-info-capsule {
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
    background: rgba(15, 20, 35, 0.90) !important;
    border-color: rgba(255, 255, 255, 0.06) !important;
}

.perf-low .light-mode .live-info-capsule {
    background: rgba(245, 247, 250, 0.98) !important;
}

/* All elements that use backdrop-filter globally */
.perf-low [class*="glass"],
.perf-low [class*="backdrop"],
.perf-low .briefing-card,
.perf-low .texnox-article-card-unified {
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
}

/* ==================================================================
   3. BOX SHADOWS — Expensive on mobile compositing
   ================================================================== */

/* LOW: Reduce all box-shadow intensities significantly */
.perf-low * {
    --shadow-premium: 0 4px 12px rgba(0, 0, 0, 0.12) !important;
    --shadow-accent: 0 6px 20px rgba(0, 123, 255, 0.08) !important;
    box-shadow: none;
}

/* Keep essential card shadows (readable) */
.perf-low .post-card,
.perf-low article[class*="post"] {
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08) !important;
}

/* ==================================================================
   4. TRANSITIONS & ANIMATIONS
   ================================================================== */

/* LOW: Strip expensive transitions, keep motion minimal */
.perf-low * {
    transition-duration: 0.1s;
    transition-property: opacity, transform;
}

/* Restore only intentional micro-animations on LOW */
.perf-low .status-dot {
    animation: none;
}

/* MEDIUM: Slightly faster transitions than LOW but still optimized */
.perf-medium * {
    transition-duration: 0.15s;
}

/* Shiny badge animation — skip on LOW */
.perf-low .shiny::before {
    animation: none;
    display: none;
}

/* ==================================================================
   5. REVEAL ANIMATIONS (Scroll-triggered)
   ================================================================== */

.perf-low .reveal-up,
.perf-low .reveal-rtl {
    opacity: 1;
    transform: none;
    transition: none;
}

/* LOW: Pre-reveal everything — observer still runs but cost is near-zero */
.perf-low .reveal-up.is-revealed,
.perf-low .reveal-rtl.is-revealed {
    opacity: 1;
    transform: none;
}

/* ==================================================================
   7. WILL-CHANGE — Only on HIGH to avoid wasting GPU memory on weak devices
   ================================================================== */

/* Remove will-change on LOW — it creates GPU layers which cost memory */
.perf-low .blob,
.perf-low [style*="will-change"] {
    will-change: auto !important;
}

/* ==================================================================
   8. CONTAIN — Add layout containment for card grids to reduce reflow scope
   ================================================================== */

/* Works on all tiers — prevents card changes from reflowing the whole page */
#posts-container>article,
#posts-container>div {
    contain: layout style;
}

/* ==================================================================
   9. READING PROGRESS BAR — skip on LOW (frequent repaints)
   ================================================================== */
.perf-low #reading-progress {
    display: none !important;
}

/* ==================================================================
   10. GLITCH ANIMATION — Expensive on low-end
   ================================================================== */
.perf-low .glitch-active {
    animation: none !important;
}