/* 3d cube spinner done entire with CSS */

:root {
  --loader-size: 50px;
  --loader-color: #00ffe6;
  --loader-speed: 3s;
  --loader-perspective: 1000px;
}

#spinner-overlay {
  position: fixed;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #000000;
  color: var(--loader-color);
  z-index: 20000;
  transition: opacity 300ms ease;
}

/* Hide spinner immediately if user has seen it before */
.loader-seen #spinner-overlay {
  display: none !important;
}

.loader-hidden {
  opacity: 0;
  pointer-events: none;
}

/* Isolate loader styles from global box-sizing and other resets */
#spinner-overlay .wrapper {
  min-height: 85vh;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 20px;
  box-sizing: content-box;
}

#spinner-overlay .loading {
  color: var(--loader-color);
  font-size: clamp(1rem, -0.875rem + 8.333vw, 4.5rem);
  font-family: 'Electrolize', sans-serif;
  position: relative;
  display: inline-block;
  box-sizing: content-box;
  margin-bottom: 2%;
}

#spinner-overlay .loader-cube {
  position: relative;
  width: var(--loader-size);
  height: var(--loader-size);
  transform-style: preserve-3d;
  animation: rotateCube var(--loader-speed) infinite linear;
  perspective: var(--loader-perspective);
  transform: rotateX(45deg) rotateY(45deg);
  box-sizing: content-box;
}

#spinner-overlay .loader-cube .loader-face {
  position: absolute;
  width: var(--loader-size);
  height: var(--loader-size);
  background-color: var(--loader-color);
  border: 2px solid #000000;
  opacity: 0.8;
  display: flex;
  justify-content: center;
  align-items: center;
  box-sizing: content-box;
}

#spinner-overlay .loader-cube .loader-face.front  { transform: rotateY(0deg) translateZ(calc(var(--loader-size) / 2)); }
#spinner-overlay .loader-cube .loader-face.back   { transform: rotateY(180deg) translateZ(calc(var(--loader-size) / 2)); }
#spinner-overlay .loader-cube .loader-face.left   { transform: rotateY(-90deg) translateZ(calc(var(--loader-size) / 2)); }
#spinner-overlay .loader-cube .loader-face.right  { transform: rotateY(90deg) translateZ(calc(var(--loader-size) / 2)); }
#spinner-overlay .loader-cube .loader-face.top    { transform: rotateX(90deg) translateZ(calc(var(--loader-size) / 2)); }
#spinner-overlay .loader-cube .loader-face.bottom { transform: rotateX(-90deg) translateZ(calc(var(--loader-size) / 2)); }

@keyframes animloader {
  0% { box-shadow: 10px 0 transparent, 20px 0 transparent; }
  50% { box-shadow: 10px 0 currentColor, 20px 0 transparent; }
  100% { box-shadow: 10px 0 currentColor, 20px 0 currentColor; }
}

@keyframes rotateCube {
  0% { transform: rotateX(0deg) rotateY(0deg); }
  100% { transform: rotateX(360deg) rotateY(360deg); }
}