/* ============================================
   Performance Optimizations — Lmaopixel
   Reduces GPU strain on lower-end devices
   ============================================ */

/* ===== REDUCE BACKDROP-FILTER STRENGTH ===== */
/* Original blur(24px) was extremely GPU-expensive. Reduced values still look great. */
.nav {
  backdrop-filter: blur(12px) saturate(1.2);
  -webkit-backdrop-filter: blur(12px) saturate(1.2);
}

/* ===== DISABLE BACKDROP-FILTER ON TOUCH DEVICES ===== */
@media (hover: none) and (pointer: coarse) {
  .nav,
  .ip-card,
  .stat-card,
  .staff-card,
  .rule-item,
  .qq-card,
  .carousel-card-inner,
  .join-video .play-icon,
  .btt-btn {
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
  }
  /* Keep minimal blur for modals (needed for readability) */
  .modal-overlay {
    backdrop-filter: blur(4px);
    -webkit-backdrop-filter: blur(4px);
  }
}

/* ===== GPU LAYER PROMOTION (only where it helps scrolling) ===== */
.carousel-track,
.join-steps,
.stats-grid,
.staff-grid {
  will-change: transform;
}

/* ===== REMOVE GPU HINTS ON MOBILE TO SAVE MEMORY ===== */
@media (max-width: 768px) {
  .carousel-track,
  .join-steps,
  .stats-grid,
  .staff-grid {
    will-change: auto;
  }
}

/* ===== RESPECT REDUCED-MOTION PREFERENCE ===== */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
  html { scroll-behavior: auto; }
  .plx { will-change: auto !important; transform: none !important; }
}

/* ===== SMOOTH SCROLLING ON DESKTOP ONLY ===== */
@media (hover: none) and (pointer: coarse) {
  html { scroll-behavior: auto; }
}