/* ── Splash Screen ── */
#splash {
  position: fixed; inset: 0; z-index: 999;
  background: var(--bg);
  display: flex; align-items: center; justify-content: center;
  pointer-events: none;
  animation: splash-exit 0.5s ease-in 2.4s forwards;
}
@keyframes splash-exit {
  to { opacity: 0; visibility: hidden; }
}

.splash-inner {
  position: relative;
  display: flex; align-items: center; gap: 10px;
}

/* The word ASCEND — revealed by clip-path wipe from left */
.splash-word {
  font-family: 'Alfa Slab One', serif;
  font-size: clamp(48px, 12vw, 72px);
  letter-spacing: 0.04em;
  color: #fff;
  display: block;
  clip-path: inset(0 100% 0 0);
  animation: word-reveal 0.55s cubic-bezier(0.77,0,0.18,1) 0.3s forwards;
}
@keyframes word-reveal {
  to { clip-path: inset(0 0% 0 0); }
}

/* Accent triangle ▲ in brand purple */
.splash-accent {
  font-size: clamp(28px, 6vw, 42px);
  color: var(--primary);
  opacity: 0;
  transform: translateY(6px);
  display: block;
  animation: accent-in 0.35s ease-out 0.9s forwards;
  line-height: 1;
  margin-top: 4px;
}
@keyframes accent-in {
  to { opacity: 1; transform: translateY(0); }
}

/* Thin rule under the text, draws from left */
.splash-rule {
  position: absolute;
  bottom: -10px; left: 0;
  height: 2px; width: 0;
  background: var(--primary);
  animation: rule-draw 0.5s cubic-bezier(0.77,0,0.18,1) 0.55s forwards;
}
@keyframes rule-draw {
  to { width: 100%; }
}