/* * ----------------------------------------------------
         * 1. Loader Overlay (The Dark Background)
         * ----------------------------------------------------
         */
.loader-container {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: #1a1a2e;
  /* Dark, professional background */
  display: flex;
  justify-content: center;
  align-items: center;
  z-index: 9999;
  /* Ensure it covers everything */
  transition: opacity 0.5s ease-in-out, visibility 0.5s;
  /* For the fade-out effect */
}

/* Class to hide the loader when loading is complete */
.hidden {
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  /* Allows clicking through the hidden element */
}

/* * ----------------------------------------------------
         * 2. Loader Circle (The Glowing Element)
         * ----------------------------------------------------
         */
.loader-circle {
  width: 60px;
  height: 60px;
  border: 4px solid transparent;
  border-top-color: #ff9900;
  /* Bright lighting color 1 (warm orange) */
  border-right-color: #3f72af;
  /* Bright lighting color 2 (deep blue) */
  border-radius: 50%;
  animation: spin 1.2s cubic-bezier(0.5, 0, 0.5, 1) infinite,
    glow 1.2s ease-in-out infinite;
  /* Apply both spin and glow animations */

  /* Add an inner shadow/glow for a more intense lighting effect */
  box-shadow: 0 0 10px rgba(255, 153, 0, 0.8),
    /* Orange glow */ 0 0 20px rgba(63, 114, 175, 0.8);
  /* Blue glow */
}

/* * ----------------------------------------------------
         * 3. Keyframe Animations
         * ----------------------------------------------------
         */

/* Spinning animation */
@keyframes spin {
  0% {
    transform: rotate(0deg);
  }

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

/* Lighting effect animation (pulsing glow) */
@keyframes glow {
  0% {
    box-shadow: 0 0 5px rgba(255, 153, 0, 0.6), 0 0 10px rgba(63, 114, 175, 0.6);
  }

  50% {
    box-shadow: 0 0 15px rgba(255, 153, 0, 1),
      /* Intensify glow */ 0 0 25px rgba(63, 114, 175, 1);
  }

  100% {
    box-shadow: 0 0 5px rgba(255, 153, 0, 0.6), 0 0 10px rgba(63, 114, 175, 0.6);
  }
}

/* --- REST OF STYLES (Unchanged for brevity, but retained for full code) --- */