/* =============================================
   FabricAI — Keyframe Animations
   styles/animations.css
   ============================================= */

/* ─── Fade & Slide ──────────────────────────── */
@keyframes fadeIn {
  from { opacity: 0; }
  to   { opacity: 1; }
}

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

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

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

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

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

/* ─── Scale ─────────────────────────────────── */
@keyframes scaleIn {
  from {
    opacity: 0;
    transform: scale(0.9);
  }
  to {
    opacity: 1;
    transform: scale(1);
  }
}

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

@keyframes scalePop {
  0%   { transform: scale(1); }
  50%  { transform: scale(1.08); }
  100% { transform: scale(1); }
}

/* ─── Loading & Spinners ────────────────────── */
@keyframes spin {
  from { transform: rotate(0deg); }
  to   { transform: rotate(360deg); }
}

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

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

@keyframes pulseBig {
  0%, 100% { transform: scale(1);    opacity: 1; }
  50%       { transform: scale(1.05); opacity: 0.7; }
}

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

/* ─── Background Effects ────────────────────── */
@keyframes orbFloat1 {
  0%, 100% { transform: translate(0, 0)   scale(1); }
  25%       { transform: translate(80px, 40px)  scale(1.05); }
  50%       { transform: translate(40px, 80px)  scale(0.95); }
  75%       { transform: translate(-40px, 30px) scale(1.02); }
}

@keyframes orbFloat2 {
  0%, 100% { transform: translate(0, 0)    scale(1); }
  33%       { transform: translate(-60px, -40px) scale(1.08); }
  66%       { transform: translate(30px, -60px)  scale(0.92); }
}

@keyframes gradientShift {
  0%   { background-position: 0% 50%; }
  50%  { background-position: 100% 50%; }
  100% { background-position: 0% 50%; }
}

/* ─── Shimmer (skeleton loader) ─────────────── */
@keyframes shimmer {
  0%   { background-position: -200% 0; }
  100% { background-position:  200% 0; }
}

/* ─── Progress Bar ──────────────────────────── */
@keyframes progressStripe {
  0%   { background-position: 0 0; }
  100% { background-position: 40px 0; }
}

/* ─── Glow Pulse ────────────────────────────── */
@keyframes glowPulse {
  0%, 100% { box-shadow: 0 0 20px hsla(263,70%,58%,0.3), 0 0 60px hsla(263,70%,58%,0.1); }
  50%       { box-shadow: 0 0 30px hsla(263,70%,58%,0.5), 0 0 80px hsla(263,70%,58%,0.2); }
}

/* ─── Shake (error feedback) ────────────────── */
@keyframes shake {
  0%, 100% { transform: translateX(0); }
  20%       { transform: translateX(-8px); }
  40%       { transform: translateX(8px); }
  60%       { transform: translateX(-6px); }
  80%       { transform: translateX(6px); }
}

/* ─── Check Mark Draw ───────────────────────── */
@keyframes checkDraw {
  from { stroke-dashoffset: 100; }
  to   { stroke-dashoffset: 0; }
}

/* ─── Float (logo animation) ────────────────── */
@keyframes float {
  0%, 100% { transform: translateY(0px); }
  50%       { transform: translateY(-8px); }
}

/* ─── Ripple ────────────────────────────────── */
@keyframes ripple {
  from {
    transform: scale(0);
    opacity: 0.6;
  }
  to {
    transform: scale(3);
    opacity: 0;
  }
}

/* ─── Toast slide in/out ────────────────────── */
@keyframes toastIn {
  from {
    opacity: 0;
    transform: translateX(110%);
  }
  to {
    opacity: 1;
    transform: translateX(0);
  }
}

@keyframes toastOut {
  from {
    opacity: 1;
    transform: translateX(0);
    max-height: 100px;
    margin-bottom: var(--space-2);
  }
  to {
    opacity: 0;
    transform: translateX(110%);
    max-height: 0;
    margin-bottom: 0;
  }
}

/* ─── Dash border animation ─────────────────── */
@keyframes dashSpin {
  to { stroke-dashoffset: -20; }
}

/* ─── Card stagger animation classes ────────── */
.anim-fade-in {
  animation: fadeIn var(--duration-slow) var(--ease-out) both;
}

.anim-slide-up {
  animation: slideUp var(--duration-slow) var(--ease-out) both;
}

.anim-slide-down {
  animation: slideDown var(--duration-slow) var(--ease-out) both;
}

.anim-scale-in {
  animation: scaleIn var(--duration-slow) var(--ease-bounce) both;
}

/* Staggered delays for card grids */
.stagger-1  { animation-delay: 60ms; }
.stagger-2  { animation-delay: 120ms; }
.stagger-3  { animation-delay: 180ms; }
.stagger-4  { animation-delay: 240ms; }
.stagger-5  { animation-delay: 300ms; }
.stagger-6  { animation-delay: 360ms; }
.stagger-7  { animation-delay: 420ms; }
.stagger-8  { animation-delay: 480ms; }
.stagger-9  { animation-delay: 540ms; }
.stagger-10 { animation-delay: 600ms; }
.stagger-11 { animation-delay: 660ms; }
.stagger-12 { animation-delay: 720ms; }

/* ─── Reduced Motion Overrides ──────────────── */
@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;
  }

  body::before,
  body::after {
    animation: none !important;
  }
}