/* ============================================================
   Sutra Design System — Motion Library
   Global keyframe definitions referenced by element User CSS.
   Element-specific transitions stay in element User CSS;
   only reusable @keyframes live here.
   ============================================================ */

/* === Pulse — rhythmic glow halo === */
@keyframes sutra-pulse {
  0%, 100% { box-shadow: 0 0 0 0 rgb(150 72 37 / 0); }
  50%      { box-shadow: 0 0 0 12px rgb(150 72 37 / 0.12); }
}

/* === Breathe — slow scale oscillation === */
@keyframes sutra-breathe {
  0%, 100% { transform: scale(1); }
  50%      { transform: scale(1.02); }
}

/* === Shimmer — diagonal gradient sweep across background === */
@keyframes sutra-shimmer {
  0%   { background-position: -200% 0; }
  100% { background-position: 200% 0; }
}

/* === Shake — playful CTA jitter === */
@keyframes sutra-shake {
  0%, 100% { transform: translateX(0); }
  25%      { transform: translateX(-2px); }
  50%      { transform: translateX(2px); }
  75%      { transform: translateX(-2px); }
}

/* === Spin — loading rotation === */
@keyframes sutra-spin {
  to { transform: rotate(360deg); }
}

/* === Fade in === */
@keyframes sutra-fade-in {
  from { opacity: 0; }
  to   { opacity: 1; }
}

/* === Slide up === */
@keyframes sutra-slide-up {
  from { opacity: 0; transform: translateY(8px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* === Ripple — material click expansion === */
@keyframes sutra-ripple {
  from { transform: scale(0); opacity: 0.6; }
  to   { transform: scale(4); opacity: 0; }
}

/* === Glow — pulsing outer glow === */
@keyframes sutra-glow {
  0%, 100% {
    box-shadow: 0 0 0 1px var(--sutra-color-brand-primary), 0 0 12px 0 rgb(150 72 37 / 0.4);
  }
  50% {
    box-shadow: 0 0 0 1px var(--sutra-color-brand-primary), 0 0 24px 4px rgb(150 72 37 / 0.6);
  }
}

/* === Bounce — playful entrance === */
@keyframes sutra-bounce {
  0%, 100% { transform: translateY(0); }
  25%      { transform: translateY(-4px); }
  50%      { transform: translateY(0); }
  75%      { transform: translateY(-2px); }
}