/* Premium Animation System - Natural, Performant, Accessible */

/* Fundamental Keyframe Animations */
@keyframes smooth-fade-in {
  from {
    opacity: 0;
    transform: translateY(calc(8px * var(--motion-scale))) scale(0.98);
  }
  to {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}

@keyframes smooth-slide-up {
  from {
    transform: translate(-50%, calc(100% * var(--motion-scale))) scale(0.95);
    opacity: 0;
  }
  to {
    transform: translate(-50%, 0) scale(1);
    opacity: 1;
  }
}

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

/* Premium Spring Entrance Animation */
@keyframes spring-entrance {
  0% {
    opacity: 0;
    transform: scale(0.3) translateY(calc(100px * var(--motion-scale)));
  }
  50% {
    opacity: 0.8;
    transform: scale(1.05) translateY(calc(-10px * var(--motion-scale)));
  }
  75% {
    opacity: 0.95;
    transform: scale(0.98) translateY(calc(2px * var(--motion-scale)));
  }
  100% {
    opacity: 1;
    transform: scale(1) translateY(0);
  }
}

/* Subtle Hover Scale Animation */
@keyframes gentle-scale {
  0% {
    transform: scale(1);
  }
  100% {
    transform: scale(calc(1 + 0.02 * var(--motion-scale)));
  }
}

/* Glow pulse animation for drop target */
@keyframes glow-pulse {
  0% {
    transform: scale(1);
    opacity: 0.7;
    filter: brightness(1);
  }
  50% {
    transform: scale(calc(1 + 0.01 * var(--motion-scale)));
    opacity: 0.5;
    filter: brightness(1.2);
  }
  100% {
    transform: scale(1);
    opacity: 0.7;
    filter: brightness(1);
  }
}

/* Breathe Animation for Loading States */
@keyframes breathe {
  0%, 100% {
    opacity: 0.6;
    transform: scale(1);
  }
  50% {
    opacity: 1;
    transform: scale(calc(1 + 0.05 * var(--motion-scale)));
  }
}

/* Subtle Bounce for Interactive Elements */
@keyframes subtle-bounce {
  0%, 100% {
    transform: translateY(0) scale(1);
  }
  25% {
    transform: translateY(calc(-2px * var(--motion-scale))) scale(1.01);
  }
  50% {
    transform: translateY(calc(-4px * var(--motion-scale))) scale(1.02);
  }
  75% {
    transform: translateY(calc(-1px * var(--motion-scale))) scale(1.01);
  }
}

/* Reduced Motion Fallbacks */
@media (prefers-reduced-motion: reduce) {
  @keyframes smooth-fade-in {
    from { opacity: 0; }
    to { opacity: 1; }
  }
  
  @keyframes smooth-slide-up {
    from { opacity: 0; }
    to { opacity: 1; }
  }
  
  @keyframes spring-entrance {
    from { opacity: 0; }
    to { opacity: 1; }
  }
  
  @keyframes gentle-scale {
    from { opacity: 0.8; }
    to { opacity: 1; }
  }
  
  @keyframes glow-pulse {
    from { opacity: 0.8; }
    to { opacity: 1; }
  }
  
  @keyframes breathe {
    from { opacity: 0.8; }
    to { opacity: 1; }
  }
  
  @keyframes subtle-bounce {
    from { opacity: 0.8; }
    to { opacity: 1; }
  }
}
