/* ═══════════════════════════════════════════════════════════════════
   FITFORGE TRACKER — ANIMATIONS & MOTION SYSTEM
   Physics-based micro-interactions, liquid transitions, plasma effects
   ═══════════════════════════════════════════════════════════════════ */

/* ── Core Keyframes ────────────────────────────────────────────── */

@keyframes fadeIn {
  from { opacity: 0; }
  to   { opacity: 1; }
}

@keyframes fadeInUp {
  from { opacity: 0; transform: translateY(20px); }
  to   { opacity: 1; transform: translateY(0); }
}

@keyframes fadeInDown {
  from { opacity: 0; transform: translateY(-20px); }
  to   { opacity: 1; transform: translateY(0); }
}

@keyframes fadeInLeft {
  from { opacity: 0; transform: translateX(-24px); }
  to   { opacity: 1; transform: translateX(0); }
}

@keyframes fadeInRight {
  from { opacity: 0; transform: translateX(24px); }
  to   { opacity: 1; transform: translateX(0); }
}

@keyframes scaleIn {
  from { opacity: 0; transform: scale(0.88); }
  to   { opacity: 1; transform: scale(1); }
}

@keyframes scaleInSpring {
  0%   { opacity: 0; transform: scale(0.70); }
  60%  { opacity: 1; transform: scale(1.04); }
  80%  { transform: scale(0.98); }
  100% { transform: scale(1); }
}

@keyframes slideInLeft {
  from { transform: translateX(-100%); }
  to   { transform: translateX(0); }
}

@keyframes slideOutLeft {
  from { transform: translateX(0); }
  to   { transform: translateX(-100%); }
}

@keyframes slideInRight {
  from { transform: translateX(100%); }
  to   { transform: translateX(0); }
}

@keyframes slideInBottom {
  from { transform: translateY(100%); opacity: 0; }
  to   { transform: translateY(0); opacity: 1; }
}

/* ── Plasma/Neon Pulses ────────────────────────────────────────── */

@keyframes neonPulse {
  0%, 100% {
    box-shadow: 0 0 8px rgba(0,242,254,0.3), 0 0 16px rgba(0,242,254,0.15);
  }
  50% {
    box-shadow: 0 0 16px rgba(0,242,254,0.5), 0 0 32px rgba(0,242,254,0.25), 0 0 48px rgba(0,242,254,0.10);
  }
}

@keyframes neonPulseForge {
  0%, 100% {
    box-shadow: 0 0 8px rgba(255,107,53,0.3), 0 0 16px rgba(255,165,0,0.15);
  }
  50% {
    box-shadow: 0 0 16px rgba(255,65,108,0.5), 0 0 32px rgba(255,107,53,0.25), 0 0 48px rgba(255,165,0,0.10);
  }
}

@keyframes neonPulseGreen {
  0%, 100% {
    box-shadow: 0 0 8px rgba(16,185,129,0.3);
  }
  50% {
    box-shadow: 0 0 16px rgba(16,185,129,0.5), 0 0 32px rgba(52,211,153,0.2);
  }
}

@keyframes borderPulse {
  0%, 100% { border-color: rgba(0,242,254,0.2); }
  50%       { border-color: rgba(0,242,254,0.5); }
}

/* ── Gradient Animations ───────────────────────────────────────── */

@keyframes gradientShift {
  0%   { background-position: 0% 50%; }
  50%  { background-position: 100% 50%; }
  100% { background-position: 0% 50%; }
}

@keyframes gradientRotate {
  0%   { transform: rotate(0deg) scale(1.5); }
  100% { transform: rotate(360deg) scale(1.5); }
}

@keyframes meshFlow {
  0%, 100% {
    background-position: 0% 0%, 100% 100%, 50% 50%;
  }
  33% {
    background-position: 100% 0%, 0% 100%, 0% 50%;
  }
  66% {
    background-position: 100% 100%, 0% 0%, 100% 50%;
  }
}

/* ── Loading / Skeleton ────────────────────────────────────────── */

@keyframes shimmer {
  0%   { background-position: -200% 0; }
  100% { background-position: 200% 0; }
}

@keyframes pulse {
  0%, 100% { opacity: 1; }
  50%       { opacity: 0.4; }
}

@keyframes spin {
  from { transform: rotate(0deg); }
  to   { transform: rotate(360deg); }
}

@keyframes spinSlow {
  from { transform: rotate(0deg); }
  to   { transform: rotate(360deg); }
}

@keyframes dotBounce {
  0%, 80%, 100% { transform: scale(0.6); opacity: 0.5; }
  40%           { transform: scale(1.0); opacity: 1; }
}

@keyframes lineGrow {
  from { width: 0%; }
  to   { width: 100%; }
}

/* ── Floating Orbs ─────────────────────────────────────────────── */

@keyframes orbFloat {
  0%, 100% { transform: translate(0, 0) scale(1); }
  25%       { transform: translate(20px, -15px) scale(1.05); }
  50%       { transform: translate(-10px, -25px) scale(0.95); }
  75%       { transform: translate(-20px, -5px) scale(1.02); }
}

@keyframes orbPulse {
  0%, 100% { opacity: 0.6; transform: scale(1); }
  50%       { opacity: 0.9; transform: scale(1.1); }
}

/* ── Star Twinkle ──────────────────────────────────────────────── */

@keyframes twinkle {
  0%, 100% { opacity: 0.3; transform: scale(1); }
  50%       { opacity: 1; transform: scale(1.3); }
}

/* ── Data / Stats ──────────────────────────────────────────────── */

@keyframes countUp {
  from { opacity: 0; transform: translateY(10px); }
  to   { opacity: 1; transform: translateY(0); }
}

@keyframes barRise {
  from { transform: scaleY(0); transform-origin: bottom; }
  to   { transform: scaleY(1); transform-origin: bottom; }
}

@keyframes lineTrace {
  from { stroke-dashoffset: 1000; }
  to   { stroke-dashoffset: 0; }
}

/* ── Download Progress ─────────────────────────────────────────── */

@keyframes progressFlow {
  0%   { background-position: 0% 50%; }
  100% { background-position: 200% 50%; }
}

@keyframes downloadPulse {
  0%   { transform: translateY(0); opacity: 1; }
  50%  { transform: translateY(-4px); opacity: 0.7; }
  100% { transform: translateY(0); opacity: 1; }
}

/* ── Success / Error ───────────────────────────────────────────── */

@keyframes checkMark {
  0%   { stroke-dashoffset: 30; }
  100% { stroke-dashoffset: 0; }
}

@keyframes shake {
  0%, 100% { transform: translateX(0); }
  20%, 60%  { transform: translateX(-6px); }
  40%, 80%  { transform: translateX(6px); }
}

@keyframes pop {
  0%   { transform: scale(1); }
  50%  { transform: scale(1.15); }
  100% { transform: scale(1); }
}

/* ── Toast Notification ────────────────────────────────────────── */

@keyframes toastIn {
  from { opacity: 0; transform: translateX(100%) scale(0.9); }
  to   { opacity: 1; transform: translateX(0) scale(1); }
}

@keyframes toastOut {
  from { opacity: 1; transform: translateX(0) scale(1); }
  to   { opacity: 0; transform: translateX(100%) scale(0.9); }
}

/* ── Page Transitions ──────────────────────────────────────────── */

@keyframes pageEnter {
  from { opacity: 0; transform: translateY(12px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* ── Glow Border Sweep ─────────────────────────────────────────── */

@keyframes borderSweep {
  0%   { background-position: 0% 0%; }
  100% { background-position: 200% 200%; }
}

/* ── AI Processing ─────────────────────────────────────────────── */

@keyframes aiThink {
  0%   { border-color: rgba(0,242,254,0.2); box-shadow: 0 0 0 0 rgba(0,242,254,0.3); }
  50%  { border-color: rgba(0,242,254,0.6); box-shadow: 0 0 0 8px rgba(0,242,254,0); }
  100% { border-color: rgba(0,242,254,0.2); box-shadow: 0 0 0 0 rgba(0,242,254,0); }
}

@keyframes typewriter {
  from { width: 0; }
  to   { width: 100%; }
}

@keyframes blinkCursor {
  0%, 100% { border-right-color: var(--accent-primary); }
  50%       { border-right-color: transparent; }
}

/* ═══════════════════════════════════════════════════════════════════
   ANIMATION UTILITY CLASSES
   ═══════════════════════════════════════════════════════════════════ */

/* Entry animations */
.anim-fade-in     { animation: fadeIn      0.4s var(--ease-smooth) both; }
.anim-fade-up     { animation: fadeInUp    0.45s var(--ease-out) both; }
.anim-fade-down   { animation: fadeInDown  0.45s var(--ease-out) both; }
.anim-fade-left   { animation: fadeInLeft  0.45s var(--ease-out) both; }
.anim-fade-right  { animation: fadeInRight 0.45s var(--ease-out) both; }
.anim-scale-in    { animation: scaleIn     0.35s var(--ease-spring) both; }
.anim-scale-spring{ animation: scaleInSpring 0.5s var(--ease-spring) both; }
.anim-page-enter  { animation: pageEnter   0.5s var(--ease-out) both; }

/* Looping animations */
.anim-pulse       { animation: pulse 2s ease-in-out infinite; }
.anim-spin        { animation: spin 1s linear infinite; }
.anim-spin-slow   { animation: spinSlow 3s linear infinite; }
.anim-neon-pulse  { animation: neonPulse 2.5s ease-in-out infinite; }
.anim-orb         { animation: orbFloat 8s ease-in-out infinite; }
.anim-bounce      { animation: downloadPulse 1.5s ease-in-out infinite; }
.anim-border-pulse{ animation: borderPulse 2s ease-in-out infinite; }

/* Stagger delays */
.delay-100 { animation-delay: 0.10s; }
.delay-150 { animation-delay: 0.15s; }
.delay-200 { animation-delay: 0.20s; }
.delay-250 { animation-delay: 0.25s; }
.delay-300 { animation-delay: 0.30s; }
.delay-400 { animation-delay: 0.40s; }
.delay-500 { animation-delay: 0.50s; }
.delay-600 { animation-delay: 0.60s; }
.delay-700 { animation-delay: 0.70s; }
.delay-800 { animation-delay: 0.80s; }
.delay-900 { animation-delay: 0.90s; }
.delay-1000{ animation-delay: 1.00s; }

/* Shimmer skeleton */
.skeleton {
  background: linear-gradient(90deg,
    var(--elevated) 0%,
    var(--surface) 50%,
    var(--elevated) 100%
  );
  background-size: 200% 100%;
  animation: shimmer 1.8s ease-in-out infinite;
  border-radius: var(--r3);
}

/* Progress bar animated fill */
.progress-fill-animated {
  background: linear-gradient(90deg,
    #00F2FE 0%,
    #4FACFE 50%,
    #00F2FE 100%
  );
  background-size: 200% 100%;
  animation: progressFlow 1.5s linear infinite;
}

/* AI processing animation */
.anim-ai-think {
  animation: aiThink 1.8s ease-in-out infinite;
}

/* Dot loader */
.dot-loader {
  display: flex;
  gap: 6px;
  align-items: center;
}
.dot-loader span {
  width: 6px; height: 6px;
  border-radius: 50%;
  background: var(--accent-primary);
  animation: dotBounce 1.4s ease-in-out infinite;
}
.dot-loader span:nth-child(2) { animation-delay: 0.16s; }
.dot-loader span:nth-child(3) { animation-delay: 0.32s; }

/* ── Loading Screen ────────────────────────────────────────────── */

#loading-screen {
  position: fixed;
  inset: 0;
  background: var(--void);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  z-index: var(--z-loading);
  transition: opacity 0.6s var(--ease-out);
}
#loading-screen.fade-out {
  opacity: 0;
  pointer-events: none;
}

.loading-logo-wrap {
  width: 96px;
  height: 96px;
  margin-bottom: var(--s8);
  position: relative;
}
.loading-logo-wrap::before {
  content: '';
  position: absolute;
  inset: -12px;
  border: 2px solid transparent;
  border-top-color: var(--accent-primary);
  border-radius: 50%;
  animation: spin 1.2s linear infinite;
}
.loading-logo-wrap::after {
  content: '';
  position: absolute;
  inset: -20px;
  border: 1px solid transparent;
  border-bottom-color: rgba(79,172,254,0.5);
  border-radius: 50%;
  animation: spin 2.5s linear infinite reverse;
}
.loading-logo-img {
  width: 96px;
  height: 96px;
  animation: pulse 2s ease-in-out infinite;
}

.loading-bar-track {
  width: 220px;
  height: 3px;
  background: var(--raised);
  border-radius: var(--rfull);
  overflow: hidden;
  margin: var(--s4) 0;
}
.loading-bar-fill {
  height: 100%;
  border-radius: var(--rfull);
  background: var(--grad-primary);
  box-shadow: var(--glow-sm-cyan);
  width: 0%;
  animation: lineGrow 2.2s var(--ease-out) forwards;
}

.loading-text {
  font-size: 12px;
  font-weight: 600;
  color: var(--text-muted);
  letter-spacing: 3px;
  text-transform: uppercase;
  animation: pulse 2s ease-in-out infinite;
}

/* ── Page Background Atmosphere ────────────────────────────────── */

.bg-atmosphere {
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 0;
  overflow: hidden;
}

.bg-atmosphere::before {
  content: '';
  position: absolute;
  width: 600px; height: 600px;
  top: -200px; left: -100px;
  background: radial-gradient(circle, rgba(0,242,254,0.04) 0%, transparent 70%);
  animation: orbFloat 15s ease-in-out infinite;
}

.bg-atmosphere::after {
  content: '';
  position: absolute;
  width: 500px; height: 500px;
  bottom: -150px; right: -100px;
  background: radial-gradient(circle, rgba(79,172,254,0.03) 0%, transparent 70%);
  animation: orbFloat 20s ease-in-out infinite reverse;
}

.bg-forge-orb {
  position: absolute;
  width: 400px; height: 400px;
  top: 40%; right: 20%;
  background: radial-gradient(circle, rgba(255,107,53,0.025) 0%, transparent 70%);
  animation: orbFloat 18s ease-in-out infinite 5s;
}

/* ── Stars ─────────────────────────────────────────────────────── */

.stars-canvas {
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 0;
  opacity: 0.6;
}

/* ── Charts Entrance ───────────────────────────────────────────── */

.chart-container {
  opacity: 0;
  transform: translateY(10px);
  transition: opacity 0.6s var(--ease-out), transform 0.6s var(--ease-out);
}
.chart-container.visible {
  opacity: 1;
  transform: translateY(0);
}

/* ── Hover Lift Variants ───────────────────────────────────────── */

.hover-lift {
  transition: transform var(--t-spring), box-shadow var(--t-base);
}
.hover-lift:hover { transform: translateY(-4px); box-shadow: var(--shadow-xl); }

.hover-lift-sm:hover  { transform: translateY(-2px); }
.hover-lift-lg:hover  { transform: translateY(-6px); }

.hover-scale:hover    { transform: scale(1.03); }
.hover-scale-sm:hover { transform: scale(1.015); }

/* ── Click Ripple ──────────────────────────────────────────────── */

.ripple-parent { position: relative; overflow: hidden; }
.ripple-parent .ripple {
  position: absolute;
  border-radius: 50%;
  transform: scale(0);
  background: rgba(0,242,254,0.25);
  animation: rippleEffect 0.6s linear;
  pointer-events: none;
}

@keyframes rippleEffect {
  to { transform: scale(4); opacity: 0; }
}

/* ── Download Progress Glow ────────────────────────────────────── */

.dl-progress-bar {
  height: 4px;
  border-radius: var(--rfull);
  background: var(--grad-primary);
  background-size: 200% 100%;
  animation: progressFlow 1.2s linear infinite;
  box-shadow: var(--glow-sm-cyan);
  transition: width 0.3s var(--ease-out);
}

/* ── Notification Shake ────────────────────────────────────────── */

.shake { animation: shake 0.4s ease; }

/* ── Confetti Pop (success) ────────────────────────────────────── */

@keyframes confettiPop {
  0%   { opacity: 1; transform: scale(0) translateY(0); }
  60%  { opacity: 1; transform: scale(1.2) translateY(-20px); }
  100% { opacity: 0; transform: scale(0.8) translateY(-40px); }
}

/* ── Scanline Overlay (retro-futuristic) ───────────────────────── */

.scanlines::after {
  content: '';
  position: absolute;
  inset: 0;
  background: repeating-linear-gradient(
    0deg,
    transparent,
    transparent 2px,
    rgba(0,0,0,0.05) 2px,
    rgba(0,0,0,0.05) 4px
  );
  pointer-events: none;
  border-radius: inherit;
}