/*
 * perf.css — Performance & GPU fixes for low-end mobile devices
 * Included in all main pages via <link rel="stylesheet">
 */

/* ── 1. Orb background animations: disable on mobile ─────────────────────────
   The animated filter:blur() orbs are the #1 cause of jank on old phones.
   They force a full GPU repaint every frame. On mobile we keep the visual
   but freeze the animation so only the static blur remains.
────────────────────────────────────────────────────────────────────────────── */
@media (max-width: 768px) {
    .orb,
    [class*="orb-"] {
        animation: none !important;
        will-change: auto !important;
    }
}

/* ── 2. Respect prefers-reduced-motion system setting ─────────────────────── */
@media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
    }
}

/* ── 3. Force GPU compositing on animated elements (avoids layout thrashing) ─ */
.orb,
[class*="orb-"] {
    will-change: transform;
    transform: translateZ(0);
    backface-visibility: hidden;
    -webkit-backface-visibility: hidden;
}

/* ── 4. Reduce backdrop-filter intensity on mobile ───────────────────────────
   backdrop-filter:blur() is the most GPU-intensive property.
   We cut blur radius in half on mobile.
────────────────────────────────────────────────────────────────────────────── */
@media (max-width: 768px) {
    [style*="backdrop-filter: blur(40px)"],
    [style*="backdrop-filter:blur(40px)"] {
        backdrop-filter: blur(12px) !important;
        -webkit-backdrop-filter: blur(12px) !important;
    }
    [style*="backdrop-filter: blur(24px)"],
    [style*="backdrop-filter:blur(24px)"] {
        backdrop-filter: blur(8px) !important;
        -webkit-backdrop-filter: blur(8px) !important;
    }

    /* Nav & glass elements */
    .mobile-nav,
    .navbar,
    #navbar {
        backdrop-filter: blur(10px) !important;
        -webkit-backdrop-filter: blur(10px) !important;
    }

    /* Mobile nav shooting-star animation: simplify */
    .mobile-nav::before {
        animation-duration: 6s !important;
    }
}

/* ── 5. Smooth scrolling on iOS ──────────────────────────────────────────── */
* {
    -webkit-overflow-scrolling: touch;
}