/* Znak OVTIS: pierścień z niebieską kropką na obwodzie. */
.brand__mark { width: 26px; height: 26px; background: none; border-radius: 0; flex: none; }
.brand__mark .ring { fill: none; stroke: var(--ink); stroke-width: 13; }
.brand__mark .dot { fill: var(--blue); }

/* Koniec intro: ekran zwija się do kropki znaku. Kropka zostaje i ciągnie linię przez sekcje.
   --kx to pozycja linii w poziomie, liczona w kropka.js z marginesu .wrap. */
.intro__pin { --kx: 24px; }
/* Pierwszy ekran: duży napis OVTIS z kropką na końcu, na pełnym tle zasłaniającym intro.
   Kropka w napisie służy tylko do pomiaru; widać ją jako koło .bigfill, które leci w kulę punktów (kropka.js). */
.bigmark { position: absolute; inset: 0; z-index: 5; display: grid; place-items: center; background: var(--paper); pointer-events: none; }
.bigmark__word { margin: 0; font-size: min(22vw, 30vh); font-weight: 700; line-height: 1; letter-spacing: 0; font-kerning: none; color: var(--ink); }
/* Litery stoją osobno; odstępy między nimi wyrównuje kropka.js (evenGaps). */
.bigmark__l { display: inline-block; }
.bigmark__dot { display: inline-block; width: 0.2em; height: 0.2em; margin-left: 0.06em; border-radius: 50%; visibility: hidden; }
.bigfill { position: absolute; inset: 0; z-index: 6; background: var(--blue); pointer-events: none; clip-path: circle(0 at 50% 50%); }

.trasa { position: absolute; top: 0; left: 0; width: 0; height: 0; z-index: 1; pointer-events: none; }
/* Kręta ścieżka kropki, rysowana w kropka.js; .trasa__fill odsłania się do wysokości kropki. */
.trasa__svg { position: absolute; top: 0; left: 0; max-width: none; overflow: visible; }
.trasa__track { fill: none; stroke: var(--line); stroke-width: 2; }
.trasa__fill { fill: none; stroke: var(--blue); stroke-width: 2.5; stroke-linecap: round; }
.trasa__node { position: absolute; width: 12px; height: 12px; margin: -6px 0 0 -6px; border-radius: 50%; background: var(--paper); box-shadow: inset 0 0 0 2px var(--line-hi); transition: background .35s, box-shadow .35s, scale .35s cubic-bezier(.34, 1.56, .64, 1); }
.trasa__node.is-on { background: var(--blue); box-shadow: 0 0 0 5px rgba(47, 107, 255, .22); scale: 1.15; }
.trasa__head { position: fixed; top: 50%; transform-origin: 50% 50%; width: 16px; height: 16px; margin: -8px 0 0 -8px; border-radius: 50%; background: var(--blue); box-shadow: 0 0 0 6px rgba(47, 107, 255, .18), 0 0 24px 4px rgba(47, 107, 255, .55); z-index: 1; pointer-events: none; opacity: 0; }
.trasa__head.is-on { opacity: 1; }
@media (prefers-reduced-motion: reduce) { .trasa__node { transition: none; } }
/* Linia i kropka jadą pod treścią: każdy .wrap leży nad nimi, tła sekcji pod nimi.
   W intro tekst hero i aktów leży też nad kołem .bigfill. */
main .wrap { position: relative; z-index: 2; }
.intro__hero, .intro__acts { z-index: 7; }