/* ═══════════════════════════════════════════════════════════════════════════════
   ANHAD — DYNAMIC SCROLL PERFORMANCE STYLESHEET
   Optimizes GPU composition, pauses non-visible animation loops, and removes
   complex CPU-bound visual properties (such as backdrop-filter) during active scroll.
   ═══════════════════════════════════════════════════════════════════════════════ */

/* ─── 1. FIXED & ANIMATING REGIONS LAYER PROMOTION ─── */
/* PERF FIX: Only promote truly fixed/sticky elements to GPU layers.
   Applying will-change to every card causes "layer explosion" — too many
   promoted layers exhaust mobile GPU VRAM (~50-100 MB on low-end Android).
   Cards receive will-change only during their animation-active phase. */
.tab-bar {
    will-change: transform;
    transform: translateX(-50%) translateZ(0);
    backface-visibility: hidden;
}

.mini-player,
.gmp,
.nav-glass,
header,
.app-header {
    will-change: transform;
    transform: translateZ(0);
    backface-visibility: hidden;
}

/* Promote background orbs to prevent paint intersection */
.bg-orb {
    will-change: transform;
    transform: translate3d(0, 0, 0);
    backface-visibility: hidden;
}

/* ─── 2. HARDWARE ACCELERATION REFINED (REMEDIATED) ─── */
/* Removed blanket translateZ(0) from static cards to eliminate GPU tile clipping and layer explosion.
   Browser-native compositing manages cards naturally with zero detachment during momentum scroll. */
.hero-card,
.practice-card,
.quick-card,
.event-card,
.glass-card {
    transform: none;
    backface-visibility: visible;
}

/* ─── 3. REDUCED MOTION ACCESSIBILITY ─── */
@media (prefers-reduced-motion: reduce) {

    *,
    *::before,
    *::after {
        animation-duration: 0s !important;
        animation-delay: 0s !important;
        transition-duration: 0s !important;
        scroll-behavior: auto !important;
    }
}

/* CSS Containment block removed to prevent GPU paint isolation clipping text/content during swipe/scroll */

/* ─── 5. VISIBILITY-DRIVEN ANIMATION PAUSING ─── */
/* Pause all infinite animations when page is hidden to save CPU and battery power */
.page-hidden *,
.page-hidden *::before,
.page-hidden *::after {
    animation-play-state: paused !important;
}