/* The logo while a page loads (src/core/logo.js: the head on its spring + the word).
   Shared by every loader that shows the brand (viewer, story, hub, run, dock, collection).
   The logo is alive here: the head nods on its spring in a loop and the letters hop one after
   another, a calm 1.2 s cycle that rests for its last third. It extends the hover motion of
   css/nav.css (same peaks: logo-nod, logo-hop) into a loop; none under reduced motion.

   Markup: <span class="logo-live" role="img" aria-label="BOBBLE"> logoSvg(.. class="logo__svg logo__svg--full")
   + markSvg(.. class="logo__svg logo__svg--mark") </span>. The slot keeps the lockup's aspect ratio, so
   nothing moves when the svg arrives; add .is-in once Dela Gothic One is in (the word must not swap fonts
   in front of the visitor). The page sets the width (and --logo-hop in svg units: the lockup is 776 wide). */

.logo-live {
  --logo-hop: 17px;
  display: block;
  aspect-ratio: 776 / 224;
  opacity: 0;
  transition: opacity .3s ease;
}
.logo-live.is-in { opacity: 1; }
.logo-live .logo__svg { display: block; width: 100%; height: auto; overflow: visible; }
.logo-live .logo__svg--mark { display: none; }
/* The word inside a slot in the HTML is only a fallback (the app never started: .load-failed). */
.logo-live__fb { display: none; }
.load-failed .logo-live { aspect-ratio: auto; opacity: 1; }
.load-failed .logo-live__fb {
  display: block;
  font: 400 1.2em/1 'Arial Black', 'Arial', sans-serif;
  letter-spacing: .02em;
  text-align: center;
  color: #fff;
}
.logo-live--mark { aspect-ratio: 244 / 224; }
.logo-live--mark .logo__svg--full { display: none; }
.logo-live--mark .logo__svg--mark { display: block; }

@keyframes logo-live-nod {
  0%, 100% { rotate: 0deg; }
  16% { rotate: 11deg; }
  36% { rotate: -8deg; }
  54% { rotate: 4deg; }
  70% { rotate: -1.5deg; }
}
@keyframes logo-live-hop {
  0%, 100% { translate: 0 0; }
  20% { translate: 0 calc(var(--logo-hop) * -1); }
  42% { translate: 0 calc(var(--logo-hop) * .3); }
  58% { translate: 0 0; }
}

.logo-live .logo__head { animation: logo-live-nod 1.2s ease-in-out infinite; }
.logo-live .logo__l { animation: logo-live-hop 1.2s ease-in-out calc(var(--i) * 75ms) infinite; }

/* check mode (tools/check.py): a still frame */
.is-check .logo-live,
.is-check .logo-live .logo__head,
.is-check .logo-live .logo__l { transition: none; animation: none; }

@media (prefers-reduced-motion: reduce) {
  .logo-live { transition-duration: .01s; }
  .logo-live .logo__head,
  .logo-live .logo__l { animation: none !important; }
}