/**
 * Animation
 */

@theme {
  /* Transition timing function */
  --ease-in-out-symmetric: cubic-bezier(0.5, 0, 0.5, 1);

  /** 
   * Fade
   */
  @keyframes fade-in {
    from {
      opacity: 0;
    }
    to {
      opacity: 1;
    }
  }
  @keyframes fade-out {
    from {
      opacity: 1;
    }
    to {
      opacity: 0;
    }
  }
  --animate-fade-in: fade-in 200ms ease-out;
  --animate-fade-out: fade-out 400ms ease-out;

  /** 
   * Popper/dialog slide 
   */
  @keyframes slide-down-and-fade {
    from {
      opacity: 1;
      transform: translateY(0);
    }
    to {
      opacity: 0;
      transform: translateY(16px);
    }
  }
  @keyframes slide-left-and-fade {
    from {
      opacity: 0;
      transform: translateX(-16px);
    }
    to {
      opacity: 1;
      transform: translateX(0);
    }
  }
  @keyframes slide-up-and-fade {
    from {
      opacity: 0;
      transform: translateY(16px);
    }
    to {
      opacity: 1;
      transform: translateY(0);
    }
  }
  @keyframes slide-right-and-fade {
    from {
      opacity: 0;
      transform: translateX(16px);
    }
    to {
      opacity: 1;
      transform: translateX(0);
    }
  }
  --animate-slide-down-and-fade: slide-down-and-fade 400ms cubic-bezier(0.16, 1, 0.3, 1);
  --animate-slide-left-and-fade: slide-left-and-fade 400ms cubic-bezier(0.16, 1, 0.3, 1);
  --animate-slide-up-and-fade: slide-up-and-fade 400ms cubic-bezier(0.16, 1, 0.3, 1);
  --animate-slide-right-and-fade: slide-right-and-fade 400ms cubic-bezier(0.16, 1, 0.3, 1);

  /** 
   * Toast 
   */
  @keyframes toast-hide {
    0% {
      opacity: 1;
    }
    100% {
      opacity: 0;
    }
  }
  @keyframes toast-slide-in-right {
    0% {
      transform: translateX(calc(100% + 1rem));
    }
    100% {
      transform: translateX(0);
    }
  }
  @keyframes toast-slide-in-bottom {
    0% {
      transform: translateY(calc(100% + 1rem));
    }
    100% {
      transform: translateY(0);
    }
  }
  @keyframes toast-swipe-out {
    0% {
      transform: translateX(var(--radix-toast-swipe-end-x));
    }
    100% {
      transform: translateX(calc(100% + 1rem));
    }
  }
  --animate-toast-hide: toast-hide 100ms ease-in forwards;
  --animate-toast-slide-in-right: toast-slide-in-right 150ms cubic-bezier(0.16, 1, 0.3, 1);
  --animate-toast-slide-in-bottom: toast-slide-in-bottom 150ms cubic-bezier(0.16, 1, 0.3, 1);
  --animate-toast-swipe-out: toast-swipe-out 100ms ease-out forwards;

  /** 
   * Accordion 
   */
  @keyframes slide-down {
    from {
      height: 0px;
    }
    to {
      height: var(--radix-accordion-content-height);
    }
  }
  @keyframes slide-up {
    from {
      height: var(--radix-accordion-content-height);
    }
    to {
      height: 0px;
    }
  }
  --animate-slide-down: slide-down 300ms cubic-bezier(0.87, 0, 0.13, 1);
  --animate-slide-up: slide-up 300ms cubic-bezier(0.87, 0, 0.13, 1);

  /** 
   * Shimmer 
   */
  @keyframes shimmer-loop {
    100% {
      transform: translateX(100%);
    }
  }
  --animate-shimmer: shimmer-loop 2s infinite;

  /** 
   * Halo pulse 
   */
  @keyframes halo-pulse {
    0% {
      opacity: 0.3;
    }
    5% {
      opacity: 1;
    }
    100% {
      opacity: 0.3;
    }
  }
  --animate-halo-pulse: halo-pulse 2s ease-out infinite;

  /** 
   * Progress 
   */
  @keyframes progress-indeterminate {
    0% {
      left: 0;
      width: 0%;
    }
    25% {
      left: 25%;
      width: 50%;
    }
    75% {
      left: 50%;
      width: 100%;
    }
    100% {
      left: 100%;
      width: 0%;
    }
  }
  --animate-progress-indeterminate: progress-indeterminate 2s ease-out infinite;

  /** 
   * Border trail 
   */
  @keyframes trail {
    to {
      offset-distance: 100%;
    }
  }
  @keyframes trail-offset {
    0% {
      offset-distance: 50%;
    }
    100% {
      offset-distance: 150%;
    }
  }
  --animate-trail: trail 6s linear infinite;
  --animate-trail-offset: trail-offset 6s linear infinite;

  /** 
   * Spin 
   */
  --animate-spin-slow: spin 3s linear infinite;

  /** 
   * Blink 
   */
  @keyframes blink {
    0%,
    50%,
    100% {
      opacity: 1;
    }
    25%,
    75% {
      opacity: 0;
    }
  }
  --animate-blink: blink 1s step-start infinite;
}

/**
 * Shimmer (text)
 * Sweeps a brighter band across text via mask alpha — preserves the consumer's color.
 * Translates exactly one tile period (2× element width) per cycle so the loop seam is invisible.
 */
@keyframes shimmer-text {
  from {
    mask-position-x: 100%;
    -webkit-mask-position-x: 100%;
  }
  to {
    mask-position-x: -100%;
    -webkit-mask-position-x: -100%;
  }
}

/**
 * Honor user reduced-motion preference for decorative animations.
 * Functional transitions (fade/slide/toast/blink) are intentionally excluded —
 * suppressing them would hide UI state changes.
 */
@media (prefers-reduced-motion: reduce) {
  .animate-halo-pulse,
  .animate-spin-slow,
  .animate-trail,
  .animate-trail-offset,
  .animate-shimmer {
    animation: none;
  }
}