/* =====================================================
   SUBJECTS ONLINE — Mobile Performance Optimization
   Only kills the truly expensive GPU effects.
   All animations, transitions & fade-ins are kept.
   ===================================================== */
/* ── Global Viewport Horizontal Scroll Prevention ── */
html,
body {
    overflow-x: hidden !important;
    max-width: 100vw;
}

@media (max-width: 768px) {

    /* ── 1. Kill backdrop-filter (by far the most expensive effect on mobile GPUs) ── */
    *,
    *::before,
    *::after {
        backdrop-filter: none !important;
        -webkit-backdrop-filter: none !important;
    }

    /* Compensate with a solid background where blur was used for readability */
    nav,
    #main-nav,
    header {
        background-color: var(--bg, #080c14) !important;
    }

    /* ── 2. Simplify only the heaviest box-shadows ── */
    /* (keeps subtle shadows, removes the giant glowing ones) */
    [style*="box-shadow: 0 0 30px"],
    [style*="box-shadow:0 0 30px"] {
        box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15) !important;
    }

    /* ── 3. Page transition overlay — quicker on mobile ── */
    #page-transition-overlay {
        transition-duration: 0.1s !important;
    }

}

/* ── Respect OS-level "Reduce Motion" preference ── */
@media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
    }
}