/*
  Hentrad splash — the loading state on first page load: Hentrad blue,
  Doji dancing, and the wordmark rising in underneath. It stays until the
  page's first data has loaded (splash.js), at least long enough for the
  little entrance to finish.

  Shared by every surface via /brand. Pages load Fredoka for the
  wordmark; without it, the system font stands in.
*/

.splash {
  position: fixed;
  inset: 0;
  z-index: 9999;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #2F5BFF;
  transition: opacity 320ms ease, visibility 320ms ease;
}

.splash.splash-done {
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
}

.splash-logo {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
}

.splash-doji {
  width: 150px;
  height: 195px;
  object-fit: contain;
  animation: splash-pop 520ms cubic-bezier(.3, 1.4, .5, 1) both;
}

.splash-wm {
  font-family: "Fredoka", "Outfit", system-ui, sans-serif;
  font-weight: 700;
  font-size: 44px;
  line-height: 1;
  letter-spacing: -0.03em;
  color: #FFFFFF;
  display: inline-block;
  transform: skewX(-9deg);
  animation: splash-rise 600ms cubic-bezier(.2, .7, .2, 1) 180ms both;
}

@keyframes splash-pop {
  from { opacity: 0; transform: translateY(18px) scale(.9); }
  to   { opacity: 1; transform: none; }
}

@keyframes splash-rise {
  from { opacity: 0; transform: translateY(12px) skewX(-9deg); }
  to   { opacity: 1; transform: skewX(-9deg); }
}

@media (prefers-reduced-motion: reduce) {
  .splash-doji, .splash-wm { animation: none; }
}