/* mobile-safe.css. iOS-killer audit defense layer for Lamont V2.
   Loaded after styles.css. Strips GPU-poisoning patterns on touch devices
   without breaking the sticky journey stage or hiding the preload. */

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

  /* The 3D depth-tunnel preload still plays on mobile. We dial back the
     perspective depth so the layered tunnel rings don't compositor-explode,
     but the brand reveal is preserved. */
  .preload {
    perspective: 600px !important;
  }
  .preload .pl-tunnel,
  .preload .pl-grid {
    transform-style: flat !important;
    will-change: auto !important;
  }

  /* backdrop-filter on absolute, scroll-driven elements is documented as
     an iOS Safari pain point (continuous GPU repaints on a scrolling
     layer). Replace with solid-ish backgrounds; visual register stays warm. */
  .s6-meta {
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
    background: rgba(244, 239, 230, 0.96) !important;
  }
  .about-photo figcaption {
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
    background: rgba(26, 22, 20, 0.92) !important;
  }

  /* Strip will-change globally on touch. Nothing should be permanently
     promoted to a GPU layer when the user is scrolling on a phone.
     Exception: the journey-stage stays interactive (sticky positioning
     interacts with the page's compositor). */
  *:not(.journey-stage):not(.journey *) {
    will-change: auto !important;
  }

  /* IMPORTANT: do NOT set overflow-x:hidden on html or body. iOS Safari
     creates a new scrolling context when you do, which breaks
     position:sticky on every descendant. The journey-stage uses sticky;
     overflow-x:hidden on html/body would make it scroll past instead of
     pinning. Use overflow-x:clip on body only (safer + sticky-friendly)
     and only if a horizontal-rubber-band issue actually appears. */
  body {
    overflow-x: clip;
  }
}

/* Reduced-motion users (any device) get the lightest possible animation
   posture. Already partly covered by styles.css; reinforce here. */
@media (prefers-reduced-motion: reduce) {
  .preload {
    transition: none !important;
    animation: none !important;
  }
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    will-change: auto !important;
  }
}