/* Context, never an answer clue. Short entrance motions settle before reading. */
.question-heading {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(220px, 34%);
  align-items: center;
  gap: 16px;
  margin-bottom: 24px;
}
.question-copy { position: relative; min-width: 0; }
.question-heading h1 { margin: 10px 0 0; font-size: clamp(24px, 2.7vw, 30px); }
.question-heading .question-art { width: 100%; height: 156px; margin: 0; }
.question-art {
  position: relative;
  isolation: isolate;
  display: block;
  width: min(100%, 640px);
  height: clamp(150px, 22vw, 208px);
  margin: -8px auto 15px;
  overflow: hidden;
  pointer-events: none;
  user-select: none;
}
.question-art svg {
  display: block;
  width: 100%;
  height: 100%;
  overflow: visible;
}
.question-art .qa-settle {
  animation: rtg-art-settle 1s cubic-bezier(.22, .7, .25, 1) both;
  animation-delay: calc(0ms - var(--question-art-elapsed, 0ms));
}
.question-art .qa-delay { animation-delay: calc(120ms - var(--question-art-elapsed, 0ms)); }
.question-art .qa-float {
  animation: rtg-art-float 1.8s ease-in-out 2 both;
  animation-delay: calc(0ms - var(--question-art-elapsed, 0ms));
}
.question-art .qa-ball {
  animation: rtg-art-ball 3.6s ease-in-out both;
  animation-delay: calc(0ms - var(--question-art-elapsed, 0ms));
}
.question-art .qa-spark {
  animation: rtg-art-spark 3.8s ease-in-out both;
  animation-delay: calc(0ms - var(--question-art-elapsed, 0ms));
}
@keyframes rtg-art-settle {
  from { translate: 0 6px; opacity: .6; }
  to { translate: 0 0; opacity: 1; }
}
@keyframes rtg-art-float {
  0%, 100% { translate: 0 0; }
  50% { translate: 0 -4px; }
}
@keyframes rtg-art-ball {
  0% { rotate: -9deg; translate: -3px 0; }
  30% { rotate: 5deg; translate: 1px -3px; }
  65% { rotate: -2deg; translate: 0 0; }
  100% { rotate: 0deg; translate: 0 0; }
}
@keyframes rtg-art-spark {
  0%, 100% { opacity: .75; }
  40% { opacity: 1; }
}
@media (max-width: 600px) {
  .question-heading { grid-template-columns: minmax(0, 1fr); gap: 4px; margin-bottom: 20px; }
  .question-heading .question-art { grid-row: 1; height: 100px; width: 100%; margin: -8px 0 0; }
  .question-heading h1 { font-size: 24px; }
  .question-art {
    height: 146px;
    width: calc(100% + 24px);
    max-width: calc(100% + 24px);
    margin: -8px -12px 9px;
  }
}
@media (max-width: 380px) {
  .question-art { height: 130px; }
}
@media (prefers-reduced-motion: reduce) {
  .question-art, .question-art *, .question-art *::before, .question-art *::after {
    animation: none !important;
    transition: none !important;
  }
}