/* Splash — a brief lo-fi intro shown on every load that fades out after a short
   hold (see js/ui/splash.js). All colours come from the active theme's vars so it
   recolors live once applyTheme() runs; the :root fallback paints it before that. */
.splash {
  position: fixed;
  inset: 0;
  z-index: 200; /* above every app overlay (confirm=100, colorpicker=120) during boot */
  background: var(--bg);
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  /* The fade-out the dismiss waits on (transitionend removes the node). */
  transition: opacity .5s ease;
}
.splash.is-done { opacity: 0; pointer-events: none; }

/* Soft accent halo that flickers on like something warming up, behind the text. */
.splash-glow {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 140vmin;
  height: 140vmin;
  transform: translate(-50%, -56%);
  pointer-events: none;
  background: radial-gradient(closest-side,
    color-mix(in srgb, var(--accent) 16%, transparent),
    color-mix(in srgb, var(--accent) 5%, transparent) 45%,
    transparent 72%);
  animation: splash-flicker 1.5s ease-out both;
}

.splash-inner { position: relative; padding: 0 28px; }

/* Two-tone wordmark: Lie<span>sel</span>, the span in the theme accent. */
.splash-logo {
  font-family: system-ui, sans-serif;
  font-weight: 700;
  font-size: clamp(46px, 12vw, 76px);
  letter-spacing: -1px;
  color: var(--fg);
  line-height: 1.1;
  animation: splash-rise .6s cubic-bezier(.22, 1, .36, 1) .1s both;
}
.splash-logo span { color: var(--accent); }

.splash-blurb {
  font-family: system-ui, sans-serif;
  font-style: italic;
  font-weight: 300;
  font-size: clamp(14px, 3.6vw, 17px);
  line-height: 1.6;
  color: var(--muted);
  max-width: 24em;
  margin: 16px auto 0;
  animation: splash-rise .6s cubic-bezier(.22, 1, .36, 1) .3s both;
}

/* Liesel has no --fg-dim; color-mix sits the tag a touch dimmer than --muted. */
.splash-tag {
  font-family: ui-monospace, monospace;
  font-size: 10.5px;
  letter-spacing: 3px;
  text-transform: uppercase;
  color: color-mix(in srgb, var(--muted) 70%, transparent);
  margin-top: 26px;
  animation: splash-rise .6s cubic-bezier(.22, 1, .36, 1) .5s both;
}

/* Staggered entrance: each element rises + fades in; last one settles by ~0.7s. */
@keyframes splash-rise {
  from { opacity: 0; transform: translateY(14px); }
  to { opacity: 1; transform: none; }
}

@keyframes splash-flicker {
  0% { opacity: 0; }
  7% { opacity: .5; }
  12% { opacity: .1; }
  20% { opacity: .65; }
  27% { opacity: .3; }
  38% { opacity: .85; }
  100% { opacity: 1; }
}

/* Respect reduced motion: drop the entrance animations (the short opacity
   fade-out stays, so the dismiss still works). */
@media (prefers-reduced-motion: reduce) {
  .splash-glow,
  .splash-logo,
  .splash-blurb,
  .splash-tag { animation: none; }
}