:root{
  /* Theme (match your site) */
  --ribbon-bg: #111529;
  --ribbon-ink: #ffffff;
  --ribbon-accent: #4BC4C3;

  /* Layout + motion */
  --ribbon-height: 56px;
  --ribbon-gap: 150px;
  --ribbon-speed: 37s;
}

/* Base ribbon */
.ticker{
  position: relative;
  background: var(--ribbon-bg);
  color: var(--ribbon-ink);
  height: var(--ribbon-height);
  display: grid;
  align-items: center;
  overflow: hidden;
  border-top: 1px solid rgba(255,255,255,.08);
}

/* Sticky at viewport bottom until it reaches the footer */
.ticker--sticky{
  position: sticky;
  bottom: 0;                /* hug the bottom while scrolling */
  z-index: 10;              /* above main content, below fixed overlays */
}

/* The viewport & animated track */
.ticker__viewport{
  position: relative;
  overflow: hidden;
  width: 100%;
  height: 100%;
}
.ticker__track{
  display: inline-flex;
  align-items: center;
  gap: var(--ribbon-gap);
  white-space: nowrap;
  will-change: transform;
  animation: ticker-scroll var(--ribbon-speed) linear infinite;
  padding-inline: max(16px, 2vw);
  padding-top: 15px;
  padding-bottom: 5px;
}

/* Items & separators */
.ticker__item{
  font-weight: 800;
  letter-spacing: .5px;
  font-size: clamp(14px, 1.5vw, 18px);
  text-decoration: none;
  text-transform: capitalize;
  color: #08C392;
  font: system-ui,-apple-system,Segoe UI,Roboto,Arial;
}

.figure_num{
  color: gold;
  font-size: clamp(14px, 1.5vw, 88px);
}
.ticker__sep{
  color: red;
  opacity: .9;
}

/* Edge fades for smooth entry/exit */
.ticker__fade{
  position: absolute;
  top: 0; bottom: 0;
  width: clamp(24px, 6vw, 120px);
  pointer-events: none;
  z-index: 1;
}
.ticker__fade--left{
  left: 0;
  background: linear-gradient(90deg, var(--ribbon-bg) 0%, transparent 80%);
}
.ticker__fade--right{
  right: 0;
  background: linear-gradient(270deg, var(--ribbon-bg) 0%, transparent 80%);
}

/* Pause on hover */
.ticker:hover .ticker__track{
  animation-play-state: paused;
}

/* Seamless loop (JS duplicates content so -50% is one full cycle) */
@keyframes ticker-scroll{
  from { transform: translate3d(0,0,0); }
  to   { transform: translate3d(-50%,0,0); }
}

/* Respect users who prefer reduced motion */
@media (prefers-reduced-motion: reduce){
  .ticker__track{
    animation: none;
    transform: none;
  }
}