/* ============================================================
   06 · COMPONENTS · Strip
   Auto-scrolling marquee band (dark and accent variants).
   ============================================================ */

.c-strip {
  overflow: hidden;
  padding-block: 28px;
  position: relative;
  z-index: 1;
  border-top: 1px solid var(--border);
  border-bottom: 1px solid var(--border);
  background: var(--surface);
}

.c-strip--dark {
  background: var(--ink);
  color: var(--bg);
  border-color: var(--ink);
}

/* Note: `--lime` modifier kept as the HTML hook name (it lives inside Bricks
   Code elements); the fill is the brand accent (blue). */
.c-strip--lime {
  background: var(--accent);
  color: var(--on-accent);
  border-color: var(--accent);
}

.c-strip__track {
  display: flex;
  gap: 56px;
  width: max-content;
  animation: ch-track 36s linear infinite;
  align-items: center;
  font-family: var(--font-display);
  font-weight: 800;
  font-size: clamp(36px, 5vw, 64px);
  letter-spacing: -0.025em;
  white-space: nowrap;
}

.c-strip--reverse .c-strip__track {
  animation-direction: reverse;
  animation-duration: 48s;
}

.c-strip:hover .c-strip__track { animation-play-state: paused; }

.c-strip__star { color: var(--accent-deep); }
.c-strip--dark .c-strip__star { color: var(--accent); }
.c-strip--lime .c-strip__star { color: var(--on-accent); }

.c-strip__dim {
  color: transparent;
  -webkit-text-stroke: 1.2px currentColor;
}