/* Runtime performance overrides. This file is loaded after page-scoped CSS
   so expensive visual effects cannot be re-enabled later in the cascade. */

/* A blurred sticky navbar forces the browser to resample the whole strip on
   every scroll frame. The near-opaque fallback keeps the same contrast
   without tying navbar paint work to page movement. */
.screens-nav {
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.045), rgba(255, 255, 255, 0.018)),
    rgba(6, 8, 14, 0.94) !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
}

/* Home switches to a tall single-column layout at 1040px. Keep the artwork
   but stop the filtered, full-page decorative layers from repainting while
   the user scrolls through that stacked layout. The same breakpoint also
   covers tablets, foldables, and landscape phones. */
@media (max-width: 1040px), (pointer: coarse) {
  *,
  *::before,
  *::after {
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
  }

  body {
    background: linear-gradient(
      180deg,
      #06070e 0%,
      #10111f 48%,
      #05060b 100%
    ) !important;
  }

  body::before,
  body::after {
    display: none !important;
  }

  body.ramadan::after {
    display: block !important;
    animation: none !important;
  }

  .screen.home .ambient-orbs .orb,
  .screen.home .hero-card-stage > .ring,
  .screen.home .card-shadow,
  .screen.home .feedback-icon-wrap,
  .screen.rules .cap-arrow,
  .profile-avatar-ring,
  .profile-avatar-wrap.profile-has-store-frame::before {
    animation: none !important;
  }

  .screen.home .hero-card.hayya-hero {
    will-change: transform;
  }

  .screen.home .floating-cards {
    display: none !important;
  }

  /* Catalog pages can render a dozen filter/box-shadow animations at once.
     Keep every frame visible, but make shelf previews static on constrained
     viewports where simultaneous paint loops cause jank. */
  .store-frame-preview,
  .bag-frame-preview {
    animation: none !important;
  }
}

/* Large screens retain the decorative motion. Promote only the animated
   transforms to compositor layers so scrolling does not repeatedly raster
   their blur and shadow effects. */
@media (min-width: 1041px) and (pointer: fine) {
  .screen.home .ambient-orbs .orb,
  .screen.home .floating-cards .float-card,
  .screen.home .hero-card-stage > .ring,
  .screen.home .hero-card.hayya-hero,
  .screen.home .card-shadow {
    will-change: transform;
  }
}

/* Respect OS-level reduced-motion preferences. The orbs, scopa pulses,
   capture flights, floating cards, and confetti are all decorative —
   they go away when the user has set "reduce motion" in iOS / Android /
   Windows / macOS settings. Functional micro-transitions (modal fade-in,
   button press feedback) keep a short duration so the UI never feels
   frozen. `animation: none` on a running infinite loop also stops it
   from costing paint budget, which is a quiet win for low-end Android. */
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
    scroll-behavior: auto !important;
  }
}