/* ==========================================================
   MAGNOLIA — arkusz stylów.
   Kolory i grubości wynikają z rysunku technicznego, nie z osobnej palety.
   ========================================================== */

:root {
  --kreska: #141416;
  --kreska-dalsza: #3b3b3e;
  --hairline: #a9a9a5;
  --pomocnicza: #cfcfc9;
  --tlo: #efeeea;
  --plotno: #ffffff;
  --ramka: #dedcd5;
  --opis: #66655f;
  --numer: #17171a;
  /* Jedyny kolor na całej stronie. Zieleń firmowa, przepisana wprost
     z sztukabudowania.com.pl: kolor kontrastowy rgb(2,100,52) i tło
     rgb(1,40,21). Karta sprzedażowa używa tej samej ciemnej zieleni,
     #16241d, więc oba źródła się zgadzają. Wcześniej stał tu błękit
     wzięty z rysunku; kolor rysunku ma iść za marką, nie odwrotnie.
     Akcent nosi wszystko, gdzie widz ma coś zrobić albo coś odnaleźć:
     przycisk, numer kadru, na którym stoi, pierścień „tu jesteś”,
     obwódka fokusu. Ten sam kolor obrysowuje działki na rysunku 1C. */
  --akcent: #026434;
  --akcent-ciemny: #012815;
}

*, *::before, *::after { margin: 0; padding: 0; box-sizing: border-box; }

html { scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

body {
  background: var(--tlo);
  color: var(--kreska);
  font-family: Archivo, Helvetica, Arial, sans-serif;
  font-size: 17px;
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
}

p { max-width: 62ch; }

a { color: inherit; }

/* ---- wspólna typografia opisów technicznych ---- */
.mono, .kadr__numer, .kadr__opis, .naglowek__adres, .naglowek__zacheta,
.numer, .liczby__opis, .zdjecie figcaption {
  font-family: 'JetBrains Mono', ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 11px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--opis);
  line-height: 1.5;
  /* Podpisy sekcji są nagłówkami, a te domyślnie idą tłustym krojem.
     Waga stoi tu wprost, żeby zamiana znacznika na h2 niczego nie pogrubiła. */
  font-weight: 400;
}

/* Numer rysunku. Bez podkładki: czarny prostokąt czytał się jak naklejka
   przyklejona do rysunku, a numer ma być adnotacją na kalce. */
.numer {
  color: var(--numer);
  font-weight: 700;
  letter-spacing: 0.1em;
  flex: none;
}

/* ---- rysunek: wysoki spacer + lepki kadr ---- */
.rysunek {
  --dlugosc: 400svh;
  position: relative;
  height: var(--dlugosc);
}
.rysunek--statyczny { height: auto; }

.rysunek__lepki {
  position: sticky;
  top: 0;
  height: 100svh;
  overflow: hidden;
  background: var(--plotno);
}
.rysunek--statyczny .rysunek__lepki { position: static; height: auto; }

/* Rysunek nie kończy się prostokątem. Ulice i zabudowa sąsiednia celowo
   wybiegają poza kadr, a ucięte równo z krawędzią wyglądały jak wydruk
   przycięty nożem. Krawędzie kadru rozmywają się więc w płótno, tak jak na
   planszy technicznej dalszy plan wychodzi z rysunku, a nie urywa się.
   Poziom i pion siedzą na dwóch zagnieżdżonych pudełkach, bo złożenie dwóch
   masek na jednym elemencie wymaga mask-composite, a to jedyna część układanki
   bez zgodnego zapisu we wszystkich przeglądarkach.
   Zakres pionowy podaje silnik: na ekranie pionowym rysunek mieści się w pasie
   i wtedy roztarcie musi siedzieć na krawędzi pasa, nie na krawędzi ekranu. */
.rysunek__warstwy {
  position: absolute;
  inset: 0;
  --pas-y0: 0px;
  --pas-y1: 100%;
  /* Obie szerokości roztarcia podaje silnik: zależą od tego, czy rysunek
     wypełnia ekran, czy siedzi w pasie. Tu stoi tylko zabezpieczenie na
     wypadek, gdyby rysunek się nie uruchomił. Stoją na kontenerze, nie na
     polu, żeby jedna i druga dziedziczyła się w dół z jednego miejsca. */
  --roztarcie-y: clamp(30px, 5vh, 78px);
  --roztarcie-x: clamp(20px, 4vw, 96px);
  --maska-y: linear-gradient(to bottom,
    rgba(0,0,0,0) var(--pas-y0),
    #000 calc(var(--pas-y0) + var(--roztarcie-y)),
    #000 calc(var(--pas-y1) - var(--roztarcie-y)),
    rgba(0,0,0,0) var(--pas-y1));
  -webkit-mask-image: var(--maska-y);
  mask-image: var(--maska-y);
}
.rysunek__pole {
  position: absolute;
  inset: 0;
  --maska-x: linear-gradient(to right,
    rgba(0,0,0,0) 0,
    #000 var(--roztarcie-x),
    #000 calc(100% - var(--roztarcie-x)),
    rgba(0,0,0,0) 100%);
  -webkit-mask-image: var(--maska-x);
  mask-image: var(--maska-x);
}

.scena {
  position: absolute;
  inset: 0;
  opacity: 0;
  transform-origin: 0 0;
  will-change: transform, opacity;
  backface-visibility: hidden;
}
/* Płótno niesie kontener, nie warstwa: przy przenikaniu biały prostokąt
   kurczącej się warstwy odcinałby się twardą krawędzią od warstwy pod spodem. */
.scena svg { background: transparent !important; display: block; width: 100%; height: 100%; }
/* Opisy gasną, gdy warstwa jest rozciągnięta poza swoją skalę. */
.scena .adnotacja { opacity: var(--adnotacje, 1); }

/* ---- budowanie kadru dalszego planu ----
   Kadr, który właśnie wchodzi, nie pojawia się gotowy. Najpierw kładą się
   ulice, potem zabudowa sąsiednia wyrasta z ziemi falami od działki na
   zewnątrz, a plan uzdrowiska kreśli się od traktów do tkanki. Wszystko żyje
   tylko w tej jednej sekundzie: klasa jest zdejmowana po wejściu, więc przy
   zwykłym przewijaniu nie zostaje ani jedna animowana właściwość.
   Stan docelowy jest stanem domyślnym, więc gdy animacja się nie odpali,
   rysunek stoi kompletny. */
@media (prefers-reduced-motion: no-preference) {
  .scena--buduje .wyrasta {
    transform-box: fill-box;
    transform-origin: 50% 100%;
    animation: wyrasta 640ms cubic-bezier(0.16, 0.86, 0.26, 1) both;
  }
  .scena--buduje .wchodzi { animation: wchodzi 520ms ease-out both; }
  .scena--buduje .kresli {
    stroke-dasharray: 1;
    animation: kresli 780ms cubic-bezier(0.32, 0.7, 0.3, 1) both;
  }
  /* Krok fali. Osiemdziesiąt milisekund to mniej niż czas reakcji oka na
     pojedynczy element, więc dwadzieścia bloków w fali czyta się jako jeden
     ruch, a nie jako dwadzieścia osobnych. */
  .scena--buduje .fala0 { animation-delay: 0ms; }
  .scena--buduje .fala1 { animation-delay: 80ms; }
  .scena--buduje .fala2 { animation-delay: 160ms; }
  .scena--buduje .fala3 { animation-delay: 240ms; }
  .scena--buduje .fala4 { animation-delay: 320ms; }
  .scena--buduje .fala5 { animation-delay: 400ms; }
  .scena--buduje .fala6 { animation-delay: 480ms; }
  .scena--buduje .fala7 { animation-delay: 560ms; }
  .scena--buduje .fala8 { animation-delay: 640ms; }
  .scena--buduje .fala9 { animation-delay: 720ms; }
}

@keyframes wyrasta {
  from { transform: scaleY(0.03); opacity: 0; }
  55%  { opacity: 1; }
  to   { transform: scaleY(1); opacity: 1; }
}
@keyframes wchodzi {
  from { opacity: 0; }
  to   { opacity: 1; }
}
@keyframes kresli {
  from { stroke-dashoffset: 1; }
  to   { stroke-dashoffset: 0; }
}

/* Bez animacji rysunek przestaje być warstwą nad kadrem i staje się zwykłym
   blokiem w przepływie strony, inaczej kontener miałby zerową wysokość
   i treść pod nim wjechałaby na rysunek. */
.rysunek--statyczny .rysunek__lepki { display: flex; flex-direction: column; }
.rysunek--statyczny .naglowek { order: 1; }
.rysunek--statyczny .rysunek__warstwy { position: static; order: 2; -webkit-mask-image: none; mask-image: none; }
.rysunek--statyczny .rysunek__pole { position: static; -webkit-mask-image: none; mask-image: none; }
.rysunek--statyczny .kadr { order: 3; }
.rysunek--statyczny .scena { position: static; opacity: 1; transform: none; }
.rysunek--statyczny .scena svg { height: auto; }
.rysunek--statyczny .naglowek,
.rysunek--statyczny .kadr { position: static; margin: 0 clamp(20px, 4vw, 48px); }
.rysunek--statyczny .naglowek { padding: clamp(20px, 4vh, 48px) 0 18px; }
.rysunek--statyczny .kadr { padding-bottom: clamp(20px, 4vh, 48px); }

/* ---- nakładki na rysunku ---- */
.naglowek {
  position: absolute;
  top: clamp(20px, 4vh, 48px);
  left: clamp(20px, 4vw, 48px);
  z-index: 3;
  pointer-events: none;
}
.naglowek__tytul {
  font-size: clamp(30px, 5.4vw, 62px);
  font-weight: 500;
  letter-spacing: -0.015em;
  line-height: 1.02;
  margin-bottom: 10px;
}
.naglowek__adres { display: block; }

/* Trzy liczby w pierwszej sekundzie. Rysunek zostaje bohaterem strony, ale
   sam nie odpowiada na pierwsze pytanie kupującego: co to jest i czy w mojej
   skali. Bez tego najmocniejszy argument oferty leżał dopiero za animacją,
   trzy ekrany niżej. Szerokość ograniczona, żeby na telefonie łamało się
   po drugim członie, a nie w przypadkowym miejscu. */
.naglowek__skrot {
  display: block;
  margin-top: 7px;
  /* Na szerokim ekranie ma zmieścić się w jednej linii, na telefonie złamać
     się na dwie i nie wyjść poza margines strony. Jednostka ch liczy sam znak,
     bez rozstrzelenia liter, więc zapas jest tu celowo hojny. */
  max-width: min(70ch, calc(100vw - 2 * clamp(20px, 4vw, 48px)));
  color: var(--numer);
}

.kadr {
  position: absolute;
  left: clamp(20px, 4vw, 48px);
  bottom: clamp(20px, 4vh, 48px);
  z-index: 3;
  display: flex;
  align-items: baseline;
  gap: 12px;
  pointer-events: none;
}

.naglowek__zacheta { transition: opacity 0.3s linear; }

/* Podpis kadru nie przeskakuje, tylko wjeżdża spod krawędzi, tak jak odsłania
   się napis na kalce przesuwanej pod linijką. Animacja startuje od nowa przy
   każdej zmianie kadru, przez podmianę klasy. */
@keyframes kadr-wjazd {
  from { opacity: 0; transform: translateY(0.55em); clip-path: inset(0 0 100% 0); }
  to   { opacity: 1; transform: none; clip-path: inset(0 0 -30% 0); }
}
.kadr--wjazd .numer,
.kadr--wjazd .kadr__opis {
  animation: kadr-wjazd 0.5s cubic-bezier(0.22, 0.61, 0.36, 1) both;
}
.kadr--wjazd .kadr__opis { animation-delay: 0.06s; }

/* ---- przełącznik wersji językowej ----
   Naprzeciw tytułu, przy prawej krawędzi, tą samą typografią co opisy
   techniczne: to adnotacja na rysunku, nie element nawigacji. Wersja, na
   której stoimy, jest czarna jak numer kadru, druga siedzi w kolorze
   pomocniczym i zapala się akcentem pod kursorem. Poświata dlatego, że napis
   leży wprost na kresce rysunku i bez niej gubiłby się na gęstych
   fragmentach. */
.jezyk {
  position: absolute;
  top: clamp(20px, 4vh, 48px);
  right: clamp(20px, 4vw, 48px);
  z-index: 4;
  display: flex;
  align-items: baseline;
  gap: 8px;
}
.jezyk__poz {
  font-family: 'JetBrains Mono', ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 11px;
  letter-spacing: 0.1em;
  font-weight: 700;
  /* Kolor opisów technicznych, nie pomocniczy. Pomocniczy dawał kontrast
     1,56:1 przy wymaganych 4,5:1, czyli napis na granicy widoczności — a dla
     gościa anglojęzycznego to jedyna droga do jego wersji strony. Teraz
     5,85:1, przy aktywnym na 17,89:1, więc hierarchia zostaje wyraźna. */
  color: var(--opis);
  text-decoration: none;
  text-shadow: 0 0 8px #fff, 0 0 16px #fff;
  transition: color 0.32s linear;
}
.jezyk__poz--tu { color: var(--numer); }
a.jezyk__poz:hover { color: var(--akcent); }
.jezyk__kreska {
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  font-size: 11px;
  color: var(--pomocnicza);
  text-shadow: 0 0 8px #fff, 0 0 16px #fff;
}
/* Bez animacji rysunek jest zwykłym blokiem, więc przełącznik też wchodzi
   w przepływ i staje nad tytułem, dosunięty do prawej. */
.rysunek--statyczny .jezyk {
  position: static;
  order: 0;
  justify-content: flex-end;
  margin: clamp(20px, 4vh, 48px) clamp(20px, 4vw, 48px) 0;
}

/* ---- pierścień „tu jesteś” ----
   Kadr odjeżdża czterdzieści sześć razy i sylweta budynku schodzi po drodze
   do kilku pikseli. Bez trwałej kotwicy widz gubi to, na co patrzy, i ostatnia
   plansza czyta się jak mapa okolicy, a nie jak położenie tej nieruchomości.
   Pierścień ma dokładnie średnicę sylwety, więc dopóki budynek jest duży,
   leży na nim i nie widać go wcale. Gdy sylweta zejdzie poniżej progu,
   pierścień przestaje maleć i zostaje jako znacznik — kontr-skalowany,
   czyli w skali ekranu, nie w skali rysunku. */
.lokalizator {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  z-index: 2;
  pointer-events: none;
  opacity: 0;
  transition: opacity 0.4s linear;
}
.lokalizator__halo { fill: none; stroke: var(--plotno); stroke-width: 4; }
.lokalizator__krag { fill: none; stroke: var(--akcent); stroke-width: 1.25; }
.rysunek--statyczny .lokalizator { display: none; }
@media (prefers-reduced-motion: reduce) { .lokalizator { transition: none; } }

/* ---- wejście nagłówka przy starcie ---- */
@keyframes wjazd {
  from { opacity: 0; transform: translateY(0.6em); clip-path: inset(0 0 100% 0); }
  to   { opacity: 1; transform: none; clip-path: inset(0 0 -30% 0); }
}
.rysunek--gotowy .naglowek__tytul { animation: wjazd 0.72s cubic-bezier(0.22, 0.61, 0.36, 1) both; }
.rysunek--gotowy .naglowek__adres { animation: wjazd 0.72s cubic-bezier(0.22, 0.61, 0.36, 1) 0.09s both; }
.rysunek--gotowy .kadr { animation: wjazd 0.72s cubic-bezier(0.22, 0.61, 0.36, 1) 0.18s both; }
.rysunek--gotowy .jezyk { animation: wjazd 0.72s cubic-bezier(0.22, 0.61, 0.36, 1) 0.09s both; }
/* Zachęta musi dostać „backwards”, a nie „both”. Wartość animowana bije
   w kaskadzie styl w atrybucie, więc przy „both” ostatnia klatka trzymała
   krycie na jedynce już zawsze i napis „przewiń” nie dawał się zgasić:
   silnik ustawiał opacity na zero, a przeglądarka i tak rysowała jedynkę. */
.rysunek--gotowy .naglowek__zacheta { animation: wjazd 0.72s cubic-bezier(0.22, 0.61, 0.36, 1) 0.27s backwards; }

@media (prefers-reduced-motion: reduce) {
  .rysunek--gotowy .naglowek__tytul,
  .rysunek--gotowy .naglowek__adres,
  .rysunek--gotowy .kadr,
  .rysunek--gotowy .jezyk,
  .rysunek--gotowy .naglowek__zacheta,
  .kadr--wjazd .numer,
  .kadr--wjazd .kadr__opis { animation: none; }
}

/* Odsyłacz, nie napis. Był jedynym miejscem mówiącym „przewiń”, a jedyna
   droga do danych z pominięciem animacji prowadziła przez klawiaturę, więc
   na telefonie nie istniała. Wygląda tak samo, klika się do sekcji 2A.
   Wskaźnikiem myszy steruje silnik razem z kryciem: wygaszony odsyłacz nie
   może łapać kliknięć, bo leżałby niewidoczny na rysunku. */
.naglowek__zacheta {
  position: absolute;
  right: clamp(20px, 4vw, 48px);
  bottom: clamp(20px, 4vh, 48px);
  z-index: 3;
  text-decoration: none;
}
a.naglowek__zacheta:hover { color: var(--akcent); }
.rysunek--statyczny .naglowek__zacheta { display: none; }

/* Nakładki dostają delikatną poświatę, żeby trzymały kontrast nad kreską. */
.naglowek__tytul, .naglowek__adres, .kadr, .naglowek__zacheta {
  text-shadow: 0 0 10px #fff, 0 0 22px #fff, 0 0 4px #fff;
}

/* Sama poświata nie wystarcza: adres stoi na siatce okien i przy 11 px
   traci kontrast. Góra i dół kadru rozjaśniają się więc miękko do bieli,
   jak wytarte miejsce na kalce. To nie jest karta pod tekstem, nie ma
   krawędzi ani cienia, a napisy trzymają kontrast na każdym kadrze. */
.rysunek__lepki::before,
.rysunek__lepki::after {
  content: '';
  position: absolute;
  left: 0;
  right: 0;
  height: 190px;
  z-index: 2;
  pointer-events: none;
}
.rysunek__lepki::before {
  top: 0;
  background: linear-gradient(to bottom, #fff 0%, rgba(255,255,255,0.92) 34%, rgba(255,255,255,0) 100%);
}
.rysunek__lepki::after {
  bottom: 0;
  height: 130px;
  background: linear-gradient(to top, #fff 0%, rgba(255,255,255,0.9) 30%, rgba(255,255,255,0) 100%);
}
.rysunek--statyczny .rysunek__lepki::before,
.rysunek--statyczny .rysunek__lepki::after { display: none; }

.brak-js { padding: clamp(20px, 4vw, 48px); background: var(--plotno); }
.brak-js img { width: 100%; height: auto; display: block; }
.brak-js__kontakt { padding-top: 18px; }

/* ---- treść pod rysunkiem ---- */
.tresc { background: var(--tlo); position: relative; z-index: 2; }

.sekcja {
  max-width: 1160px;
  margin: 0 auto;
  padding: clamp(52px, 8vh, 104px) clamp(20px, 4vw, 48px);
  border-top: 1px solid var(--ramka);
}
.sekcja:first-child { border-top: 0; }
.sekcja__glowa {
  display: flex;
  align-items: baseline;
  gap: 12px;
  margin-bottom: clamp(34px, 5vh, 56px);
}

/* Podpis sekcji rośnie ponad stopień opisów technicznych i ciemnieje do koloru
   tekstu. Wcześniej szedł tą samą jedenastką co podpis zdjęcia i etykieta
   w danych, więc przy przewijaniu nie było widać, gdzie kończy się jedna
   sekcja, a zaczyna druga. Rozstrzelenie liter maleje, bo 0,16em rozrywa
   wyrazy dopiero przy większym stopniu. Zawężone do główki sekcji: ta sama
   klasa niesie też podpisy zdjęć i etykiety, które mają zostać drobne. */
.sekcja__glowa .mono {
  font-size: clamp(15px, 1.5vw, 19px);
  letter-spacing: 0.1em;
  color: var(--kreska);
}
.sekcja__glowa .numer {
  font-size: clamp(12px, 1.1vw, 14px);
}

.wstep { color: var(--opis); max-width: 62ch; }

/* ---- 2A pasek liczb ---- */
.sekcja--liczby { padding-top: clamp(40px, 6vh, 72px); padding-bottom: clamp(40px, 6vh, 72px); }
.liczby {
  list-style: none;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 1px;
  background: var(--ramka);
  border: 1px solid var(--ramka);
}
.liczby li {
  background: var(--tlo);
  padding: clamp(18px, 3vh, 30px) clamp(16px, 2vw, 26px);
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.liczby__wartosc {
  font-size: clamp(26px, 3.2vw, 40px);
  font-weight: 500;
  letter-spacing: -0.02em;
  line-height: 1;
}
.liczby__opis { display: block; }

/* ---- 3A przesłanki ---- */
.powody {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: clamp(28px, 3vw, 52px);
}
.powod { position: relative; padding-top: 16px; }
.powod::before {
  content: '';
  position: absolute;
  left: 0; top: 0;
  width: 100%; height: 1px;
  background: var(--kreska);
  transform-origin: left center;
}
.powod__tytul {
  font-size: 21px;
  font-weight: 500;
  letter-spacing: -0.01em;
  margin-bottom: 12px;
}

/* ---- 4A galeria ---- */
.galeria {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: clamp(20px, 2.6vw, 40px);
  margin-top: clamp(24px, 3vh, 40px);
}
.zdjecie img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  background: var(--pomocnicza);
}
.zdjecie figcaption { padding-top: 10px; }

/* ---- 5A dane techniczne ---- */
.dane {
  display: grid;
  grid-template-columns: minmax(180px, 240px) 1fr;
  border-top: 1px solid var(--ramka);
}
.dane dt {
  padding: 14px 20px 14px 0;
  border-bottom: 1px solid var(--ramka);
}
.dane dd {
  padding: 14px 0;
  border-bottom: 1px solid var(--ramka);
}

/* ---- 6A scenariusze ---- */
.scenariusze {
  list-style: none;
  counter-reset: scenariusz;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: clamp(28px, 3vw, 52px);
  margin-top: clamp(24px, 3vh, 40px);
}
.scenariusze li {
  counter-increment: scenariusz;
  position: relative;
  padding-top: 16px;
}
.scenariusze li::after {
  content: '';
  position: absolute;
  left: 0; top: 0;
  width: 100%; height: 1px;
  background: var(--kreska);
  transform-origin: left center;
}
.scenariusze li::before {
  content: counter(scenariusz, decimal-leading-zero);
  display: block;
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  font-size: 11px;
  letter-spacing: 0.16em;
  color: var(--opis);
  margin-bottom: 10px;
}
.scenariusz__tytul {
  font-size: 19px;
  font-weight: 500;
  letter-spacing: -0.01em;
  margin-bottom: 10px;
}

/* ---- 7A dokumentacja ---- */
.lista { list-style: none; max-width: 76ch; }
.lista li {
  padding: 12px 0 12px 26px;
  border-bottom: 1px solid var(--ramka);
  position: relative;
}
.lista li::before {
  content: '';
  position: absolute;
  left: 0;
  /* Kreska siada na środku pierwszego wiersza, nie na stopniu pisma. Wiązana
     z samym em stała 7 px za wysoko, bo em mierzy literę, a wiersz jest od niej
     wyższy o interlinię. Przy pozycjach mających jedną, dwie i trzy linie oko
     czytało tę stałą różnicę jako rozjazd punktorów.
     Wyliczenie: górne dopełnienie 12 px plus połowa wiersza, czyli połowa
     z 1,55em. Trzyma się samo, gdy zmieni się stopień pisma na telefonie. */
  top: calc(12px + 0.775em);
  width: 12px;
  height: 1px;
  background: var(--kreska);
}
.lista + .wstep { margin-top: 24px; }

/* Wezwanie do działania. Wcześniej stał tu obrys w kolorze tekstu, 11 px,
   nie do odróżnienia od podpisu technicznego. Na stronie, która ma doprowadzić
   do jednej rozmowy, to jedyny element mający wyglądać na przycisk, więc
   dostaje pełny akcent, wagę i wysokość dotyku, a obok niego stoi adres
   wprost, do skopiowania. */
.cta {
  margin-top: clamp(28px, 4vh, 40px);
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: clamp(18px, 3vw, 36px);
}
.przycisk {
  display: inline-block;
  padding: 17px 30px;
  border: 1px solid var(--akcent);
  background: var(--akcent);
  text-decoration: none;
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--plotno);
  transition: background-color 0.15s linear, border-color 0.15s linear;
}
.przycisk:hover, .przycisk:focus-visible { background: var(--akcent-ciemny); border-color: var(--akcent-ciemny); }
.cta__bok { display: flex; flex-direction: column; gap: 2px; }
.cta__etykieta { display: block; }
.cta__kontakt {
  font-size: 19px;
  color: var(--akcent);
  text-decoration: none;
  border-bottom: 1px solid transparent;
  width: fit-content;
  transition: border-color 0.15s linear;
}
.cta__kontakt:hover, .cta__kontakt:focus-visible { border-color: var(--akcent); }

/* ---- 8A kontakt ---- */
.sekcja--kontakt {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: clamp(28px, 3vw, 52px);
  align-items: start;
}
.sekcja--kontakt .sekcja__glowa { grid-column: 1 / -1; }
.kontakt__nazwisko {
  font-size: clamp(24px, 2.6vw, 34px);
  font-weight: 500;
  letter-spacing: -0.015em;
  line-height: 1.1;
  margin-bottom: 8px;
}
.kontakt__dane { display: flex; flex-direction: column; gap: 10px; }
.kontakt__link {
  font-size: 20px;
  text-decoration: none;
  border-bottom: 1px solid var(--pomocnicza);
  padding-bottom: 3px;
  width: fit-content;
  transition: border-color 0.15s linear;
}
.kontakt__link:hover, .kontakt__link:focus-visible { color: var(--akcent); border-color: var(--akcent); }
.kontakt__nota p + p { margin-top: 12px; }

/* ---- stopka ---- */
.stopka {
  background: var(--tlo);
  border-top: 1px solid var(--ramka);
  position: relative;
  z-index: 2;
}
.stopka__wnetrze {
  max-width: 1160px;
  margin: 0 auto;
  padding: clamp(36px, 5vh, 64px) clamp(20px, 4vw, 48px) clamp(48px, 6vh, 80px);
  font-size: 14px;
  color: var(--opis);
  /* Bez tego nazwa sądu łamie się tak, że w ostatniej linii zostaje samo KRS. */
  text-wrap: pretty;
}
.stopka__firma { color: var(--kreska); margin-bottom: 6px; }

/* ---- dostępność ---- */
:focus-visible {
  outline: 2px solid var(--akcent);
  outline-offset: 3px;
}
.pomin {
  position: absolute;
  left: -9999px;
  top: 0;
  z-index: 10;
  background: var(--plotno);
  padding: 12px 18px;
  border: 1px solid var(--kreska);
}
.pomin:focus { left: 12px; top: 12px; }

/* Zachęta do scrolla ustępuje, gdy zaczyna wchodzić na podpis kadru. */
@media (max-width: 900px) {
  .liczby { grid-template-columns: repeat(2, 1fr); }
  .powody, .scenariusze { grid-template-columns: 1fr 1fr; }
  .sekcja--kontakt { grid-template-columns: 1fr 1fr; }
}

@media (max-width: 767px) {
  body { font-size: 16px; }
  .rysunek { --dlugosc: 320svh; }

  /* Na ekranie pionowym rysunek nie wypełnia kadru, tylko siedzi w pasie.
     Tytuł, podpis i przełącznik wiążą się z tym pasem, nie z rogami ekranu,
     inaczej wisiałyby w pustce kilkaset pikselów od rysunku. Krawędzie pasa
     podaje silnik, bo od czasu dopuszczenia przycięcia boków pas nie ma już
     stałej wysokości 56,25vw. Wartość zapasowa trzyma układ, gdyby silnik
     nie wystartował, a max() ratuje przypadek, w którym rysunek jednak
     wypełnia ekran i pas zaczyna się w zerze. */
  /* Nagłówek urósł o linijkę z liczbami, więc odsuwa się od pasa o tyle samo
     więcej. Pod nim, tuż nad pasem rysunku, siada odsyłacz do danych: w prawym
     dolnym rogu zderzał się z podpisem kadru, który łamie się tu na dwie linie.
     Odsunięcia liczone od wysokości nagłówka: tytuł, adres i skrót łamiący się
     tu na dwie linie dają około 96 px, do tego odstępy i sam odsyłacz. Zapas
     104 px w gałęzi awaryjnej trzyma odsyłacz poniżej nagłówka także wtedy, gdy
     rysunek wypełnia ekran i pas zaczyna się w zerze. */
  .naglowek { top: max(clamp(20px, 4vh, 48px), calc(var(--pas-y0, 22svh) - 132px)); }
  .naglowek__zacheta {
    top: max(calc(clamp(20px, 4vh, 48px) + 104px), calc(var(--pas-y0, 22svh) - 26px));
    left: clamp(20px, 4vw, 48px);
    right: auto;
    bottom: auto;
  }
  .kadr { bottom: max(clamp(20px, 4vh, 48px), calc(100% - var(--pas-y1, 78svh) - 46px)); }

  .naglowek__adres, .kadr__opis { letter-spacing: 0.1em; }
  /* Przełącznik trzyma się linii tytułu, a ta na telefonie wiąże się z pasem
     rysunku, nie z rogiem ekranu. Stoi dokładnie na górnej krawędzi nagłówka,
     czyli obok krótkiego tytułu. Wcześniej siadał 58 px niżej, na wysokości
     linijki z liczbami, a ta idzie przez całą szerokość ekranu i wchodziła
     pod napis PL EN. */
  .jezyk { top: max(clamp(20px, 4vh, 48px), calc(var(--pas-y0, 22svh) - 132px)); }
  /* Miejsce zarezerwowane pod przełącznik, żeby także dłuższy tytuł łamał się
     przed nim, a nie pod nim. Dotyczy tylko linii tytułu: adres i linijka
     z liczbami idą niżej i mają całą szerokość dla siebie. */
  .naglowek__tytul { padding-right: 68px; }
  .powody, .scenariusze, .galeria, .sekcja--kontakt { grid-template-columns: 1fr; }
  .dane { grid-template-columns: 1fr; }
  .dane dt { padding-bottom: 0; border-bottom: 0; }
  .dane dd { padding-top: 4px; }
  .kontakt__link { font-size: 18px; }
}

@media (max-width: 420px) {
  .naglowek__adres, .kadr__opis { font-size: 10px; letter-spacing: 0.07em; }
  .liczby { grid-template-columns: 1fr; }
}


/* ==========================================================
   WEJŚCIA SEKCJI, STEROWANE POŁOŻENIEM NA EKRANIE

   Animacje sterowane scrollem, natywne, bez ani jednej linii JavaScriptu.
   Przeglądarka liczy je poza wątkiem głównym, więc nie mają wpływu na
   płynność rysunku. Cała reguła siedzi w @supports: przeglądarka, która
   tego nie zna, po prostu pokazuje treść od razu, bez żadnej zapaści.

   Ruch jest celowo drobny. To jest strona z rysunkami technicznymi,
   a nie pokaz możliwości: kreska nad blokiem rysuje się od lewej,
   tekst podchodzi o kilkanaście pikseli, zdjęcie odsłania się od dołu
   jak odbitka wyjmowana z kuwety. Nic nie wiruje i nic nie odbija.
   ========================================================== */
@keyframes podnies {
  from { opacity: 0; transform: translateY(15px); }
  to   { opacity: 1; transform: none; }
}
@keyframes rysujKreske {
  from { transform: scaleX(0); }
  to   { transform: scaleX(1); }
}
@keyframes odsloniOdDolu {
  from { clip-path: inset(0 0 100% 0); }
  to   { clip-path: inset(0 0 0 0); }
}

@supports (animation-timeline: view()) {
  @media (prefers-reduced-motion: no-preference) {
    .sekcja__glowa,
    .liczby li,
    .powod > *,
    .scenariusze li > *,
    .zdjecie figcaption,
    .lista li,
    .wstep,
    .przycisk,
    .kontakt__osoba, .kontakt__dane, .kontakt__nota {
      animation: podnies linear both;
      animation-timeline: view();
      animation-range: entry 4% cover 26%;
    }
    .powod::before,
    .scenariusze li::after {
      animation: rysujKreske linear both;
      animation-timeline: view();
      animation-range: entry 4% cover 22%;
    }
    .zdjecie picture {
      display: block;
      animation: odsloniOdDolu linear both;
      animation-timeline: view();
      animation-range: entry 6% cover 34%;
    }
    /* Przesunięcie zakresów zamiast opóźnień: przy animacji sterowanej
       scrollem to zakres decyduje o tym, co wchodzi wcześniej, a co później. */
    .liczby li:nth-child(2) { animation-range: entry 7% cover 29%; }
    .liczby li:nth-child(3) { animation-range: entry 10% cover 32%; }
    .liczby li:nth-child(4) { animation-range: entry 13% cover 35%; }
    .powod:nth-child(2) > *, .scenariusze li:nth-child(2) > * { animation-range: entry 8% cover 30%; }
    .powod:nth-child(3) > *, .scenariusze li:nth-child(3) > * { animation-range: entry 12% cover 34%; }
    .zdjecie:nth-child(even) picture { animation-range: entry 10% cover 38%; }
  }
}