/* ========================================
   RC4 — Safari Stability & Performance
   iOS memory/GPU relief. Load after rc3-mobile-qa.css
   ======================================== */

@media (max-width: 991px) {
  /* ---- Compositor: remove layer hoarding ---- */
  [data-animate] {
    will-change: auto;
    transform: none;
    transition: opacity 0.45s cubic-bezier(0.22, 1, 0.36, 1);
  }

  [data-animate].visible {
    will-change: auto;
    transform: none;
  }

  /* Service map + hero: visible immediately (no scroll-reveal delay) */
  #hero [data-animate],
  #hero-service-map [data-animate],
  .services--maintenance .services__feature [data-animate] {
    opacity: 1;
    transform: none;
    transition: none;
  }

  /* ---- Backdrop blur: solid surfaces on iOS ---- */
  .header--scrolled,
  .header {
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
  }

  .nav__links {
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
    background: rgba(10, 10, 10, 0.99);
  }

  /* ---- Service map: lighter GPU path ---- */
  .service-map__frame {
    box-shadow:
      0 12px 32px rgba(0, 0, 0, 0.45),
      inset 0 1px 0 rgba(255, 255, 255, 0.04);
  }

  .service-map__frame::before,
  .service-map__frame::after {
    display: none;
  }

  /* Dual gradient masks are expensive on iOS Safari */
  .service-map__image-mask {
    -webkit-mask-image: none;
    mask-image: none;
    overflow: hidden;
    border-radius: 4px;
  }

  .service-map__overlay .nav-route__glow,
  .service-map__overlay .nav-orb {
    filter: none;
    display: none;
  }

  .service-map__overlay .nav-route__track {
    opacity: 0.35;
  }

  .service-map__overlay .nav-anchor__diamond {
    filter: none;
  }

  .service-map__overlay .nav-anchor.is-lit .nav-anchor__diamond {
    filter: none;
  }

  /* Map image: show at full opacity (no lazy fade stack) */
  .service-map__image {
    opacity: 1;
  }

  main .service-map__image[loading="lazy"]:not(.is-loaded) {
    opacity: 1;
  }

  /* ---- Hero: drop 3D context ---- */
  .hero__inner {
    perspective: none;
  }

  /*
   * Hero logo float — CSS-only in style.css (float + logoGlow on .hero__logo).
   * logoGlow animates filter on the <img> — major iOS Safari repaint/GPU cost.
   * Mobile: transform-only float + pulse glow on ::before (opacity/scale).
   */
  .hero__logo-spotlight {
    contain: layout style paint;
  }

  .hero__logo-spotlight::before {
    animation: heroLogoGlowPulse 8s ease-in-out infinite;
  }

  .hero__logo {
    animation: heroLogoFloatMobile 8s ease-in-out infinite;
    filter: drop-shadow(0 18px 28px rgba(0, 0, 0, 0.38));
    -webkit-backface-visibility: hidden;
    backface-visibility: hidden;
    transform: translate3d(0, 0, 0);
  }

  @keyframes heroLogoFloatMobile {
    0%,
    100% {
      transform: translate3d(0, 0, 0);
    }

    50% {
      transform: translate3d(0, -15px, 0);
    }
  }

  @keyframes heroLogoGlowPulse {
    0%,
    100% {
      opacity: 0.72;
      transform: translate(-50%, -50%) scale(1);
    }

    50% {
      opacity: 1;
      transform: translate(-50%, -50%) scale(1.07);
    }
  }

  .hero__scroll-hint-icon {
    animation: none;
  }

  /* Hero review cards — mobile lite uses transform-only (see hero-reviews.css) */
  .hero-reviews--mobile-lite {
    z-index: 1;
  }

  .hero-reviews--mobile-lite .hero-reviews__layer {
    filter: none !important;
  }

  .hero-reviews--mobile-lite .hero-reviews__track,
  .hero-reviews--mobile-lite .hero-review-card {
    will-change: auto;
  }

  /* ---- Card hovers: no lift on touch (rc2) — reduce shadow repaint ---- */
  .product-brands__card:hover,
  .feature-card:hover,
  .selector-card:hover,
  .content-hub-card:hover,
  .vchub-category-card:hover,
  .community-event-card:hover,
  .community-stat:hover {
    box-shadow: var(--shadow-card, 0 4px 24px rgba(0, 0, 0, 0.22));
    transform: none;
  }

  /* ---- content-visibility: skip hero-adjacent sections ---- */
  .services--maintenance,
  #hero-service-map {
    content-visibility: visible;
  }
}

@media (max-width: 991px) and (prefers-reduced-motion: reduce) {
  [data-animate] {
    opacity: 1 !important;
    transform: none !important;
    transition: none !important;
  }

  .hero__logo {
    animation: none !important;
    transform: none !important;
    filter: drop-shadow(0 18px 28px rgba(0, 0, 0, 0.38));
  }

  .hero__logo-spotlight::before {
    animation: none !important;
    opacity: 0.85;
    transform: translate(-50%, -50%) scale(1);
  }
}