/* Fullscreen fixed overlay */
#splash-screen {
  position: fixed;
  /* cover viewport reliably */
  inset: 0;
  /* top:0; right:0; bottom:0; left:0; */
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  background-color: #f2f3f8;
  z-index: 10000;
  /* keep above UI */
  transition: opacity 300ms ease, visibility 300ms ease;
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
}

/* hidden state => fade out */
#splash-screen.hidden {
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
}

/* smaller logo centered */
#splash-screen img {
  display: block;
  width: auto;
  height: 64px;
  /* adjust as you wish (h-16 ~ 64px) */
  margin: 0 0 18px 0;
  /* gap between logo and spinner */
  object-fit: contain;
}

/* spinner */
.splash-spinner {
  width: 40px;
  /* smaller spinner */
  height: 40px;
  display: block;
  transform-origin: center center;
  /* ensure rotation center */
  animation: rotate 1.5s linear infinite;
}

/* spinner stroke + dash animation */
.splash-spinner .path {
  stroke: #13398d;
  /* visible color */
  stroke-linecap: round;
  stroke-dasharray: 1, 150;
  stroke-dashoffset: 0;
  animation: dash 1.5s ease-in-out infinite;
}

@keyframes rotate {
  100% {
    transform: rotate(360deg);
  }
}

@keyframes dash {
  0% {
    stroke-dasharray: 1, 150;
    stroke-dashoffset: 0;
  }

  50% {
    stroke-dasharray: 90, 150;
    stroke-dashoffset: -35;
  }

  100% {
    stroke-dasharray: 90, 150;
    stroke-dashoffset: -124;
  }
}