/* ==========================================================================
   ticker.css — the running band of brand promises between hero and body.
   Two identical tracks slide continuously; the second covers the seam.
   ========================================================================== */

.ticker {
  position: relative;
  overflow: hidden;
  border-block: 1px solid var(--line);
  background: var(--bg);
  padding-block: var(--s-4);
  --ticker-speed: 46s;
}

.ticker__track {
  display: flex;
  width: max-content;
  animation: slide-x var(--ticker-speed) linear infinite;
}

.ticker:hover .ticker__track { animation-play-state: paused; }

.ticker__group {
  display: flex;
  align-items: center;
  flex: none;
}

.ticker__item {
  display: inline-flex;
  align-items: center;
  gap: var(--s-5);
  padding-inline: var(--s-5);
  font-family: var(--f-mono);
  font-size: var(--fs-xs);
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--fg-dim);
  white-space: nowrap;
}

.ticker__item i {
  width: 5px; height: 5px;
  border-radius: 50%;
  background: var(--c-kunyit);
  flex: none;
}

/* Fade the band into the section edges. */
.ticker::before,
.ticker::after {
  content: '';
  position: absolute;
  top: 0; bottom: 0;
  width: clamp(40px, 8vw, 120px);
  z-index: 2;
  pointer-events: none;
}
.ticker::before { left: 0;  background: linear-gradient(90deg, var(--bg), transparent); }
.ticker::after  { right: 0; background: linear-gradient(270deg, var(--bg), transparent); }