/* Splash / loading styles extracted from index.html */
html, body {
  min-height: 100%;
  overflow: hidden;
}

body[data-page="loading"] #splash {
  min-height: 100dvh;
  width: 100vw;
}

.loading-meta {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 14px;
  width: min(520px, 90vw);
}

.loading-progress {
  position: relative;
  width: 100%;
  height: 9px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.09);
  border: 1px solid rgba(255, 255, 255, 0.18);
  overflow: hidden;
  box-shadow: inset 0 0 12px rgba(0,0,0,0.48);
}

.loading-progress-bar {
  display: block;
  position: absolute;
  left: 0;
  top: 0;
  height: 100%;
  width: 34%;
  border-radius: 999px;
  background: linear-gradient(90deg, rgba(255,255,255,0.88), rgba(212,212,212,0.9));
  animation: loadingBar 1.6s linear infinite;
  box-shadow: 0 0 12px rgba(255,255,255,0.32);
  will-change: transform;
}

@keyframes loadingBar {
  0% { transform: translateX(-120%); }
  100% { transform: translateX(320%); }
}