/*
 * mobile-perf-deferred.css — NON-CRITICAL BELOW-FOLD RULES
 * Loaded asynchronously (preload/onload) — never blocks first paint.
 *
 * These rules only affect elements that appear below the hero fold:
 *   5. Glow shadow reductions on cards/buttons (decorative, below fold)
 *   8. GPU contain hints for Framer Motion parallax orbs (below fold)
 *   9. Hover scale disable on touch devices (cosmetic, no-op on mobile)
 *
 * If this file loads slightly late, the original (larger) shadows/scales
 * are the correct designed state — no visible breakage.
 */

/* ==========================================================
   5. GLOW SHADOWS — reduce on mobile (below-fold elements)
   These specific shadow classes appear on cards, service blocks,
   and CTA buttons that are all below the hero fold. Safe to defer.
   ========================================================== */

@media (max-width: 767px) {
  .shadow-\[0_0_100px_rgba\(204\,255\,0\,0\.15\)\] {
    box-shadow: 0 0 30px rgba(204, 255, 0, 0.1) !important;
  }
  .shadow-\[0_0_50px_rgba\(204\,255\,0\,0\.4\)\] {
    box-shadow: 0 0 20px rgba(204, 255, 0, 0.2) !important;
  }
  .shadow-\[0_0_25px_rgba\(204\,255\,0\,1\)\,0_0_50px_rgba\(204\,255\,0\,0\.4\)\] {
    box-shadow: 0 0 12px rgba(204, 255, 0, 0.7) !important;
  }
  .shadow-\[0_0_30px_rgba\(204\,255\,0\,0\.3\)\] {
    box-shadow: 0 0 15px rgba(204, 255, 0, 0.2) !important;
  }
  .shadow-\[0_0_20px_rgba\(204\,255\,0\,0\.3\)\] {
    box-shadow: 0 0 10px rgba(204, 255, 0, 0.2) !important;
  }
}

/* ==========================================================
   8. FRAMER MOTION ANIMATED ELEMENTS — GPU contain hints
   The orbs below the hero fold get layout/style containment to
   prevent their compositor layer from dirtying ancestor layers.
   ========================================================== */

@media (max-width: 767px) {
  .absolute.rounded-full[class*="bg-neo"],
  .absolute.rounded-full[class*="bg-purple"] {
    contain: layout style;
  }
}

/* ==========================================================
   9. SCALE HOVER EFFECTS — disable on touch devices
   .hover:scale-105 and .group-hover:scale-110 are no-ops on
   touch devices anyway (hover state never fires). Explicitly
   removes them from the style recalculation budget on mobile.
   ========================================================== */

@media (hover: none) {
  .hover\:scale-105:hover {
    scale: 1 !important;
  }
  .group-hover\:scale-110:is(:where(.group):hover *) {
    scale: 1 !important;
  }
}