/* ================================================================
   SINGULARITY RACE — Animations & Keyframes
   ================================================================ */

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

/* ---- Shimmer on hero title gradient ---- */
@keyframes shimmer-text {
  0%   { background-position: 100% center; }
  100% { background-position: -100% center; }
}

/* ---- Metallic light sweep on gold title ---- */
@keyframes shimmer-gold {
  0%   { background-position: 0% center; }
  100% { background-position: 100% center; }
}

/* ---- Scroll chevron bounce ---- */
@keyframes chevron-bounce {
  0%, 100% { transform: translateY(0); }
  50%       { transform: translateY(7px); }
}

/* ---- Status dot blink ---- */
@keyframes dot-blink {
  0%, 100% { opacity: 1; }
  50%       { opacity: 0.2; }
}

/* ---- Nav node ring pulse ---- */
@keyframes ring-expand {
  0%   { transform: scale(1);   opacity: 0.6; }
  100% { transform: scale(2.4); opacity: 0;   }
}

/* ---- YOU ARE HERE banner glow ---- */
@keyframes yah-glow {
  0%, 100% {
    box-shadow: 0 0 8px rgba(0,255,136,0.08);
    border-color: rgba(0,255,136,0.35);
  }
  50% {
    box-shadow: 0 0 20px rgba(0,255,136,0.18);
    border-color: rgba(0,255,136,0.65);
  }
}

/* ---- LIVE stock card pulse ---- */
@keyframes live-pulse {
  0%, 100% { box-shadow: 0 4px 16px rgba(0,0,0,0.3), 0 0 10px rgba(0,255,136,0.06); }
  50%       { box-shadow: 0 4px 16px rgba(0,0,0,0.3), 0 0 22px rgba(0,255,136,0.14); }
}

/* ---- Approaching phase card orbit ---- */
@keyframes approach-orbit {
  0%, 100% { border-color: rgba(255,154,60,0.14); }
  50%       { border-color: rgba(255,154,60,0.32); }
}
.phase-wrap.approaching .phase-card { animation: approach-orbit 4s ease-in-out infinite; }

/* ---- Singularity halo breathe ---- */
@keyframes halo-breathe {
  0%, 100% { transform: translate(-50%,-50%) scale(1);   opacity: 0.7; }
  50%       { transform: translate(-50%,-50%) scale(1.18); opacity: 0.35; }
}

/* ---- Starfield star twinkle ---- */
@keyframes twinkle {
  0%, 100% { opacity: var(--base-opacity, 0.4); }
  50%       { opacity: var(--peak-opacity, 0.9); }
}

/* ---- Hero canvas particle drift (subtle) ---- */
@keyframes particle-drift {
  0%   { transform: translateY(0) translateX(0); }
  33%  { transform: translateY(-6px) translateX(4px); }
  66%  { transform: translateY(4px) translateX(-4px); }
  100% { transform: translateY(0) translateX(0); }
}

/* ---- Phase entrance (CSS fallback; GSAP drives actual animation) ---- */
@keyframes phase-enter {
  from { opacity: 0; transform: translateY(36px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* ---- Spine line draw-down animation (on page load) ---- */
@keyframes spine-draw {
  from { transform: scaleY(0); transform-origin: top; }
  to   { transform: scaleY(1); transform-origin: top; }
}

/* ---- Singularity burst (for the title) ---- */
@keyframes burst-in {
  0%   { letter-spacing: 0em; opacity: 0; }
  60%  { letter-spacing: 0.15em; }
  100% { letter-spacing: 0.1em; opacity: 1; }
}

/* ---- ETF chip hover shimmer ---- */
.etf-chip:hover {
  background: rgba(0,229,204,0.1);
  border-color: rgba(0,229,204,0.45);
  box-shadow: 0 0 8px rgba(0,229,204,0.12);
  transition: all 0.2s ease;
}

/* ---- Industry tag hover ---- */
.ind-tag:hover {
  background: rgba(0,229,204,0.1);
  border-color: rgba(0,229,204,0.45);
  box-shadow: 0 0 8px rgba(0,229,204,0.12);
  transition: all 0.2s ease;
}

/* ---- Nav node hover glow — colour matches each dot's status ---- */
.nav-node.completed:hover .nav-dot {
  box-shadow: 0 0 10px rgba(0,229,204,0.30);
  border-color: rgba(0,229,204,0.65);
  color: var(--blue);
}
.nav-node.active:hover .nav-dot {
  box-shadow: 0 0 12px rgba(0,255,136,0.55);
  border-color: var(--green);
  color: var(--green);
}
.nav-node.approaching:hover .nav-dot,
.nav-node.upcoming:hover .nav-dot {
  box-shadow: 0 0 10px rgba(255,154,60,0.45);
  border-color: rgba(255,154,60,0.75);
  color: var(--orange);
}
.nav-node.destination:hover .nav-dot {
  box-shadow: 0 0 10px rgba(196,162,101,0.45);
  border-color: rgba(196,162,101,0.75);
  color: var(--gold);
}

/* ---- Spine dot glow flicker for approaching phases ---- */
@keyframes dot-flicker {
  0%, 90%, 100% { opacity: 1; }
  92%            { opacity: 0.6; }
  94%            { opacity: 1; }
  96%            { opacity: 0.7; }
}
.phase-wrap.approaching .spine-dot { animation: dot-flicker 6s ease-in-out infinite; }

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