/* ============================================================
   mobile-perf.css  — phone smoothness pass (<=768px only)
   Goal: kill per-frame repaint costs that cause scroll jank.
   Desktop is untouched. Visual identity preserved (glass goes
   to solid-ish dark instead of live-blur; static glows stay).
   ============================================================ */

@media (max-width: 768px) {

  /* ---- 1. Kill backdrop-filter everywhere on mobile ----
     This is the single biggest scroll-jank source. The sticky
     nav re-blurred on every frame. Elements already sit on a
     dark rgba bg, so dropping the live blur reads the same. */
  [style*="backdrop-filter"],
  [style*="backdropFilter"],
  .tp__nav,
  .vhero__pill,
  .vhero__countdown,
  .hero__announce,
  .hero__lede,
  .hero__countdown-wrap,
  .vslider__arrow,
  .vslider__bottom,
  .venue__arrow,
  .sp-tile__hint,
  .sp-tile__flip-prompt,
  .nav__shell,
  .prog-chip,
  .prog-doors-inner,
  .prog-card,
  .clips-thumb__play,
  .purchase-toast {
    -webkit-backdrop-filter: none !important;
    backdrop-filter: none !important;
  }

  /* Bump the most see-through glass bits so they still read
     well now that the live blur is gone. */
  .vhero__pill { background: rgba(0, 0, 0, 0.72) !important; }
  .vhero__countdown { background: rgba(0, 0, 0, 0.78) !important; }
  /* Hero sits on a WHITE light-theme background. With the live blur removed,
     these must be SOLID LIGHT panels (not dark) or they read as black boxes
     with black text on white (Charlie 16 Jun 15:36). Opaque white + dark text. */
  .hero__announce { background: rgba(255, 255, 255, 0.96) !important; color: var(--fog-1) !important; }
  .hero__announce * { color: var(--fog-1) !important; }
  .hero__lede { background: rgba(255, 255, 255, 0.94) !important; color: var(--fog-0) !important; }
  .hero__lede * { color: var(--fog-0) !important; }
  .nav__shell { background: rgba(13, 11, 20, 0.97) !important; }
  /* prog-card/chip/doors blur removed at source in Program.js;
     they keep their own teal gradient bg, no override needed. */

  /* ---- 2. Freeze the always-running infinite animations ----
     The hero glows animate scale on a blur(100px) 1200px box,
     and keynote cards run an infinite conic hue-cycle. Both
     repaint huge surfaces every frame. Freeze on mobile — they
     stay visible, just static. */
  .hero__glow,
  .hero__glow--red,
  .hero__glow--amber,
  .hero__glow--cyan {
    animation: none !important;
  }
  .ev--keynote::before,
  .ev--keynote::after,
  .ev--keynote > .glow,
  .ev--keynote > .glow::after {
    animation: none !important;
  }
  .sp-tile__flip-prompt {
    animation: none !important;  /* promptPulse loop */
  }
  /* Program section infinite loops (dot pulse, doors glow,
     scanning line) — freeze on mobile. */
  .prog-label-dot,
  .prog-doors-inner,
  .prog-line::after,
  .prog-dot::before {
    animation: none !important;
  }
  .marq__track { /* keep marquee, it's transform-only + cheap */ }

  /* ---- 3. Drop the full-viewport grain blend ----
     mix-blend-mode:overlay on a viewport-sized SVG noise layer
     forces a compositing blend on every scroll frame. */
  .hero__grain {
    display: none !important;
  }

  /* ---- 4. Trim the giant ambient blur glows ----
     blur(80-100px) on 700-1200px elements is heavy to paint.
     Shrink + lighten so they're cheaper but still present. */
  .hero__glow--red {
    width: 420px !important;
    height: 320px !important;
    filter: blur(60px) !important;
  }
  .hero__glow--amber,
  .hero__glow--cyan {
    width: 320px !important;
    height: 240px !important;
    filter: blur(60px) !important;
  }
  .pricing::before,
  .speakers::before {
    filter: blur(50px) !important;
  }

  /* ---- 5. Stop hover-transform reflows from sticking on touch ----
     Touch devices can latch :hover lift transforms, causing
     stuck/janky cards. Neutralise the lift on touch. */
  .hero__stat-card:hover,
  .price-card:hover,
  .sponsor__card:hover,
  .ev:hover,
  .ev--keynote:hover,
  .ev--panel:hover {
    transform: none !important;
  }
}