/* mobile: perf. phones only, desktop must stay unchanged.
   nothing here changes layout; it trades gpu-heavy paint effects for cheap ones and pins
   things that move on scroll to their own compositor layers. */

@media (max-width: 760px), (hover: none) and (pointer: coarse) {
  /* reveals: blur on dozens of text spans means a fresh offscreen blur pass per element per frame
     for ~1s, right while the finger is scrolling. keep the rise and the fade, drop the blur */
  /* on phones everything shows the moment the page loads: no fade-ins, no rising words */
  .motion .reveal,
  .motion .kinetic .w {
    opacity: 1; transform: none; filter: none; transition: none;
  }

  /* nav bar: backdrop blur re-samples everything that scrolls (and the live sea) under a
     full-width fixed bar every frame. the fill is already 88% opaque, so go solid instead */
  html .rail::before,
  html .rail {
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
  }
  html .rail::before { background: var(--bg); }

  /* keep the css sky under the webgl canvas as a backstop: if the canvas is ever cleared (a
     resize mid-scroll), the sky shows instead of the bare page color. drop only its grain */
  .hero.gl-sea .sky::after { display: none; }
  /* no-webgl fallback: the animated displacement ripple is the costliest filter on the page */
  .word-refl { filter: none; }

  /* hero text fades with scroll (--hp): give it its own layer so the fade doesn't repaint */
  .crest-top, .hero-base { will-change: opacity; }

  /* rush week: the compass turns with scroll, and it sits over the deckled paper whose
     turbulence + displacement filter is expensive to raster. separate layers, each painted once */
  .week-compass { will-change: transform; }
  .itinerary::before { will-change: transform; }
}

/* tablets in portrait keep the sticky deck: the scale and the dimming change every scroll frame */
@media (min-width: 761px) and (hover: none) and (pointer: coarse) {
  .card { will-change: transform; }
  .card::after { will-change: opacity; }
}