/* ════════════════════════════════════════════════════════════════════
   CFS PRO — ANIMATIONS
   Keyframes + micro-interaction utility classes.
   Respects prefers-reduced-motion.
   ════════════════════════════════════════════════════════════════════ */

/* ── KEYFRAMES ─────────────────────────────────────────────────── */
@keyframes fadeIn {
  from { opacity: 0; }
  to   { opacity: 1; }
}
@keyframes fadeOut {
  from { opacity: 1; }
  to   { opacity: 0; }
}
@keyframes slideUp {
  from { opacity: 0; transform: translateY(8px); }
  to   { opacity: 1; transform: translateY(0); }
}
@keyframes slideDown {
  from { opacity: 0; transform: translateY(-8px); }
  to   { opacity: 1; transform: translateY(0); }
}
@keyframes slideInEnd {
  /* slide in from inline-end (right in RTL, left in LTR) */
  from { opacity: 0; transform: translateX(20px); }
  to   { opacity: 1; transform: translateX(0); }
}
@keyframes slideInStart {
  from { opacity: 0; transform: translateX(-20px); }
  to   { opacity: 1; transform: translateX(0); }
}
[dir="rtl"] @keyframes slideInEnd {
  from { opacity: 0; transform: translateX(-20px); }
  to   { opacity: 1; transform: translateX(0); }
}
@keyframes scaleIn {
  from { opacity: 0; transform: scale(.96); }
  to   { opacity: 1; transform: scale(1); }
}
@keyframes scaleOut {
  from { opacity: 1; transform: scale(1); }
  to   { opacity: 0; transform: scale(.98); }
}
@keyframes pop {
  0%   { transform: scale(1); }
  50%  { transform: scale(1.06); }
  100% { transform: scale(1); }
}
@keyframes shimmer {
  0%   { background-position: 100% 0; }
  100% { background-position: -100% 0; }
}
@keyframes pulse {
  0%, 100% { opacity: 1; }
  50%      { opacity: .55; }
}
@keyframes pulseDot {
  0%   { box-shadow: 0 0 0 0 rgba(184,149,78,.45); }
  70%  { box-shadow: 0 0 0 8px rgba(184,149,78,0); }
  100% { box-shadow: 0 0 0 0 rgba(184,149,78,0); }
}
@keyframes spin {
  to { transform: rotate(360deg); }
}
@keyframes float {
  0%, 100% { transform: translateY(0); }
  50%      { transform: translateY(-6px); }
}
@keyframes indeterminate {
  0%   { transform: translateX(-100%); }
  100% { transform: translateX(400%); }
}
[dir="rtl"] @keyframes indeterminate {
  0%   { transform: translateX(100%); }
  100% { transform: translateX(-400%); }
}
@keyframes ring {
  0%   { box-shadow: 0 0 0 0 rgba(184,149,78,.55); }
  100% { box-shadow: 0 0 0 16px rgba(184,149,78,0); }
}
@keyframes shake {
  10%, 90% { transform: translateX(-1px); }
  20%, 80% { transform: translateX(2px); }
  30%, 50%, 70% { transform: translateX(-4px); }
  40%, 60% { transform: translateX(4px); }
}
@keyframes gradientShift {
  0%, 100% { background-position: 0% 50%; }
  50%      { background-position: 100% 50%; }
}

/* ── UTILITY CLASSES ──────────────────────────────────────────── */
.anim-fade-in   { animation: fadeIn   var(--d-3) var(--ease-out) both; }
.anim-slide-up  { animation: slideUp  var(--d-4) var(--ease-out) both; }
.anim-slide-dn  { animation: slideDown var(--d-4) var(--ease-out) both; }
.anim-scale-in  { animation: scaleIn  var(--d-3) var(--ease-spring) both; }
.anim-pulse     { animation: pulse 1.8s var(--ease-in-out) infinite; }
.anim-spin      { animation: spin 1s var(--ease-linear) infinite; }
.anim-float     { animation: float 3.6s var(--ease-in-out) infinite; }
.anim-shake     { animation: shake .5s var(--ease-out) both; }

/* Stagger children (apply to parent) */
.stagger > * { animation: slideUp var(--d-4) var(--ease-out) both; }
.stagger > *:nth-child(1) { animation-delay: 0ms; }
.stagger > *:nth-child(2) { animation-delay: 60ms; }
.stagger > *:nth-child(3) { animation-delay: 120ms; }
.stagger > *:nth-child(4) { animation-delay: 180ms; }
.stagger > *:nth-child(5) { animation-delay: 240ms; }
.stagger > *:nth-child(6) { animation-delay: 300ms; }
.stagger > *:nth-child(7) { animation-delay: 360ms; }
.stagger > *:nth-child(8) { animation-delay: 420ms; }

/* ── MICRO-INTERACTIONS ───────────────────────────────────────── */
.press {
  transition: transform var(--d-1) var(--ease-out);
}
.press:active {
  transform: translateY(1px) scale(.98);
}

.lift {
  transition: transform var(--d-3) var(--ease-out), box-shadow var(--d-3) var(--ease-out);
}
.lift:hover {
  transform: translateY(-2px);
  box-shadow: var(--sh-3);
}

.tilt {
  transition: transform var(--d-3) var(--ease-out);
}
.tilt:hover {
  transform: rotate(-1deg) scale(1.02);
}

.glow-on-hover {
  transition: box-shadow var(--d-3) var(--ease-out);
}
.glow-on-hover:hover { box-shadow: var(--sh-gold-glow); }

/* Live dot (e.g. "in production" indicator) */
.live-dot {
  width: 8px; height: 8px;
  background: var(--accent-500);
  border-radius: 50%;
  display: inline-block;
  animation: pulseDot 2s var(--ease-out) infinite;
}
.live-dot.ok   { background: var(--ok-solid);   animation-name: pulseDot; }
.live-dot.warn { background: var(--warn-solid); }
.live-dot.err  { background: var(--err-solid); }

/* Spinner */
.spinner {
  width: 16px; height: 16px;
  border: 2px solid var(--border-strong);
  border-top-color: var(--accent-500);
  border-radius: 50%;
  animation: spin .8s linear infinite;
  display: inline-block;
}
.spinner-lg { width: 28px; height: 28px; border-width: 3px; }

/* Page transition wrapper */
.page-enter {
  animation: fadeIn var(--d-3) var(--ease-out), slideUp var(--d-4) var(--ease-out);
}

/* Gradient text shimmer (for hero numbers) */
.text-gradient {
  background: var(--grad-gold);
  background-size: 200% 200%;
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  animation: gradientShift 6s var(--ease-in-out) infinite;
}

.text-ink {
  background: linear-gradient(180deg, var(--ink-950) 0%, var(--ink-700) 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
[data-theme="dark"] .text-ink {
  background: linear-gradient(180deg, var(--paper) 0%, var(--ink-300) 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

/* ── REDUCED MOTION ───────────────────────────────────────────── */
@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;
  }
  .anim-pulse, .anim-spin, .anim-float, .live-dot, .spinner,
  .text-gradient, .hero-illu::before, .hero-illu::after {
    animation: none !important;
  }
  .lift:hover, .press:active, .tilt:hover {
    transform: none !important;
  }
}