/* ═══════════════════════════════════════════════════════════
   animations.css
   ═══════════════════════════════════════════════════════════ */

/* ── Flash de preço ───────────────────────────────────────── */
@keyframes flashUp {
  0% {
    color: var(--text);
  }

  30% {
    color: var(--up);
    text-shadow: 0 0 8px var(--up);
  }

  100% {
    color: var(--text);
  }
}

@keyframes flashDown {
  0% {
    color: var(--text);
  }

  30% {
    color: var(--down);
    text-shadow: 0 0 8px var(--down);
  }

  100% {
    color: var(--text);
  }
}

/* ── Skeleton loading ─────────────────────────────────────── */
@keyframes skeleton {
  0% {
    background-position: 200% 0;
  }

  100% {
    background-position: -200% 0;
  }
}

/* ── Slide in (cards) ─────────────────────────────────────── */
@keyframes slideIn {
  from {
    opacity: 0;
    transform: translateY(12px);
  }

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


/* ── Pulse do dot de conexão ──────────────────────────────── */
@keyframes pulse {

  0%,
  100% {
    opacity: 1;
  }

  50% {
    opacity: 0.4;
  }
}

.connection-status--connected .connection-status__dot {
  animation: pulse 2s infinite;
}

/* ── Fade in geral ────────────────────────────────────────── */
@keyframes fadeIn {
  from {
    opacity: 0;
  }

  to {
    opacity: 1;
  }
}

/* ── Hacker: scanlines ────────────────────────────────────── */
@keyframes scanline {
  0% {
    transform: translateY(-100%);
  }

  100% {
    transform: translateY(100vh);
  }
}

/* ── Hacker: glitch ───────────────────────────────────────── */
@keyframes glitch {
  0% {
    clip-path: inset(40% 0 61% 0);
    transform: translate(-2px, 0);
  }

  20% {
    clip-path: inset(92% 0 1% 0);
    transform: translate(2px, 0);
  }

  40% {
    clip-path: inset(43% 0 1% 0);
    transform: translate(0, 0);
  }

  60% {
    clip-path: inset(25% 0 58% 0);
    transform: translate(2px, 0);
  }

  80% {
    clip-path: inset(54% 0 7% 0);
    transform: translate(-2px, 0);
  }

  100% {
    clip-path: inset(58% 0 43% 0);
    transform: translate(0, 0);
  }
}

/* ── Hacker: typewriter cursor ────────────────────────────── */
@keyframes blink {

  0%,
  100% {
    opacity: 1;
  }

  50% {
    opacity: 0;
  }
}

/* ── Reduced motion ───────────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {

  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    transition-duration: 0.01ms !important;
  }
}

/* ── Card appear ──────────────────────────────────────────── */
@keyframes cardAppear {
  from {
    opacity: 0;
    transform: translateY(10px) scale(0.98);
  }

  to {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}

.coin-card.card-loaded {
  animation: cardAppear 0.35s cubic-bezier(0.25, 0.46, 0.45, 0.94) both;
}

.coin-card.card-loaded:nth-child(1) {
  animation-delay: 0.00s;
}

.coin-card.card-loaded:nth-child(2) {
  animation-delay: 0.05s;
}

.coin-card.card-loaded:nth-child(3) {
  animation-delay: 0.08s;
}

.coin-card.card-loaded:nth-child(4) {
  animation-delay: 0.11s;
}

.coin-card.card-loaded:nth-child(5) {
  animation-delay: 0.14s;
}

.coin-card.card-loaded:nth-child(6) {
  animation-delay: 0.17s;
}

.coin-card.card-loaded:nth-child(7) {
  animation-delay: 0.20s;
}

.coin-card.card-loaded:nth-child(8) {
  animation-delay: 0.23s;
}

.coin-card.card-loaded:nth-child(9) {
  animation-delay: 0.26s;
}

.coin-card.card-loaded:nth-child(10) {
  animation-delay: 0.29s;
}

/* ── Ticker scroll ────────────────────────────────────────── */
@keyframes tickerScroll {
  0% {
    transform: translateX(0);
  }

  100% {
    transform: translateX(-50%);
  }
}

/* ── Hacker animations ────────────────────────────────────── */
@keyframes hackerScan {
  0% {
    transform: translateY(-4px);
  }

  100% {
    transform: translateY(100vh);
  }
}

@keyframes hackerBlink {

  0%,
  100% {
    opacity: 0.8;
  }

  50% {
    opacity: 0;
  }
}

@keyframes hackerGlitch {
  0% {
    transform: translate(0);
  }

  25% {
    transform: translate(-2px, 1px);
  }

  50% {
    transform: translate(2px, -1px);
  }

  75% {
    transform: translate(-1px, 2px);
  }

  100% {
    transform: translate(1px, -2px);
  }
}