/* ============================================================================
   MOBILE PERFORMANCE

   Loaded last on purpose. The design leans on large blur filters,
   backdrop-filter and a lot of always-running particle animations. On a
   desktop GPU that is free; on a mid-range phone every blurred surface is
   re-rasterised each frame and the page stutters.

   These rules must beat the section stylesheets, which load after site.css,
   so they live in their own file at the end of the cascade rather than
   fighting the same-specificity selectors that define the effects.
   ========================================================================== */
@media (max-width: 900px) {

  /* ---- Large blurred glows: keep the gradient, drop the filter --------- */
  .cin-glow, .hb-blob, .d-shape, .hero-glow,
  .page-hero-bg::before, .page-hero-bg::after,
  .hero-cursor-glow, .cc-shadow {
    filter: none;
  }

  /* ---- backdrop-filter re-reads what is behind the element every frame -- */
  .nav { backdrop-filter: none; background: rgba(6, 8, 12, 0.96); }
  .topbar, .fa-btn, .bp-feat-tag, .hero-chip,
  .ba-ph span, .crew-verified, .rm-card, .review-modal {
    backdrop-filter: none;
  }
  /* The live badge injects its stylesheet at runtime, after this file, so
     this is the one place a plain rule cannot win. */
  .wm-live { backdrop-filter: none !important; }
  .fa-btn { background: #0d1119; }

  /* ---- Particle loops inside the hero car ------------------------------ */
  /* Dozens of spans each running their own infinite keyframe. They are pure
     decoration and invisible at this size. */
  .cin-orbit, .cin-water, .ww-rings,
  .cc-water-streams, .cc-foam-cover, .seq-foam { display: none; }

  .cin-floor, .hb-blob, .cc-shadow,
  .cc-shine-sweep, .css-car, .cc-wheel,
  .d-shape.s1, .d-shape.s2, .d-shape.s3 { animation: none; }

  /* Full-screen blended grain for a texture nobody sees on a phone. */
  .noise { display: none; }

  /* ---- Below-the-fold sections stop painting until they are near ------- */
  .market-compare, .crew, .addons, .gallery,
  .blog-preview, .faq-home, .wherewash, .discount {
    content-visibility: auto;
    contain-intrinsic-size: auto 900px;
  }
}

/* Anyone who asked for less motion gets the same treatment at any width. */
@media (prefers-reduced-motion: reduce) {
  .cin-orbit, .cin-water, .cc-water-streams, .cc-foam-cover, .seq-foam { display: none; }
  .cin-floor, .d-shape, .hb-blob, .css-car, .cc-shine-sweep,
  .topbar-track, .marquee-track, .ba-track { animation: none; }
}