/* Splash: the logo mark filling up from the bottom with the load percentage under it, over the whole page until the site has loaded
   (--progress 0..1 and data-state from splash.js). Shown only with JS; if the script never runs, the failsafe animation hides it at 12 s.
   Once ready the failsafe is dropped: while it waits out its delay Firefox keeps the splash opaque. */
.splash { display: none; }

[data-enhanced] .splash {
  position: fixed;
  inset: 0;
  z-index: 4;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 28px;
  background: var(--bg);
  transition: opacity .6s, visibility 0s .6s;
  animation: splash-failsafe 0s 12s forwards;
}

[data-enhanced] .splash[data-state="ready"] {
  opacity: 0;
  visibility: hidden;
  animation: none;
}

@keyframes splash-failsafe {
  to { opacity: 0; visibility: hidden; }
}

.splash-mark {
  display: block;
  width: clamp(72px, 9vw, 112px);
  height: auto;
  color: var(--line-strong);
}

.splash-fill {
  color: var(--ink);
  clip-path: inset(calc((1 - var(--progress, 0)) * 100%) 0 0 0);
}

.splash-count {
  margin: 0;
  min-width: 5ch;
  text-align: center;
  font: 700 clamp(14px, 1.2vw, 18px) var(--font-display);
  font-synthesis: none;
  font-variant-numeric: tabular-nums;
  letter-spacing: .12em;
  color: var(--mute);
}