.products .bubble-heading,
.hero-content .bubble-heading {
  position: relative;
  background: none;
}

.bubble-heading__text {
  display: block;
  background: var(--bubble-gradient, linear-gradient(90deg, var(--accent), #a685ff));
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}

.hero-content .bubble-heading {
  --bubble-max-spacing: 4.5;
}

.app-info .bubble-heading {
  --bubble-gutter: 32px;
  --bubble-start: var(--app-green, var(--app-blue));
  --bubble-middle: var(--accent);
  --bubble-gradient: linear-gradient(90deg, var(--bubble-start), var(--bubble-middle) 50%, #a685ff);
}

.bubble-heading--layerflow {
  --bubble-start: var(--accent-2);
  --bubble-middle: var(--accent);
  --bubble-gradient: linear-gradient(90deg, var(--bubble-start), var(--bubble-middle) 50%, var(--purple));
}

.bubble-heading__canvas {
  position: absolute;
  left: calc(-1 * var(--bubble-gutter, 0px));
  top: -48px;
  width: calc(100% + 2 * var(--bubble-gutter, 0px));
  height: calc(100% + 96px);
  pointer-events: none;
  display: none;
}

@media (hover: hover) and (pointer: fine) and (prefers-reduced-motion: no-preference) {
  .bubble-heading.is-bubbly .bubble-heading__text {
    opacity: 0;
  }

  .bubble-heading.is-bubbly .bubble-heading__canvas {
    display: block;
  }
}

@media (forced-colors: active) {
  .bubble-heading__text {
    background: none;
    -webkit-text-fill-color: CanvasText;
  }
}