/* ============================================================================
   animations.css — keyframes + utility animation classes.
   Used by glass mesh, skeletons, badges, pull-to-refresh, reveals.
   ============================================================================ */

/* ---- Mesh blob drift ---- */
@keyframes meshDriftA {
  0%   { transform: translate3d(0, 0, 0) scale(1); }
  100% { transform: translate3d(8vmax, 6vmax, 0) scale(1.15); }
}
@keyframes meshDriftB {
  0%   { transform: translate3d(0, 0, 0) scale(1.1); }
  100% { transform: translate3d(-7vmax, 4vmax, 0) scale(0.95); }
}
@keyframes meshDriftC {
  0%   { transform: translate3d(0, 0, 0) scale(1); }
  100% { transform: translate3d(5vmax, -7vmax, 0) scale(1.2); }
}
@keyframes meshDriftD {
  0%   { transform: translate3d(0, 0, 0) scale(0.9); }
  100% { transform: translate3d(-5vmax, -4vmax, 0) scale(1.1); }
}

/* ---- Shimmer (skeletons) ---- */
@keyframes shimmer {
  0%   { background-position: -180% 0; }
  100% { background-position: 180% 0; }
}

/* ---- Highlight sweep ---- */
@keyframes sweepRun {
  0%   { transform: rotate(8deg) translateX(-120%); }
  100% { transform: rotate(8deg) translateX(520%); }
}

/* ---- Pulse (badge/glow) ---- */
@keyframes pulseGlow {
  0%, 100% { box-shadow: 0 0 0 0 rgba(124, 92, 252, 0.5); }
  50%      { box-shadow: 0 0 0 8px rgba(124, 92, 252, 0); }
}
@keyframes pulseDot {
  0%, 100% { transform: scale(1); opacity: 1; }
  50%      { transform: scale(1.4); opacity: 0.6; }
}

/* ---- Bell shake (new notification) ---- */
@keyframes bellShake {
  0%, 100% { transform: rotate(0); }
  15% { transform: rotate(14deg); }
  30% { transform: rotate(-12deg); }
  45% { transform: rotate(9deg); }
  60% { transform: rotate(-6deg); }
  75% { transform: rotate(3deg); }
}

/* ---- Spinner ---- */
@keyframes spin { to { transform: rotate(360deg); } }

/* ---- Fade / rise (reveal fallback when GSAP missing) ---- */
@keyframes riseIn {
  from { opacity: 0; transform: translateY(16px); filter: blur(6px); }
  to   { opacity: 1; transform: translateY(0); filter: blur(0); }
}
@keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } }
@keyframes scaleIn {
  from { opacity: 0; transform: scale(0.92); }
  to   { opacity: 1; transform: scale(1); }
}

/* ---- Floating (FAB idle) ---- */
@keyframes floaty {
  0%, 100% { transform: translateY(0); }
  50%      { transform: translateY(-3px); }
}

/* ---- Value flash on update ---- */
@keyframes valueFlash {
  0%   { color: var(--brand-300); text-shadow: 0 0 18px var(--brand-glow); }
  100% { color: inherit; text-shadow: none; }
}

/* ============================ Utility classes ============================== */
.anim-rise { animation: riseIn var(--t-slow) var(--ease-out) both; }
.anim-fade { animation: fadeIn var(--t-base) var(--ease-out) both; }
.anim-scale { animation: scaleIn var(--t-base) var(--ease-spring) both; }
.anim-spin { animation: spin 0.8s linear infinite; }
.anim-floaty { animation: floaty 3.4s var(--ease-in-out) infinite; }
.anim-flash { animation: valueFlash 0.9s var(--ease-out); }
.anim-pulse-glow { animation: pulseGlow 1.8s var(--ease-in-out) infinite; }

/* stagger helper: set --i on each child to delay reveal (used as fallback) */
.stagger > * { animation: riseIn var(--t-slow) var(--ease-out) both; }
.stagger > *:nth-child(1) { animation-delay: 40ms; }
.stagger > *:nth-child(2) { animation-delay: 90ms; }
.stagger > *:nth-child(3) { animation-delay: 140ms; }
.stagger > *:nth-child(4) { animation-delay: 190ms; }
.stagger > *:nth-child(5) { animation-delay: 240ms; }
.stagger > *:nth-child(6) { animation-delay: 290ms; }
.stagger > *:nth-child(7) { animation-delay: 340ms; }
.stagger > *:nth-child(8) { animation-delay: 390ms; }
.stagger > *:nth-child(n+9) { animation-delay: 440ms; }

/* ============================ Reduced motion =============================== */
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
    scroll-behavior: auto !important;
  }
  .mesh-bg::before,
  .mesh-bg::after,
  .mesh-bg .blob { animation: none !important; }
  .anim-rise, .anim-fade, .anim-scale, .stagger > * {
    opacity: 1 !important;
    transform: none !important;
    filter: none !important;
  }
}