/**
 * Shared animation utilities for Tailwind v4's CSS-first setup.
 *
 * Responsibilities:
 * - define app-specific keyframes missing from Tailwind defaults
 * - provide reusable utility classes consumed directly in TSX/MDX
 * - centralize reduced-motion handling
 */

:root {
  --anim-duration: var(--motion-duration-normal);
  --anim-delay: 0s;

  --dot-opacity-min: 0.5;
  --dot-opacity-max: 1;
  --dot-scale-min: 1;
  --dot-scale-max: 1;
  --dot-duration: 1s;
}

@keyframes fade-in {
  from {
    opacity: 0;
    transform: translateY(10px);
  }

  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes fade-in-up {
  from {
    opacity: 0;
    transform: translateY(18px);
  }

  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes card-enter {
  0% {
    opacity: 0;
    transform: translateY(24px) scale(0.985);
  }

  100% {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}

@keyframes badge-pop-in {
  0% {
    transform: scale(0.6) rotate(-10deg);
    opacity: 0;
  }

  60% {
    transform: scale(1.08) rotate(1deg);
    opacity: 1;
  }

  100% {
    transform: scale(1) rotate(0);
    opacity: 1;
  }
}

@keyframes toast-progress {
  from {
    width: 100%;
  }

  to {
    width: 0%;
  }
}

@keyframes progress-indeterminate {
  0% {
    transform: translateX(-100%) scaleX(0.35);
  }

  60% {
    transform: translateX(15%) scaleX(0.55);
  }

  100% {
    transform: translateX(220%) scaleX(0.4);
  }
}

@keyframes skeleton-pulse {
  0%,
  100% {
    opacity: 0.72;
  }

  50% {
    opacity: 1;
  }
}

@keyframes skeleton-shimmer {
  from {
    background-position: 200% 0;
  }

  to {
    background-position: -200% 0;
  }
}

@keyframes dot-pulse {
  0%,
  100% {
    opacity: var(--dot-opacity-min, 0.5);
    transform: scale(var(--dot-scale-min, 1));
  }

  50% {
    opacity: var(--dot-opacity-max, 1);
    transform: scale(var(--dot-scale-max, 1));
  }
}

@layer utilities {
  .anim-enter,
  .animate-fade-in,
  .animate-fadeIn {
    animation-name: fade-in;
    animation-duration: var(--anim-duration, var(--motion-duration-normal));
    animation-timing-function: var(--motion-ease-standard);
    animation-delay: var(--anim-delay, 0s);
    animation-fill-mode: both;
  }

  .anim-badge-pop-in,
  .animate-badge-pop-in {
    animation: badge-pop-in 0.45s var(--motion-ease-emphasized) both;
  }

  .animate-fadeInUp {
    animation: fade-in-up 0.38s var(--motion-ease-emphasized) both;
  }

  .animate-card-enter {
    animation: card-enter 0.5s var(--motion-ease-emphasized) both;
  }

  .dot-pulse {
    animation-name: dot-pulse;
    animation-duration: var(--dot-duration, 1s);
    animation-timing-function: ease-in-out;
    animation-iteration-count: infinite;
    animation-delay: var(--dot-delay, 0s);
  }

  .dot-pulse-group {
    --dot-stagger: 0.2s;
  }

  .dot-pulse-group > *:nth-child(1) {
    --dot-delay: calc(var(--dot-stagger) * 0);
  }

  .dot-pulse-group > *:nth-child(2) {
    --dot-delay: calc(var(--dot-stagger) * 1);
  }

  .dot-pulse-group > *:nth-child(3) {
    --dot-delay: calc(var(--dot-stagger) * 2);
  }

  .dot-pulse-group > *:nth-child(4) {
    --dot-delay: calc(var(--dot-stagger) * 3);
  }

  .dot-pulse-group > *:nth-child(5) {
    --dot-delay: calc(var(--dot-stagger) * 4);
  }

  .tap-press:active {
    transform: scale(0.98);
  }

  .slider-thumb {
    transition:
      transform var(--motion-duration-normal) var(--motion-ease-standard),
      border-color var(--motion-duration-normal) var(--motion-ease-standard);
  }

  .hover-scale-sm,
  .hover-scale-md,
  .active-press,
  .translate-transition,
  .hover-arrow-slide,
  .rotate-180-transition {
    transition-timing-function: var(--motion-ease-standard);
  }

  .hover-scale-sm,
  .hover-scale-md,
  .active-press,
  .translate-transition,
  .hover-arrow-slide {
    transition-property: transform;
    transition-duration: var(--motion-duration-fast);
  }

  .hover-opacity-80 {
    transition: opacity var(--motion-duration-fast) var(--motion-ease-standard);
  }

  .rotate-180-transition {
    transition-property: transform;
    transition-duration: var(--motion-duration-normal);
    will-change: transform;
  }

  .active-press:active {
    transform: scale(0.98);
  }

  .toast-progress-bar {
    animation-name: toast-progress;
    animation-timing-function: linear;
    animation-fill-mode: forwards;
  }

  .animate-progress-indeterminate {
    animation: progress-indeterminate 1.15s infinite var(--motion-ease-standard);
    transform-origin: left center;
    will-change: transform;
  }

  .animate-skeleton-pulse {
    animation: skeleton-pulse 1.6s ease-in-out infinite;
  }

  .animate-skeleton-shimmer {
    animation: skeleton-shimmer 1.6s linear infinite;
  }

  @media (hover: hover) and (pointer: fine) {
    .slider-thumb:hover {
      transform: scale(1.08);
    }

    .hover-scale-sm:hover {
      transform: scale(1.02);
    }

    .hover-scale-md:hover {
      transform: scale(1.05);
    }

    .hover-opacity-80:hover {
      opacity: 0.8;
    }

    .hover-arrow-slide:hover {
      transform: translateX(0.25rem);
    }

    .group:hover .group-hover-rotate-180 {
      transform: rotate(180deg);
    }

    .group:hover .group-hover-translate-x-1 {
      transform: translateX(0.25rem);
    }
  }

  .slider-thumb:focus-visible {
    transform: scale(1.05);
  }

  @media (prefers-reduced-motion: reduce) {
    .anim-enter,
    .animate-fade-in,
    .animate-fadeIn,
    .anim-badge-pop-in,
    .animate-badge-pop-in,
    .animate-fadeInUp,
    .animate-card-enter,
    .dot-pulse,
    .hover-scale-sm,
    .hover-scale-md,
    .hover-opacity-80,
    .hover-arrow-slide,
    .rotate-180-transition,
    .toast-progress-bar,
    .animate-progress-indeterminate,
    .animate-skeleton-pulse,
    .animate-skeleton-shimmer {
      animation: none !important;
      transition: none !important;
    }

    .slider-thumb {
      transition: none !important;
    }
  }
}