/**
 * ============================================================
 * SANDBOX — Animations System
 * Reusable animation library for AI SaaS platform
 * Inspired by: OpenAI, Linear, Vercel, Apple
 * ============================================================
 * 
 * TABLE OF CONTENTS
 * 1.  Fade Animations
 * 2.  Slide Animations
 * 3.  Scale Animations
 * 4.  Hover Effects (Lift, Glow)
 * 5.  Pulse & Floating
 * 6.  Spinner
 * 7.  Skeleton Loading
 * 8.  Typing Animation
 * 9.  Progress Bar Animation
 * 10. Shimmer Effect
 * 11. Button Press Animation
 * 12. Utility Classes & Delays
 * 13. Reduced Motion Support
 * ============================================================
 */

/* ============================================================
   1. FADE ANIMATIONS
   ============================================================ */
@keyframes fadeIn {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

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

.animate-fade-in {
  animation: fadeIn var(--transition-slow) var(--ease-in-out) forwards;
}

.animate-fade-out {
  animation: fadeOut var(--transition-slow) var(--ease-in-out) forwards;
}

/* ---- Fade In Up ---- */
@keyframes fadeInUp {
  from {
    opacity: 0;
    transform: translateY(20px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.animate-fade-in-up {
  animation: fadeInUp var(--transition-slow) var(--ease-spring) forwards;
}

/* ---- Fade In Down ---- */
@keyframes fadeInDown {
  from {
    opacity: 0;
    transform: translateY(-20px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.animate-fade-in-down {
  animation: fadeInDown var(--transition-slow) var(--ease-spring) forwards;
}

/* ---- Fade In Left ---- */
@keyframes fadeInLeft {
  from {
    opacity: 0;
    transform: translateX(-20px);
  }
  to {
    opacity: 1;
    transform: translateX(0);
  }
}

.animate-fade-in-left {
  animation: fadeInLeft var(--transition-slow) var(--ease-spring) forwards;
}

/* ---- Fade In Right ---- */
@keyframes fadeInRight {
  from {
    opacity: 0;
    transform: translateX(20px);
  }
  to {
    opacity: 1;
    transform: translateX(0);
  }
}

.animate-fade-in-right {
  animation: fadeInRight var(--transition-slow) var(--ease-spring) forwards;
}

/* ============================================================
   2. SLIDE ANIMATIONS
   ============================================================ */
@keyframes slideUp {
  from {
    opacity: 0;
    transform: translateY(30px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

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

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

@keyframes slideRight {
  from {
    opacity: 0;
    transform: translateX(-30px);
  }
  to {
    opacity: 1;
    transform: translateX(0);
  }
}

.animate-slide-up {
  animation: slideUp var(--transition-slow) var(--ease-spring) forwards;
}

.animate-slide-down {
  animation: slideDown var(--transition-slow) var(--ease-spring) forwards;
}

.animate-slide-left {
  animation: slideLeft var(--transition-slow) var(--ease-spring) forwards;
}

.animate-slide-right {
  animation: slideRight var(--transition-slow) var(--ease-spring) forwards;
}

/* ============================================================
   3. SCALE ANIMATIONS
   ============================================================ */
@keyframes scaleIn {
  from {
    opacity: 0;
    transform: scale(0.92);
  }
  to {
    opacity: 1;
    transform: scale(1);
  }
}

@keyframes scaleOut {
  from {
    opacity: 1;
    transform: scale(1);
  }
  to {
    opacity: 0;
    transform: scale(0.92);
  }
}

.animate-scale-in {
  animation: scaleIn var(--transition-slow) var(--ease-spring) forwards;
}

.animate-scale-out {
  animation: scaleOut var(--transition-slow) var(--ease-spring) forwards;
}

/* ---- Scale In with Bounce ---- */
@keyframes scaleInBounce {
  0% {
    opacity: 0;
    transform: scale(0.8);
  }
  60% {
    transform: scale(1.05);
  }
  100% {
    opacity: 1;
    transform: scale(1);
  }
}

.animate-scale-in-bounce {
  animation: scaleInBounce 0.6s var(--ease-spring) forwards;
}

/* ============================================================
   4. HOVER EFFECTS (Lift, Glow)
   ============================================================ */
.hover-lift {
  transition: transform var(--transition-base) var(--ease-spring),
              box-shadow var(--transition-base) var(--ease-in-out);
}

.hover-lift:hover {
  transform: translateY(-4px);
  box-shadow: var(--shadow-md);
}

.hover-lift-lg:hover {
  transform: translateY(-8px);
  box-shadow: var(--shadow-lg);
}

.hover-lift-xl:hover {
  transform: translateY(-12px);
  box-shadow: var(--shadow-xl);
}

.hover-glow {
  transition: box-shadow var(--transition-base) var(--ease-in-out),
              border-color var(--transition-base) var(--ease-in-out);
}

.hover-glow:hover {
  box-shadow: var(--shadow-glow);
  border-color: var(--color-border-glow);
}

.hover-scale {
  transition: transform var(--transition-base) var(--ease-spring);
}

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

.hover-scale-lg:hover {
  transform: scale(1.04);
}

.hover-brightness {
  transition: filter var(--transition-fast) var(--ease-in-out);
}

.hover-brightness:hover {
  filter: brightness(1.1);
}

/* ============================================================
   5. PULSE & FLOATING
   ============================================================ */
@keyframes pulse {
  0%, 100% {
    opacity: 1;
  }
  50% {
    opacity: 0.5;
  }
}

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

@keyframes pulseGlow {
  0%, 100% {
    box-shadow: 0 0 0 0 rgba(64, 128, 255, 0.4);
  }
  50% {
    box-shadow: 0 0 0 12px rgba(64, 128, 255, 0);
  }
}

.animate-pulse-glow {
  animation: pulseGlow 1.5s ease-out infinite;
}

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

.animate-float {
  animation: float 3s ease-in-out infinite;
}

@keyframes floatSlow {
  0%, 100% {
    transform: translateY(0px);
  }
  50% {
    transform: translateY(-6px);
  }
}

.animate-float-slow {
  animation: floatSlow 4s ease-in-out infinite;
}

/* ============================================================
   6. SPINNER
   ============================================================ */
@keyframes spin {
  to {
    transform: rotate(360deg);
  }
}

.spinner {
  display: inline-block;
  width: 24px;
  height: 24px;
  border: 2px solid var(--glass-border);
  border-top-color: var(--color-primary-500);
  border-radius: var(--radius-full);
  animation: spin 0.8s linear infinite;
}

.spinner-sm {
  width: 16px;
  height: 16px;
  border-width: 2px;
}

.spinner-lg {
  width: 36px;
  height: 36px;
  border-width: 3px;
}

.spinner-xl {
  width: 48px;
  height: 48px;
  border-width: 4px;
}

/* ---- Spinner Variants ---- */
.spinner-primary {
  border-top-color: var(--color-primary-500);
}

.spinner-white {
  border: 2px solid rgba(255, 255, 255, 0.20);
  border-top-color: var(--color-white);
}

.spinner-gradient {
  border: 2px solid transparent;
  border-image: var(--gradient-brand);
  border-image-slice: 1;
  animation: spin 0.8s linear infinite;
}

/* ---- Spinner Container ---- */
.spinner-container {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--space-4);
}

/* ============================================================
   7. SKELETON LOADING
   ============================================================ */
@keyframes shimmer {
  0% {
    background-position: -200% 0;
  }
  100% {
    background-position: 200% 0;
  }
}

.skeleton {
  display: inline-block;
  background: var(--glass-bg);
  background: linear-gradient(
    90deg,
    var(--glass-bg) 0%,
    var(--glass-bg-hover) 50%,
    var(--glass-bg) 100%
  );
  background-size: 200% 100%;
  animation: shimmer 1.5s ease-in-out infinite;
  border-radius: var(--radius-md);
  color: transparent !important;
  user-select: none;
  pointer-events: none;
}

/* ---- Skeleton Variants ---- */
.skeleton-text {
  height: 1em;
  width: 100%;
  margin-bottom: var(--space-1);
}

.skeleton-text:last-child {
  margin-bottom: 0;
}

.skeleton-heading {
  height: 1.5em;
  width: 70%;
  border-radius: var(--radius-lg);
}

.skeleton-circle {
  border-radius: var(--radius-full);
  aspect-ratio: 1;
}

.skeleton-button {
  height: 40px;
  width: 100px;
  border-radius: var(--radius-xl);
}

.skeleton-card {
  height: 200px;
  width: 100%;
  border-radius: var(--radius-2xl);
}

.skeleton-avatar {
  width: 48px;
  height: 48px;
  border-radius: var(--radius-full);
}

.skeleton-image {
  width: 100%;
  height: 160px;
  border-radius: var(--radius-xl);
}

/* ---- Skeleton with opacity ---- */
.skeleton-fade {
  animation: shimmer 1.5s ease-in-out infinite, fadeIn 0.3s ease-in;
}

/* ============================================================
   8. TYPING ANIMATION
   ============================================================ */
@keyframes typing {
  from {
    width: 0;
  }
  to {
    width: 100%;
  }
}

@keyframes blink {
  0%, 100% {
    border-color: transparent;
  }
  50% {
    border-color: var(--color-text-primary);
  }
}

.typing {
  display: inline-block;
  overflow: hidden;
  white-space: nowrap;
  border-right: 2px solid var(--color-text-primary);
  animation: typing 2s steps(30) forwards, blink 0.8s step-end infinite;
  max-width: fit-content;
}

.typing-done {
  border-right-color: transparent;
  animation: typing 2s steps(30) forwards;
}

/* ---- Typing with multiple lines (CSS only approximation) ---- */
.typing-multiline {
  display: block;
  overflow: hidden;
  border-right: 2px solid var(--color-text-primary);
  animation: typing 3s steps(40) forwards, blink 0.8s step-end infinite;
  white-space: pre-wrap;
  word-break: break-word;
}

/* ============================================================
   9. PROGRESS BAR ANIMATION
   ============================================================ */
@keyframes progressFill {
  from {
    width: 0%;
  }
  to {
    width: var(--progress, 100%);
  }
}

.progress-bar {
  width: 100%;
  height: 6px;
  border-radius: var(--radius-full);
  background: var(--glass-bg);
  overflow: hidden;
  position: relative;
}

.progress-bar .progress-fill {
  height: 100%;
  border-radius: var(--radius-full);
  background: var(--gradient-brand);
  width: 0%;
  animation: progressFill 1.5s var(--ease-in-out) forwards;
  transition: width var(--transition-slow) var(--ease-in-out);
}

.progress-bar .progress-fill.animated {
  animation: progressFill 1.5s var(--ease-in-out) forwards;
}

/* ---- Progress Variants ---- */
.progress-bar-success .progress-fill {
  background: var(--color-success);
}

.progress-bar-warning .progress-fill {
  background: var(--color-warning);
}

.progress-bar-error .progress-fill {
  background: var(--color-error);
}

.progress-bar-cyan .progress-fill {
  background: var(--gradient-cyan);
}

.progress-bar-purple .progress-fill {
  background: var(--gradient-purple);
}

/* ---- Progress Bar Sizes ---- */
.progress-bar-sm {
  height: 4px;
}

.progress-bar-lg {
  height: 8px;
}

.progress-bar-xl {
  height: 12px;
}

/* ---- Progress Bar with Label ---- */
.progress-bar-label {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
}

.progress-bar-label .progress-text {
  font-size: var(--font-size-sm);
  color: var(--color-text-secondary);
  font-weight: var(--font-weight-medium);
}

/* ============================================================
   10. SHIMMER EFFECT
   ============================================================ */
@keyframes shimmerEffect {
  0% {
    background-position: -200% 0;
  }
  100% {
    background-position: 200% 0;
  }
}

.shimmer {
  background: linear-gradient(
    90deg,
    var(--glass-bg) 0%,
    var(--glass-bg-hover) 25%,
    var(--glass-bg) 50%,
    var(--glass-bg-hover) 75%,
    var(--glass-bg) 100%
  );
  background-size: 200% 100%;
  animation: shimmerEffect 2s ease-in-out infinite;
}

.shimmer-fast {
  animation-duration: 1s;
}

.shimmer-slow {
  animation-duration: 3s;
}

/* ============================================================
   11. BUTTON PRESS ANIMATION
   ============================================================ */
@keyframes buttonPress {
  0% {
    transform: scale(1);
  }
  50% {
    transform: scale(0.96);
  }
  100% {
    transform: scale(1);
  }
}

.animate-press {
  animation: buttonPress 0.3s var(--ease-spring) forwards;
}

/* ============================================================
   12. UTILITY CLASSES & DELAYS
   ============================================================ */
/* ---- Animation Delay Utilities ---- */
.delay-0    { animation-delay: 0ms; }
.delay-50   { animation-delay: 50ms; }
.delay-100  { animation-delay: 100ms; }
.delay-150  { animation-delay: 150ms; }
.delay-200  { animation-delay: 200ms; }
.delay-250  { animation-delay: 250ms; }
.delay-300  { animation-delay: 300ms; }
.delay-400  { animation-delay: 400ms; }
.delay-500  { animation-delay: 500ms; }
.delay-600  { animation-delay: 600ms; }
.delay-800  { animation-delay: 800ms; }
.delay-1000 { animation-delay: 1000ms; }

/* ---- Animation Duration Utilities ---- */
.duration-fast   { animation-duration: var(--transition-fast); }
.duration-base   { animation-duration: var(--transition-base); }
.duration-slow   { animation-duration: var(--transition-slow); }
.duration-slower { animation-duration: var(--transition-slower); }
.duration-slowest { animation-duration: var(--transition-slowest); }

/* ---- Animation Fill Mode ---- */
.fill-none    { animation-fill-mode: none; }
.fill-forwards { animation-fill-mode: forwards; }
.fill-backwards { animation-fill-mode: backwards; }
.fill-both    { animation-fill-mode: both; }

/* ---- Animation Iteration ---- */
.iteration-1    { animation-iteration-count: 1; }
.iteration-infinite { animation-iteration-count: infinite; }

/* ---- Animation Direction ---- */
.direction-normal  { animation-direction: normal; }
.direction-reverse { animation-direction: reverse; }
.direction-alternate { animation-direction: alternate; }
.direction-alternate-reverse { animation-direction: alternate-reverse; }

/* ============================================================
   13. REDUCED MOTION SUPPORT
   ============================================================ */
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
  
  .animate-fade-in,
  .animate-fade-in-up,
  .animate-fade-in-down,
  .animate-fade-in-left,
  .animate-fade-in-right,
  .animate-slide-up,
  .animate-slide-down,
  .animate-slide-left,
  .animate-slide-right,
  .animate-scale-in,
  .animate-scale-in-bounce,
  .animate-pulse,
  .animate-float,
  .animate-float-slow,
  .animate-press {
    animation: none !important;
    opacity: 1 !important;
    transform: none !important;
  }
  
  .skeleton,
  .shimmer,
  .progress-fill.animated {
    animation: none !important;
    background: var(--glass-bg) !important;
  }
  
  .typing {
    animation: none !important;
    border-right: none !important;
    white-space: normal !important;
  }
}