/*
 * Firefox fallback for the full-viewport scroll scenes.
 *
 * Rapid reverse scrolling can otherwise evict a filtered sticky surface while
 * the canvas beneath it is also changing frames. Keep those surfaces simple
 * and synchronize their ownership in hero-handoff.js.
 */
html.is-firefox .hero__sticky,
html.is-firefox.hero-handoff-enabled .approach__sticky,
html.is-firefox .work__sticky,
html.is-firefox .explorations__sticky {
  isolation: isolate;
  backface-visibility: hidden;
}

html.is-firefox .hero__sticky,
html.is-firefox.hero-handoff-enabled .approach__sticky {
  will-change: auto;
}

html.is-firefox.hero-handoff-enabled .approach__sticky {
  transform: none;
}

html.is-firefox .hero__melt {
  background: radial-gradient(
    circle at 68% 78%,
    #fff 0 12%,
    rgb(248 248 244 / 96%) 32%,
    rgb(220 238 233 / 78%) 54%,
    rgb(124 185 181 / 34%) 76%,
    transparent 100%
  );
  filter: none;
  inset: -35%;
  transform: scale(calc(.42 + var(--hero-melt) * 1.08));
  transform-origin: 68% 78%;
  will-change: transform, opacity;
}

html.is-firefox .hero__smoke {
  background:
    radial-gradient(ellipse at 72% 63%, rgb(124 185 181 / 30%), transparent 58%),
    radial-gradient(ellipse at 43% 38%, rgb(50 92 84 / 34%), transparent 63%),
    radial-gradient(ellipse at 22% 75%, rgb(124 185 181 / 16%), transparent 54%);
  filter: none;
}

html.is-firefox .approach-card {
  background:
    radial-gradient(circle at 30% 18%, rgb(124 185 181 / 16%), transparent 46%),
    rgb(248 248 244 / calc(.58 + var(--card-visual-opacity) * .24));
}

html.is-firefox .approach-card__backdrop {
  display: none;
}

html.is-firefox .work-canvas {
  backface-visibility: hidden;
  transform: translateZ(0);
}

html.is-firefox .work-scene {
  filter: none;
  transition:
    opacity .38s ease,
    visibility .38s,
    transform .58s var(--ease);
  will-change: opacity;
}