@media (max-width: 768px) {

  /* ══ MOBILE: Kill ALL infinite GPU animations across ALL overlay pages ══
     Safari on iOS cannot handle concurrent GPU layers from multiple overlay pages.
     All pages are in DOM simultaneously. Kill everything not visible. */

  /* ── Main page background animations ── */
  .aurora-blob,
  .rec-orb,
  .logo-glow-ring,
  .logo-glow-ring2,
  .iphone-glow,
  .iphone-wrap {
    animation: none !important;
    will-change: auto !important;
    transform: none !important;
  }

  /* ── Actors page ── */
  .actors-page .aurora-blob {
    animation: none !important;
    will-change: auto !important;
    transform: none !important;
  }

  /* ── CRITICAL: actors-orb мають inline styles — перебиваємо через клас ── */
  /* filter:blur(70px) × 3 = ~200MB VRAM → OOM краш при зумі на iOS Safari */
  #actors-page-overlay .actors-orb {
    display: none !important;
  }

  /* ── CRITICAL: troupe-photo-bg — приховати розмитий фон-дублікат.
     filter:none зробив його видимим як звичайне фото (дублікат).
     Замість цього — ховаємо елемент, фон блоку (#000) залишається. ── */
  #actors-page-overlay .troupe-photo-bg {
    display: none !important;
  }

  /* ── CRITICAL: actor cards — прибрати GPU compositing layer з КОЖНОЇ картки ── */
  /* will-change:transform на 30–50 картках = десятки compositing layers → OOM ── */
  /* Важливо: НЕ чіпаємо transform — він потрібен для анімації появи карток ── */
  #actors-page-overlay .actor-card {
    will-change: auto !important;
  }

  /* ── CRITICAL: about-orb / cp-orb / np-orb — інші overlay-сторінки в DOM одночасно.
     Кожна має 3× filter:blur(70px) inline — навіть приховані вони створюють GPU-шари. ── */
  #about-page-overlay .about-orb,
  #contact-page-overlay .cp-orb,
  #news-page-overlay .np-orb {
    display: none !important;
  }

  /* ── About page: orbit rings, dots, timeline glow ── */
  #about-page-overlay .logo-orbit,
  #about-page-overlay .logo-orbit2,
  #about-page-overlay .logo-orbit3,
  #about-page-overlay .aurora-blob,
  #about-page-overlay .eyebrow-dot,
  #about-page-overlay .tl-dot {
    animation: none !important;
    will-change: auto !important;
    transform: none !important;
  }
  /* Keep tl-dot visible but static */
  #about-page-overlay .tl-dot {
    opacity: 1 !important;
  }

  /* ── Contact page: aurora blobs, particles ── */
  #contact-page-overlay .cp-ab,
  #contact-page-overlay .cp-particle,
  #contact-page-overlay .aurora-blob {
    animation: none !important;
    will-change: auto !important;
    transform: none !important;
  }

  /* ── BB page: any orbs ── */
  #bb-page-overlay .aurora-blob,
  #bb-page-overlay .rec-orb {
    animation: none !important;
    will-change: auto !important;
    transform: none !important;
  }

  /* ── Cards: shimmer animation (runs on every visible card) ── */
  .btn-details-light {
    animation: none !important;
    background: rgba(201,169,110,0.15) !important;
  }

  /* ── Actors: star twinkle (CSS-based) ── */
  #actors-page-overlay .star-twinkle,
  #actors-page-overlay [style*="starTwinkle"] {
    animation: none !important;
  }

  /* ── Header sticky, mobile-nav fixed (always appears in viewport on burger tap) ── */
  header {
    position: sticky !important;
  }
  /* Overlay pages keep their fixed header (it's anchored to overlay, which is itself fixed
     to the viewport — sticky breaks inside the scrollable overlay container). */
  #about-page-overlay header,
  #contact-page-overlay header,
  #news-page-overlay header,
  #bb-page-overlay header,
  #actors-page-overlay header {
    position: fixed !important;
  }

  /* ── All mobile nav menus must be fixed to the viewport so they always appear right
        under the header in front of the user's eyes, regardless of scroll position.
        Higher specificity (#id .class) is required to beat each page's own scoped rules. ── */
  .mobile-nav,
  #actors-page-overlay .mobile-nav,
  #contact-page-overlay .cp-mobile-nav,
  #contact-page-overlay .mobile-nav,
  #about-page-overlay .ab-mobile-nav,
  #news-page-overlay .np-mobile-nav,
  #bb-page-overlay .bb-mobile-nav,
  #bb-page-overlay .mobile-nav {
    position: fixed !important;
    top: calc(70px + var(--safe-top, 0px)) !important;
    left: 0 !important;
    right: 0 !important;
    z-index: 10000 !important;
  }

  /* Remove transform on overlay containers — transform on a parent makes
     position:fixed children anchor to that parent instead of the viewport.
     The transform was originally added for Safari compositing; safe to drop on mobile. */
  #about-page-overlay {
    transform: none !important;
    -webkit-transform: none !important;
  }

  /* ── Kill blur filters on aurora/orb elements (GPU layer each) ── */
  .aurora-blob,
  .rec-orb,
  .logo-glow-ring,
  #about-page-overlay .logo-orbit,
  #contact-page-overlay .cp-ab {
    filter: none !important;
  }

  /* ── GSAP: prevent orb animations from being applied on mobile ── */
  #about-page-overlay .np-orb-1,
  #about-page-overlay .np-orb-2,
  #news-page-overlay .np-orb-1,
  #news-page-overlay .np-orb-2 {
    animation: none !important;
    transform: none !important;
    will-change: auto !important;
  }

  /* ── Actors page: particles, dots, title shimmer ── */
  .actors-page .hero-eyebrow-dot,
  .actors-page .particle,
  #actors-page-overlay .troupe-badge-dot {
    animation: none !important;
  }
  .actors-page .particle { display: none !important; }
  .actors-page .star { animation: none !important; opacity: 0.4 !important; }

  /* ── About page: all remaining infinite animations ── */
  #about-page-overlay .logo-orbit2,
  #about-page-overlay .logo-orbit3,
  #about-page-overlay .stage-glow {
    animation: none !important;
    will-change: auto !important;
  }
  #about-page-overlay .logo-orbit,
  #about-page-overlay .logo-orbit2,
  #about-page-overlay .logo-orbit3 {
    filter: none !important;
    opacity: 0 !important;
  }

  /* ── Contact page: all particles, dots, badge, pin ── */
  #contact-page-overlay .cp-particle,
  #contact-page-overlay .cp-eyebrow-dot,
  #contact-page-overlay .cp-hours-dot,
  #contact-page-overlay .cp-map-dot,
  #contact-page-overlay .cp-apple-pin-shadow,
  #contact-page-overlay .cp-map-overlay-badge {
    animation: none !important;
    will-change: auto !important;
  }
  #contact-page-overlay .cp-apple-pin-wrap { animation: none !important; }
  #contact-page-overlay .cp-particle { display: none !important; }

  /* ── News page: dots ── */
  #news-page-overlay .np-eyebrow-dot,
  #news-page-overlay .np-hbar-dot {
    animation: none !important;
  }

  /* ── BB page: dots ── */
  #bb-page-overlay .eyebrow-dot {
    animation: none !important;
  }

  /* ── Global: splash shimmer (runs during splash then element is hidden) ── */
  .splash-video-cell::before { animation: none !important; }

  /* ── Global: card shimmer ── */
  .shimmer::after { animation: none !important; }
  .section-loading-spin { animation: spinLoad 1.2s linear infinite; } /* keep but slow down */

  /* ── CRITICAL: actor-profile modal — heavy backdrop-filter blur ──
     Modal uses backdrop-filter: blur(28px) + overlay blur(14px) = double GPU pass.
     Even when closed, browser may keep compositing layer ready. Disable on mobile. ── */
  #actor-profile-overlay {
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
  }
  #actor-profile-modal {
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
  }

  /* ── Remove all will-change globally on mobile (saves GPU memory) ── */
  * { will-change: auto !important; }
  /* Re-allow only for active scroll containers */
  #actors-page-overlay,
  #about-page-overlay,
  #contact-page-overlay,
  #news-page-overlay,
  #bb-page-overlay { will-change: auto !important; }

}