.question-intro {
  position: relative;
}

.question-atmosphere {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 40cqw;
  overflow: hidden;
  contain: layout paint;
  pointer-events: none;
  user-select: none;
}

.question-atmosphere__particle {
  position: absolute;
  left: var(--question-x);
  top: var(--question-y);
  display: block;
  color: var(--yellow);
  font-family: Manrope, Noto, sans-serif;
  font-size: var(--question-size);
  font-weight: 800;
  line-height: 1;
  opacity: 0;
  transform-origin: 50% 70%;
  will-change: transform, opacity;
}

.question-atmosphere__particle[data-tone='mint'] {
  color: var(--mint);
}

@media (prefers-reduced-motion: reduce) {
  .question-atmosphere {
    display: none;
  }
}