/* Hide real content until loader finishes */
#content {
  visibility: hidden;
}

/* Add global font loading smoothness */
html {
  font-display: optional;
}

/* Ensure consistent text metrics during font loading */
* {
  text-size-adjust: 100%;
  -webkit-text-size-adjust: 100%;
}

/* Fullscreen black overlay */
#loading {
  position: fixed;
  inset: 0;
  background-color: #000;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 9999;
  pointer-events: all;
  /* Ensure smooth transitions */
  transform: translateZ(0);
  will-change: opacity;
}

/* Center spinner + text vertically */
.spinner-container {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2rem;           /* ↑ uniform vertical spacing between spinner and text */
}


/* Dramatic weighted spin */
.spinner {
  width: 180px;
  height: 180px;
  opacity: 0;
  transform: scale(0.8);
  animation: tickSpin 2s cubic-bezier(0.65, 0, 0.35, 1) 1 forwards;
  filter:
    /* tight red glow close to the shape */
    drop-shadow(0 0 0.3rem rgba(204, 0, 0, 0.582))
    /* medium halo */
    drop-shadow(0 0 2rem rgba(255, 0, 0, 0.37))
    /* wide, soft spill */
    drop-shadow(0 0 3rem rgba(255, 0, 0, 0.4));
}

@keyframes tickSpin {
  0% {
    transform: rotate(0deg) scale(0.8);
    opacity: 0;
  }

  20% {
    opacity: 1;
    transform: rotate(0deg) scale(1.1);
  }

  55.3% {
    transform: rotate(0deg) scale(1);
  }

  /* Overshoot quickly */
  70% {
    transform: rotate(95deg) scale(1);
  }

  /* Smooth return to 90° over 10% of time */
  80% {
    transform: rotate(90deg) scale(1);
  }

  100% {
    transform: rotate(90deg) scale(1);
    opacity: 1;
  }
}



/* Loading text styling */
.loading-text {
  margin-top: 12px;
  font-family: 'Bangers', 'Impact', 'Arial Black', sans-serif;
  font-size: 2rem;
  color: #ff0000;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  font-weight: 400;
  font-style: normal;
  /* Smooth font rendering */
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
  /* Prevent layout shift while font loads */
  font-size-adjust: 0.5;
  /* Show text immediately, enhance when font loads */
  opacity: 1;
  transition: font-family 0.2s ease;
}

/* Optional enhancement when font is loaded */
.font-loaded .loading-text {
  /* Subtle improvement when font loads */
  letter-spacing: 0.08em;
}

/* --- State modifiers controlled by JS --- */
.spinner.spinner--loop {
  /* Keep spinning until content is ready */
  animation-iteration-count: infinite;
}

.spinner.spinner--hold {
  /* Freeze in final pose so we never cut mid-animation */
  animation: none;
  opacity: 1;
  transform: rotate(90deg) scale(1);
}

/* ============= LIGHT MODE OVERRIDES ============= */
[data-theme="light"] #loading {
  background-color: #fff;
}
[data-theme="light"] .loading-text {
  color: var(--color-red-primary);
}
[data-theme="light"] .spinner {
  /* Rotate hue from red to blue and apply blue glow in light mode */
  filter: hue-rotate(210deg)
    drop-shadow(0 0 0.3rem rgba(0, 128, 255, 0.582))
    drop-shadow(0 0 2rem rgba(0, 128, 255, 0.37))
    drop-shadow(0 0 3rem rgba(0, 128, 255, 0.4));
}