/* The logo next to the page title. It spins only while a guess is being processed.
 *
 * Dash marks the outputs of a running callback with data-dash-is-loading="true". The Submit button
 * (inside the dcc.Loading wrapper) is an output of the guess callback, so its attribute is exactly the
 * loading state the spinner already reflects. No JavaScript is involved.
 *
 * The animation is always defined but paused; running it while loading and pausing it afterwards
 * means the logo stops where it is instead of snapping back to 0 degrees. */
.site-logo {
  display: inline-block;
  height: 1.05em;
  width: 1.05em;
  margin-right: 0.3em;
  vertical-align: middle;
  border-radius: 50%;
  animation: rotate 1.4s linear infinite;
  animation-play-state: paused;
}

body:has(#submit-button[data-dash-is-loading="true"]) .site-logo {
  animation-play-state: running;
}

@keyframes rotate {
  from { transform: rotate(0deg); }
  to   { transform: rotate(360deg); }
}

/* people who ask their system for less motion get a still logo */
@media (prefers-reduced-motion: reduce) {
  .site-logo { animation: none; }
}