/* df-flow.dev — animacje (§4): ticker stacku i scroll-reveal */

/* ---------- Ticker stacku ---------- */

#stack {
  background: var(--bg);
  border-bottom: 1px solid var(--border);
}

.ticker {
  overflow: hidden;
}

.ticker__track {
  animation: ticker-scroll 45s linear infinite;
  display: flex;
  width: max-content;
}

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

.ticker__group {
  align-items: baseline;
  display: flex;
  gap: var(--space-3);
  padding-block: var(--space-2);
  padding-right: var(--space-3);
}

.ticker__group span {
  color: var(--ink-soft);
  font-family: var(--font-mono);
  font-size: 0.8125rem;
  letter-spacing: 0.05em;
  white-space: nowrap;
}

.ticker__group .ticker__sep {
  color: var(--leaf);
}

@keyframes ticker-scroll {
  from {
    transform: translateX(0);
  }

  to {
    transform: translateX(-50%);
  }
}

/* ---------- Scroll-reveal (klasy nadaje js/main.js) ---------- */

.reveal {
  opacity: 0;
  transform: translateY(16px);
  transition: opacity 0.55s ease, transform 0.55s ease;
  transition-delay: var(--reveal-delay, 0s);
}

.reveal.is-visible {
  opacity: 1;
  transform: translateY(0);
}

/* ---------- prefers-reduced-motion ---------- */

@media (prefers-reduced-motion: reduce) {
  .ticker__track {
    animation: none;
  }
}