/*
 * RAXE Design System — Motion & Animations
 * Animated background blobs, keyframes library, reduced-motion overrides.
 * Depends on: tokens.css
 */

/* ── Animated background blobs ── */
.blob {
  position: absolute; border-radius: 50%;
  filter: blur(90px); pointer-events: none;
  animation: blob-flow var(--blob-dur, 18s) ease-in-out infinite var(--blob-delay, 0s);
}
@keyframes blob-flow {
  0%,100% { transform: translate(0,0) scale(1); }
  33%      { transform: translate(var(--blob-tx, 30px), var(--blob-ty, -20px)) scale(1.06); }
  66%      { transform: translate(calc(var(--blob-tx, 30px) * -.6), calc(var(--blob-ty, -20px) * -.5)) scale(0.95); }
}

/* Default blob presets */
.blob-cyan    { background: rgba(56,189,248,0.09); }
.blob-magenta { background: rgba(232,121,249,0.07); }
.blob-teal    { background: rgba(0,229,192,0.06); }
.blob-amber   { background: rgba(245,158,11,0.04); }

/* ── Aurora bands ── */
.aurora-band {
  position: absolute; border-radius: 50%; pointer-events: none;
  animation: aurora-drift var(--aurora-dur, 12s) ease-in-out infinite var(--aurora-delay, 0s);
}
@keyframes aurora-drift {
  0%,100% { transform: translateY(0) scaleX(1); opacity: var(--aurora-opacity, 0.6); }
  50%      { transform: translateY(var(--aurora-ty, -40px)) scaleX(1.04); opacity: calc(var(--aurora-opacity, 0.6) * 0.7); }
}

/* ── Number counter (JS-driven, CSS easing) ── */
.counter-value { display: inline-block; }

/* ── Fade in utilities ── */
.fade-in {
  animation: fade-in var(--duration-slow) var(--ease-out) both;
}
@keyframes fade-in { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }

.fade-in-fast  { animation-duration: var(--duration-normal); }
.fade-in-delay { animation-delay: var(--duration-normal); }

/* ── Glow pulse ── */
.glow-pulse {
  animation: glow-pulse 3s ease-in-out infinite;
}
@keyframes glow-pulse {
  0%,100% { box-shadow: 0 0 20px rgba(56,189,248,0.15); }
  50%      { box-shadow: 0 0 40px rgba(56,189,248,0.35); }
}

/* ── Typing cursor ── */
.cursor-blink {
  display: inline-block; width: 2px; height: 1em;
  background: var(--text-brand); margin-left: 2px; vertical-align: text-bottom;
  animation: cursor-blink 1s step-end infinite;
}
@keyframes cursor-blink { 0%,100% { opacity: 1; } 50% { opacity: 0; } }

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