/*
 * Boot screen: the logo's ink half settles in, then its indigo half — closed
 * against it at first, a whole disc — slides up and away to its place (the gap
 * between them is the net worth the app is about); the wordmark follows, and a
 * hairline progress bar shows up only if loading drags on. index.html draws it before any script runs and keeps it over the app
 * until the first page has loaded (src/lib/boot-splash.ts adds .splash-out);
 * SplashScreen.tsx reuses the same classes later on. Colours read the
 * index.css tokens once they exist; the fallbacks are the same values, for
 * the first paint.
 */
.splash {
  position: fixed;
  inset: 0;
  z-index: 100;
  display: grid;
  place-content: center;
  justify-items: center;
  gap: 28px;
  background: var(--background, #ffffff);
  color: var(--foreground, #0e1a2b);
  --accent: var(--cat-indigo, #5b6fb0);
}
.dark .splash {
  background: var(--background, #121419);
  color: var(--foreground, #e8eaee);
  --accent: var(--cat-indigo, #959fdc);
}

.splash-out {
  opacity: 0;
  pointer-events: none;
  transition: opacity 280ms ease;
}

.splash-lockup {
  display: flex;
  align-items: center;
  gap: 14px;
}
.splash-mark {
  display: block;
  height: 36px;
  width: 36px;
  overflow: visible;
}
/* SVG user units: the ink half's own centre is (14.2, 16.6) */
.splash-mark path {
  fill: currentColor;
  transform-origin: 14.2px 16.6px;
  animation: splash-settle 360ms cubic-bezier(0.3, 0.7, 0.2, 1) both;
}
.splash-mark path:nth-child(2) {
  fill: var(--accent);
  animation: splash-split 560ms cubic-bezier(0.3, 0.7, 0.2, 1) both;
  animation-delay: 220ms;
}

.splash-word {
  font-family: "Geist Variable", ui-sans-serif, system-ui, -apple-system,
    sans-serif;
  font-size: 26px;
  font-weight: 600;
  letter-spacing: -0.025em;
  line-height: 1;
  animation: splash-word 420ms cubic-bezier(0.3, 0.7, 0.2, 1) both;
  animation-delay: 620ms;
}

.splash-bar {
  position: relative;
  width: 112px;
  height: 2px;
  overflow: hidden;
  border-radius: 2px;
  background: color-mix(in srgb, currentColor 10%, transparent);
  animation: splash-fade 300ms ease-out both;
  animation-delay: 1400ms;
}
.splash-bar::after {
  content: "";
  position: absolute;
  inset: 0;
  width: 40%;
  border-radius: inherit;
  background: currentColor;
  animation: splash-slide 1100ms ease-in-out infinite;
}

/* the ink half: what you own, appearing */
@keyframes splash-settle {
  from {
    opacity: 0;
    transform: scale(0.9);
  }
  to {
    opacity: 1;
    transform: none;
  }
}
/* the indigo half: starts closed against the ink one, then slides up and away
   by its offset in the mark (3.6, -1.2) */
@keyframes splash-split {
  from {
    opacity: 0;
    transform: translate(-3.6px, 1.2px);
  }
  35% {
    opacity: 1;
    transform: translate(-3.6px, 1.2px);
  }
  to {
    opacity: 1;
    transform: none;
  }
}
@keyframes splash-word {
  from {
    opacity: 0;
    transform: translateX(-8px);
  }
  to {
    opacity: 1;
    transform: none;
  }
}
@keyframes splash-fade {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}
@keyframes splash-slide {
  from {
    transform: translateX(-100%);
  }
  to {
    transform: translateX(250%);
  }
}

@media (prefers-reduced-motion: reduce) {
  .splash *,
  .splash *::after {
    animation: none !important;
  }
  .splash-out {
    transition: none;
  }
}