/* loader.css */
:root {
    --loader-main-color: #8a0707;  /* Dark red - better semantic naming */
    --loader-light-color: #d47a7a; /* Lighter red */
    --loader-duration: 1s;
    --loader-size: 44px;
    --loader-stroke-width: 6px;
  }
  
  .loader {
      width: var(--loader-size);
      height: var(--loader-size);
      position: fixed;
      top: 50%;
      left: 50%;
      transform: translate(-50%, -50%);
      z-index: 9999;
      display: none; /* Hidden by default */
      pointer-events: none; /* Allow clicks to pass through when visible */
  }
  
  .loader svg {
      display: block;
      width: 100%;
      height: 100%;
      transform-origin: center;
      animation: rotate calc(var(--loader-duration) * 1.5) linear infinite;
  }
  
  .loader svg circle {
      fill: none;
      stroke-width: var(--loader-stroke-width);
      stroke-linecap: round;
      transform-origin: center;
  }
  
  .loader svg circle:first-child {
      stroke: var(--loader-main-color);
      stroke-dasharray: 150;
      stroke-dashoffset: 150;
      animation: 
          dash var(--loader-duration) ease-in-out infinite,
          color-change calc(var(--loader-duration) * 2) ease-in-out infinite;
  }
  
  .loader svg circle:last-child {
      stroke: var(--loader-light-color);
      opacity: 0.3;
  }
  
  @keyframes dash {
      0% { stroke-dashoffset: 150; }
      50% { stroke-dashoffset: 0; transform: rotate(180deg); }
      100% { stroke-dashoffset: -150; transform: rotate(360deg); }
  }
  
  @keyframes rotate {
      100% { transform: rotate(360deg); }
  }
  
  @keyframes color-change {
      0%, 100% { stroke: var(--loader-main-color); }
      50% { stroke: var(--loader-light-color); }
  }
  
  /* State classes */
  .loader-visible {
      display: block;
  }
  
  .loader-active {
      overflow: hidden;
      touch-action: none; /* Prevent touch scrolling on mobile */
      position: fixed;
      width: 100%;
      height: 100%;
  }
  
  /* Optional backdrop effect */
  .loader-backdrop {
      position: fixed;
      top: 0;
      left: 0;
      right: 0;
      bottom: 0;
      background: rgba(0, 0, 0, 0.2);
      z-index: 9998;
      display: none;
  }
  
  .loader-backdrop-visible {
      display: block;
  }