/* ============================================================
   ArchiTail AI — Animation System
   ============================================================
   Keyframes, utility classes, scroll reveals, skeleton loading,
   transition helpers, AI-specific animations, stagger delays.
   ============================================================ */

/* ------------------------------------------------------------
   KEYFRAME ANIMATIONS
   ------------------------------------------------------------ */

@keyframes fadeIn {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

@keyframes fadeOut {
  from {
    opacity: 1;
  }
  to {
    opacity: 0;
  }
}

@keyframes slideUp {
  from {
    opacity: 0;
    transform: translateY(20px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes slideDown {
  from {
    opacity: 0;
    transform: translateY(-20px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

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

@keyframes slideInRight {
  from {
    transform: translateX(100%);
  }
  to {
    transform: translateX(0);
  }
}

@keyframes scaleIn {
  from {
    opacity: 0;
    transform: scale(0.95);
  }
  to {
    opacity: 1;
    transform: scale(1);
  }
}

@keyframes promptBarIn {
  from {
    transform: translateY(-100%);
    opacity: 0;
  }
  to {
    transform: translateY(0);
    opacity: 1;
  }
}

@keyframes promptBarOut {
  from {
    transform: translateY(0);
    opacity: 1;
  }
  to {
    transform: translateY(-20px);
    opacity: 0;
  }
}

@keyframes aiDotPulse {
  0%,
  100% {
    opacity: 0.4;
    transform: scale(1);
  }
  50% {
    opacity: 0.9;
    transform: scale(1.2);
  }
}

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

@keyframes aiGlassBreathe {
  0%,
  100% {
    opacity: 0.85;
  }
  50% {
    opacity: 0.95;
  }
}

@keyframes skeletonShimmer {
  from {
    background-position: -200% 0;
  }
  to {
    background-position: 200% 0;
  }
}

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

@keyframes toastSlideOut {
  from {
    transform: translateX(0);
    opacity: 1;
  }
  to {
    transform: translateX(100px);
    opacity: 0;
  }
}

@keyframes dropdownOpen {
  from {
    opacity: 0;
    transform: translateY(-8px) scale(0.95);
  }
  to {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}

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

/* ------------------------------------------------------------
   ANIMATION UTILITY CLASSES
   ------------------------------------------------------------ */

.animate-fade-in {
  animation: fadeIn 300ms ease-out forwards;
}

.animate-slide-up {
  animation: slideUp 400ms ease-out forwards;
}

.animate-slide-down {
  animation: slideDown 300ms ease-out forwards;
}

.animate-scale-in {
  animation: scaleIn 160ms ease-out forwards;
}

.animate-prompt-in {
  animation: promptBarIn 220ms cubic-bezier(0.16, 1, 0.3, 1) forwards;
}

.animate-prompt-out {
  animation: promptBarOut 180ms ease-in forwards;
}

.animate-toast-in {
  animation: toastSlideIn 220ms ease-out forwards;
}

.animate-toast-out {
  animation: toastSlideOut 180ms ease-in forwards;
}

/* ------------------------------------------------------------
   SCROLL REVEAL
   ------------------------------------------------------------ */

.reveal {
  opacity: 0;
  transform: translateY(20px);
  transition: opacity 600ms ease-out, transform 600ms ease-out;
}

.reveal.revealed {
  opacity: 1;
  transform: translateY(0);
}

.reveal-delay-1 {
  transition-delay: 100ms;
}

.reveal-delay-2 {
  transition-delay: 200ms;
}

.reveal-delay-3 {
  transition-delay: 300ms;
}

.reveal-delay-4 {
  transition-delay: 400ms;
}

/* ------------------------------------------------------------
   SKELETON LOADING
   ------------------------------------------------------------ */

.skeleton {
  background: linear-gradient(
    90deg,
    var(--neutral-200) 25%,
    var(--neutral-300) 50%,
    var(--neutral-200) 75%
  );
  background-size: 200% 100%;
  animation: skeletonShimmer 1.5s infinite;
  border-radius: 4px;
}

/* Light theme skeleton with lighter colors */
[data-theme="light"] .skeleton {
  background: linear-gradient(
    90deg,
    var(--neutral-200) 25%,
    var(--neutral-100) 50%,
    var(--neutral-200) 75%
  );
  background-size: 200% 100%;
  animation: skeletonShimmer 1.5s infinite;
}

/* ------------------------------------------------------------
   HOVER TRANSITION UTILITIES
   ------------------------------------------------------------ */

.transition-fast {
  transition: all 80ms ease-out;
}

.transition-default {
  transition: all 120ms ease-out;
}

.transition-slow {
  transition: all 220ms ease-out;
}

/* ------------------------------------------------------------
   AI-SPECIFIC ANIMATION CLASSES
   ------------------------------------------------------------ */

.ai-dot-pulse {
  animation: aiDotPulse 3s ease-in-out infinite;
}

.ai-progress-line {
  animation: aiLineProgress 3s linear infinite;
}

.ai-breathe {
  animation: aiGlassBreathe 1.5s ease-in-out infinite;
}

/* ------------------------------------------------------------
   STAGGER DELAY UTILITIES
   ------------------------------------------------------------ */

.stagger-1 {
  animation-delay: 50ms;
}

.stagger-2 {
  animation-delay: 100ms;
}

.stagger-3 {
  animation-delay: 150ms;
}

.stagger-4 {
  animation-delay: 200ms;
}

.stagger-5 {
  animation-delay: 250ms;
}

.stagger-6 {
  animation-delay: 300ms;
}

.stagger-7 {
  animation-delay: 350ms;
}

.stagger-8 {
  animation-delay: 400ms;
}