@theme {
  /* animations */
  --animate-indeterminate-progress-bar: indeterminate-progress-bar 1s infinite linear;
  --animate-collapsible-down: collapsible-down 0.12s ease-out;
  --animate-collapsible-up: collapsible-up 0.12s ease-out;
  --animate-fade-in: fade-in var(--tw-duration, 0.7s) var(--tw-ease-in, ease-in);
  --animate-pulse-colors: pulse-colors 1.5s ease-in-out infinite;

  @keyframes indeterminate-progress-bar {
    0% {
      transform: translateX(0) scaleX(0);
    }
    40% {
      transform: translateX(0) scaleX(0.4);
    }
    100% {
      transform: translateX(100%) scaleX(0.5);
    }
  }

  @keyframes collapsible-down {
    from {
      height: 0;
      opacity: 0;
    }
    to {
      height: var(--radix-collapsible-content-height);
      opacity: 1;
    }
  }

  @keyframes collapsible-up {
    from {
      height: var(--radix-collapsible-content-height);
      opacity: 1;
    }
    to {
      height: 0;
      opacity: 0;
    }
  }
}

@keyframes pulse-colors {
  0%,
  100% {
    color: var(--pulse-color-1, var(--color-foreground));
  }
  50% {
    color: var(--pulse-color-2, var(--color-text-tertiary));
  }
}

@keyframes fade-in {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

@keyframes highlightFade {
  0% {
    /* Use highlight background, fallback to brand, then yellow */
    background-color: var(--color-highlight-background, var(--color-purple-50, yellow));
    /* Use box-shadow instead of border - doesn't take up space */
    box-shadow: 0 1px 0 0 var(--color-highlight-border, var(--color-purple-200, yellow));
  }
  100% {
    background-color: var(--color-highlight-to-background, transparent);
    box-shadow: 0 0 0 0 var(--color-highlight-to-border, transparent);
  }
}

.animate-highlight-fade {
  animation: highlightFade var(--tw-duration, 2s) ease-out forwards;
}

.fade-in {
  animation-name: fade-in;
  animation-duration: var(--tw-duration, 0.7s);
  animation-timing-function: var(--tw-ease-in, ease-in);
  transition-property: opacity;
  transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));
}

@keyframes blur-in {
  from {
    opacity: 0;
    filter: blur(3px);
  }
  to {
    opacity: 1;
    filter: blur(0px);
  }
}

.blur-in {
  animation-name: blur-in;
  animation-duration: var(--tw-duration, 0.3s);
  animation-timing-function: var(--tw-ease-in, ease-in);
  transition-property: opacity;
  transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));
}

.pulse-colors {
  animation-name: pulse-colors;
  animation-duration: var(--tw-duration, 1.5s);
  animation-timing-function: var(--tw-ease-in-out, ease-in-out);
  animation-iteration-count: infinite;
}
