/**
 * Boutme Design System — Animations & Keyframes
 */

/* ─── Keyframes ───────────────────────────────────────────────── */
@keyframes bm-fade-in {
  from { opacity: 0; }
  to   { opacity: 1; }
}
@keyframes bm-fade-out {
  from { opacity: 1; }
  to   { opacity: 0; }
}
@keyframes bm-slide-up {
  from { opacity: 0; transform: translateY(16px); }
  to   { opacity: 1; transform: translateY(0); }
}
@keyframes bm-slide-down {
  from { opacity: 0; transform: translateY(-16px); }
  to   { opacity: 1; transform: translateY(0); }
}
@keyframes bm-sheet-up {
  from { transform: translateY(100%); }
  to   { transform: translateY(0); }
}
@keyframes bm-slide-in-right {
  from { opacity: 0; transform: translateX(24px); }
  to   { opacity: 1; transform: translateX(0); }
}
@keyframes bm-slide-in-left {
  from { opacity: 0; transform: translateX(-24px); }
  to   { opacity: 1; transform: translateX(0); }
}
@keyframes bm-scale-in {
  from { opacity: 0; transform: scale(0.94); }
  to   { opacity: 1; transform: scale(1); }
}
@keyframes bm-spin {
  to { transform: rotate(360deg); }
}
@keyframes bm-pulse {
  0%, 100% { opacity: 1; }
  50%       { opacity: 0.5; }
}
@keyframes bm-shimmer {
  0%   { background-position: -400% 0; }
  100% { background-position: 400% 0; }
}
@keyframes bm-bounce-in {
  0%   { opacity: 0; transform: scale(0.8); }
  60%  { opacity: 1; transform: scale(1.04); }
  80%  { transform: scale(0.98); }
  100% { transform: scale(1); }
}
@keyframes bm-float {
  0%, 100% { transform: translateY(0); }
  50%       { transform: translateY(-8px); }
}
@keyframes bm-glow-pulse {
  0%, 100% { box-shadow: 0 0 20px rgba(0,122,255,0.2); }
  50%       { box-shadow: 0 0 40px rgba(0,122,255,0.5); }
}
@keyframes bm-gradient-shift {
  0%   { background-position: 0% 50%; }
  50%  { background-position: 100% 50%; }
  100% { background-position: 0% 50%; }
}
@keyframes bm-number-count {
  from { opacity: 0; transform: translateY(8px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* ─── Page Transition ─────────────────────────────────────────── */
.bm-page-enter {
  animation: bm-slide-up var(--bm-dur-slow) var(--bm-ease-out);
}
.bm-fade-in   { animation: bm-fade-in   var(--bm-dur-base) var(--bm-ease-out); }
.bm-slide-up  { animation: bm-slide-up  var(--bm-dur-slow) var(--bm-ease-out); }
.bm-scale-in  { animation: bm-scale-in  var(--bm-dur-base) var(--bm-ease-out); }
.bm-bounce-in { animation: bm-bounce-in var(--bm-dur-slow) var(--bm-ease-out); }

/* Staggered animations */
.bm-stagger > *:nth-child(1) { animation-delay: 0ms; }
.bm-stagger > *:nth-child(2) { animation-delay: 60ms; }
.bm-stagger > *:nth-child(3) { animation-delay: 120ms; }
.bm-stagger > *:nth-child(4) { animation-delay: 180ms; }
.bm-stagger > *:nth-child(5) { animation-delay: 240ms; }
.bm-stagger > *:nth-child(6) { animation-delay: 300ms; }
.bm-stagger > *:nth-child(n+7) { animation-delay: 360ms; }

/* ─── Hover Effects ───────────────────────────────────────────── */
.bm-hover-lift {
  transition: transform var(--bm-dur-base) var(--bm-ease-out),
              box-shadow var(--bm-dur-base) var(--bm-ease-out);
}
.bm-hover-lift:hover {
  transform: translateY(-3px);
  box-shadow: var(--bm-shadow-md);
}
.bm-hover-glow:hover {
  animation: bm-glow-pulse 2s ease-in-out infinite;
}
.bm-hover-scale {
  transition: transform var(--bm-dur-base) var(--bm-ease-spring);
}
.bm-hover-scale:hover { transform: scale(1.04); }

/* ─── Loading Spinner ─────────────────────────────────────────── */
.bm-spinner {
  display: inline-block;
  width: 20px;
  height: 20px;
  border: 2px solid var(--bm-border-default);
  border-top-color: var(--bm-accent);
  border-radius: 50%;
  animation: bm-spin 0.8s linear infinite;
}
.bm-spinner-sm { width: 14px; height: 14px; }
.bm-spinner-lg { width: 32px; height: 32px; border-width: 3px; }

/* ─── Float Animation ─────────────────────────────────────────── */
.bm-float {
  animation: bm-float 3s ease-in-out infinite;
}

/* ─── Pulsing Dot ─────────────────────────────────────────────── */
.bm-dot-live {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--bm-green);
  display: inline-block;
  position: relative;
}
.bm-dot-live::after {
  content: '';
  position: absolute;
  inset: -3px;
  border-radius: 50%;
  background: var(--bm-green);
  opacity: 0.3;
  animation: bm-pulse 1.5s ease-in-out infinite;
}

/* ─── Gradient Text ───────────────────────────────────────────── */
.bm-gradient-text {
  background: var(--bm-gradient-brand);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

/* ─── Reduce Motion ───────────────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}