@use '../styles/variables' as tokens;

/**
 * Flux UI Design System — Animation Keyframes & Motion Tokens
 *
 * CSS-only consumer path: these @keyframes are used when consuming animations via
 * the CSS `animation` shorthand property, e.g.:
 *   .my-el { animation: vi-fade-in 300ms var(--vi-animation-easing-standard) forwards; }
 *
 * Parallel WAAPI path: the component `<vi-animation>` uses a separate but equivalent
 * set of PRESET_KEYFRAMES in `vi-animation.ts` for the Web Animations API runtime path.
 * Both definitions intentionally coexist — sharing a runtime source would require
 * a build-time code-gen step. IMPORTANT: When adding or changing a preset, update BOTH:
 *   1. The `@keyframes vi-<name>` block below (CSS path)
 *   2. The corresponding entry in `PRESET_KEYFRAMES` in vi-animation.ts (WAAPI path)
 */

:root {
  --vi-animation-duration-fast: 150ms;
  --vi-animation-duration-base: 300ms;
  --vi-animation-duration-slow: 500ms;

  --vi-animation-easing-standard: cubic-bezier(0.2, 0, 0, 1);
  --vi-animation-easing-entrance: cubic-bezier(0, 0, 0.2, 1);
  --vi-animation-easing-exit: cubic-bezier(0.4, 0, 1, 1);
  --vi-animation-easing-bounce: cubic-bezier(0.34, 1.56, 0.64, 1);

  --vi-animation-expand-max-height: 100dvh;
  --vi-animation-expand-max-width: 100vw;
}

// Fade Keyframes
@keyframes vi-fade-in {
  from { opacity: 0; }
  to { opacity: 1; }
}

@keyframes vi-fade-out {
  from { opacity: 1; }
  to { opacity: 0; }
}

@keyframes vi-fade-in-up {
  from { opacity: 0; transform: translate3d(0, 1rem, 0); }
  to { opacity: 1; transform: translate3d(0, 0, 0); }
}

@keyframes vi-fade-in-down {
  from { opacity: 0; transform: translate3d(0, -1rem, 0); }
  to { opacity: 1; transform: translate3d(0, 0, 0); }
}

@keyframes vi-fade-in-left {
  from { opacity: 0; transform: translate3d(-1rem, 0, 0); }
  to { opacity: 1; transform: translate3d(0, 0, 0); }
}

@keyframes vi-fade-in-right {
  from { opacity: 0; transform: translate3d(1rem, 0, 0); }
  to { opacity: 1; transform: translate3d(0, 0, 0); }
}

@keyframes vi-fade-out-up {
  from { opacity: 1; transform: translate3d(0, 0, 0); }
  to { opacity: 0; transform: translate3d(0, -1rem, 0); }
}

@keyframes vi-fade-out-down {
  from { opacity: 1; transform: translate3d(0, 0, 0); }
  to { opacity: 0; transform: translate3d(0, 1rem, 0); }
}

@keyframes vi-fade-out-left {
  from { opacity: 1; transform: translate3d(0, 0, 0); }
  to { opacity: 0; transform: translate3d(-1rem, 0, 0); }
}

@keyframes vi-fade-out-right {
  from { opacity: 1; transform: translate3d(0, 0, 0); }
  to { opacity: 0; transform: translate3d(1rem, 0, 0); }
}

// Zoom & Scale Keyframes
@keyframes vi-zoom-in {
  from { opacity: 0; transform: scale3d(0.92, 0.92, 0.92); }
  to { opacity: 1; transform: scale3d(1, 1, 1); }
}

@keyframes vi-zoom-out {
  from { opacity: 1; transform: scale3d(1, 1, 1); }
  to { opacity: 0; transform: scale3d(0.92, 0.92, 0.92); }
}

@keyframes vi-scale-up {
  from { transform: scale3d(0.8, 0.8, 0.8); }
  to { transform: scale3d(1, 1, 1); }
}

@keyframes vi-scale-down {
  from { transform: scale3d(1.2, 1.2, 1.2); }
  to { transform: scale3d(1, 1, 1); }
}

@keyframes vi-bounce-in {
  0% { opacity: 0; transform: scale3d(0.3, 0.3, 0.3); }
  50% { opacity: 0.9; transform: scale3d(1.08, 1.08, 1.08); }
  75% { transform: scale3d(0.95, 0.95, 0.95); }
  100% { opacity: 1; transform: scale3d(1, 1, 1); }
}

@keyframes vi-bounce-out {
  0% { opacity: 1; transform: scale3d(1, 1, 1); }
  20% { transform: scale3d(0.9, 0.9, 0.9); }
  50% { opacity: 1; transform: scale3d(1.1, 1.1, 1.1); }
  100% { opacity: 0; transform: scale3d(0.3, 0.3, 0.3); }
}

@keyframes vi-pop-in {
  0% { opacity: 0; transform: scale3d(0.8, 0.8, 1); }
  70% { transform: scale3d(1.05, 1.05, 1); }
  100% { opacity: 1; transform: scale3d(1, 1, 1); }
}

@keyframes vi-pop-out {
  0% { opacity: 1; transform: scale3d(1, 1, 1); }
  100% { opacity: 0; transform: scale3d(0.8, 0.8, 1); }
}

// Slide Keyframes
@keyframes vi-slide-in-top {
  from { transform: translate3d(0, -100%, 0); }
  to { transform: translate3d(0, 0, 0); }
}

@keyframes vi-slide-in-bottom {
  from { transform: translate3d(0, 100%, 0); }
  to { transform: translate3d(0, 0, 0); }
}

@keyframes vi-slide-in-left {
  from { transform: translate3d(-100%, 0, 0); }
  to { transform: translate3d(0, 0, 0); }
}

@keyframes vi-slide-in-right {
  from { transform: translate3d(100%, 0, 0); }
  to { transform: translate3d(0, 0, 0); }
}

@keyframes vi-slide-out-top {
  from { transform: translate3d(0, 0, 0); }
  to { transform: translate3d(0, -100%, 0); }
}

@keyframes vi-slide-out-bottom {
  from { transform: translate3d(0, 0, 0); }
  to { transform: translate3d(0, 100%, 0); }
}

@keyframes vi-slide-out-left {
  from { transform: translate3d(0, 0, 0); }
  to { transform: translate3d(-100%, 0, 0); }
}

@keyframes vi-slide-out-right {
  from { transform: translate3d(0, 0, 0); }
  to { transform: translate3d(100%, 0, 0); }
}

// 3D & Flip Keyframes
@keyframes vi-flip-x {
  from { transform: perspective(400px) rotate3d(1, 0, 0, 90deg); opacity: 0; }
  to { transform: perspective(400px) rotate3d(1, 0, 0, 0deg); opacity: 1; }
}

@keyframes vi-flip-y {
  from { transform: perspective(400px) rotate3d(0, 1, 0, 90deg); opacity: 0; }
  to { transform: perspective(400px) rotate3d(0, 1, 0, 0deg); opacity: 1; }
}

@keyframes vi-perspective-pop {
  from { transform: perspective(600px) translateZ(-100px); opacity: 0; }
  to { transform: perspective(600px) translateZ(0); opacity: 1; }
}

// Expand & Collapse Keyframes
@keyframes vi-expand-vertical {
  from { max-height: 0; opacity: 0; }
  to { max-height: var(--vi-animation-expand-max-height, 100dvh); opacity: 1; }
}

@keyframes vi-collapse-vertical {
  from { max-height: var(--vi-animation-expand-max-height, 100dvh); opacity: 1; }
  to { max-height: 0; opacity: 0; }
}

@keyframes vi-expand-horizontal {
  from { max-width: 0; opacity: 0; }
  to { max-width: var(--vi-animation-expand-max-width, 100vw); opacity: 1; }
}

@keyframes vi-collapse-horizontal {
  from { max-width: var(--vi-animation-expand-max-width, 100vw); opacity: 1; }
  to { max-width: 0; opacity: 0; }
}

// Attention Seekers & Utilities
@keyframes vi-pulse {
  0% { transform: scale3d(1, 1, 1); }
  50% { transform: scale3d(1.05, 1.05, 1.05); }
  100% { transform: scale3d(1, 1, 1); }
}

@keyframes vi-bounce {
  0%, 20%, 53%, 80%, 100% { transform: translate3d(0, 0, 0); }
  40%, 43% { transform: translate3d(0, -12px, 0); }
  70% { transform: translate3d(0, -6px, 0); }
  90% { transform: translate3d(0, -2px, 0); }
}

@keyframes vi-shake {
  0%, 100% { transform: translate3d(0, 0, 0); }
  10%, 30%, 50%, 70%, 90% { transform: translate3d(-4px, 0, 0); }
  20%, 40%, 60%, 80% { transform: translate3d(4px, 0, 0); }
}

@keyframes vi-wobble {
  0%, 100% { transform: translate3d(0, 0, 0) rotate(0deg); }
  15% { transform: translate3d(-15%, 0, 0) rotate(-4deg); }
  30% { transform: translate3d(12%, 0, 0) rotate(3deg); }
  45% { transform: translate3d(-9%, 0, 0) rotate(-2deg); }
  60% { transform: translate3d(6%, 0, 0) rotate(1deg); }
  75% { transform: translate3d(-3%, 0, 0) rotate(-1deg); }
}

@keyframes vi-heartbeat {
  0% { transform: scale(1); }
  14% { transform: scale(1.15); }
  28% { transform: scale(1); }
  42% { transform: scale(1.15); }
  70% { transform: scale(1); }
}

@keyframes vi-shimmer {
  0% { background-position: -200% 0; }
  100% { background-position: 200% 0; }
}

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