/* Loader container: covers the entire page and centers its content */
#loader {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: #131314; /* Background color for the loading screen */
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 9999; /* Ensure the loader is on top */
}

/* Loader animation */
figure {
  position: absolute;
  margin: auto;
  top: 0; bottom: 0; left: 0; right: 0;
  width: 6.250em; height: 6.250em;
  animation: rotate 2.4s linear infinite;
  transform: translateZ(0); /* Trigger hardware acceleration */
}

.white {
  top: 0; bottom: 0; left: 0; right: 0;
  background: white;
  animation: flash 2.4s linear infinite;
  opacity: 0;
  transform: translateZ(0); /* Trigger hardware acceleration */
}

.dot {
  position: absolute;
  margin: auto;
  width: 2.4em; height: 2.4em;
  border-radius: 100%;
  transition: all 1s ease;
  transform: translateZ(0); /* Trigger hardware acceleration */
}

.dot:nth-child(2) { top: 0; bottom: 0; left: 0; background: #FF4444; animation: dotsY 2.4s linear infinite; }
.dot:nth-child(3) { left: 0; right: 0; top: 0; background: #FFBB33; animation: dotsX 2.4s linear infinite; }
.dot:nth-child(4) { top: 0; bottom: 0; right: 0; background: #99CC00; animation: dotsY 2.4s linear infinite; }
.dot:nth-child(5) { left: 0; right: 0; bottom: 0; background: #33B5E5; animation: dotsX 2.4s linear infinite; }

@keyframes rotate {
  0% { transform: rotate(0) translateZ(0); }
  /* 10% { width: 6.250em; height: 6.250em; } */
  /* 66% { width: 2.4em; height: 2.4em; } */
  /* 10% { transform: scale(0.5);}
  66% { transform: scale(0.1);} */
  66% { transform: rotate(180deg) scale(0.1);}
  100% { transform: rotate(360deg) translateZ(0);}
  /* width: 6.250em; height: 6.250em; } */
}

/* @keyframes dotsY {
  66% { opacity: .1; width: 2.4em; }
  77% { opacity: 1; width: 0; }
}

@keyframes dotsX {
  66% { opacity: .1; height: 2.4em; }
  77% { opacity: 1; height: 0; }
} */

@keyframes dotsX {
  66% { transform: scale(0.8); opacity: .1;}
  77% {transform: scale(0); opacity: 1;}
}

@keyframes dotsY {
  66% {transform: scale(0.8); opacity: .1;}
  77% {transform: scale(0); opacity: 1;}
}

/* @keyframes flash {
  33% { opacity: 0; border-radius: 0%; }
  55% { opacity: .1; border-radius: 100%; }
  66% { opacity: 0; }
} */