/* Splash screen — single static element, declared once in index.html as a
   sibling of #root. React never touches it; Layout just toggles the
   --hidden modifier when the workspace is ready. Living outside #root is
   what guarantees the per-letter entrance animation plays exactly once: if
   it lived inside #root, React's first render would replace its DOM nodes
   and the CSS animation timeline would restart. */

.vr-splash {
  position: fixed;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  /* Hardcoded brand backdrop — intentionally not driven by Mantine CSS vars,
     since those don't exist before the bundle loads. #141517 matches
     Mantine's default dark-8 so the workspace fade-in underneath is
     seamless. */
  background: #141517;
  z-index: 9999;
  opacity: 1;
  transition: opacity 0.2s ease;
}

/* Toggled by Layout once the workspace is ready to take over. The splash
   element is a sibling of #root (not inside it), so React never destroys it
   — we just fade it out on top. */
.vr-splash--hidden {
  opacity: 0;
  pointer-events: none;
}

.vr-splash__wordmark {
  /* Match LogoBox + WelcomeStep so the splash wordmark reads as the brand. */
  font-family: "Orbitron", sans-serif;
  font-weight: 500;
  font-size: clamp(2rem, 5.5vw, 4rem);
  letter-spacing: 0.12em;
  color: #fff;
  display: flex;
  /* compensate for the trailing letter-spacing on the last span */
  padding-left: 0.12em;
  user-select: none;
}

.vr-splash__letter {
  display: inline-block;
  opacity: 0;
  transform: translateY(8px);
  /* Per-letter duration kept tight so the full reveal completes well within
     the 500ms min-hold in Layout — even cached/fast profile loads see the
     whole wordmark land, not just the first letter or two. */
  animation: vr-splash-letter 0.25s cubic-bezier(0.16, 1, 0.3, 1) forwards;
  animation-delay: calc(var(--i, 0) * 20ms);
}

@keyframes vr-splash-letter {
  to {
    opacity: 1;
    transform: translateY(0);
  }
}