/* =========================================================
   Splash screen
   ========================================================= */
.splash {
  position: fixed;
  inset: 0;
  z-index: 200;
  background: var(--bg);
  color: var(--fg);
  overflow: hidden;
  display: grid;
  place-items: center;
  transition: opacity 0.9s var(--ease-in-out);
}
.splash-leave {
  opacity: 0;
  pointer-events: none;
}
.splash-enter .splash-center > *,
.splash-enter .splash-corner > * {
  opacity: 0;
}

/* Soft grid background */
.splash-grid {
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(var(--grid) 1px, transparent 1px),
    linear-gradient(90deg, var(--grid) 1px, transparent 1px);
  background-size: 80px 80px;
  mask-image: radial-gradient(ellipse at 50% 50%, #000 30%, transparent 75%);
  -webkit-mask-image: radial-gradient(ellipse at 50% 50%, #000 30%, transparent 75%);
  opacity: 0.6;
  pointer-events: none;
}

/* Soft accent halo */
.splash::before {
  content: "";
  position: absolute;
  width: 900px;
  height: 900px;
  border-radius: 50%;
  background: radial-gradient(circle, var(--accent-glow) 0%, transparent 60%);
  filter: blur(60px);
  opacity: 0;
  animation: splashHalo 2.8s 0.1s var(--ease-out) forwards;
  pointer-events: none;
}
@keyframes splashHalo {
  0%   { opacity: 0; transform: scale(0.7); }
  40%  { opacity: 0.9; }
  100% { opacity: 0.6; transform: scale(1); }
}

/* Corner labels */
.splash-corner {
  position: absolute;
  display: flex;
  align-items: center;
  gap: 10px;
  font-family: var(--f-mono);
  font-size: 11px;
  letter-spacing: 0.12em;
  color: var(--fg-2);
  padding: 28px 36px;
  z-index: 2;
}
.splash-corner.top-left  { top: 0; left: 0; }
.splash-corner.top-right { top: 0; right: 0; flex-direction: column; align-items: flex-end; gap: 4px; padding-top: 30px; }
.splash-corner.bot-left  { bottom: 0; left: 0; flex-direction: column; align-items: flex-start; gap: 4px; }
.splash-corner.bot-right { bottom: 0; right: 0; }

.splash-meta { display: block; }
.splash-meta.dim { color: var(--fg-4); }

.splash-logo {
  display: inline-block;
  width: 26px;
  height: 26px;
  background-color: var(--fg);
  -webkit-mask: var(--logo-mask) center / contain no-repeat;
  mask: var(--logo-mask) center / contain no-repeat;
  transform: scale(0.6) rotate(-90deg);
  opacity: 0;
  animation: splashLogoIn 1s 0.05s var(--ease-spring) forwards;
}
@keyframes splashLogoIn {
  to { transform: scale(1) rotate(0); opacity: 1; }
}
.splash-brand {
  font-family: var(--f-mono);
  font-size: 13px;
  letter-spacing: 0.02em;
  color: var(--fg);
  opacity: 0;
  animation: splashFadeUp 0.7s 0.4s var(--ease-out) forwards;
}

/* Center column */
.splash-center {
  position: relative;
  text-align: center;
  padding: 0 32px;
  z-index: 2;
  max-width: 1100px;
}
.splash-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-family: var(--f-mono);
  font-size: 11px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--fg-3);
  padding: 6px 12px 6px 8px;
  border: 1px solid var(--border);
  border-radius: 999px;
  background: var(--bg-card);
  opacity: 0;
  animation: splashFadeUp 0.8s 0.3s var(--ease-out) forwards;
}
.splash-eyebrow .dot {
  width: 6px; height: 6px; border-radius: 50%;
  background: var(--accent);
  box-shadow: 0 0 12px var(--accent);
  animation: blink 1.6s var(--ease-in-out) infinite;
}

.splash-quote {
  font-family: var(--f-display);
  font-weight: 400;
  font-size: clamp(40px, 7vw, 96px);
  line-height: 1.02;
  letter-spacing: -0.02em;
  margin: 28px 0 32px;
  color: var(--fg);
}
.splash-quote em {
  font-style: italic;
  color: var(--accent);
}
.splash-quote .ln {
  display: block;
  overflow: hidden;
}
.splash-quote .ln > span {
  display: inline-block;
  transform: translateY(110%);
  opacity: 0;
  animation: splashLineUp 0.9s var(--ease-out) forwards;
}
.splash-quote .ln:nth-child(1) > span { animation-delay: 0.55s; }
.splash-quote .ln:nth-child(2) > span { animation-delay: 0.75s; }
@keyframes splashLineUp {
  to { transform: translateY(0); opacity: 1; }
}

.splash-sign {
  font-family: var(--f-mono);
  font-size: 12px;
  letter-spacing: 0.08em;
  color: var(--fg-3);
  opacity: 0;
  animation: splashFadeUp 0.7s 1.4s var(--ease-out) forwards;
}

/* Bottom-right loading indicator */
.splash-loading {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  font-family: var(--f-mono);
  font-size: 11px;
  letter-spacing: 0.12em;
  color: var(--fg-3);
  opacity: 0;
  animation: splashFadeUp 0.7s 0.6s var(--ease-out) forwards;
}
.splash-loading-bar {
  display: inline-block;
  width: 60px;
  height: 2px;
  background: var(--bg-3);
  border-radius: 1px;
  overflow: hidden;
  position: relative;
}
.splash-loading-bar i {
  display: block;
  height: 100%;
  width: 0%;
  background: var(--accent);
  border-radius: 1px;
  animation: splashBar 2.5s 0.3s var(--ease-in-out) forwards;
}
@keyframes splashBar {
  0%   { width: 0%; }
  100% { width: 100%; }
}

@keyframes splashFadeUp {
  from { opacity: 0; transform: translateY(8px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* Curtain — slides up to "open" the page underneath */
.splash-curtain {
  position: absolute;
  inset: 0;
  background: var(--bg);
  transform-origin: bottom center;
  z-index: 5;
  opacity: 0;
  pointer-events: none;
}
.splash-leave .splash-curtain {
  opacity: 1;
  animation: splashCurtain 0.9s var(--ease-in-out) forwards;
}
@keyframes splashCurtain {
  from { transform: translateY(0); }
  to   { transform: translateY(-100%); }
}
.splash-leave .splash-center,
.splash-leave .splash-corner {
  transition: opacity 0.4s var(--ease-out), transform 0.4s var(--ease-out);
  opacity: 0;
  transform: translateY(-12px);
}

@media (prefers-reduced-motion: reduce) {
  .splash,
  .splash *,
  .splash::before {
    animation-duration: 0.01s !important;
    transition-duration: 0.01s !important;
  }
}