/* ==========================================================================
   Firefox scroll path
   Chrome keeps backdrop-filter and per-frame layout. Firefox repaints those
   on the main thread, which is what makes homepage, catalog and product
   detail stutter. These overrides apply only in Firefox.
   ========================================================================== */

@supports (-moz-appearance: none) {
  body {
    text-rendering: auto;
  }

  /* A fixed blur forces Firefox to resample everything underneath on every
     scroll frame. Opaque fills keep the same read without that cost. */
  *,
  *::before,
  *::after {
    -webkit-backdrop-filter: none !important;
    backdrop-filter: none !important;
  }

  .site-header.is-scrolled,
  body.is-locked .site-header {
    background-color: rgba(250, 251, 253, 0.98);
  }

  .site-header.is-scrolled .dropdown {
    background: rgba(250, 251, 253, 0.98);
  }

  .typo-lab__panel {
    background: rgba(250, 251, 253, 0.98);
  }

  .typo-lab__fab {
    background: #0c1a29;
  }

  .hero-spots__panel {
    background: rgba(12, 26, 41, 0.88);
  }

  /* ----------------------------------------------------------------------
     Homepage: don't reflow the pinned chapters on every scroll frame
     ---------------------------------------------------------------------- */
  @media (min-width: 1200px) and (prefers-reduced-motion: no-preference) {
    .hero-scroll-scene.is-cinematic,
    .rokmob-story.is-cinematic,
    .fb01-story.is-cinematic,
    .showroom.is-cinematic {
      contain: layout style;
    }

    .hero-scroll-scene.is-cinematic.is-fx-scale .hero__stage {
      width: 100%;
      height: 100%;
      margin-inline: 0;
      transform: scale(var(--hero-sx, 1), var(--hero-sy, 1));
      transform-origin: center bottom;
    }

    .rokmob-story.is-cinematic .rokmob-story__visual,
    .fb01-story.is-cinematic .featured__media {
      contain: layout paint;
    }

    .fb01-story.is-cinematic .fb01-story__scene {
      will-change: auto;
    }
  }

  /* ----------------------------------------------------------------------
     Catalog: don't keep a full-viewport layer composited while nobody
     is hovering a card. Filtered photos stay on their own layer.
     ---------------------------------------------------------------------- */
  .prod-page::after {
    content: none;
  }

  .prod-page.is-card-hot::after {
    content: "";
    opacity: 1;
  }

  .world-card__media img {
    transform: translateZ(0) scale(1.04);
  }

  .world-card:hover .world-card__media img,
  .world-card:focus-visible .world-card__media img {
    transform: translateZ(0) scale(1.06);
  }

  .application-card__media img {
    transform: translateZ(0) scale(1);
  }

  .application-card:is(:hover, :focus-visible) .application-card__media img {
    transform: translateZ(0) scale(1.02);
  }

  /* ----------------------------------------------------------------------
     Product detail: drop-shadow and blur on the full stage are software
     paints in Firefox, including while the info column scrolls
     ---------------------------------------------------------------------- */
  html[data-theme="dark"] .pdp-page .site-header,
  html[data-theme="dark"] .pdp-page .site-header.is-scrolled,
  html[data-theme="dark"] .pdp-page .site-header:not(.is-scrolled) {
    background: #07131d;
  }

  html[data-theme="light"] .pdp-page .site-header,
  html[data-theme="light"] .pdp-page .site-header.is-scrolled,
  html[data-theme="light"] .pdp-page .site-header:not(.is-scrolled) {
    background: #f7f9fb;
  }

  .pdp-back,
  .pdp-tools {
    background: color-mix(in srgb, var(--pdp-bg) 82%, transparent);
  }

  .pdp-stage__pan {
    will-change: auto;
  }

  .pdp-stage__blur {
    filter: none;
  }

  .pdp-stage[data-kind="video"] .pdp-stage__blur {
    filter: blur(16px) brightness(0.55) saturate(0.9);
  }

  .pdp-stage[data-kind="cutout"] .pdp-frame__media > img,
  html[data-theme="light"] .pdp-stage[data-kind="cutout"] .pdp-frame__media > img {
    filter: none;
  }

  .pdp-stage[data-kind="cutout"] .pdp-frame::before {
    filter: none;
    height: 11%;
    background: radial-gradient(closest-side, rgba(3, 9, 15, 0.42), rgba(3, 9, 15, 0.14) 62%, transparent 100%);
  }

  .pdp-stage[data-kind="cutout"] .pdp-frame::after {
    filter: none;
    height: 22%;
    background: radial-gradient(closest-side, rgba(3, 9, 15, 0.2), transparent 74%);
  }

  html[data-theme="light"] .pdp-stage[data-kind="cutout"] .pdp-frame::before {
    background: radial-gradient(closest-side, rgba(12, 26, 41, 0.28), rgba(12, 26, 41, 0.08) 62%, transparent 100%);
  }

  html[data-theme="light"] .pdp-stage[data-kind="cutout"] .pdp-frame::after {
    background: radial-gradient(closest-side, rgba(12, 26, 41, 0.12), transparent 74%);
  }
}