/* Mobile-only rendering: leave desktop animation and glass unchanged. */
@media (max-width: 900px) {
  /* The mobile html/body background already paints stars. Do not composite
     the separate desktop fixed star sheet over every card while scrolling. */
  body::before { display: none; }

  /* Keep the app walkthroughs, but use the card's existing gradients instead
     of decoding another full-card decorative movie behind each phone. */
  .quick-missions__video,
  .luna__video { display: none; }

  /* Nested small glass surfaces still sample scrolling video and 3D layers,
     even after the outer card's blur is removed. Preserve their existing
     tinted backgrounds and borders without any backdrop sampling. */
  main *,
  main *::before,
  main *::after {
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
  }

  /* Decorative light pulses needlessly repaint the device silhouette. */
  .voice-scene__ipad::before {
    display: none;
  }
  .processing-scene__nebula,
  .feedback-scene__nebula {
    filter: none;
    animation: none;
  }

  /* The sticky bar crosses every moving scene during a swipe. A near-opaque
     surface avoids backdrop recapture and keeps the navigation readable. */
  .site-header::before {
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
    background: rgba(5, 10, 20, 0.97);
  }

  html[data-theme="light"] .site-header::before {
    background: rgba(245, 248, 255, 0.97);
  }

  /* Keep real section heights from the first layout. Estimated offscreen
     heights otherwise shift the document as a fast swipe reveals content. */
  .section {
    content-visibility: visible;
    contain-intrinsic-size: none;
  }

  /* Scaling a whole section also scales its videos and 3D compositing layers.
     Present the content in place instead of rebuilding those layers on entry. */
  .section-title,
  .section-title.is-visible,
  .section-content,
  .section-content.is-visible {
    opacity: 1;
    transform: none;
    filter: none;
    animation: none;
    will-change: auto;
    backface-visibility: visible;
    -webkit-backface-visibility: visible;
  }

  /* Retain the glass tint and edge highlights without repeatedly sampling
     the moving backdrop behind large cards on a phone GPU. */
  [data-liquid-glass] > .liquid-glass-filter {
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
    background: rgba(9, 16, 30, 0.88);
  }

  html[data-theme="light"] [data-liquid-glass] > .liquid-glass-filter {
    background: rgba(245, 248, 255, 0.94);
  }

  /* These cards have their own backdrop filters outside the liquid-glass
     component. Avoid recapturing a tall card around composited video/3D layers. */
  #constellations .active-step-info,
  .platform-showcase,
  .problem-solver,
  .processing-flow,
  .engine-panel {
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
  }

  /* The 48px filtered halo and two 100px shadows extend beyond the card's
     bottom edge. Keep the existing colored fill/border, with a small shadow
     that does not change with every video frame. */
  #constellations .active-step-info,
  html[data-theme="light"] #constellations .active-step-info {
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.16);
  }

  #constellations .active-step-info::before {
    display: none;
  }

  /* Move a fixed-size chassis instead of resizing every screen, radius and
     depth layer on selection. Do not fade/filter the ancestor of a 3D phone:
     those grouping effects flatten its layers during the transition. */
  #problem-solver .problem-solver__phone {
    --quick-phone-scale: 2.7;
  }
  #problem-solver .problem-solver__device {
    opacity: 1;
    filter: none;
    transform-style: preserve-3d;
    transition: transform 350ms cubic-bezier(0.16, 1, 0.3, 1);
  }
  #problem-solver .problem-solver__device.is-previous { transform: translateX(-76%) scale(0.499); }
  #problem-solver .problem-solver__device.is-next { transform: translateX(76%) scale(0.499); }
  #problem-solver .problem-solver__screen {
    transform: translateZ(1px);
    transform-style: flat;
    backface-visibility: hidden;
    -webkit-backface-visibility: hidden;
  }
  #problem-solver .problem-solver__screen img { opacity: 0.45; }
  #problem-solver .is-active .problem-solver__screen img { opacity: 1; }
}

@media (max-width: 760px) {
  #problem-solver .problem-solver__phone { --quick-phone-scale: 1.85; }
  #problem-solver .problem-solver__device.is-previous { transform: translateX(-58%) scale(0.4595); }
  #problem-solver .problem-solver__device.is-next { transform: translateX(58%) scale(0.4595); }
}

@media (max-width: 900px) and (prefers-reduced-motion: reduce) {
  #problem-solver .problem-solver__device { transition: none; }
}