/* Mobile perf — v4
   Key fixes:
   1. Rings HIDE (position:fixed + rotate = scroll lag)
   2. Orbs: animation STOP + blur reduce (static blur = OK, animated blur = slow)
   3. Navbar backdrop-filter remove
   4. Logo filter:brightness() remove
   5. Card bounce = transform only (no box-shadow)
   6. will-change sirf sahi elements pe
*/

@media (max-width: 767px) {

  /* ── 1. RINGS — hide karo (scroll pe recomposite karte hain) */
  .rings-wrap { display: none !important; }

  /* ── 2. ORBS — animation band karo, static blur rakhho ─────
     Static blur = paint once = fine
     Animated blur = repaint every frame = lag
  ──────────────────────────────────────────────────────────── */
  .bg-orb,
  .orb {
    animation: none !important;
    will-change: auto !important;
  }
  /* Blur values kam karo — 100px+ mobile pe heavy */
  .bg-orb.orb1, .orb1 { filter: blur(55px) !important; }
  .bg-orb.orb2, .orb2 { filter: blur(55px) !important; }
  .bg-orb.orb3, .orb3 { filter: blur(40px) !important; transform: translate(-50%,-50%) !important; }

  /* ── 3. NAVBAR — backdrop-filter scroll lag ka sabse bada wajah */
  nav {
    animation: none !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
    background: rgba(4, 4, 8, 0.97) !important;
  }
  .mob-menu {
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
    background: rgba(4, 4, 8, 0.99) !important;
  }

  /* login.html ka dark nav alag hai */
  .auth-nav {
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
  }

  /* ── 4. LOGO — filter:brightness() hata, glow rakh ─────────*/
  @keyframes logoGlow {
    0%,  40% { text-shadow: 0 0 4px rgba(255,255,255,0.08); color: #e0f2f1; }
    48%      { text-shadow: 0 0 6px rgba(255,255,255,0.2);  color: #fff; }
    52%      { text-shadow: 0 0 2px rgba(255,255,255,0.1);  color: #e0f2f1; }
    55%      {
      text-shadow: 0 0 8px rgba(255,255,255,0.9), 0 0 24px #2dd4bf, 0 0 45px rgba(20,184,166,0.45);
      color: #fff;
    }
    62%      { text-shadow: 0 0 7px #fff, 0 0 16px rgba(20,184,166,0.4); color: #fff; }
    70%,100% { text-shadow: 0 0 4px rgba(255,255,255,0.08); color: #e0f2f1; }
  }

  /* ── 5. RING GLOW — box-shadow animation hata ───────────────*/
  @keyframes ringGlow {
    0%, 100% { border-color: rgba(20,184,166,0.1); }
    50%       { border-color: rgba(45,212,191,0.45); }
  }

  /* ── 6. CARD BOUNCE — box-shadow part hata, float rakh ─────*/
  @keyframes cardBounce {
    0%,  100% { transform: translateY(0)    scale(1); }
    40%        { transform: translateY(-7px) scale(1.03); }
    60%        { transform: translateY(-5px) scale(1.02); }
  }

  /* ── 7. WILL-CHANGE — sirf transform animations pe ─────────*/
  .stat-card, .skill-item, .wcard, .for-card,
  .hero-title, .hero-mob-bg, .ticker-inner { will-change: transform; }

  /* ── 8. BOX-SHADOW animations — values kam karo ─────────────*/
  @keyframes btnBreathe {
    0%, 100% { box-shadow: 0 0 18px rgba(13,148,136,0.4); }
    50%       { box-shadow: 0 0 35px rgba(13,148,136,0.7); }
  }
  @keyframes offerBreathe {
    0%, 100% { box-shadow: 0 0 35px rgba(13,148,136,0.1),  0 0 0 1px rgba(13,148,136,0.3); }
    50%       { box-shadow: 0 0 65px rgba(13,148,136,0.18), 0 0 0 1px rgba(20,184,166,0.5); }
  }
  @keyframes badgeBreathe {
    0%, 100% { box-shadow: 0 0 10px rgba(13,148,136,0.2); }
    50%       { box-shadow: 0 0 22px rgba(13,148,136,0.5); }
  }
  /* login.html ring breathe */
  @keyframes ringBreathe {
    0%, 100% { box-shadow: 0 0 20px rgba(124,58,237,0.3), inset 0 0 12px rgba(168,85,247,0.1); transform: scale(1); }
    50%       { box-shadow: 0 0 35px rgba(124,58,237,0.5), inset 0 0 18px rgba(168,85,247,0.15); transform: scale(1.04); }
  }
  /* login.html grid pulse */
  @keyframes gridPulse {
    0%, 100% { opacity: 0.4; }
    50%       { opacity: 0.7; }
  }

  /* ── 9. HOVER — mobile pe disable ──────────────────────────*/
  .pcard:hover, .lb-card:hover, .testi-card:hover,
  .plan-card:hover, .why-card:hover, .how-step:hover,
  .stat:hover, .wcard:hover, .for-card:hover {
    transform: none !important;
    box-shadow: inherit !important;
  }

  /* ── 10. DROP-SHADOW filters — mobile pe expensive ─────────*/
  .how-step, .testi-card, .why-card,
  .stat-card, .earn-card, .hc-corner {
    filter: none !important;
  }

  /* ── 11. SPARKS — JS se band, CSS bhi block ─────────────────*/
  .espark { display: none !important; }

  /* ── 12. TESTI TRACK — GPU composite ────────────────────────*/
  .testi-track { will-change: transform; }

  /* ── 13. HC-CORNER swap — only 4 cards on mobile ───────────*/
  .hc-corner { will-change: transform; }

  /* ── 14. HEAVY animations off ───────────────────────────────*/
  .why-card::after,
  .perf-chart-box::before,
  .perf-chart-box::after { display: none !important; }

  /* ── 15. AFFILIATE PAGES — broken shard drop-shadows off ────*/
  .stat-card.green, .stat-card.cyan,
  .stat-card.gold, .stat-card.orange,
  .earn-card:nth-child(1), .earn-card:nth-child(2),
  .earn-card:nth-child(3), .earn-card:nth-child(4),
  .why-card:nth-child(1), .why-card:nth-child(2),
  .why-card:nth-child(3), .why-card:nth-child(4),
  .why-card:nth-child(5), .why-card:nth-child(6),
  .top3-card { filter: none !important; }

  /* ── 16. FLOAT animations on dashboard cards — off ──────────*/
  .stat-card, .earn-card { animation: none !important; }

  /* ── 17. BACKDROP-FILTER — sab pages pe band ────────────────*/
  .topbar, .sidebar, [style*="backdrop-filter"] {
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
  }

  /* ── 18. SCROLL SMOOTHNESS ───────────────────────────────────*/
  * { -webkit-overflow-scrolling: touch; }
  .testi-track-wrap { overflow: hidden; }

  /* ── 19. TRANSFORM only for animations ─────────────────────*/
  .testi-track.row1, .testi-track.row2,
  .hc-corner, .stats-track, .how-track {
    will-change: transform;
    transform: translateZ(0);
  }

}