/* Opening animation (src/ui/splash.js).
   The brand colour fills the screen, "H" appears, then the dot hops from letter to letter
   until it lands at the end of "Hearback" as its full stop. Tap to skip. */

html.splashing, html.splashing body { overflow: hidden; }

.splash {
  position: fixed; inset: 0; z-index: 1000;
  display: grid; place-items: center;
  background: var(--bg);
  cursor: pointer; -webkit-tap-highlight-color: transparent; user-select: none;
}
/* The fill starts as soon as the page paints, before any script has loaded. */
.splash::before {
  content: ""; position: absolute; inset: 0;
  background: #4f3fd8;
  clip-path: circle(0% at 50% 50%);
  animation: splash-fill .6s cubic-bezier(.65, 0, .25, 1) .05s forwards;
}
@keyframes splash-fill { to { clip-path: circle(75% at 50% 50%); } }

.splash-word {
  position: relative;
  margin: 0; white-space: nowrap;
  /* The brand font in every language (the Arabic interface switches --display to a system font). */
  font: 800 clamp(56px, 17vw, 128px) / 1 "Bricolage Grotesque", ui-sans-serif, system-ui, sans-serif;
  letter-spacing: -.02em;
  color: #fff;
}
.splash-word .sl { display: inline-block; opacity: 0; }
.splash-end { display: inline-block; width: .24em; height: 0; }   /* room for the full stop */
.splash-dot {
  position: absolute; left: 0; top: 0;
  width: .2em; height: .2em;
  opacity: 0;
}
.splash-dot i { display: block; width: 100%; height: 100%; border-radius: 50%; background: #ffc94d; transform-origin: 50% 100%; }

@media (prefers-reduced-motion: reduce) {
  .splash::before { animation-duration: 1ms; animation-delay: 0s; }
}