/**
 * Critical CSS: above-the-fold splash shown from first paint until Angular replaces <app-root> content.
 * Hardcoded colors mirror app-spinner tokens ($color-background-main-contrast / $color-background-subtle-weak)
 * because theme CSS variables are not available before bootstrap.
 * @see https://web.dev/articles/extract-critical-css
 */
.app-splash {
  align-items: center;
  background-color: #06232c;
  color: #f2f3f3;
  display: flex;
  fill: currentColor;
  flex-direction: column;
  font-family: Montserrat, Arial, sans-serif;
  font-size: 14px;
  gap: 8px;
  inset: 0;
  justify-content: center;
  position: fixed;
  z-index: 11;
}

.app-splash .app-splash-dot {
  animation: app-splash-blink 0.8s linear infinite;
  animation-delay: -0.8s;
}

.app-splash .app-splash-dot--second {
  animation-delay: -0.65s;
}

.app-splash .app-splash-dot--third {
  animation-delay: -0.5s;
}

@keyframes app-splash-blink {
  93.75%,
  100% {
    opacity: 0.2;
  }
}