/* 1. BASE VARIABLES
  -----------------
  We define these on :root and override them for .dark class.
  The inline script in index.html will apply the .dark class immediately
  based on 'vueuse-color-scheme' before the page paints.
*/
:root {
  /* Light Mode Defaults */
  --loader-bg: #ffffff;
  --loader-ring-track: #e2e8f0; /* Slate 200 */
  --loader-accent: #6366f1; /* Indigo 500 */
  --loader-accent-glow: rgba(99, 102, 241, 0.4);
}

html.dark {
  /* Dark Mode Overrides */
  --loader-bg: #0f172a; /* Slate 900 */
  --loader-ring-track: #1e293b; /* Slate 800 */
  --loader-accent: #818cf8; /* Indigo 400 */
  --loader-accent-glow: rgba(129, 140, 248, 0.4);
}

/* Reset basics */
body {
  margin: 0;
  padding: 0;
  background-color: var(--loader-bg); /* Match loader bg to avoid flicker */
}

/* 2. LOADING CONTAINER
  --------------------
  Fixed position, high z-index, covers entire screen.
*/
#loading-bg {
  position: fixed;
  inset: 0;
  z-index: 99999;
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: var(--loader-bg);
  /* Smooth transition if user switches theme while loading (rare but nice) */
  transition: background-color 0.3s ease;
}

/* 3. THE UNIFIED LOADER COMPONENT
  -------------------------------
  Wraps the logo and the ring together.
*/
.loader-wrapper {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 140px; /* Size of the ring */
  height: 140px;
}

/* 4. THE STATIC TRACK
  -------------------
  A faint ring behind the spinner to give it structure.
*/
.loader-track {
  position: absolute;
  inset: 0;
  border-radius: 50%;
  border: 2px solid var(--loader-ring-track);
  opacity: 0.6;
}

/* 5. THE SPINNING GRADIENT TAIL
  -----------------------------
  Uses conic-gradient to create a "comet" effect.
  The mask cuts out the center to turn the circle into a thin ring.
*/
.loader-spinner {
  position: absolute;
  inset: -2px; /* Slight overlap to cover track cleanly */
  border-radius: 50%;
  background: conic-gradient(
    from 0deg,
    transparent 0%,
    transparent 50%,
    var(--loader-accent) 100%
  );
  /* Create the hole in the donut */
  -webkit-mask: radial-gradient(farthest-side, transparent calc(100% - 3px), black calc(100% - 3px));
  mask: radial-gradient(farthest-side, transparent calc(100% - 3px), black calc(100% - 3px));

  animation: spin 1s linear infinite;
  /* Add a subtle glow filter to the spinner */
  filter: drop-shadow(0 0 2px var(--loader-accent-glow));
}

/* 6. THE BRAND LOGO
  -----------------
  Centered inside the ring. subtle breathing animation.
*/
.loader-logo {
  position: relative;
  z-index: 10;
  width: 60px; /* Adjust size relative to wrapper */
  height: 60px;
  /*animation: breathe 3s ease-in-out infinite;*/
}

/* Ensure SVG fills the container */
.loader-logo svg {
  width: 100%;
  height: 100%;
  display: block;
  /* Optional: Enhance logo visibility in dark mode if it has transparency */
  filter: drop-shadow(0 4px 12px rgba(0, 0, 0, 0.15));
}

/* 7. ANIMATIONS
  -------------
*/
@keyframes spin {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(360deg);
  }
}

@keyframes breathe {
  0%, 100% {
    transform: scale(0.95);
    opacity: 0.85;
  }
  50% {
    transform: scale(1.05);
    opacity: 1;
  }
}