/* ============================================================
   RocketVPN — mobile performance pass.

   Goals (in priority order):
     1. Eliminate GPU-killer paint work: fixed gradient layers,
        backdrop-filter, filter: blur(), large box-shadows.
     2. Skip animation of decorative elements (sparkles, orbs,
        starfield, nebula, satellite SVG).
     3. Hide heavy SVG components entirely on small screens.
     4. content-visibility:auto on below-the-fold sections so the
        browser doesn't paint them until they're nearly on-screen.

   Loaded AFTER rvpn-cosmic.css so the !important overrides win
   without bumping specificity to absurd levels.

   Target: <= 900px width OR touch-only pointer (hover:none).
   ============================================================ */

/* ============================================================
   A1. Body starfield + nebula — biggest single perf cost.
   These are position:fixed pseudo-elements with multiple
   radial gradients + filter:blur + 30-90s animations. On
   Android Chrome any fixed bg repaints on every scroll.
   Cut both. The starfield is replaced with a flat color.
   ============================================================ */
@media (max-width: 900px), (hover: none) and (pointer: coarse) {
  body::before,
  body::after,
  .cosmos-layer {
    display: none !important;
    background: none !important;
    animation: none !important;
    filter: none !important;
  }

  /* Replace the heavy fixed-attachment gradient body bg with a
     flat near-black. Composited once, no re-paint on scroll. */
  body {
    background: #0B0820 !important;
    background-attachment: scroll !important;
  }

  /* Keep the html-level gradient for the first paint but make
     it non-fixed so it doesn't repaint. */
  html {
    background: linear-gradient(180deg, #02031C 0%, #0B0820 100%) !important;
    background-attachment: scroll !important;
  }
}

/* ============================================================
   A2. Decorative layers — fully off on mobile.
   ============================================================ */
@media (max-width: 900px), (hover: none) and (pointer: coarse) {
  /* Star sparkles — drop them entirely. The earlier pass merely
     froze the animation; on old phones even painting 9 elements
     with box-shadow glow has measurable cost. */
  .sparkle,
  .sparkle.violet,
  .sparkle.cyan,
  .sparkle.pink { display: none !important; }

  /* Floating orbs — drop entirely (was: dimmed). */
  .orb,
  .orb-1, .orb-2, .orb-3 { display: none !important; }

  /* HUD grid overlay — drop. */
  .grid-hud { display: none !important; }

  /* Hero orbital ring — drop. */
  .hero .orbit,
  .hero .orbit::before,
  .hero .orbit::after { display: none !important; }

  /* Comets — drop. */
  .comet { display: none !important; }
}

/* ============================================================
   A3. backdrop-filter / filter:blur — major GPU killers.
   Strip them globally on mobile.
   ============================================================ */
@media (max-width: 900px), (hover: none) and (pointer: coarse) {
  *, *::before, *::after {
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
  }

  /* Filter: blur() on decorative wrappers — only kill if we know
     it's decorative (orbs/sparkles already hidden, this catches
     misc card glows). */
  .feature-card::before,
  .price-card::after,
  .price-card.popular::after,
  .testimonial-card::before {
    filter: none !important;
  }
}

/* ============================================================
   A4. box-shadow on decorations — composite-layer killer.
   Reduce/strip on mobile.
   ============================================================ */
@media (max-width: 900px), (hover: none) and (pointer: coarse) {
  .feature-card,
  .price-card,
  .testimonial-card,
  .tech-btn,
  .proto-icon,
  .map-stat,
  .pin,
  .server-map-flags img,
  .flag-chip {
    box-shadow: none !important;
  }
  /* Keep shadows on primary CTAs (their size is small, paint cheap) */
}

/* ============================================================
   A5. will-change — drop except where actively needed.
   Browser otherwise keeps a separate composite layer per node.
   ============================================================ */
@media (max-width: 900px), (hover: none) and (pointer: coarse) {
  *, *::before, *::after {
    will-change: auto !important;
  }
}

/* ============================================================
   B1. Hide heavy SVG components on mobile.
   ============================================================ */
@media (max-width: 900px), (hover: none) and (pointer: coarse) {
  /* Satellite SVG (Hero right column) — dense gradients & 4+
     simultaneous animations (yaw, beacon-pulse, signal-pulse,
     star-twinkle). On mobile the hero already stacks single-
     column; the satellite was just decoration anyway. */
  .satellite-stage,
  .satellite-stage svg { display: none !important; }

  /* Server map animated connections — freeze the streaming dashes
     and pin halos. The static map + dots stay readable. */
  .map-svg .conn,
  .map-svg .srv-pin .halo,
  .map-svg .srv-pin .halo-2,
  .map-svg .srv-pin-glow {
    animation: none !important;
  }
  /* Hide the always-invisible glow rings (opacity:0 baseline)
     to save the compositor. */
  .map-svg .srv-pin-glow { display: none !important; }
  /* And the streaming connection dashes — hide entirely, the
     hub-and-spoke story works fine without them. */
  .map-svg .conn { opacity: 0.15 !important; stroke-dasharray: none !important; }
}

/* ============================================================
   B2. Roadmap section — has 12+ keyframe animations. Freeze
   them all on mobile. (Component may not be on home page, but
   if it appears elsewhere on mobile the same logic applies.)
   ============================================================ */
@media (max-width: 900px), (hover: none) and (pointer: coarse) {
  [class^="rm-"],
  [class*=" rm-"],
  .roadmap *,
  .roadmap *::before,
  .roadmap *::after {
    animation: none !important;
  }
}

/* ============================================================
   B3. Section-level animation freezes (Technologies, Map, etc.)
   The relevant content is still there — just static.
   ============================================================ */
@media (max-width: 900px), (hover: none) and (pointer: coarse) {
  .technologies-block *,
  .features *,
  .pricing *,
  .testimonials *,
  .server-map *,
  .hero h1,
  .hero .lede,
  .section-title,
  .cosmic-divider,
  .cosmic-divider::after,
  .feature-card::before,
  .price-card.popular::after,
  .btn-primary::before,
  .shimmer {
    animation: none !important;
  }

  /* Static shimmer-target text — make it readable without the
     gradient-pan animation by anchoring the gradient. */
  .hero h1, .section-title {
    background-position: 0 0 !important;
  }
}

/* ============================================================
   C1. content-visibility — defer painting of below-fold blocks.
   Browser skips render until ~viewport away. Each gets an
   intrinsic-size hint so the scroll bar doesn't jump.
   ============================================================ */
@media (max-width: 900px), (hover: none) and (pointer: coarse) {
  .features {
    content-visibility: auto;
    contain-intrinsic-size: 1px 820px;
  }
  .pricing {
    content-visibility: auto;
    contain-intrinsic-size: 1px 1100px;
  }
  .server-map {
    content-visibility: auto;
    contain-intrinsic-size: 1px 720px;
  }
  .technologies-block {
    content-visibility: auto;
    contain-intrinsic-size: 1px 760px;
  }
  .testimonials {
    content-visibility: auto;
    contain-intrinsic-size: 1px 880px;
  }
  /* Footer too — it's always below the fold. */
  .site-footer {
    content-visibility: auto;
    contain-intrinsic-size: 1px 540px;
  }
}

/* ============================================================
   D. prefers-reduced-motion — same kills, applied regardless
   of screen size. People who opt out of motion get the same
   flat experience.
   ============================================================ */
@media (prefers-reduced-motion: reduce) {
  body::before, body::after, .cosmos-layer,
  .sparkle, .orb, .grid-hud,
  .hero .orbit, .comet,
  .satellite-stage svg [class*="anim"],
  .server-map .connections, .server-map .pin-pulse {
    animation: none !important;
    display: none !important;
  }
}