/* Loader container */
.loader {
    position: fixed;
    inset: 0;
    background: var(--accent);
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    z-index: 9999;
    color: var(--text);
    scrollbar-width:none; 
  }

  /* Circular track */
  .loader-ring {
    position: relative;
    width: 120px;
    height: 120px;
  }

  .loader-ring svg {
    transform: rotate(-90deg);
    width: 100%;
    height: 100%;
  }

  .loader-ring .track {
    fill: none;
    stroke: rgba(255, 255, 255, 0.1);
    stroke-width: 8;
  }

  .loader-ring .progress {
    fill: none;
    stroke: var(--primary);
    stroke-width: 8;
    stroke-dasharray: 283;
    stroke-dashoffset: 280;
    stroke-linecap: round;
    animation: dash 1.8s ease-in-out infinite;
  }

  /* Runner icon (now running instead of spinning) */
  .runner-icon {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    animation: runMotion 0.6s ease-in-out infinite;
  }

  .runner-icon i {
    color: var(--primary);
    font-size: 40px;
  }

  /* Text */
  .loader-text {
    margin-top: 25px;
    font-size: 1rem;
    letter-spacing: 1px;
    color: var(--primary);
  }

  /* Animations */
  @keyframes dash {
    0% {
      stroke-dashoffset: 283;
    }
    50% {
      stroke-dashoffset: 75;
    }
    100% {
      stroke-dashoffset: 283;
    }
  }

  /* Runner “running” motion */
  @keyframes runMotion {
    0%, 100% {
      transform: translate(-50%, -50%) translateY(0) scale(1);
    }
    25% {
      transform: translate(-50%, -50%) translateY(-5px) scale(1.05);
    }
    50% {
      transform: translate(-50%, -50%) translateY(0) scale(1);
    }
    75% {
      transform: translate(-50%, -50%) translateY(5px) scale(0.98);
    }
  }

  /* Fade-out on page load */
  .loader.fade-out {
    opacity: 0;
    transition: opacity 0.6s ease;
  }