/* assets/css/loading_screen.css */
#loading-screen {
  position: fixed;
  inset: 0;
  z-index: 9999;
  background-color: white;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: sans-serif;
  font-size: 1.5rem;
  color: #444;
}

/* CSS */
.three-bounce {
  display: flex;
  justify-content: space-between;
  align-items: center;
  width: 100px; /* total width, adjust as needed */
  height: 50px; /* height of the loader */
  margin: 0 auto; /* center horizontally */
}

.bounce {
  width: 25px; /* circle diameter = size * 0.5, e.g. 50 * 0.5 */
  height: 25px;
  background-color: rgba(
    128,
    128,
    128,
    0.4
  ); /* default color, change as you want */
  border-radius: 50%;
  animation-name: bounceScale;
  animation-duration: 1.4s; /* matches Flutter duration */
  animation-iteration-count: infinite;
  animation-timing-function: ease-in-out;
  transform-origin: center center;
}

.bounce1 {
  animation-delay: 0s;
}

.bounce2 {
  animation-delay: 0.28s; /* 0.2 * 1.4s = 0.28s */
}

.bounce3 {
  animation-delay: 0.56s; /* 0.4 * 1.4s */
}

@keyframes bounceScale {
  0%,
  80%,
  100% {
    transform: scale(0);
  }
  40% {
    transform: scale(1);
  }
}