/* ====== ENTRY ANIMATIONS ====== */

/* Staggered fade-in for cards */
.fade-in {
  opacity: 0;
  transform: translateY(20px);
  animation: fadeInUp 600ms ease-out forwards;
}

.fade-in:nth-child(1) { animation-delay: 0ms; }
.fade-in:nth-child(2) { animation-delay: 80ms; }
.fade-in:nth-child(3) { animation-delay: 160ms; }
.fade-in:nth-child(4) { animation-delay: 240ms; }
.fade-in:nth-child(5) { animation-delay: 320ms; }
.fade-in:nth-child(6) { animation-delay: 400ms; }
.fade-in:nth-child(7) { animation-delay: 480ms; }
.fade-in:nth-child(8) { animation-delay: 560ms; }

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

/* Staggered for sections */
.section-fade {
  opacity: 0;
  transform: translateY(16px);
  animation: fadeInUp 500ms ease-out forwards;
}

.section-fade.delay-1 { animation-delay: 200ms; }
.section-fade.delay-2 { animation-delay: 350ms; }
.section-fade.delay-3 { animation-delay: 500ms; }
.section-fade.delay-4 { animation-delay: 650ms; }
.section-fade.delay-5 { animation-delay: 800ms; }
.section-fade.delay-6 { animation-delay: 950ms; }

/* ====== SHIMMER ====== */

@keyframes shimmer {
  0% { transform: translateX(-100%); }
  100% { transform: translateX(100%); }
}

/* ====== PULSE DANGER ====== */

@keyframes pulse-danger {
  0%, 100% { opacity: 1; transform: scaleX(1); }
  50% { opacity: 0.85; transform: scaleX(1.005); }
}

/* ====== SPARKLINE BAR GROW ====== */

.sparkline-bar {
  transform-origin: bottom;
  animation: barGrow 800ms cubic-bezier(0.34, 1.56, 0.64, 1) forwards;
  transform: scaleY(0);
}

@keyframes barGrow {
  to { transform: scaleY(1); }
}

/* Stagger bars */
.sparkline-bar:nth-child(1) { animation-delay: 400ms; }
.sparkline-bar:nth-child(2) { animation-delay: 430ms; }
.sparkline-bar:nth-child(3) { animation-delay: 460ms; }
.sparkline-bar:nth-child(4) { animation-delay: 490ms; }
.sparkline-bar:nth-child(5) { animation-delay: 520ms; }
.sparkline-bar:nth-child(6) { animation-delay: 550ms; }
.sparkline-bar:nth-child(7) { animation-delay: 580ms; }
.sparkline-bar:nth-child(8) { animation-delay: 610ms; }
.sparkline-bar:nth-child(9) { animation-delay: 640ms; }
.sparkline-bar:nth-child(10) { animation-delay: 670ms; }
.sparkline-bar:nth-child(11) { animation-delay: 700ms; }
.sparkline-bar:nth-child(12) { animation-delay: 730ms; }
.sparkline-bar:nth-child(13) { animation-delay: 760ms; }
.sparkline-bar:nth-child(14) { animation-delay: 790ms; }
.sparkline-bar:nth-child(15) { animation-delay: 820ms; }
.sparkline-bar:nth-child(16) { animation-delay: 850ms; }
.sparkline-bar:nth-child(17) { animation-delay: 880ms; }
.sparkline-bar:nth-child(18) { animation-delay: 910ms; }
.sparkline-bar:nth-child(19) { animation-delay: 940ms; }
.sparkline-bar:nth-child(20) { animation-delay: 970ms; }
.sparkline-bar:nth-child(21) { animation-delay: 1000ms; }
.sparkline-bar:nth-child(22) { animation-delay: 1030ms; }
.sparkline-bar:nth-child(23) { animation-delay: 1060ms; }
.sparkline-bar:nth-child(24) { animation-delay: 1090ms; }
.sparkline-bar:nth-child(25) { animation-delay: 1120ms; }
.sparkline-bar:nth-child(26) { animation-delay: 1150ms; }
.sparkline-bar:nth-child(27) { animation-delay: 1180ms; }
.sparkline-bar:nth-child(28) { animation-delay: 1210ms; }
.sparkline-bar:nth-child(29) { animation-delay: 1240ms; }
.sparkline-bar:nth-child(30) { animation-delay: 1270ms; }

/* ====== MICRO BOUNCE (copy button) ====== */

@keyframes bounce-micro {
  0% { transform: scale(1); }
  40% { transform: scale(1.15); }
  100% { transform: scale(1); }
}

/* ====== SHAKE (lock icon) ====== */

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

/* ====== TOAST ====== */

@keyframes toast-in {
  from {
    opacity: 0;
    transform: translateY(20px) scale(0.95);
  }
  to {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}

@keyframes toast-out {
  from {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
  to {
    opacity: 0;
    transform: translateY(-10px) scale(0.95);
  }
}

/* ====== TYPING CURSOR ====== */

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

.typing-cursor {
  display: inline-block;
  width: 2px;
  height: 1.1em;
  background: var(--color-accent);
  margin-left: 2px;
  vertical-align: text-bottom;
  animation: blink 530ms step-end infinite;
}

/* ====== GRADIENT ROTATE (upgrade button bg) ====== */

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

.btn-upgrade {
  background-size: 200% 200%;
  animation: gradient-shift 4s ease infinite;
}

/* ====== GLOW PULSE (upgrade button when free) ====== */

.upgrade-glow {
  animation: glow-pulse 2.5s ease-in-out infinite;
}

@keyframes glow-pulse {
  0%, 100% { box-shadow: 0 0 20px rgba(0,232,143,0.15); }
  50% { box-shadow: 0 0 40px rgba(0,232,143,0.35), 0 0 80px rgba(0,232,143,0.1); }
}

/* ====== STATUS DOT ====== */

.status-dot {
  display: inline-block;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--color-accent);
  box-shadow: 0 0 8px var(--color-accent);
  animation: status-pulse 2s ease-in-out infinite;
}

@keyframes status-pulse {
  0%, 100% { opacity: 1; box-shadow: 0 0 8px var(--color-accent); }
  50% { opacity: 0.7; box-shadow: 0 0 16px var(--color-accent); }
}

/* ====== LOGIN LOADING ====== */

.login-btn.loading {
  position: relative;
  color: transparent;
}

.login-btn.loading::after {
  content: '';
  position: absolute;
  width: 20px;
  height: 20px;
  border: 2px solid transparent;
  border-top-color: #0A0E1A;
  border-radius: 50%;
  animation: spin 600ms linear infinite;
}

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