/* ============================================================
   Chachulski — wersja F, na wzór szablonu Bungee.
   Na razie sam hero. Wartości kompozycji zdjęte z bungee/styles.css.
   ============================================================ */

/* ---------- fonty ---------- */

/* Interdisplay — krój interfejsowy Bungee, z pliku lokalnego zamiast CDN. */
@font-face {
  font-family: Interdisplay;
  src: url('font/InterDisplay-Regular.ttf') format('truetype');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: Interdisplay;
  src: url('font/InterDisplay-Medium.ttf') format('truetype');
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}

/* Syne — zastępuje logotyp Bungee, który w oryginale jest rysunkiem SVG,
   a u nas musi być składanym słowem. Krój z charakterem, żeby wielkie
   „Chachulski" broniło się bez rozstrzelenia liter. */
@font-face {
  font-family: Syne;
  src: url('font/syne-latin-ext.woff2') format('woff2');
  font-weight: 700 800;
  font-style: normal;
  font-display: swap;
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF,
    U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020,
    U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: Syne;
  src: url('font/syne-latin.woff2') format('woff2');
  font-weight: 700 800;
  font-style: normal;
  font-display: swap;
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA,
    U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193,
    U+2212, U+2215, U+FEFF, U+FFFD;
}

/* Caveat — sygnatura w lewym górnym rogu. Pismo odręczne flamastrem:
   nazwisko ma wyglądać jak podpisane, nie jak złożone. Kontra dla
   geometrycznego Syne w haśle. Zakres grubości podany jako 400–700, bo
   plik jest zmienny — przy jednej wartości przeglądarka zignorowałaby oś
   i wyrysowała 400. Sygnatura nie ma polskich znaków, wystarcza latin. */
@font-face {
  font-family: 'Caveat';
  src: url('font/caveat-latin.woff2') format('woff2');
  font-weight: 400 700;
  font-style: normal;
  font-display: swap;
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA,
    U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193,
    U+2212, U+2215, U+FEFF, U+FFFD;
}

/* ---------- tokeny (z Bungee) ---------- */

:root {
  --font-primary: Interdisplay, Arial, sans-serif;
  --font-display: Syne, Interdisplay, Arial, sans-serif;
  --font-sygnatura: 'Caveat', 'Bradley Hand', cursive;

  /* Paleta z Bungee zostaje jako surowe wartości, ale strona chodzi na
     warstwie znaczeniowej poniżej. Dzięki temu powrót na jasne tło to
     podmiana czterech linii, a nie polowanie na „black", który w ciemnym
     motywie znaczyłby biel. */
  --black: #1e1e1e;
  --text: #5a6271;
  --gray: #8a919b;
  --light-gray: #eef0f6;
  --border: #d0d8e4;
  --white: #ffffff;

  /* Jeden odstęp na trzy warstwy hero: sygnatura → hasło → wideo.
     Trzyma je w równych odległościach bez ręcznego dobierania paddingów. */
  --odstep-hero: 72px;

  /* ciemny motyw */
  --tlo: #121211;
  --tekst: #f2f1ed;
  --tekst-cichy: #7c7a74;
  --placeholder: #232322;
  --linia: rgba(242, 241, 237, 0.16);

  --h5-size: 1.5rem;
  --h5-lh: 1.2em;
}

/* ---------- reset ---------- */

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

html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  background: var(--tlo);
  color: var(--tekst);
  font-family: var(--font-primary);
  font-size: 16px;
  font-weight: 400;
  line-height: 1.5;
  /* Odstępy międzyliterowe zerowe wbrew szablonowi, który trzyma -0.01 do
     -0.03em na nagłówkach. Stała zasada Łukasza, ważniejsza niż wierność. */
  letter-spacing: 0;
  -webkit-font-smoothing: antialiased;
}

h1 { margin: 0; font-weight: 800; letter-spacing: 0; }

:focus-visible {
  outline: 2px solid var(--tekst);
  outline-offset: 4px;
}

/* ---------- belka górna ----------
   Nazwisko wróciło jako mała sygnatura w lewym górnym rogu, na wzór
   „The Direct" z referencji. Belka leży absolutnie nad hero — hero ma
   Pismo odręczne Caveat, w kontrze do geometrycznego Syne w haśle. Podpis
   stoi na osi ekranu, w jednym pionie z hasłem.

   Belka leży w normalnym przepływie wewnątrz hero, nie na pozycjonowaniu
   bezwzględnym: dzięki temu odstęp pod sygnaturą i odstęp pod hasłem bierze
   ta sama właściwość „gap" i nie da się ich rozjechać przy kolejnej zmianie. */

.belka {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  padding: 0 56px;
}

/* ---------- kontakt ----------
   Adres pokazany wprost, bez kroku pośredniego: jedno kliknięcie otwiera
   pocztę, a kto woli skopiować, ma adres na widoku. Zwykły odnośnik, więc
   działa bez JavaScriptu. */

.kontakt {
  font-family: var(--font-primary);
  font-size: 0.9375rem;
  font-weight: 500;
  letter-spacing: 0;
  color: var(--tekst);
  text-decoration: none;
  border-bottom: 1px solid rgba(242, 241, 237, 0.35);
  padding-bottom: 2px;
  transition: border-color 0.2s ease, opacity 0.2s ease;
  white-space: nowrap;
}

.kontakt:hover { border-bottom-color: var(--tekst); }

.logo {
  margin: 0;
  font-family: var(--font-sygnatura);
  /* Pismo odręczne ma niski x-height i cienkie kreski, więc przy stopniu
     szeryfu ginęłoby w rogu — stąd skok o połowę w górę. */
  font-size: clamp(1.5rem, 1.9vw, 1.75rem);
  font-weight: 500;
  line-height: 1;
  letter-spacing: 0;
  color: var(--tekst);
}

@media (max-width: 767px) {
  :root { --odstep-hero: 44px; }
  .belka { padding: 0 20px; }
  /* Sygnatura i adres mieszczą się w jednym rzędzie także na telefonie:
     87 px + 150 px + odstępy przy 335 px dostępnej szerokości. */
  .belka { gap: 12px; }
  .kontakt { font-size: 0.75rem; }
}

/* ---------- hero ---------- */

.hero {
  width: 100%;
  height: 100vh;
  height: 100svh;
  /* Górny oddech nad sygnaturą, dół bez oddechu — wideo dobija do krawędzi
     ekranu. Odstępy między warstwami robi „gap" na wrapperze. */
  padding: var(--odstep-hero) 0 0;
  overflow: hidden;
}

.hero__wrapper {
  display: flex;
  flex-direction: column;
  gap: var(--odstep-hero);
  width: 100%;
  height: 100%;
}

.hero__gora {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
  gap: 32px;
  padding: 0 32px;
  text-align: center;
}

.haslo {
  /* Bez ograniczenia szerokości: zdanie ma stać w jednej linii na desktopie,
     a łamać się dopiero wtedy, gdy nie mieści się w ekranie. */
  max-width: 100%;
  margin: 0;
  /* Wysokość rezerwuje ukryty egzemplarz najdłuższego stanu zdania
     (.haslo__miara), a żywy tekst leży na nim w tej samej komórce siatki.
     Bez tego nagłówek raz zajmuje jedną linię, raz dwie — zależnie od tego,
     ile liter akurat widać — a wideo pod spodem dostaje resztę wysokości
     hero i skacze przy każdym znaku. Rezerwacja przez ukrytą kopię, a nie
     przez sztywne „min-height", bo liczba linii zależy od szerokości ekranu:
     kopia łamie się dokładnie tak samo jak najdłuższy stan, na każdym
     urządzeniu. */
  display: grid;
  justify-items: center;
  font-family: var(--font-display);
  /* Hasło przejęło rolę głównego napisu po usunięciu „Chachulski", więc
     dostaje stopień nagłówka, nie podtytułu. Syne jest znacznie szerszy
     od garamondu przy tym samym stopniu, stąd niższy sufit clampa. */
  font-size: clamp(1.75rem, 4vw, 3rem);
  line-height: 1.15;
  /* Wgrany podzbiór Syne niesie grubości 700–800; 400 zjechałoby na Arial. */
  font-weight: 700;
  color: var(--tekst);
}

.haslo > * { grid-area: 1 / 1; }

.haslo__miara { visibility: hidden; }

.tylko-czytnik {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  border: 0;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

/* ---------- maszyna do pisania ----------
   Gniazdo nie rezerwuje już szerokości najdłuższego słowa: zdanie ma być
   wyśrodkowane w każdej klatce, więc linia przy każdym znaku układa się
   na nowo względem środka ekranu. */

.maszyna { display: inline; }

/* „pre", nie „nowrap": pisany ciąg zaczyna się od spacji („ in AI"), a ta
   przy zwykłym zwijaniu białych znaków znikałaby przy każdym przebiegu. */
.maszyna__zywe { white-space: pre; }

.maszyna__kursor {
  display: inline-block;
  width: 0.055em;
  height: 0.78em;
  margin-left: 0.06em;
  vertical-align: -0.06em;
  background: var(--tekst);
  animation: mruganie 1.06s steps(1, end) infinite;
}

@keyframes mruganie {
  0%, 50% { opacity: 1; }
  50.01%, 100% { opacity: 0; }
}

@media (prefers-reduced-motion: reduce) {
  .maszyna__kursor { animation: none; }
}

/* ---------- zakres pracy ----------
   Pas kwadratów pod wideo, rozdzielony włosowymi liniami. Kwadraty biorą
   się z „aspect-ratio: 1", nie ze sztywnej wysokości — dzięki temu bok
   zawsze równa się jednej czwartej szerokości ekranu.

   Linie tylko wewnętrzne: pionowe kreski na skrajnych krawędziach ekranu
   wyglądałyby jak niedomknięta ramka. Stąd zdejmowanie prawej krawędzi
   ostatniemu kafelkowi w rzędzie. */

.uslugi {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  border-top: 1px solid var(--linia);
  border-bottom: 1px solid var(--linia);
}

.usluga {
  position: relative;
  aspect-ratio: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
  border-right: 1px solid var(--linia);
  text-align: center;
  overflow: hidden;

  /* Punkt środkowy łuny. Skrypt podmienia te dwie wartości przy każdym
     ruchu myszy; do czasu pierwszego ruchu łuna czeka na środku kafelka. */
  --x: 50%;
  --y: 50%;
}

/* Łuna. Osobna warstwa, nie tło samego kafelka, bo tylko ją wygaszamy
   przezroczystością — gdyby to było tło, wygaszanie ruszałoby też napis. */
.usluga::before {
  content: '';
  position: absolute;
  inset: 0;
  background: radial-gradient(
    260px circle at var(--x) var(--y),
    rgb(var(--rgb) / 0.40),
    rgb(var(--rgb) / 0.12) 45%,
    transparent 72%
  );
  opacity: 0;
  transition: opacity 0.35s ease;
  pointer-events: none;
}

.usluga:nth-child(4n) { border-right: none; }

.usluga span {
  position: relative;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: clamp(1.1rem, 1.7vw, 1.6rem);
  line-height: 1.2;
  letter-spacing: 0;
  color: var(--tekst);
  transition: color 0.35s ease, text-shadow 0.35s ease;
}

/* Łuna pod kursorem — WYŁĄCZONA na życzenie Łukasza, 1 września.
   Kod zostaje w całości; włącza się dopisaniem klasy „uslugi--luna"
   do sekcji w index.html. Nic więcej nie trzeba zmieniać.

   Warunek „hover: hover" jest tu nie bez powodu: na dotyku stan najechania
   przykleja się po tapnięciu i kafelek świeciłby bez końca. */
@media (hover: hover) {
  .uslugi--luna .usluga:hover::before { opacity: 1; }

  .uslugi--luna .usluga:hover span {
    color: rgb(var(--rgb));
    text-shadow: 0 0 24px rgb(var(--rgb) / 0.55);
  }
}

@media (max-width: 767px) {
  /* Dwie kolumny: przy 375 px kwadrat z czterech kolumn miałby 94 px boku
     i napis „Social Media" nie zmieściłby się w nim czytelnie. */
  .uslugi { grid-template-columns: repeat(2, 1fr); }
  .usluga { padding: 16px; }
  .usluga:nth-child(4n) { border-right: 1px solid var(--linia); }
  .usluga:nth-child(2n) { border-right: none; }
  .usluga:nth-child(-n+2) { border-bottom: 1px solid var(--linia); }
}

/* ---------- prace: rząd prostokątnych kadrów ----------
   Rząd zszedł z hero do własnej sekcji pod nim: hero zajmuje teraz wideo. */

.prace-sekcja { padding: 96px 0; }

/* ---------- ciąg dalszy ----------
   Wzór ze screena: pięć równych kolumn przez całą szerokość, kadr pionowy
   prostokąt bez zaokrągleń, nad każdym mały numer. Rząd celowo schodzi poza
   dolną krawędź ekranu — dopiero przewinięcie pokazuje kadry w całości. */

.prace {
  /* Sześć kolumn, bo pierwszy kafel zajmuje dwie — w rzędzie nadal stoi
     pięć prac. „stretch" zamiast „start": rząd bierze wysokość od zwykłego
     kafla, a szeroki dociąga się do niej zamiast rosnąć proporcjonalnie
     (przy dwukrotnej szerokości i proporcji 3:4 byłby dwa razy wyższy). */
  display: grid;
  /* Dwie prace: szeroka i wąska, w proporcji 2:1. Kolumny zamiast „span",
     bo przy dwóch pozycjach rząd ma wypełnić szerokość, a nie urwać się
     w połowie ekranu. Przy trzeciej pracy wrócić do repeat(6, 1fr). */
  grid-template-columns: 2fr 1fr;
  gap: 40px;
  align-items: stretch;
  padding: 0 56px;
}

.praca {
  margin: 0;
  display: flex;
  flex-direction: column;
}

.praca--szeroki .praca__kadr {
  aspect-ratio: auto;
  flex: 1;
  min-height: 0;
  position: relative;
}

/* Treść szerokiego kafla wyjęta z układu na pozycjonowanie bezwzględne.
   Inaczej to ona narzucałaby wysokość: przy szerokości dwóch kolumn film
   o proporcji 2:3 rozpychał rząd do 544 px zamiast 215 px zwykłego kafla.
   Wysokość rzędu ma dyktować zwykły kafel, a szeroki tylko się w nią
   wpisywać — reguła obejmuje i wideo, i zdjęcie, bo zawartość kafli
   wymienia się między sobą. */
.praca--szeroki .praca__kadr > * {
  position: absolute;
  inset: 0;
}

.praca__numer {
  display: block;
  margin-bottom: 14px;
  font-size: 0.75rem;
  line-height: 1;
  color: var(--tekst-cichy);
  letter-spacing: 0;
}

.praca__kadr {
  aspect-ratio: 3 / 4;
  background: var(--placeholder);
  overflow: hidden;
}

.praca__kadr video,
.praca__kadr img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

@media (max-width: 1023px) {
  .prace { gap: 28px; padding: 0 32px; }
}

@media (max-width: 767px) {
  /* Jedna kolumna: przy 375 px wąski kafel obok szerokiego miałby ledwie
     100 px. Szeroki dostaje własną proporcję, bo nie ma już sąsiada,
     od którego brałby wysokość rzędu. */
  .prace { grid-template-columns: 1fr; gap: 24px; padding: 0 20px; }

  .praca--szeroki .praca__kadr {
    aspect-ratio: 16 / 10;
    flex: none;
  }
}

/* ---------- deklaracja pod hero ----------
   Odpowiednik .home-about z Bungee: jedno zdanie, wyśrodkowane, w kolumnie
   650 px, stopień h3 (3 rem), padding 120/32. W oryginale pod spodem leci
   wstęga logotypów klientów — u nas jej nie ma i nie będzie, dopóki nie
   ustalimy, czyje znaki wolno pokazać. */

.deklaracja { padding: 120px 32px; }

.deklaracja__tresc {
  display: flex;
  flex-direction: column;
  gap: 24px;
  max-width: 650px;
  margin: 0 auto;
  text-align: center;
}

.deklaracja h2 {
  margin: 0;
  font-size: 3rem;
  font-weight: 500;
  line-height: 1.1;
  letter-spacing: 0;
  text-wrap: balance;
}

/* ---------- showreel pod deklaracją ----------
   Materiał leży poniżej pierwszego ekranu, więc ładuje się dopiero wtedy,
   gdy wejdzie w pole widzenia (preload="none" + obserwator w maszyna.js).
   Bez tego każdy odwiedzający pobierałby 4 MB, także ten, który nigdy tu
   nie doscrolluje. */

.showreel {
  width: 100%;
  margin: 0;
  /* Bierze całą wysokość, jaka zostaje w hero pod hasłem. „min-height: 0"
     jest konieczne: bez niego element flex nie schodzi poniżej wysokości
     własnej treści i wideo rozpycha hero poza ekran. */
  flex: 1;
  min-height: 0;
}

.showreel video {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  background: var(--placeholder);
}

/* Adres na dole strony. W górnym pasie stoi w 15 px, bo tam jest przypisem;
   tutaj kończy czytanie i musi być tym, w co się klika. */
.deklaracja__kontakt {
  align-self: center;
  margin-top: 20px;
  font-family: var(--font-primary);
  font-size: clamp(1.125rem, 2vw, 1.5rem);
  font-weight: 500;
  letter-spacing: 0;
  color: var(--tekst);
  text-decoration: none;
  border-bottom: 1px solid rgba(242, 241, 237, 0.35);
  padding-bottom: 6px;
  transition: border-color 0.2s ease;
}

.deklaracja__kontakt:hover { border-bottom-color: var(--tekst); }

@media (max-width: 767px) {
  .deklaracja { padding: 72px 20px; }
  .deklaracja h2 { font-size: 1.875rem; }
  .deklaracja__kontakt { font-size: 1rem; }
}