/* ============================================================
   np-ticker.css — real-time Bio Protocol token ticker.

   Styled to match the ORIGINAL Figma marquee, measured as:
     - yellow band  rgb(255,255,119) = #FFFF77
     - 40px tall
     - text: black, 20px, weight 400, letter-spacing 0.04px,
       no uppercase, no underline, ABC Favorit (self-hosted brand face;
       Outfit fallback, same stack as np-nav)
     - scroll: 52.5s linear infinite, left-to-right normal direction
   Mounted by js/np-ticker.js into <div id="np-ticker">.
   ============================================================ */

#np-ticker {
  width: 100%;
  height: 40px;
  background: #FFFF77;                 /* original band colour */
  overflow: hidden;
  display: flex;
  align-items: center;
  position: relative;
  /* the marquee sits directly under the hero video, full-bleed */
}

#np-ticker[hidden] { display: none; }

/* the moving track holds N duplicated strips laid end to end */
.np-ticker__track {
  display: flex;
  flex-wrap: nowrap;
  align-items: center;
  width: max-content;
  will-change: transform;
  animation: np-ticker-scroll 52.5s linear infinite;
}

/* pause on hover — a nice affordance, matches the original's pause-on-hover */
#np-ticker:hover .np-ticker__track { animation-play-state: paused; }

@media (prefers-reduced-motion: reduce) {
  .np-ticker__track { animation-duration: 180s; }  /* still moves, but slow */
}

.np-ticker__strip {
  display: flex;
  flex-wrap: nowrap;
  align-items: center;
  margin: 0;
  padding: 0;
  list-style: none;
}

.np-ticker__item {
  display: inline-flex;
  align-items: baseline;
  gap: 8px;
  padding: 0 28px;                      /* spacing between tokens */
  white-space: nowrap;
  font-family: 'ABC Favorit', 'Outfit', system-ui, -apple-system, sans-serif;
  font-size: 20px;
  font-weight: 400;
  letter-spacing: 0.04px;
  line-height: 1;
  color: #000;
}

.np-ticker__sym {
  color: #000;
  text-decoration: none;
  font-weight: 400;
}
.np-ticker__sym:hover { text-decoration: underline; }

.np-ticker__price { color: #000; }

/* up/down colour cue — subtle, on-brand (Neophyte green / red) */
.np-ticker__pct { color: #000; }
.np-ticker__pct.is-up   { color: #178a1f; }   /* darker green for legibility on yellow */
.np-ticker__pct.is-down { color: #CA1E08; }   /* brand red */

@keyframes np-ticker-scroll {
  from { transform: translateX(0); }
  /* one strip = 1/N of the track; N duplicated strips means -100%/N
     returns to an identical frame → seamless. MIN_LOOPS=3 in JS. */
  to   { transform: translateX(calc(-100% / 3)); }
}