/*
 * Tailwind v4 CSS-First Theme Configuration
 *
 * This file starts to migrate the TypeScript configuration from tailwind.config.ts
 * to CSS-first approach for better build performance with Tailwind v4's
 * Oxide engine.
 */

@theme {
  --animate-marquee: marquee 10s linear infinite;
  --animate-slide-down: slide-down 0.15s ease-out forwards;
  --animate-slide-up: slide-up 0.15s ease-in forwards;
  --animate-slide-in-bottom: slide-in-bottom 0.15s ease-in both;
  --animate-slide-out-bottom: slide-out-bottom 0.15s ease-in both;
  --animate-slide-in-modal: slide-in-modal 0.15s ease-in-out forwards;
  --animate-wave: wave 1.6s ease-in-out infinite;
  --animate-small-bounce: small-bounce 1s infinite;
  --animate-flicker: flicker 1s infinite;
  --animate-heartbeat: heartbeat 1s ease-in-out infinite;
  --animate-pop: pop 0.5s ease-out forwards;
  --animate-float: float 15s linear infinite;
  --animate-sparkle: sparkle 1s ease-in-out infinite;
  --animate-glisten: glisten 2s linear infinite;
  --animate-pulse: pulse 1.5s ease-in-out infinite;
  --animate-pulse2: pulse 0.75s ease-in-out infinite;
  --animate-pulse-opacity: pulse-opacity 1.5s ease-in-out infinite;
  --animate-pop-in: pop-in 0.3s cubic-bezier(0.8, 0, 0.2, 2) forwards;
  --animate-splay-cards-1: splay-cards-1 0.3s 2s ease-in-out both;
  --animate-splay-cards-2: splay-cards-2 0.3s 2s ease-in-out both;
  --animate-splay-cards-3: splay-cards-3 0.3s 2s ease-in-out both;
  --animate-aura-background: aura-background 3s ease-in-out infinite;
  --animate-fade-in: fade-in 0.3s ease-in-out forwards;
  --animate-fade-up: fade-up 0.3s forwards;
  --animate-typing: typing 1s steps(20);
  --animate-persona-ripple-1: persona-ripple 4s linear infinite;
  --animate-persona-ripple-2: persona-ripple 4s linear infinite 1.33s;
  --animate-persona-ripple-3: persona-ripple 4s linear infinite 2.66s;
  --animate-waveform: waveform 1s ease-in-out infinite;
  --animate-waveform-in: waveform-in 0.2s ease-out forwards;
  --animate-prompt-word: prompt-word 2s ease-out forwards;
  --animate-prompt-style-tag: pop-in 0.3s cubic-bezier(0.5, 0, 0.2, 1.5)
    forwards;
  --animate-blink: fade-in-out 1s steps(1) forwards infinite;
  --animate-bg-fade-out: bg-fade-out 3s ease-out forwards;
  --animate-gradient-move: gradient-move 1s ease infinite;
  --animate-waveform-pulse: waveform-pulse 0.8s ease-in-out infinite;

  @keyframes shimmer {
    from {
      transform: translateX(-100%);
    }
    to {
      transform: translateX(100%);
    }
  }

  @keyframes pop-in {
    0% {
      opacity: 0;
      transform: scale(0);
    }
    10% {
      opacity: 1;
      transform: scale(0.1);
    }
    100% {
      opacity: 1;
      transform: scale(1);
    }
  }

  @keyframes fade-in {
    0% {
      opacity: 0;
    }
    100% {
      opacity: 1;
    }
  }

  @keyframes fade-out {
    0% {
      opacity: 1;
    }
    100% {
      opacity: 0;
    }
  }

  @keyframes fade-up {
    0% {
      transform: translateY(100%);
      opacity: 0;
    }
    100% {
      transform: translateY(0);
      opacity: 1;
    }
  }

  @keyframes fade-in-out {
    0% {
      opacity: 1;
    }
    50% {
      opacity: 0;
    }
    100% {
      opacity: 1;
    }
  }

  @keyframes marquee {
    0% {
      transform: translateX(var(--marquee-start, 0%));
    }
    100% {
      transform: translateX(var(--marquee-end, -100%));
    }
  }

  @keyframes slide-down {
    0% {
      transform: translateY(-100%);
      opacity: 0;
    }
    100% {
      transform: translateY(0);
      opacity: 1;
    }
  }

  @keyframes slide-up {
    0% {
      transform: translateY(0);
      opacity: 1;
    }
    100% {
      transform: translateY(-100%);
      opacity: 0;
    }
  }

  @keyframes slide-in-bottom {
    0% {
      transform: translateY(100%);
    }
    100% {
      transform: translateY(0);
    }
  }

  @keyframes slide-out-bottom {
    0% {
      transform: translateY(0);
    }
    100% {
      transform: translateY(100%);
    }
  }

  @keyframes slide-in-modal {
    0% {
      transform: translateY(2rem);
      opacity: 0;
    }
    100% {
      transform: translateY(0);
      opacity: 1;
    }
  }

  @keyframes wave {
    0%,
    100% {
      transform: scaleY(1);
    }
    25% {
      transform: scaleY(1.4);
    }
    50% {
      transform: scaleY(0.4);
    }
    75% {
      transform: scaleY(1.4);
    }
  }

  @keyframes flicker {
    0%,
    100% {
      opacity: 1;
    }
    50% {
      opacity: 0.8;
      transform: translateY(-1px);
    }
  }

  @keyframes small-bounce {
    0%,
    100% {
      transform: translateY(0);
    }
    50% {
      transform: translateY(-5%);
    }
  }

  @keyframes medium-bounce {
    0%,
    100% {
      transform: translateY(0);
    }
    50% {
      transform: translateY(-10%);
    }
  }

  @keyframes heartbeat {
    0%,
    100% {
      transform: scale(1);
    }
    50% {
      transform: scale(1.3);
    }
  }

  @keyframes pop {
    0% {
      transform: translateY(0);
    }
    50% {
      transform: translateY(-10px);
    }
    100% {
      transform: translateY(-20px);
    }
  }

  @keyframes float {
    0% {
      transform: translateY(100vh);
      opacity: 0;
    }
    10% {
      opacity: 0.8;
    }
    50% {
      opacity: 0;
    }
    100% {
      transform: translateY(-25vh);
      opacity: 0;
    }
  }

  @keyframes sparkle {
    0%,
    100% {
      opacity: 0;
    }
    50% {
      opacity: 1;
    }
  }

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

  @keyframes pulse {
    0%,
    100% {
      transform: scale(1);
      opacity: 0.5;
    }
    50% {
      transform: scale(1.09);
      opacity: 1;
    }
  }

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

  @keyframes splay-cards-1 {
    0% {
      transform: rotate(-10deg);
    }
    100% {
      transform: rotate(0deg);
    }
  }

  @keyframes splay-cards-2 {
    0% {
      transform: rotate(-10deg);
    }
    100% {
      transform: rotate(-20deg);
    }
  }

  @keyframes splay-cards-3 {
    0% {
      transform: rotate(-10deg);
    }
    100% {
      transform: rotate(-40deg);
    }
  }

  @keyframes aura-background {
    0% {
      background-position: 50% 50%;
    }
    25% {
      background-position: 30% 70%;
    }
    50% {
      background-position: 70% 30%;
    }
    75% {
      background-position: 40% 60%;
    }
    100% {
      background-position: 50% 50%;
    }
  }

  @keyframes typing {
    0% {
      width: 0;
    }
    100% {
      width: 100%;
    }
  }

  @keyframes persona-ripple {
    0% {
      transform: scale(0.8);
      opacity: 0.3;
    }
    100% {
      transform: scale(1.6);
      opacity: 0;
    }
  }

  @keyframes waveform {
    0%,
    100% {
      height: 20px;
    }
    50% {
      height: 80px;
    }
  }

  @keyframes waveform-in {
    0% {
      opacity: 0;
      transform: scaleY(0);
    }
    100% {
      opacity: 1;
      transform: scaleY(1);
    }
  }

  @keyframes prompt-word {
    0% {
      max-width: 0;
    }
    100% {
      max-width: 100%;
    }
  }

  @keyframes bg-fade-out {
    to {
      background-color: transparent;
    }
  }

  @keyframes gradient-move {
    0% {
      background-position: 0% 50%;
    }
    100% {
      background-position: 200% 50%;
    }
  }

  @keyframes waveform-pulse {
    0%,
    100% {
      transform: scaleY(1);
    }
    50% {
      transform: scaleY(0.5);
    }
  }
}