/* ============================================
   EAF — Animations (Tech Edition)
   ============================================ */

/* Ticker scroll — adjusts speed via animation-duration on .ticker-track */
@keyframes ticker-scroll {
  0%   { transform: translateX(0); }
  100% { transform: translateX(-50%); }  /* 50% because we have 2 identical strips */
}

/* Price flash on WebSocket update */
@keyframes price-flash-up {
  0%   { color: #3DD6A0; }
  100% { color: #EDEDF0; }
}
@keyframes price-flash-down {
  0%   { color: #E05252; }
  100% { color: #EDEDF0; }
}
.flash-up   { animation: price-flash-up   0.8s ease forwards; }
.flash-down { animation: price-flash-down 0.8s ease forwards; }

@keyframes ticker-dot-pulse {
  0%, 100% { opacity: 1;   transform: scale(1);    }
  50%       { opacity: 0.4; transform: scale(0.75); }
}

@keyframes scroll-pulse {
  0%, 100% { opacity: 1; transform: scaleY(1); transform-origin: top; }
  50%       { opacity: 0.3; transform: scaleY(0.6); }
}

@keyframes fade-in-up {
  from { opacity: 0; transform: translateY(16px); }
  to   { opacity: 1; transform: translateY(0); }
}

@keyframes fade-in-down {
  from { opacity: 0; transform: translateY(-12px); }
  to   { opacity: 1; transform: translateY(0); }
}

@keyframes fade-in {
  from { opacity: 0; }
  to   { opacity: 1; }
}

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

/* Cursor blink for terminal feel */
@keyframes cursor-blink {
  0%, 100% { opacity: 1; }
  50%       { opacity: 0; }
}

.cursor-blink::after {
  content: '_';
  color: var(--color-gold);
  animation: cursor-blink 1.1s step-end infinite;
}

/* --- Hero staggered entrance --- */
.navbar {
  animation: fade-in-down 0.5s var(--ease-out) both;
}

.hero-eyebrow { animation: fade-in-up 0.6s var(--ease-out) 0.1s  both; }
.hero-name    { animation: fade-in-up 0.7s var(--ease-out) 0.2s  both; }
.hero-tagline { animation: fade-in-up 0.7s var(--ease-out) 0.35s both; }
.hero-badges  { animation: fade-in-up 0.7s var(--ease-out) 0.48s both; }
.hero-cta     { animation: fade-in-up 0.7s var(--ease-out) 0.6s  both; }
.hero-stack   { animation: fade-in   0.8s var(--ease-out) 0.75s both; }

/* --- Reduce motion --- */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }

  html { scroll-behavior: auto; }

  [data-aos] {
    opacity: 1 !important;
    transform: none !important;
  }
}