/* Splash screen */

.splash-screen {

  position: fixed; inset: 0; z-index: 2000;

  background: var(--bg); display: flex; justify-content: center; align-items: center;

}

.splash-screen.hide { opacity: 0; pointer-events: none; transition: opacity 0.5s ease, transform 0.5s ease; transform: scale(1.05); }

.splash-content { text-align: center; animation: splashFadeIn 0.8s ease both; }

.splash-text { font-size: 16px; font-weight: 400; color: var(--text-muted); letter-spacing: 2px; text-transform: uppercase; margin-bottom: 8px; animation: splashSlideUp 0.8s ease 0.2s both; }

.splash-brand {
  font-size: 56px; font-weight: 700; letter-spacing: -2px; display: block;
  color: var(--accent);
  animation: splashSlideUp 0.8s ease 0.4s both;
}

body.dark .splash-brand {
  color: var(--accent);
}

.splash-line {

  width: 60px; height: 2px; margin: 16px auto 0;

  background: var(--text-muted); border-radius: 1px;

  animation: splashSlideUp 0.8s ease 0.6s both;

}

@keyframes splashFadeIn {

  from { opacity: 0; transform: translateY(12px); }

  to { opacity: 1; transform: translateY(0); }

}

@keyframes splashSlideUp {

  from { opacity: 0; transform: translateY(16px); }

  to { opacity: 1; transform: translateY(0); }

}

@keyframes splashFadeOut {

  from { opacity: 1; transform: scale(1); }

  to { opacity: 0; transform: scale(1.05); pointer-events: none; }

}

@keyframes slideIn {

  from { opacity: 0; transform: translateY(-10px); }

  to { opacity: 1; transform: translateY(0); }

}

@keyframes stripeFade {

  0% { opacity: 1; }

  100% { opacity: 0; }

}