/* /o-projekcie/: sekcja przewijania (sam CSS, scroll-driven animations) i bloki treści.
 * Sekcja ma 175svh, scena jest przyklejona przez dodatkowe 75svh: pytanie pasażera znika, znak „m”
 * rysuje się jak linia z przystankami, potem nazwa i zdanie. Bez obsługi animation-timeline albo przy
 * prefers-reduced-motion sekcja ma jeden ekran i od razu stan końcowy. Bez gradientów i poświat (zasady). */

.ab-scroll { position: relative; background: var(--hero); color: #fff; }
.ab-stage { display: grid; place-items: center; padding: 2.5rem 1rem 3rem; overflow: hidden; }
.ab-layer { grid-area: 1 / 1; width: 100%; max-width: 30rem; display: flex; flex-direction: column; align-items: center; text-align: center; }

/* Warstwa 1: pytanie i przykładowa tablica */
.ab-q { display: none; } /* stan końcowy bez animacji: od razu znak i nazwa */
.ab-ask { margin: 0 0 1.25rem; font-size: clamp(1.6rem, 6vw, 2.4rem); font-weight: 700; line-height: 1.2; }
.ab-board { width: 100%; background: #fff; color: #14181c; border-radius: 14px; padding: .75rem 1rem; text-align: left; }
.ab-board-t { margin: 0 0 .4rem; font-size: .8rem; color: #4d555e; }
.ab-board ul { list-style: none; margin: 0; padding: 0; }
.ab-board li { display: grid; grid-template-columns: 3rem 1fr auto; grid-template-rows: auto auto; column-gap: .6rem; align-items: center; padding: .45rem 0; border-top: 1px solid #dde2e7; }
.ab-board li:first-child { border-top: 0; }
.ab-board .badge { grid-row: span 2; justify-self: start; }
.ab-board b { font-size: 1.15rem; text-align: right; }
.ab-board small { grid-column: 2 / 4; font-size: .85rem; color: #4d555e; }
.ab-head { font-weight: 600; }
.ab-tram { background: #c0392b; color: #fff; } .ab-bus { background: #1f4e79; color: #fff; } .ab-metro { background: #0b57d0; color: #fff; }
.ab-hint { margin: 1rem 0 0; font-size: .85rem; color: var(--hero-muted); }

/* Warstwa 2: znak, nazwa, zdanie */
.ab-mark { width: clamp(7rem, 32vw, 10rem); height: auto; }
.ab-mark-line { fill: none; stroke: #fff; stroke-width: 5; stroke-linecap: round; stroke-linejoin: round; stroke-dasharray: 1; stroke-dashoffset: 0; }
.ab-stop { fill: var(--hero); stroke: #fff; stroke-width: 2.4; }
.ab-veh { fill: #ffb020; stroke: var(--hero); stroke-width: 2.2; }
.ab-name { margin: 1rem 0 0; font-size: clamp(2rem, 9vw, 3rem); line-height: 1.1; letter-spacing: -.01em; }
.ab-tag { margin: .75rem 0 0; font-size: 1.1rem; color: var(--hero-muted); }
.ab-cta { margin: 1.5rem 0 0; }
.ab-cta .btn { background: #fff; border-color: #fff; color: #0d5c55; }

@supports (animation-timeline: scroll()) {
  @media (prefers-reduced-motion: no-preference) {
    .ab-scroll { height: 175svh; }
    .ab-stage { position: sticky; top: 0; height: 100svh; }
    .ab-q { display: flex; }
    .ab-q, .ab-mark-line, .ab-stop, .ab-veh, .ab-name, .ab-tag, .ab-cta {
      animation-timing-function: linear;
      animation-fill-mode: both;
      animation-timeline: scroll(root);
    }
    .ab-q { animation-name: ab-out; animation-range: 0 30svh; }
    .ab-mark-line { animation-name: ab-draw; animation-range: 15svh 50svh; }
    .ab-stop { animation-name: ab-pop; animation-range: 35svh 55svh; }
    .ab-veh { animation-name: ab-pop; animation-range: 45svh 60svh; }
    .ab-name { animation-name: ab-rise; animation-range: 45svh 65svh; }
    .ab-tag, .ab-cta { animation-name: ab-rise; animation-range: 55svh 75svh; }
  }
}

@keyframes ab-out { to { opacity: 0; transform: translateY(-3rem) scale(.94); visibility: hidden; } }
@keyframes ab-draw { from { stroke-dashoffset: 1; } to { stroke-dashoffset: 0; } }
@keyframes ab-pop { from { opacity: 0; transform: scale(.3); } to { opacity: 1; transform: none; } }
@keyframes ab-rise { from { opacity: 0; transform: translateY(1.5rem); } to { opacity: 1; transform: none; } }
.ab-stop, .ab-veh { transform-box: fill-box; transform-origin: center; }

/* Treść pod sekcją */
.ab-scroll + main, .ab-scroll ~ main { padding-top: 1rem; }
.ab-feat { list-style: none; margin: 0; padding: 0; display: grid; gap: 1rem; }
.ab-feat li { display: grid; grid-template-columns: 2.5rem 1fr; gap: .75rem; align-items: start; }
.ab-feat h3 { margin: 0; font-size: 1rem; }
.ab-feat p { margin: .2rem 0 0; color: var(--muted); }
.ab-ico { width: 2.5rem; height: 2.5rem; padding: .45rem; border-radius: 12px; background: var(--bg); fill: none; stroke: var(--accent); stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.ab-num { list-style: none; margin: 0 0 .5rem; padding: 0; display: grid; grid-template-columns: repeat(3, 1fr); gap: .5rem; }
.ab-num li { display: flex; flex-direction: column; align-items: flex-start; }
.ab-num b { font-size: clamp(1.5rem, 7vw, 2rem); line-height: 1.1; color: var(--accent); }
.ab-num span { color: var(--muted); font-size: .92rem; }