/* ═══════════════════════════════════════════════════════════════════════════
   ArabyBot · Mobile Performance Overrides
   Loaded LAST — kills GPU-heavy effects on mobile to keep scrolling buttery.
   Target: 60fps scroll on mid-range Android phones.

   Heaviest offenders disabled here:
     1. backdrop-filter (extreme GPU cost)
     2. Aurora blob blur+animation
     3. Star particles
     4. Conic gradient rotations
     5. Shine sweeps on buttons
     6. Chart roaming dot + filter drop-shadow loops
     7. Card hover shines + 3D transforms
   ═══════════════════════════════════════════════════════════════════════════ */

@media (max-width: 980px) {

  /* ──────────────────────────────────────────────────────────────────────
     1. KILL ALL backdrop-filter (most expensive GPU operation on mobile)
     ──────────────────────────────────────────────────────────────────── */
  .site-nav, .site-tabbar, .site-mobile-menu, .site-mobile-link,
  .site-mobile-detail, .site-footer, .site-nav-drop-panel,
  .ab-feat-card, .ab-price-card, .ab-test, .ab-step, .ab-uc, .ab-int-card,
  .ab-hero-mock, .ab-faq details, .ab-stats-row, .ab-cta-band,
  .mo-toast, .mo-preload, .ab-stars,
  .abp-cursor, .abp-card, .ab-float-badge,
  .ab-fbadge, .ab-footer, .ab-drawer, .mo-live-pill, .mo-sticky-cta,
  .ab-bg, .ab-aurora, .ab-grid, body.ab-body {
    -webkit-backdrop-filter: none !important;
            backdrop-filter: none !important;
  }

  /* Replace translucent surfaces with solid (or near-solid) colors */
  .site-nav        { background: color-mix(in srgb, var(--ab-bg-1) 96%, transparent) !important; }
  .site-tabbar     { background: var(--ab-card-solid) !important; }
  .site-footer     { background: var(--ab-bg-1) !important; }
  .site-mobile-menu{ background: var(--ab-bg-0) !important; }
  .ab-feat-card,
  .ab-price-card,
  .ab-test,
  .ab-step,
  .ab-uc,
  .ab-int-card,
  .ab-faq details,
  .ab-stats-row,
  .ab-hero-mock,
  .site-mobile-link,
  .site-mobile-detail { background: var(--ab-card-solid) !important; }

  /* ──────────────────────────────────────────────────────────────────────
     2. STOP all aurora + grid + stars (GPU-heavy decorative layers)
     ──────────────────────────────────────────────────────────────────── */
  .ab-aurora .ab-au {
    animation: none !important;
    opacity: .22 !important;
    filter: blur(40px) !important;   /* halve the blur radius */
  }
  /* Or disable aurora entirely on very-low-end mobile by hiding 2 of 4 blobs */
  .ab-au-3, .ab-au-4 { display: none !important; }
  .ab-stars { display: none !important; }
  .ab-grid  {
    /* Static grid is fine; just don't have it on mask animations */
    mask-image: none !important;
    -webkit-mask-image: none !important;
    opacity: .35 !important;
  }

  /* ──────────────────────────────────────────────────────────────────────
     3. STOP rotating conic gradients (extremely costly to reflow)
     ──────────────────────────────────────────────────────────────────── */
  .abp-card::before,
  .abp-card::after,
  .ab-cta-band::after,
  .ab-cta-band::before,
  .ab-price-card.featured::after,
  .ab-float-badge::before {
    animation: none !important;
    display: none !important;
  }

  /* ──────────────────────────────────────────────────────────────────────
     4. STOP shine sweeps + glows on buttons/cards
     ──────────────────────────────────────────────────────────────────── */
  .ab-btn::before,
  .ab-btn-primary::after,
  .site-nav-cta.primary::before,
  .site-mobile-cta a.primary::before,
  .site-tab.cta::before,
  .ab-feat-card::before,
  .ab-feat-card::after {
    animation: none !important;
    display: none !important;
  }

  /* Replace breathing aura with simple shadow */
  .ab-btn-primary {
    box-shadow: 0 8px 22px rgba(124,58,237,.35) !important;
  }

  /* ──────────────────────────────────────────────────────────────────────
     5. STOP infinite hero chart animations
     ──────────────────────────────────────────────────────────────────── */
  .abp-chart-dot {
    animation: abpChartDot .5s ease-out .8s forwards !important;
    filter: none !important;        /* drop-shadow is expensive */
  }
  .abp-chart-line {
    filter: none !important;
  }

  /* ──────────────────────────────────────────────────────────────────────
     6. KILL 3D / transform-heavy decoratives
     ──────────────────────────────────────────────────────────────────── */
  .ab-hero-visual::after,           /* orbit ring */
  .ab-hero-visual::before,          /* halo */
  .ab-hero::before {
    display: none !important;
  }
  .ab-hero-mock { transform: none !important; perspective: none !important; }

  /* ──────────────────────────────────────────────────────────────────────
     7. SIMPLIFY footer decorations
     ──────────────────────────────────────────────────────────────────── */
  .site-footer::after,
  .ab-footer::after { display: none !important; }

  /* ──────────────────────────────────────────────────────────────────────
     8. Disable expensive scroll-triggered hover transforms (mobile = no hover anyway)
     ──────────────────────────────────────────────────────────────────── */
  .ab-feat-card:hover,
  .ab-price-card:hover,
  .ab-test:hover,
  .ab-uc:hover,
  .ab-int-card:hover,
  .ab-step:hover {
    transform: none !important;
  }

  /* ──────────────────────────────────────────────────────────────────────
     9. Make scrolling cheaper — content-visibility for off-screen sections
        (Chrome 85+, Safari 18+). No-op on older browsers.
     ──────────────────────────────────────────────────────────────────── */
  .ab-section {
    content-visibility: auto;
    contain-intrinsic-size: 1px 720px;
  }
  .ab-footer, .site-footer {
    content-visibility: auto;
    contain-intrinsic-size: 1px 480px;
  }

  /* ──────────────────────────────────────────────────────────────────────
     10. Cap animation durations + remove blur from drop-shadows
     ──────────────────────────────────────────────────────────────────── */
  .ab-stat-cell b.is-pulse { filter: none !important; }
  .ab-stat-cell b { filter: none !important; }
  .ab-grad { filter: none !important; }

  /* ──────────────────────────────────────────────────────────────────────
     11. WhatsApp float — keep visible, but no infinite pulse animation
     ──────────────────────────────────────────────────────────────────── */
  .wa-float-pulse { animation: none !important; opacity: 0 !important; }

  /* ──────────────────────────────────────────────────────────────────────
     12. Reduce blur on remaining decorative drop-shadows
     ──────────────────────────────────────────────────────────────────── */
  .ab-hero-mock { box-shadow: 0 18px 40px rgba(0,0,0,.4) !important; }
  .ab-cta-band { box-shadow: 0 20px 50px rgba(124,58,237,.3) !important; }

  /* ──────────────────────────────────────────────────────────────────────
     13. Disable will-change on elements that don't need it constantly
     ──────────────────────────────────────────────────────────────────── */
  .abp-magnetic, .abp-tilt, .ab-hero-mock {
    will-change: auto !important;
  }

  /* ──────────────────────────────────────────────────────────────────────
     14. The bottom tab bar uses backdrop-filter — replace with solid card-solid
     ──────────────────────────────────────────────────────────────────── */
  .site-tabbar {
    background: var(--ab-card-solid) !important;
    border: 1px solid var(--ab-border) !important;
  }
}

/* ═══════════════════════════════════════════════════════════════════════════
   USER PREFERENCE: prefers-reduced-motion → kill EVERYTHING animated.
   ═══════════════════════════════════════════════════════════════════════════ */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration:    0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration:   0.001ms !important;
  }
  .ab-aurora, .ab-stars, .ab-float-badge,
  .abp-cursor, .abp-card::before, .abp-card::after,
  .ab-cta-band::after, .wa-float-pulse {
    animation: none !important;
    display: none !important;
  }
}

/* ═══════════════════════════════════════════════════════════════════════════
   Low-memory / low-power devices: hint to drop further effects
   ═══════════════════════════════════════════════════════════════════════════ */
@media (max-width: 480px) {
  /* Even more aggressive on very small screens (cheap phones) */
  .ab-aurora { opacity: .15 !important; }
  .ab-grid   { display: none !important; }
}

/* ═══════════════════════════════════════════════════════════════════════════
   PRE-LAUNCH: pointer:coarse (any touch device, any size)
   width-based `max-width: 980px` misses iPad Pro in landscape (touch but wide).
   This catches all touch input regardless of viewport.
   ═══════════════════════════════════════════════════════════════════════════ */
@media (hover: none), (pointer: coarse) {
  /* Disable lift/tilt on hover — touch devices "stick" the hover state. */
  .ab-feat-card:hover,
  .ab-pricing-card:hover,
  .ab-int-tile:hover,
  .ab-sol-card:hover,
  .abp-card:hover,
  .abp-feature-card:hover {
    transform: none !important;
    filter: none !important;
  }
  /* Drop expensive blurs site-wide on touch. */
  .ab-aurora .ab-au { filter: blur(28px) !important; opacity: .18 !important; }
}