/* --- Animations --- */
@layer animations {
  @keyframes fade-in {
    from {
      opacity: 0;
    }
    to {
      opacity: 1;
    }
  }

  @keyframes toast-in {
    from {
      opacity: 0;
      transform: translateY(12px) scale(0.96);
    }
    to {
      opacity: 1;
      transform: translateY(0) scale(1);
    }
  }

  @keyframes toast-out {
    from {
      opacity: 1;
      transform: translateY(0);
    }
    to {
      opacity: 0;
      transform: translateY(-8px);
    }
  }

  @keyframes skeleton-pulse {
    0%,
    100% {
      opacity: 1;
    }
    50% {
      opacity: 0.4;
    }
  }

  @keyframes slide-up {
    from {
      opacity: 0;
      transform: translateY(16px);
    }
    to {
      opacity: 1;
      transform: translateY(0);
    }
  }

  @keyframes spin {
    from {
      transform: rotate(0deg);
    }
    to {
      transform: rotate(360deg);
    }
  }

  @keyframes indeterminate {
    0% {
      background-position: -200% 0;
    }
    100% {
      background-position: 200% 0;
    }
  }

  /* Refresh button spin */
  #refresh-btn.refreshing .icon {
    animation: spin 0.6s ease-in-out;
  }

  /* Staggered file card entrance */
  .file-card {
    animation: fade-in var(--duration-normal) var(--ease-out) both;

    &:nth-child(1) {
      animation-delay: 0ms;
    }
    &:nth-child(2) {
      animation-delay: 20ms;
    }
    &:nth-child(3) {
      animation-delay: 40ms;
    }
    &:nth-child(4) {
      animation-delay: 60ms;
    }
    &:nth-child(5) {
      animation-delay: 80ms;
    }
    &:nth-child(6) {
      animation-delay: 100ms;
    }
    &:nth-child(7) {
      animation-delay: 120ms;
    }
    &:nth-child(8) {
      animation-delay: 140ms;
    }
    &:nth-child(9) {
      animation-delay: 160ms;
    }
    &:nth-child(10) {
      animation-delay: 180ms;
    }
    &:nth-child(11) {
      animation-delay: 200ms;
    }
    &:nth-child(12) {
      animation-delay: 220ms;
    }
  }

  /* View Transition customization */
  ::view-transition-old(root),
  ::view-transition-new(root) {
    animation-duration: var(--duration-normal);
  }
}