/* ============================================
   MOBILE PERFORMANCE OVERRIDES
   ============================================
   File: mobile-performance.css
   Location: /wp-content/themes/rym-main-theme/mobile-performance.css
   
   Reduces GPU-heavy effects on mobile/tablet:
   - Disables blur() orb animations
   - Replaces backdrop-filter with solid backgrounds
   - Removes scroll-behavior: smooth (JS handles scrolling)
   - Disables hover transforms that trigger repaints
   ============================================ */

/* ---- Remove CSS smooth scroll globally ----
   JS handles smooth scrolling on desktop nav.
   On mobile nav taps, we use instant jump.
   Having both CSS + JS smooth scroll causes jank. */
html {
    scroll-behavior: auto !important;
}

/* ---- Mobile & Tablet (matches your nav breakpoint) ---- */
@media (max-width: 1200px) {

    /* Replace animated blurred orbs with static colour washes.
       Same visual effect, zero GPU cost.
       - No filter: blur() (expensive per-frame)
       - No animation (expensive per-frame)
       - Uses will-change: auto to prevent GPU layer promotion */
    .orb {
        animation: none !important;
        filter: none !important;
        will-change: auto !important;
        opacity: 0.25 !important;
    }

    .orb-1 {
        width: 500px;
        height: 500px;
        background: radial-gradient(circle, rgba(140, 104, 218, 0.5) 0%, transparent 70%) !important;
        top: -15%;
        left: -20%;
    }

    .orb-2 {
        width: 450px;
        height: 450px;
        background: radial-gradient(circle, rgba(255, 126, 153, 0.45) 0%, transparent 70%) !important;
        bottom: -10%;
        right: -15%;
    }

    .orb-3 {
        width: 350px;
        height: 350px;
        background: radial-gradient(circle, rgba(140, 104, 218, 0.3), rgba(255, 126, 153, 0.2) 50%, transparent 70%) !important;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
    }

    /* Replace backdrop-filter with solid semi-transparent bg.
       backdrop-filter: blur() is extremely expensive on mobile
       and runs on every scroll/repaint frame. */
    .glass-nav .nav-container {
        backdrop-filter: none !important;
        -webkit-backdrop-filter: none !important;
        background: rgba(8, 5, 16, 0.85) !important;
    }

    .glass-card {
        backdrop-filter: none !important;
        -webkit-backdrop-filter: none !important;
        background: rgba(255, 255, 255, 0.06) !important;
    }

    .calculator-card {
        backdrop-filter: none !important;
        -webkit-backdrop-filter: none !important;
        background: rgba(255, 255, 255, 0.06) !important;
    }

    .footer-card {
        backdrop-filter: none !important;
        -webkit-backdrop-filter: none !important;
        background: rgba(255, 255, 255, 0.06) !important;
    }

    /* Disable card hover lift — causes repaints on touch */
    .glass-card:hover {
        transform: none;
    }

    /* Simplify background gradient — fewer layers but still rich */
    .bg-gradient {
        background:
            radial-gradient(ellipse at 0% 0%, rgba(140, 104, 218, 0.35) 0%, transparent 50%),
            radial-gradient(ellipse at 100% 100%, rgba(255, 126, 153, 0.3) 0%, transparent 50%),
            radial-gradient(ellipse at 50% 50%, rgba(140, 104, 218, 0.1) 0%, transparent 60%);
    }

    /* Mobile menu — ensure no backdrop-filter on the menu itself */
    .mobile-menu {
        backdrop-filter: none !important;
        -webkit-backdrop-filter: none !important;
        background: #0f0a1a !important;
    }

    .mobile-overlay {
        backdrop-filter: none !important;
        -webkit-backdrop-filter: none !important;
    }
}

/* ---- Small phones: even more aggressive ---- */
@media (max-width: 768px) {

    /* Disable all hover transforms */
    .glass-card:hover,
    .btn-primary:hover,
    .btn-cta-gradient:hover,
    .pricing-card.featured:hover,
    .demo-card:hover,
    .feature-block__visual:hover {
        transform: none !important;
        box-shadow: none !important;
    }

    /* Slightly reduced bg-gradient on small phones */
    .bg-gradient {
        background:
            radial-gradient(ellipse at 10% 10%, rgba(140, 104, 218, 0.3) 0%, transparent 55%),
            radial-gradient(ellipse at 90% 90%, rgba(255, 126, 153, 0.25) 0%, transparent 55%);
    }

    /* Simpler feature visual hover */
    .feature-block__visual:hover {
        border-color: var(--glass-border);
    }
}