/* ================= the moving background =================
   Sits behind everything the page draws. The still background the site already
   carries stays underneath it as the thing people see before the animation has
   loaded, and while it is loading — so there is never a bare white flash. */
#bg-stage {
  position: fixed; inset: 0; z-index: -1;
  overflow: hidden; pointer-events: none;
  opacity: 0; transition: opacity 0.5s ease;
}
body.has-moving-background #bg-stage { opacity: 1; }

/* Once the animation is live, the still webp underneath must go away — not fade,
   GO. On real Chrome the fixed webp layer could end up painted over the stage,
   leaving exactly one frozen frame visible while the animation ran beneath it.
   The delayed discrete switch keeps the webp as the backdrop during the half-
   second fade-in, then removes it entirely. */
body.has-moving-background::before {
  visibility: hidden;
  transition: visibility 0s linear 0.6s;
}
#bg-stage .bg-box { position: absolute; opacity: 0; }
#bg-stage .bg-box.is-live { opacity: 1; }
#bg-stage svg, #bg-stage canvas { display: block; width: 100%; height: 100%; }

/* The first card eases up while the opening is still playing, so the page
   assembles itself instead of appearing all at once. It only ever runs on the
   screen somebody arrives on. */
body.background-arriving #screen-quiz.active > .card,
body.background-arriving #screen-start.active > .card {
  animation: card-arrives 1.1s cubic-bezier(0.22, 1, 0.28, 1) both;
}
body.background-arriving #screen-quiz.active > .topbar,
body.background-arriving #screen-start.active > .topbar {
  animation: card-arrives 0.9s cubic-bezier(0.22, 1, 0.28, 1) both;
}
@keyframes card-arrives {
  from { opacity: 0; transform: translateY(46px) scale(0.985); }
  to   { opacity: 1; transform: translateY(0) scale(1); }
}

@media (prefers-reduced-motion: reduce) {
  body.background-arriving #screen-quiz.active > .card,
  body.background-arriving #screen-start.active > .card,
  body.background-arriving #screen-quiz.active > .topbar,
  body.background-arriving #screen-start.active > .topbar { animation: none; }
  #bg-stage { transition: none; }
}