/* =====================================================================
   Mobile performance pass — phones get a STATIC poster image instead of
   the looping background video, and animations are dramatically reduced.
   Desktop keeps the full animated experience.
   Loaded LAST so it wins over page-specific styles.
   ===================================================================== */

/* Phones: replace background video with the static poster so the GPU
   does no per-frame work AND the 250+ KB MP4 is never downloaded. */
html.is-mobile #earth-video,
html.is-mobile video.bg-video,
html.is-mobile .bg-video {
  display: none !important;
}
html.is-mobile .stage {
  background-image: url("./earth-poster.jpg") !important;
  background-size: cover !important;
  background-position: center !important;
  background-repeat: no-repeat !important;
}

/* Kill non-essential decorative animations on phones (orbits, drifting
   stars, pulse rings) to keep scroll buttery. */
html.is-mobile .stars,
html.is-mobile .orbit-3,
html.is-mobile .brand-mark::after,
html.is-mobile .pill .shield::after,
html.is-mobile .modal-icon::after,
html.is-mobile .grain {
  animation: none !important;
}

@media (max-width: 900px) {
  /* Backdrop-filter is the #1 cause of phone jank when a video plays behind
     it (the GPU must re-blur the video every frame). Replace with a flat
     semi-opaque surface — visually 95% identical, ~10x cheaper. */
  *, *::before, *::after {
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
  }

  /* Cards and panels still feel "glass" via a tuned solid background. */
  .device-card,
  .filter-bar,
  .filter-btn,
  .stats .stat,
  .topbar,
  .search-input,
  .msg-card,
  .panel,
  .glass,
  .toolbar,
  .filters,
  .toast {
    background: rgba(13, 18, 28, 0.78) !important;
    background-image: none !important;
  }

  /* Cheap shadow on phones */
  .device-card,
  .msg-card,
  .panel,
  .stats .stat {
    box-shadow: 0 6px 18px -10px rgba(0, 0, 0, 0.55) !important;
  }

  /* Off-screen cards: keep cheap layout, but DO NOT use content-visibility
     here — on mobile it causes scroll-position jumps as cards pop in. */
  .device-card,
  .msg-card {
    contain: layout paint style;
  }

  /* Background video: keep it playing, but pin it as a GPU layer so the
     blur'd cards above don't repaint on every video frame. */
  #earth-video {
    transform: translate3d(0, 0, 0) scale(1.02);
    will-change: transform;
    /* tiny brightness/saturation tweak so unblurred cards still look good */
    filter: brightness(0.55) saturate(0.92);
  }

  /* Page entrance animations are decorative — disable on phones to make
     the first paint instant. */
  [data-pe], [data-pe].pe-ready, [data-pe].pe-done {
    animation: none !important;
    opacity: 1 !important;
    filter: none !important;
    transform: none !important;
    clip-path: none !important;
  }

  /* Hover transforms cost a lot on touch (and don't even apply). Disable. */
  .device-card:hover,
  .filter-btn:hover,
  .card-pin:hover,
  .card-tick:hover,
  .msg-card:hover,
  .open-cta:hover {
    transform: none !important;
    box-shadow: 0 6px 18px -10px rgba(0, 0, 0, 0.55) !important;
  }

  /* Smooth scrolling on iOS — DO NOT use `overscroll-behavior: contain`
     here; it blocks pull-to-refresh AND on some Android browsers it
     interferes with momentum scrolling inside flex/grid containers. */
  html, body {
    -webkit-overflow-scrolling: touch;
    overflow-y: auto !important;
    overflow-x: hidden !important;
    height: auto !important;
    min-height: 100vh;
  }

  /* Lighter font rendering on phones (more readable, less work) */
  body {
    -webkit-font-smoothing: antialiased;
    text-rendering: optimizeSpeed;
  }
}

/* Even tighter for low-end phones (≤ 480px) — drop video brightness lower
   so plain backgrounds read better and pause animations of decorative bits. */
@media (max-width: 480px) {
  #earth-video {
    filter: brightness(0.45) saturate(0.85);
  }
  /* Disable purely decorative entrance animations to cut first-paint cost. */
  .device-card,
  .msg-card,
  .stats .stat {
    animation: none !important;
  }
}

/* Respect user accessibility preference too. */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
  }
  #earth-video { animation: none !important; }
}

/* Data-saver / Save-Data: pause non-essential motion (video keeps playing
   only if the browser permits; otherwise the poster shows). */
@media (prefers-reduced-data: reduce) {
  #earth-video { display: none; }
  body { background: #060912; }
}