/* „Coś dzieje się samo” poza nagłówkiem: pasek lokalizacji pod skalą, licznik metrażu,
   linie nad sekcjami rysowane od lewej. Pokaz w nagłówku: css/hero.css, tło strony: css/backdrop.css. */

/* ---------- pasek lokalizacji pod skalą ---------- */
.ticker { margin-top: 18px; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.ticker__track { display: flex; overflow-x: auto; scrollbar-width: none; }
.ticker__track::-webkit-scrollbar { display: none; }
.ticker__item {
    flex: 0 0 200px; display: grid; gap: 2px; padding: 12px 16px 12px 0; min-height: 44px;
    font-family: var(--mono); font-size: 11px; letter-spacing: 0.12em; text-transform: uppercase;
}
.ticker__item span { color: var(--ink-strong); }
.ticker__item small { font-size: 10px; color: var(--muted); }
.ticker__item::before { content: "+ "; color: var(--muted); }
@media (hover: hover) and (pointer: fine) {
    .ticker__item:hover span { text-decoration: underline; text-underline-offset: 4px; }
}
.scale__count { font-weight: inherit; font-variant-numeric: tabular-nums; }

/* ---------- bębny cyfr (js/counters.js) ----------
   Okienko na jedną cyfrę, w środku wstęga 0–9 przesuwana samym transformem. `overflow: clip` (nie hidden):
   okienko nie przestawia linii bazowej, więc cyfry stoją równo z tekstem obok („ / 06”, „m²”). */
.roll-line { --roll-h: 1.15em; display: inline-flex; line-height: var(--roll-h); font-variant-numeric: tabular-nums; }
.roll { display: block; height: var(--roll-h); overflow: clip; }
.roll__strip {
    display: flex; flex-direction: column;
    transform: translateY(calc(var(--roll-index, 0) * -1 * var(--roll-h)));
}
.roll__strip > span { display: block; height: var(--roll-h); text-align: center; }
.roll__text { white-space: pre; }

/* ---------- linia nad sekcją rysuje się od lewej przy odsłonie ---------- */
.js-animations .band--rule { border-top-color: transparent; position: relative; }
.js-animations .band--rule::before {
    content: ""; position: absolute; left: 0; right: 0; top: -1px; height: 1px; background: var(--line);
    transform: scaleX(0); transform-origin: left; transition: transform 1.2s cubic-bezier(0.22, 1, 0.36, 1);
}
.js-animations .band--rule.is-in::before { transform: scaleX(1); }
/* Wejście przejściem między stronami (animations.css → vt-entry): linia stoi narysowana od pierwszej klatki. */
.vt-entry.js-animations .band--rule::before { transform: scaleX(1); transition: none; }

@media (min-width: 900px) {
    .ticker__item { flex-basis: 240px; }
}