.progress {
  --track: var(--color-border-light);
  --progress: var(--color-primary);

  background-color: var(--track);
  border-radius: var(--rounded-full);
  block-size: var(--size-4);
  inline-size: var(--size-full);
  overflow: hidden;

  &:indeterminate {
    background: linear-gradient(to right, var(--track) 45%, var(--progress) 0%, var(--progress) 55%, var(--track) 0%);
    background-size: 225% 100%;
    background-position: right;
    animation: progress-loading 2s infinite;
  }

  /*  Safari/Chromium  */
  &::-webkit-progress-bar {
    background-color: var(--track);
  }

  &::-webkit-progress-value {
    background-color: var(--progress);
  }

  &:indeterminate::-webkit-progress-bar {
    background-color: transparent;
  }

  /* Firefox */
  &::-moz-progress-bar {
    background-color: var(--progress);
  }

  &:indeterminate::-moz-progress-bar {
    background-color: transparent;
  }
}

@keyframes progress-loading {
  50% {
    background-position: left;
  }
}

/* Stone Aqua variant - inspired by classic macOS */
.progress--stone {
  --track: rgb(245 245 244); /* stone-50 */
  --progress: rgb(168 162 158); /* stone-400 */
  
  /* Aqua-inspired styling */
  background: linear-gradient(to bottom, 
    rgb(231 229 228), /* stone-200 */
    rgb(214 211 209), /* stone-300 */
    rgb(196 181 175)  /* stone-400 darker */
  );
  border: 1px solid rgb(214 211 209); /* stone-300 */
  border-radius: 12px;
  box-shadow: 
    inset 0 1px 2px rgba(0, 0, 0, 0.1),
    0 1px 0 rgba(255, 255, 255, 0.8);
  block-size: 16px; /* Slightly taller for aqua effect */
  position: relative;
  overflow: hidden;

  /* Indeterminate state - classic aqua animation */
  &:indeterminate {
    background: linear-gradient(to bottom, 
      rgb(231 229 228), /* stone-200 */
      rgb(214 211 209), /* stone-300 */
      rgb(196 181 175)  /* stone-400 darker */
    );
    
    &::before {
      content: '';
      position: absolute;
      top: 0;
      left: -100%;
      width: 100%;
      height: 100%;
      background: repeating-linear-gradient(
        -45deg,
        transparent,
        transparent 4px,
        rgba(168, 162, 158, 0.6) 4px, /* stone-400 with opacity */
        rgba(168, 162, 158, 0.6) 8px,
        rgba(87, 83, 78, 0.4) 8px,   /* stone-800 with opacity */
        rgba(87, 83, 78, 0.4) 12px,
        transparent 12px,
        transparent 16px
      );
      border-radius: 12px;
      animation: aqua-barber-pole 1.5s linear infinite;
    }
  }

  /*  Safari/Chromium  */
  &::-webkit-progress-bar {
    background: transparent;
    border-radius: 12px;
  }

  &::-webkit-progress-value {
    background: linear-gradient(to bottom,
      rgb(168, 162, 158), /* stone-400 */
      rgb(120, 113, 108), /* stone-500 */
      rgb(87, 83, 78)     /* stone-800 */
    );
    border-radius: 10px;
    box-shadow: 
      inset 0 1px 0 rgba(255, 255, 255, 0.3),
      inset 0 -1px 0 rgba(0, 0, 0, 0.2);
    position: relative;
    
    /* Add subtle shine effect */
    &::before {
      content: '';
      position: absolute;
      top: 1px;
      left: 1px;
      right: 1px;
      height: 40%;
      background: linear-gradient(to bottom,
        rgba(255, 255, 255, 0.4),
        rgba(255, 255, 255, 0.1)
      );
      border-radius: 8px 8px 0 0;
    }
  }

  &:indeterminate::-webkit-progress-bar {
    background: transparent;
  }

  /* Firefox */
  &::-moz-progress-bar {
    background: linear-gradient(to bottom,
      rgb(168, 162, 158), /* stone-400 */
      rgb(120, 113, 108), /* stone-500 */
      rgb(87, 83, 78)     /* stone-800 */
    );
    border-radius: 10px;
    box-shadow: 
      inset 0 1px 0 rgba(255, 255, 255, 0.3),
      inset 0 -1px 0 rgba(0, 0, 0, 0.2);
  }

  &:indeterminate::-moz-progress-bar {
    background: transparent;
  }
}

/* Aqua barber pole animation */
@keyframes aqua-barber-pole {
  0% {
    left: -100%;
  }
  100% {
    left: 100%;
  }
}

/* Simple stone variant for global progress */
.progress--stone-simple {
  background: rgb(231 229 228); /* stone-200 */
  border: 1px solid rgb(214 211 209); /* stone-300 */
  border-radius: 6px;
  block-size: 8px;
  box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.05);
  overflow: hidden;

  /* Indeterminate state - simple sweep */
  &:indeterminate {
    background: rgb(231 229 228); /* stone-200 */
    position: relative;
    
    &::before {
      content: '';
      position: absolute;
      top: 0;
      left: -30%;
      width: 30%;
      height: 100%;
      background: linear-gradient(90deg, 
        transparent, 
        rgba(120, 113, 108, 0.4), /* stone-500 with opacity */
        transparent
      );
      border-radius: 6px;
      animation: simple-sweep 3s ease-in-out infinite;
    }
  }

  /*  Safari/Chromium  */
  &::-webkit-progress-bar {
    background: transparent;
    border-radius: 6px;
  }

  &::-webkit-progress-value {
    background: linear-gradient(90deg,
      rgb(168, 162, 158), /* stone-400 */
      rgb(120, 113, 108)  /* stone-500 */
    );
    border-radius: 4px;
    transition: width 0.3s ease;
  }

  &:indeterminate::-webkit-progress-bar {
    background: transparent;
  }

  /* Firefox */
  &::-moz-progress-bar {
    background: linear-gradient(90deg,
      rgb(168, 162, 158), /* stone-400 */
      rgb(120, 113, 108)  /* stone-500 */
    );
    border-radius: 4px;
  }

  &:indeterminate::-moz-progress-bar {
    background: transparent;
  }
}

/* Simple sweep animation - much slower and gentler */
@keyframes simple-sweep {
  0% {
    left: -30%;
    opacity: 0;
  }
  20% {
    opacity: 1;
  }
  80% {
    opacity: 1;
  }
  100% {
    left: 100%;
    opacity: 0;
  }
}

/* Compact stone variant for centered progress banner */
.progress--stone-compact {
  background: rgb(231 229 228); /* stone-200 - darker background */
  border: none;
  border-radius: 4px;
  block-size: 6px;
  overflow: hidden;

  /* Indeterminate state - gentle wave */
  &:indeterminate {
    background: rgb(231 229 228);
    position: relative;
    
    &::before {
      content: '';
      position: absolute;
      top: 0;
      left: -30%;
      width: 30%;
      height: 100%;
      background: rgb(120, 113, 108); /* stone-500 - solid color, no gradient */
      border-radius: 4px;
      animation: gentle-wave 4s ease-in-out infinite;
    }
  }

  /*  Safari/Chromium  */
  &::-webkit-progress-bar {
    background: transparent;
    border-radius: 4px;
  }

  &::-webkit-progress-value {
    background: rgb(120, 113, 108); /* stone-500 - darker, solid color */
    border-radius: 4px;
    transition: width 0.3s ease;
  }

  &:indeterminate::-webkit-progress-bar {
    background: transparent;
  }

  /* Firefox */
  &::-moz-progress-bar {
    background: rgb(120, 113, 108); /* stone-500 - darker, solid color */
    border-radius: 4px;
  }

  &:indeterminate::-moz-progress-bar {
    background: transparent;
  }
}

/* Gentle wave animation - slower and more elegant */
@keyframes gentle-wave {
  0% {
    left: -30%;
    opacity: 0;
  }
  25% {
    opacity: 1;
  }
  75% {
    opacity: 1;
  }
  100% {
    left: 100%;
    opacity: 0;
  }
}