/* ─────────────────────────────────────────────────────────
   Mobile-safe overrides. Loaded after scroll-fx.css.

   Why this file exists: iOS Safari (iPhone XS-15, iPad pre-M-series)
   crashes the tab when a fullscreen fixed canvas with filter +
   will-change + body perspective + dozens of nested 3D transforms
   + a continuous RAF loop updating CSS vars all run together.
   GPU memory exhausts in a few hundred ms after first scroll.

   This file disables all of that on touch devices and small
   viewports. The page still renders, scrolls, and reads beautifully
   on mobile, just without the desktop's scroll-driven 3D scene-fx.
   ───────────────────────────────────────────────────────── */

/* Strategy: any device that is touch-primary (iPhone, iPad, Android)
   gets the mobile-safe path. Desktop with a mouse keeps the full
   3D scroll-fx scene. The 1024px breakpoint is a belt-and-suspenders
   guard for laptops in tablet mode. */

@media (hover: none) and (pointer: coarse), (max-width: 1024px) {

  /* ── Kill the global fixed backdrop layers ───────────────── */
  #scroll-canvas,
  #scroll-grid,
  #scroll-noise {
    display: none !important;
  }

  /* ── Drop body perspective (no 3D scene) ────────────────── */
  body {
    perspective: none !important;
    perspective-origin: 50% 50%;
  }

  /* ── Restore solid section backgrounds since the canvas is gone.
        Sections that need atmosphere keep static, GPU-cheap radial
        gradients (no RAF, no will-change, no filter). The animated
        scene-fx layers stay hidden on mobile per the iOS-killer audit;
        these gradients provide visual richness without the cost. ── */
  html {
    background: var(--ink-950);
  }
  .hero {
    background:
      radial-gradient(70% 55% at 50% 35%, rgba(232, 96, 58, 0.14), transparent 70%),
      radial-gradient(45% 40% at 85% 85%, rgba(232, 96, 58, 0.08), transparent 70%),
      radial-gradient(50% 45% at 15% 80%, rgba(70, 110, 200, 0.06), transparent 70%),
      var(--ink-950) !important;
  }
  .relay-reveal {
    background:
      radial-gradient(60% 50% at 80% 30%, rgba(232, 96, 58, 0.08), transparent 70%),
      radial-gradient(45% 40% at 20% 80%, rgba(70, 110, 200, 0.05), transparent 70%),
      var(--ink-950) !important;
  }
  .multi-window {
    background:
      radial-gradient(55% 45% at 25% 25%, rgba(232, 96, 58, 0.08), transparent 70%),
      radial-gradient(45% 40% at 80% 75%, rgba(232, 96, 58, 0.05), transparent 70%),
      var(--ink-950) !important;
  }
  .plans {
    background:
      radial-gradient(60% 50% at 75% 25%, rgba(232, 96, 58, 0.08), transparent 70%),
      radial-gradient(40% 35% at 20% 75%, rgba(70, 110, 200, 0.05), transparent 70%),
      var(--ink-950) !important;
  }
  .sovereign {
    background:
      radial-gradient(55% 45% at 50% 30%, rgba(232, 96, 58, 0.10), transparent 70%),
      radial-gradient(40% 35% at 80% 80%, rgba(70, 110, 200, 0.05), transparent 70%),
      var(--ink-950) !important;
  }
  .relay-architecture {
    background:
      radial-gradient(50% 45% at 30% 30%, rgba(70, 110, 200, 0.06), transparent 70%),
      radial-gradient(45% 40% at 75% 75%, rgba(232, 96, 58, 0.06), transparent 70%),
      var(--ink-950) !important;
  }
  .rant,
  .backbone-chapter,
  .skills-catalog,
  .waitlist,
  .principles,
  .site-footer {
    background: var(--ink-950) !important;
  }
  .backbone-chapter .stop {
    background: transparent !important;
  }

  /* ── Strip every 3D transform on scroll-driven elements ── */
  [data-scene],
  [data-scene] *,
  [data-stop],
  [data-stop] * {
    transform: none !important;
    transition: opacity 240ms ease-out !important;
  }

  /* ── Allow opacity to remain 1 (no fade-driven reveal) ─── */
  [data-scene] *,
  [data-stop] * {
    opacity: 1 !important;
  }

  /* ── Kill will-change everywhere on mobile ──────────────── */
  * {
    will-change: auto !important;
  }

  /* ── Drop backdrop-filter on scrolling content
        (only allowed on fixed/sticky elements per platform spec) ── */
  .principles .slab,
  [data-scene] .slab {
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
    background: rgba(11, 11, 10, 0.85) !important;
  }

  /* ── Hide the desktop scroll rail on mobile (it was already
        hidden via media query in backbone-chapter.css; reinforce) ── */
  .scroll-rail {
    display: none !important;
  }

  /* ── Horizontal-rubber-band guard: lock the page width ── */
  html, body {
    max-width: 100vw;
    overflow-x: hidden;
  }

  /* ── Use 100dvh on every full-height container, fallback to vh ── */
  .hero,
  .backbone-chapter .stop {
    min-height: 100vh;
    min-height: 100dvh;
  }

  /* ── Reduce the per-section .scene-fx layer to a static, low-cost
        gradient instead of animated perspective layers ────── */
  .scene-fx { display: none !important; }

  /* ── Tighten section padding so content is readable on 375px ── */
  .container {
    padding-left: 20px;
    padding-right: 20px;
  }

  /* ── Top-bar nav overflow-x scroll on mobile (in case of overflow) ── */
  .top-bar nav {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    white-space: nowrap;
  }
  .top-bar nav::-webkit-scrollbar { display: none; }
}

/* ── iOS Safari specific: ensure address-bar collapse doesn't
      cause hero overflow ──────────────────────────────────── */
@supports (-webkit-touch-callout: none) {
  .hero,
  .backbone-chapter .stop {
    min-height: -webkit-fill-available;
    min-height: 100dvh;
  }
}

/* ── Reduced motion (any device) ────────────────────────── */
@media (prefers-reduced-motion: reduce) {
  #scroll-canvas,
  #scroll-grid,
  #scroll-noise {
    display: none !important;
  }
  body { perspective: none !important; }
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    will-change: auto !important;
  }
}