/* ═══════════════════════════════════════
   CRYPTOCALCX — ANIMATIONS.CSS
   ═══════════════════════════════════════ */

/* ── REVEAL ON SCROLL ── */
.reveal {
  opacity: 0;
  transform: translateY(28px);
  transition: opacity .7s ease, transform .7s ease;
}
.reveal.visible {
  opacity: 1;
  transform: translateY(0);
}

/* ── STAGGER CHILDREN ── */
.reveal:nth-child(2) { transition-delay: .1s; }
.reveal:nth-child(3) { transition-delay: .2s; }
.reveal:nth-child(4) { transition-delay: .3s; }

/* ── GLOW PULSE ── */
@keyframes glow-pulse {
  0%, 100% { box-shadow: 0 0 8px rgba(0,212,255,.2); }
  50%       { box-shadow: 0 0 24px rgba(0,212,255,.6); }
}
.glow { animation: glow-pulse 3s ease-in-out infinite; }

/* ── NUMBER COUNTER ── */
@keyframes count-up {
  from { opacity: 0; transform: translateY(8px); }
  to   { opacity: 1; transform: translateY(0); }
}
.count-anim { animation: count-up .4s ease forwards; }

/* ── FLOATING COINS (background) ── */
.floating-coin {
  position: fixed;
  opacity: 0.04;
  filter: blur(2px);
  pointer-events: none;
  z-index: -1;
  animation: float-coin 24s ease-in-out infinite;
}
.floating-coin.btc { width: 520px; top: -80px; right: -100px; animation-duration: 22s; }
.floating-coin.eth { width: 420px; left: -80px; top: 35%; animation-duration: 28s; animation-delay: -6s; }
.floating-coin.sol { width: 300px; right: 15%; bottom: -60px; animation-duration: 20s; animation-delay: -12s; }

@keyframes float-coin {
  0%   { transform: translateY(0px) rotate(0deg); }
  33%  { transform: translateY(-24px) rotate(120deg); }
  66%  { transform: translateY(12px) rotate(240deg); }
  100% { transform: translateY(0px) rotate(360deg); }
}

/* ── CARD HOVER ── */
.card {
  transition: border-color .25s, box-shadow .25s;
}
.card:hover {
  border-color: rgba(0,212,255,.2);
  box-shadow: 0 0 30px rgba(0,212,255,.04);
}

/* ── BUTTON RIPPLE ── */
.calc-btn:active, .btn-primary:active {
  transform: scale(0.98);
}

/* ── SEO SECTION SLIDE ── */
@keyframes slide-down {
  from { opacity:0; transform: translateY(-10px); }
  to   { opacity:1; transform: translateY(0); }
}
.seo-content.open {
  animation: slide-down .3s ease;
}

/* ── STAT NUMBER FLASH ── */
@keyframes flash {
  0%   { color: var(--blue); }
  100% { color: var(--text); }
}
.flash { animation: flash .5s ease; }