/* Pas szlaku strony odliczania — arkusz partu `template-parts/odliczanie-szlak.php`.
 *
 * Transkrypcja `docs/canvas/odliczanie/Main.dc.html` (wariant B). Canvas
 * rysuje dwa punkty, 1440 i 390 px; między nimi (≤ 1008 px) zwęża się tylko
 * margines boczny, reszta zostaje z 1440.
 *
 * ⚠︎ Cyfry licznika i podziałki w `--font-cena` (Source Serif 4 600), NIE
 * w `--font-display` — zakaz T7 wymienia licznik wprost. Cinzel ma cyfry
 * proporcjonalne: wiersz szarpałby się przy każdym tyknięciu sekundy.
 */

/* Tło dokumentu pod pasami — kurtyna nie ma pergaminowego `body` z `base.css`. */
body.szewko-odliczanie-strona {
  background: var(--color-smoked-tent);
}

.szewko-odliczanie-szlak {
  position: relative;
  padding: 48px 80px calc(var(--fala-h) + 40px);
  background: var(--gradient-narrator-tent);
  color: var(--color-parchment);

  @media (max-width: 1008px) {
    padding-inline: 40px;
  }

  @media (max-width: 600px) {
    padding: 28px 16px calc(var(--fala-h) + 28px);
  }

  /* Zakładka fali 10 px — reguła na TRZECH klasach, bo `dune-divider.css`
     kolejkuje się później i remis na dwóch przegrywa (`docs/FALA-WYDMY.md` §3). */
  & > .szewko-dune-divider.szewko-dune-divider--dol {
    bottom: -10px;
    pointer-events: none;
  }
}

/* Ziarno jak na kurtynie ładowania — 0,08 bieli. */
.szewko-odliczanie-szlak__ziarno {
  position: absolute;
  inset: 0;
  opacity: 0.08;
  pointer-events: none;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 400 400' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noise'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.65' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noise)'/%3E%3C/svg%3E");
  background-size: 400px 400px;
}

.szewko-odliczanie-szlak__marka {
  position: relative;
  display: flex;
  align-items: center;
  gap: 14px;
}

.szewko-odliczanie-szlak__znak {
  display: block;
  width: 56px;
  height: 56px;
}

.szewko-odliczanie-szlak__linia {
  margin: 0;
  font-family: var(--font-ui);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--color-sand-gold);
}

.szewko-odliczanie-szlak__glowa {
  position: relative;
  margin-top: 44px;

  @media (max-width: 600px) {
    margin-top: 32px;
  }
}

.szewko-odliczanie-szlak__nadtytul {
  margin: 0;
  font-family: var(--font-ui);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: var(--color-sand-gold);
}

.szewko-odliczanie-szlak__tytul {
  margin: 12px 0 0;
  font-family: var(--font-display);
  font-size: 48px;
  font-weight: 700;
  line-height: 1.1;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--color-parchment);

  @media (max-width: 600px) {
    font-size: 28px;
    letter-spacing: 0.06em;
  }
}

/* Odliczanie jako jedno zdanie — cyfry drugorzędne wobec szlaku. */
.szewko-odliczanie-szlak__licznik {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 4px 22px;
  margin: 18px 0 0;

  @media (max-width: 600px) {
    gap: 4px 14px;
  }
}

.szewko-odliczanie-szlak__czlon {
  display: inline-flex;
  align-items: baseline;
  gap: 6px;
}

.szewko-odliczanie-szlak__liczba {
  font-family: var(--font-cena);
  font-size: 44px;
  font-weight: 600;
  line-height: 1;
  font-variant-numeric: tabular-nums lining-nums;
  color: var(--color-parchment);

  @media (max-width: 600px) {
    font-size: 30px;
  }
}

.szewko-odliczanie-szlak__jedn {
  font-family: var(--font-ui);
  font-size: 14px;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--color-sand-gold);

  @media (max-width: 600px) {
    font-size: 12px;
  }
}

/* Na środku gradientu tekst idzie w Bleached Linen, nie w Sand Gold — D76. */
.szewko-odliczanie-szlak__termin {
  margin: 14px 0 0;
  font-family: var(--font-cena);
  font-size: 17px;
  font-weight: 600;
  color: var(--color-bleached-linen);
}

.szewko-odliczanie-szlak__zero {
  max-width: 36em;
  margin: 10px 0 0;
  font-family: var(--font-body);
  font-size: 17px;
  line-height: 1.55;
  color: var(--color-bleached-linen);

  &[hidden] {
    display: none;
  }
}

/* ── TRASA ───────────────────────────────────────────────────────────────
 *
 * Tor biegnie od 4 % do 92 % szerokości, brama stoi na 96 %. Wszystko, co się
 * rusza, liczy się z `--szewko-postep` (0 = 30 dni i więcej, 1 = zero).
 */
.szewko-odliczanie-szlak__trasa {
  position: relative;
  height: 210px;
  margin-top: 28px;

  /* Najmniejsza odległość środka wielbłąda od krawędzi trasy. Na 390 px
     sylwetka ma 121 px, a pas tylko 16 px marginesu — bez tego wystaje poza
     ekran na starcie i przy bramie. 60 px = połowa sylwetki, więc jej krawędź
     staje dokładnie na krawędzi trasy, czyli na marginesie 16 px strony
     (zmierzone 11.09.2026: przy 44 px lewa krawędź wypadała na x = 0). */
  --szewko-wielblad-pol: 0px;

  @media (max-width: 600px) {
    height: 168px;
    margin-top: 20px;
    --szewko-wielblad-pol: 60px;
  }
}

/* Linia gruntu na 160 px (124 px na 390). Przebyte — ciągłe, przed wielbłądem —
   kreskowane i przygaszone. Obie są obrysem, więc Sand Gold trzyma próg 3:1
   także na jaśniejszym końcu gradientu. */
.szewko-odliczanie-szlak__grunt {
  position: absolute;
  top: 160px;
  height: 0;

  @media (max-width: 600px) {
    top: 124px;
  }
}

.szewko-odliczanie-szlak__grunt--przebyte {
  left: 4%;
  width: calc(88% * var(--szewko-postep));
  border-top: 2px solid var(--color-sand-gold);
}

.szewko-odliczanie-szlak__grunt--przed {
  left: calc(4% + 88% * var(--szewko-postep));
  width: calc(88% * (1 - var(--szewko-postep)));
  border-top: 2px dashed color-mix(in srgb, var(--color-sand-gold) 55%, transparent);
}

/* Nacięcia podziałki — położenie z `--szewko-tik` (liczba dni), ta sama oś co tor. */
.szewko-odliczanie-szlak__tik {
  position: absolute;
  top: 160px;
  left: calc(4% + 88% * (30 - var(--szewko-tik)) / 30);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  transform: translateX(-50%);

  &::before {
    content: "";
    width: 1px;
    height: 10px;
    background: color-mix(in srgb, var(--color-sand-gold) 70%, transparent);
  }

  @media (max-width: 600px) {
    top: 124px;
  }
}

.szewko-odliczanie-szlak__tik-napis {
  font-family: var(--font-cena);
  font-size: 13px;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
  color: var(--color-bleached-linen);
}

/* Na 390 px zostają trzy napisy z siedmiu: 30, 15 i 0. Kreski zostają. */
.szewko-odliczanie-szlak__tik--drobny .szewko-odliczanie-szlak__tik-napis {
  @media (max-width: 600px) {
    visibility: hidden;
  }
}

.szewko-odliczanie-szlak__tik--brama .szewko-odliczanie-szlak__tik-napis {
  font-family: var(--font-ui);
  font-size: 12px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--color-parchment);
}

.szewko-odliczanie-szlak__brama {
  position: absolute;
  top: 42px;
  left: 96%;
  width: 76px;
  height: auto;
  transform: translateX(-50%);
  color: var(--color-sand-gold);

  @media (max-width: 600px) {
    top: 58px;
    width: 44px;
  }
}

.szewko-odliczanie-szlak__wielblad {
  position: absolute;
  top: 44px;
  left: clamp(
    var(--szewko-wielblad-pol),
    calc(4% + 88% * var(--szewko-postep)),
    calc(100% - var(--szewko-wielblad-pol))
  );
  width: 168px;
  height: 120px;
  transform: translateX(-50%);
  transform-origin: 50% 100%;

  @media (max-width: 600px) {
    top: 4px;
    transform: translateX(-50%) scale(0.72);
  }
}

.szewko-odliczanie-szlak__bob {
  position: absolute;
  inset: 0;
  animation: szewko-odliczanie-bob 640ms ease-in-out infinite;
}

/* Pas 2016×240 px = sześć klatek 168×120 w skali 2× — jak na kurtynie ładowania. */
.szewko-odliczanie-szlak__klatka {
  position: absolute;
  inset: 0;
  background-image: var(--szewko-odliczanie-sprite);
  background-repeat: no-repeat;
  background-size: 1008px 120px;
  animation: szewko-odliczanie-chod 640ms steps(6) infinite;
}

@keyframes szewko-odliczanie-chod {
  from { background-position-x: 0; }
  to   { background-position-x: -1008px; }
}

@keyframes szewko-odliczanie-bob {
  0%, 50%, 100% { transform: translateY(-2px); }
  25%, 75%      { transform: translateY(0); }
}

/* Selektory kwalifikowane rodzicem — pułapka z `kurtyna-ladowania.css`:
   blok z jedną klasą przegrywa specyficznością i wyciszenie nie działa. */
@media (prefers-reduced-motion: reduce) {
  .szewko-odliczanie-szlak .szewko-odliczanie-szlak__bob,
  .szewko-odliczanie-szlak .szewko-odliczanie-szlak__klatka {
    animation: none;
  }
}