/* ============================================================
   JURLEJ — HERO
   Wszystkie wymiary w jednostce --u: 1 piksel wzorca 1920×1080
   (inspiracja.png). Liczby w calc() to piksele zmierzone na wzorcu.
   --u bierze mniejszą ze skal (szerokość / wysokość), więc na niskim
   oknie przeglądarki cała kompozycja mieści się w pionie.
   ============================================================ */

@property --u {
  syntax: '<length>';
  inherits: true;
  initial-value: 1px;
}

@font-face {
  font-family: 'Draco';
  src: url('../fonts/Draco.woff2') format('woff2');
  font-weight: 400;
  font-style: normal;
  font-display: block;
}

:root {
  --u: min(100vw / 1920, 100svh / 1080);
  --tlo: #f8f8f8;
  --grafit: #262525;
  --szary: #817a79;
  --czerwien: #8f1d14;
  --czerwien-ciemna: #5e0000;
  --ease: cubic-bezier(.16, 1, .3, 1);
  --ease-ruch: cubic-bezier(.83, 0, .17, 1);

  /* Geometria karty — czyta ją js/hero.js (liczby = piksele wzorca). */
  --r-karta: 30;      /* rogi karty */
  --ln-l: 74;         /* wycięcie na logo: odległość od lewego rogu */
  --ln-s: 46;         /* poziomy wysięg skośnej ścianki */
  --ln-w: 126;        /* szerokość dna wycięcia */
  --ln-d: 50;         /* głębokość wycięcia — napisy menu niżej od krawędzi */
  --ln-r: 28;         /* promień w załamaniach — duży, żeby łuk był miękki */
  --bn-w: 333;        /* wycięcie na przycisk: szerokość */
  --bn-h: 115;        /*                       wysokość */
  --bn-r: 28;         /* promień wklęsły */
  --menu-d: 50;       /* wklęśnięcie pod menu — ta sama forma co wycięcie HOME */
  --menu-pad: 16;     /* zapas dna po bokach napisu */
  --sz-r: 28;         /* rogi szkła */
  --sz-n: 84;         /* wycięcie w szkle */
  --soc-r: 26;        /* przycisk social: promień koła pod ikoną */
  --soc-d: 68;        /*   odstęp środków kół — duży, więc przewężenia są głębokie */
  --soc-f: 14;        /*   promień wklęsłego łuku w przewężeniu */
  --soc-g: 18;        /*   przerwa między przyciskiem a wycięciem karty */
}

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

html { background: var(--tlo); -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  background: var(--tlo);
  color: var(--grafit);
  font-family: 'Manrope', system-ui, sans-serif;
  -webkit-font-smoothing: antialiased;
  font-synthesis: none;
  overflow-x: clip;
}
a { color: inherit; text-decoration: none; }
.sr {
  position: absolute; width: 1px; height: 1px; overflow: hidden;
  clip: rect(0 0 0 0); white-space: nowrap;
}

/* ============================================================
   SEKCJA
   ============================================================ */
.hero {
  position: relative;
  height: 100vh;
  height: 100svh;
  min-height: calc(760 * var(--u));
  overflow: hidden;
  isolation: isolate;
}

/* ---------------- karta ze zdjęciem ---------------- */
.karta-cien {
  position: absolute;
  top: calc(42 * var(--u));
  left: calc(39 * var(--u));
  right: calc(40 * var(--u));
  bottom: calc(48 * var(--u));
  filter: blur(0) drop-shadow(0 calc(20 * var(--u)) calc(30 * var(--u)) rgba(22, 22, 28, .16));
}
.karta {
  position: absolute;
  inset: 0;
  overflow: hidden;
  border-radius: calc(var(--r-karta) * var(--u));
  background: linear-gradient(180deg, #cfd0d4, #d9dadd 60%, #eeeef0);
}
.karta__auto {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 100% 62%;
  scale: 1.04;
  user-select: none;
  -webkit-user-drag: none;
}

/* Warstwa ruchu: skala i paralaksa takie same jak zdjęcia, więc
   światło (i maska auta z przodu) idą razem z autem. */
.karta__ruch {
  position: absolute;
  inset: 0;
  scale: 1.04;
  pointer-events: none;
}

/* Auto nad napisami — ta sama karta, to samo dopasowanie zdjęcia. */
.karta-przod {
  position: absolute;
  z-index: 3;
  top: calc(42 * var(--u));
  left: calc(39 * var(--u));
  right: calc(40 * var(--u));
  bottom: calc(48 * var(--u));
  overflow: hidden;
  border-radius: calc(var(--r-karta) * var(--u));
  pointer-events: none;
}
/* Światło na przedniej warstwie przycięte do kształtu auta — pas
   przechodzi przez dach bez szwu na krawędzi wycięcia. */
.karta-przod__maska {
  -webkit-mask: url('../img/auto-przod.webp') 100% 62% / cover no-repeat;
  mask: url('../img/auto-przod.webp') 100% 62% / cover no-repeat;
}

/* Światło studyjne: jasny pas przechodzi po lakierze co kilka sekund.
   `screen` rozjaśnia ciemne szyby i felgi, a na białej ścianie prawie
   go nie widać — dlatego wygląda jak odbicie, a nie jak plama. Maska
   gasi go po lewej, nad pustą ścianą z tekstem. */
.karta__swiatlo {
  position: absolute;
  top: -10%;
  bottom: -10%;
  left: 0;
  width: 42%;
  background: linear-gradient(100deg,
    rgba(255, 255, 255, 0) 0%,
    rgba(255, 255, 255, .10) 30%,
    rgba(255, 255, 255, .55) 48%,
    rgba(255, 255, 255, .62) 52%,
    rgba(255, 255, 255, .10) 70%,
    rgba(255, 255, 255, 0) 100%);
  mix-blend-mode: screen;
  transform: translate3d(-110%, 0, 0) skewX(-14deg);
  pointer-events: none;
}

/* ---------------- sygnet w prawym górnym wycięciu karty ---------------- */
/* wycięcie na sygnet w prawym górnym rogu karty (liczy js/hero.js) */
.hero { --sg-r: 42; --sg-g: 16; }
.sygnet {
  position: absolute;
  z-index: 3;
  top: calc(42 * var(--u));
  right: calc(40 * var(--u));
  width: calc(2 * var(--sg-r) * var(--u));
  height: calc(2 * var(--sg-r) * var(--u));
  display: block;
}
.sygnet img {
  display: block;
  width: 100%;
  height: 100%;
  filter: drop-shadow(0 calc(10 * var(--u)) calc(16 * var(--u)) rgba(0, 0, 0, .22));
}
/* wejście: zębatka wkręca się na miejsce (po najechaniu bez ruchu) */
.js .sygnet { opacity: 0; rotate: -140deg; scale: .6; transition: opacity .4s var(--ease), rotate .6s var(--ease), scale .6s var(--ease); }
.js .hero.jest-w-kadrze .sygnet { opacity: 1; rotate: 0deg; scale: 1; transition-duration: 1.4s, 2.2s, 1.8s; transition-delay: 2.3s; }

/* ---------------- logo (tylko telefon) ---------------- */
.logo {
  display: none;
  position: absolute;
  z-index: 3;
  left: calc(156.3 * var(--u));
  top: calc(54 * var(--u));
  font: 400 calc(12.5 * var(--u))/1 'Draco', sans-serif;
  color: var(--czerwien);
  white-space: nowrap;
}

/* ---------------- menu ---------------- */
.menu { position: absolute; inset: 0 0 auto 0; z-index: 3; height: 0; }
.menu__poz {
  position: absolute;
  top: calc(61 * var(--u));     /* środek napisu w połowie głębokości wycięcia */
  left: calc(var(--x) * var(--u));
  display: block;
}
/* Równe odstępy 140 między napisami. Mniej się nie da: wklęśnięcie pod
   O NAS zahaczałoby łukiem o stałe wycięcie HOME. */
.menu__poz:nth-child(1) { --x: 173.2; }   /* HOME: środek dna wycięcia na x 222 */
.menu__poz:nth-child(2) { --x: 411.2; }
.menu__poz:nth-child(3) { --x: 662.2; }
.menu__poz:nth-child(4) { --x: 931.2; }
/* Pole najechania obejmuje też wklęśnięcie pod napisem. */
.menu__poz::before {
  content: '';
  position: absolute;
  inset: calc(-61 * var(--u)) calc(-24 * var(--u)) calc(-30 * var(--u));
}
.menu__napis {
  display: block;
  font: 400 calc(14 * var(--u))/1 'Draco', sans-serif;
  color: #2e2928;
  white-space: nowrap;
  transition: color .25s var(--ease), translate .4s var(--ease);
}
/* napis lekko unosi się po najechaniu */
.menu__poz:hover .menu__napis,
.menu__poz.jest-nad .menu__napis,
.menu__poz:focus-visible .menu__napis { translate: 0 calc(-4 * var(--u)); }
.menu__poz.jest-aktywna .menu__napis,
.menu__poz.jest-nad .menu__napis,
.menu__poz:focus-visible .menu__napis { color: var(--czerwien); }
.menu__poz:focus-visible { outline: none; }

.menu-tel, .menu-panel { display: none; }

/* ---------------- nagłówek ---------------- */
.tytul { margin: 0; font-weight: 400; }
.tytul__duzy, .tytul__pod {
  position: absolute;
  z-index: 2;
  font-family: 'Draco', sans-serif;
  font-weight: 400;
  line-height: 1;
  white-space: nowrap;
}
.tytul__duzy {
  left: calc(97.1 * var(--u));
  top: calc(208 * var(--u));
  font-size: calc(94 * var(--u));
  letter-spacing: .0691em;
  color: var(--grafit);
}
.tytul__pod {
  left: calc(85.5 * var(--u));
  top: calc(299.9 * var(--u));
  font-size: calc(28 * var(--u));
  letter-spacing: .084em;
  color: var(--szary);
}
.z { display: inline-block; flex: none; font-style: normal; }
.z--spacja { white-space: pre; }

/* ---------------- za szkłem ---------------- */
.za-szklem {
  position: absolute;
  inset: 0;
  z-index: 4;          /* przed wyciętym autem (z 3) */
  pointer-events: none;
}
.za-szklem__linie {
  position: absolute;
  left: calc(30 * var(--u));
  top: calc(600 * var(--u));
  width: calc(880 * var(--u));
  transform: rotate(-9deg);
  transform-origin: 0 50%;
}
.za-szklem__linie i {
  display: block;
  height: calc(2 * var(--u));
  min-height: 1px;
  border-radius: 2px;
  background: linear-gradient(90deg,
    rgba(143, 29, 20, 0) 0%, rgba(143, 29, 20, .7) 22%,
    rgba(70, 68, 68, .45) 70%, rgba(70, 68, 68, 0) 100%);
}
.za-szklem__linie i + i {
  margin-top: calc(9 * var(--u));
  height: calc(1 * var(--u));
  margin-left: calc(60 * var(--u));
  opacity: .7;
}
/* ---------------- szkło ---------------- */
.szklo {
  position: absolute;
  z-index: 5;          /* szkło przed autem i przed liniami */
  left: calc(106 * var(--u));
  top: calc(392 * var(--u));
  width: calc(687 * var(--u));
  height: calc(268 * var(--u));
}
.szklo__cien {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  overflow: visible;
  transform: translate3d(0, calc(14 * var(--u)), 0);
  pointer-events: none;
}
.szklo__cien path { fill: rgba(40, 40, 50, .16); }
.szklo__tafla {
  position: absolute;
  inset: 0;
  overflow: hidden;
  border-radius: calc(var(--sz-r) * var(--u));
  background:
    linear-gradient(180deg, rgba(255, 255, 255, .10), rgba(255, 255, 255, 0) 30%),
    linear-gradient(155deg, rgba(255, 255, 255, .46) 0%, rgba(255, 255, 255, .14) 42%, rgba(255, 255, 255, .30) 100%);
  -webkit-backdrop-filter: blur(22px) saturate(1.5) brightness(1.06);
  backdrop-filter: blur(22px) saturate(1.5) brightness(1.06);
  box-shadow:
    inset 0 calc(14 * var(--u)) calc(26 * var(--u)) calc(-12 * var(--u)) rgba(0, 0, 0, .10),
    inset 0 calc(-20 * var(--u)) calc(40 * var(--u)) calc(-10 * var(--u)) rgba(255, 255, 255, .35);
}
.szklo__blik {
  position: absolute;
  inset: 0;
  background: radial-gradient(calc(300 * var(--u)) circle at var(--gx, 25%) var(--gy, 10%),
    rgba(255, 255, 255, .55), rgba(255, 255, 255, 0) 70%);
  opacity: .7;
  pointer-events: none;
}
.szklo__obrys {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  overflow: visible;
  pointer-events: none;
}
.szklo__obrys path { fill: none; stroke: url(#szkloKrawedz); stroke-width: 1.5; }

.szklo__tresc {
  position: relative;
  padding: calc(34 * var(--u)) calc(44 * var(--u)) 0;
}
.szklo__nad {
  margin: 0;
  font-size: calc(11.5 * var(--u));
  font-weight: 700;
  letter-spacing: .24em;
  text-transform: uppercase;
  color: var(--czerwien);
}
.szklo__nad b { color: #a29c9b; font-weight: 700; margin: 0 .2em; }
.szklo__akapit {
  margin: calc(14 * var(--u)) 0 0;
  max-width: calc(560 * var(--u));
  font-size: calc(16 * var(--u));
  line-height: 1.6;
  font-weight: 500;
  color: #3b3939;
  text-wrap: pretty;
}
.szklo__liczby {
  display: flex;
  gap: calc(44 * var(--u));
  margin: calc(22 * var(--u)) 0 0;
  padding: 0;
  list-style: none;
}
.szklo__liczby strong {
  display: block;
  font: 400 calc(24 * var(--u))/1 'Draco', sans-serif;
  color: var(--grafit);
}
.szklo__liczby span {
  display: block;
  margin-top: calc(8 * var(--u));
  font-size: calc(10.5 * var(--u));
  font-weight: 700;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: #7b7574;
}

/* okrągły przycisk w wycięciu szkła */
.szklo__strzalka {
  position: absolute;
  right: calc(2 * var(--u));
  bottom: calc(2 * var(--u));
  width: calc(60 * var(--u));
  height: calc(60 * var(--u));
  border-radius: 50%;
  display: grid;
  place-items: center;
  background:
    linear-gradient(180deg, rgba(150, 148, 148, .7) 0%, rgba(150, 148, 148, .25) 36%, rgba(150, 148, 148, 0) 50%),
    radial-gradient(120% 120% at 30% 75%, #8a0001, #6a0000 55%, #560000);
  box-shadow:
    0 0 0 calc(3 * var(--u)) #cfcfcf,
    0 calc(10 * var(--u)) calc(22 * var(--u)) rgba(90, 0, 0, .35);
  transition: box-shadow .3s var(--ease);
}
.szklo__strzalka svg {
  width: 42%;
  height: 42%;
  fill: none;
  stroke: #fff;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
  transition: translate .4s var(--ease-ruch);
}
.szklo__strzalka:hover svg,
.szklo__strzalka:focus-visible svg { translate: 15% 0; }
.szklo__strzalka:hover {
  box-shadow:
    0 0 0 calc(3 * var(--u)) #fff,
    0 calc(14 * var(--u)) calc(28 * var(--u)) rgba(120, 0, 0, .45);
}

/* ---------------- social w prawym dolnym wycięciu ----------------
   Czerwony przycisk jak KONTAKT, ale pionowy: trzy koła połączone
   zaokrąglonymi przewężeniami. Kształt (clip-path) i szarą obwódkę
   liczy js/hero.js z --soc-r i --soc-d. Ikony: w spoczynku same,
   po najechaniu szklane kółko, pierścień i poświata. */
.social {
  position: absolute;
  z-index: 3;
  right: calc(40 * var(--u));
  bottom: calc(48 * var(--u));
  width: calc(2 * var(--soc-r) * var(--u));
  height: calc((2 * var(--soc-r) + 2 * var(--soc-d)) * var(--u));
  display: flex;
  flex-direction: column;
  align-items: center;
  filter: drop-shadow(0 calc(12 * var(--u)) calc(22 * var(--u)) rgba(90, 0, 0, .28));
}
.social__tlo,
.social__obwodka {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
}
.social__obwodka { overflow: visible; }
/* obwódka: szeroka linia pod tłem — widać tylko jej zewnętrzną połowę */
.social__obwodka path { fill: none; stroke: #c8c8c8; stroke-width: calc(6 * var(--u)); }
.social__tlo {
  border-radius: 999px;
  background:
    linear-gradient(90deg, rgba(150, 148, 148, .62) 0%, rgba(150, 148, 148, .2) 38%, rgba(150, 148, 148, 0) 55%),
    linear-gradient(180deg, #880000 0%, #700000 50%, #5c0000 100%);
}
.soc {
  position: relative;
  flex: none;
  display: grid;
  place-items: center;
  width: calc(2 * var(--soc-r) * var(--u));
  height: calc(2 * var(--soc-r) * var(--u));
  border-radius: 50%;
  color: #fff;
}
.soc + .soc { margin-top: calc((var(--soc-d) - 2 * var(--soc-r)) * var(--u)); }
.soc::before {
  content: '';
  position: absolute;
  inset: calc(5 * var(--u));
  border-radius: 50%;
  border: 1px solid rgba(255, 255, 255, .45);
  background: linear-gradient(145deg, rgba(255, 255, 255, .22), rgba(255, 255, 255, .04));
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .5);
  opacity: 0;
  transform: scale(.55);
  transition: opacity .45s var(--ease), transform .45s var(--ease);
}
.soc::after {
  content: '';
  position: absolute;
  inset: calc(5 * var(--u));
  border-radius: 50%;
  border: 1px solid rgba(255, 255, 255, .7);
  opacity: 0;
}
.soc svg {
  position: relative;
  z-index: 1;
  width: calc(19 * var(--u));
  height: calc(19 * var(--u));
  filter: drop-shadow(0 1px 2px rgba(0, 0, 0, .3));
  transition: transform .45s var(--ease), filter .45s var(--ease);
}
.soc:hover::before,
.soc:focus-visible::before { opacity: 1; transform: scale(1); }
.soc:hover::after { animation: pierscien .9s var(--ease); }
.soc:hover svg,
.soc:focus-visible svg {
  transform: scale(1.16) translateY(-1px);
  filter: drop-shadow(0 0 10px rgba(255, 255, 255, .85));
}
.soc:focus-visible { outline: none; }
@keyframes pierscien {
  0%   { opacity: .9; transform: scale(1); }
  100% { opacity: 0; transform: scale(1.6); }
}

/* ---------------- przycisk WIECEJ ---------------- */
.wiecej {
  position: absolute;
  z-index: 3;
  left: calc(44 * var(--u));
  bottom: calc(48 * var(--u));
  width: calc(308 * var(--u));
  height: calc(96 * var(--u));
  border-radius: calc(18 * var(--u));
  display: grid;
  place-items: center;
  overflow: hidden;
  background:
    linear-gradient(180deg,
      rgba(150, 148, 148, .74) 0%,
      rgba(150, 148, 148, .55) 18%,
      rgba(150, 148, 148, .22) 36%,
      rgba(150, 148, 148, 0) 50%),
    linear-gradient(90deg, #820000 0%, #870000 14%, #700000 50%, #5d0000 64%, #670000 86%, #670000 100%);
  box-shadow:
    0 0 0 calc(3 * var(--u)) #c8c8c8,
    0 calc(12 * var(--u)) calc(26 * var(--u)) rgba(90, 0, 0, .28);
  transition: box-shadow .35s var(--ease);
}
.wiecej__napis {
  position: relative;
  z-index: 1;
  font: 400 calc(15 * var(--u))/1 'Draco', sans-serif;   /* szerokość napisu jak na wzorcu */
  color: #fff;
  translate: calc(-4 * var(--u)) calc(2 * var(--u));
  text-shadow: 0 1px 2px rgba(0, 0, 0, .3);
}
/* odblask przechodzący po lakierze przycisku */
.wiecej::after {
  content: '';
  position: absolute;
  top: -20%;
  bottom: -20%;
  left: 0;
  width: 40%;
  background: linear-gradient(100deg, rgba(255, 255, 255, 0), rgba(255, 255, 255, .45) 50%, rgba(255, 255, 255, 0));
  transform: translate3d(-160%, 0, 0) skewX(-18deg);
  transition: transform .9s var(--ease);
  pointer-events: none;
}
.wiecej:hover::after,
.wiecej:focus-visible::after { transform: translate3d(330%, 0, 0) skewX(-18deg); }
.wiecej:hover,
.wiecej:focus-visible {
  box-shadow:
    0 0 0 calc(3 * var(--u)) #fff,
    0 calc(16 * var(--u)) calc(34 * var(--u)) rgba(120, 0, 0, .38);
  outline: none;
}

/* ============================================================
   WEJŚCIE I WYJŚCIE
   Stan ukryty tylko pod `.js`, żeby bez skryptu treść była widoczna.
   Wejście: wolno i po kolei. Wyjście: ta sama kolejka od tyłu, krócej.
   ============================================================ */
.js .karta-cien,
.js .karta-przod,
.js .karta__auto,
.js .karta__ruch,
.js .logo,
.js .menu__poz,
.js .z,
.js .szklo,
.js .szklo__tresc > *,
.js .szklo__strzalka,
.js .wiecej {
  transition-timing-function: var(--ease);
}

/* karta */
.js .karta-cien {
  opacity: 0;
  transform: scale(.965);
  filter: blur(14px) drop-shadow(0 calc(20 * var(--u)) calc(30 * var(--u)) rgba(22, 22, 28, 0));
  transition-property: opacity, transform, filter;
  transition-duration: .7s, .9s, .7s;
  transition-delay: .55s;
}
.js .hero.jest-w-kadrze .karta-cien {
  opacity: 1;
  transform: none;
  filter: blur(0) drop-shadow(0 calc(20 * var(--u)) calc(30 * var(--u)) rgba(22, 22, 28, .16));
  transition-duration: 1.6s, 2s, 1.6s;
  transition-delay: 0s;
}
.js .karta__auto, .js .karta__ruch { scale: 1.16; transition: scale 1s var(--ease); }
.js .hero.jest-w-kadrze .karta__auto,
.js .hero.jest-w-kadrze .karta__ruch { scale: 1.04; transition: scale 3.4s var(--ease); }
.js .karta-przod {
  opacity: 0;
  transform: scale(.965);
  filter: blur(14px);
  transition-property: opacity, transform, filter;
  transition-duration: .7s, .9s, .7s;
  transition-delay: .55s;
}
.js .hero.jest-w-kadrze .karta-przod {
  opacity: 1;
  transform: none;
  filter: blur(0);
  transition-duration: 1.6s, 2s, 1.6s;
  transition-delay: 0s;
}

/* logo i menu */
.js .logo,
.js .menu__poz {
  opacity: 0;
  translate: 0 calc(-14 * var(--u));
  filter: blur(7px);
  transition-property: opacity, translate, filter;
  transition-duration: .45s, .55s, .45s;
  transition-delay: calc(.35s + (3 - var(--i, -1)) * .04s);
}
.js .hero.jest-w-kadrze .logo,
.js .hero.jest-w-kadrze .menu__poz {
  opacity: 1;
  translate: 0 0;
  filter: blur(0);
  transition-duration: 1.5s, 2s, 1.5s;
  transition-delay: calc(.5s + (var(--i, -1) + 1) * .18s);
}

/* litery nagłówka */
.js .z {
  opacity: 0;
  transform: translate3d(-.5em, 0, 0);
  filter: blur(8px);
  transition-property: opacity, transform, filter;
  transition-duration: .45s, .55s, .45s;
  transition-delay: calc(var(--wy, 0s) + (var(--n) - var(--l)) * .03s);
}
.tytul__duzy { --n: 5; --wy: .3s; }
.tytul__pod { --n: 19; --wy: .1s; }
.js .hero.jest-w-kadrze .z {
  opacity: 1;
  transform: none;
  filter: blur(0);
  transition-duration: .9s, 1.15s, .9s;
  transition-delay: calc(var(--b) + var(--l) * var(--k));
}
.tytul__duzy .z { --b: .95s; --k: .085s; }
.tytul__pod .z { --b: 1.55s; --k: .032s; }

/* linie za szkłem — dopiero gdy tafla już stoi */
/* Szkło kończy ruch po ok. 4 s (start 2,05 s + 2 s), linie ruszają
   dopiero potem i rysują się od lewej. */
.js .za-szklem { opacity: 0; transition: opacity .4s var(--ease); }
.js .za-szklem__linie i { scale: 0 1; transform-origin: 0 50%; transition: scale .4s var(--ease); }
.js .hero.jest-w-kadrze .za-szklem { opacity: 1; transition: opacity 1s var(--ease) 4s; }
.js .hero.jest-w-kadrze .za-szklem__linie i { scale: 1 1; transition: scale 1.8s var(--ease) 4s; }
.js .hero.jest-w-kadrze .za-szklem__linie i + i { transition-delay: 4.2s; }

/* szkło — sama tafla bez filtra rozmycia, bo filtr na elemencie
   z backdrop-filter psuje rozmycie tła */
.js .szklo {
  opacity: 0;
  translate: 0 calc(34 * var(--u));
  scale: .96;
  transition-property: opacity, translate, scale;
  transition-duration: .5s, .6s, .6s;
  transition-delay: .12s;
}
.js .hero.jest-w-kadrze .szklo {
  opacity: 1;
  translate: 0 0;
  scale: 1;
  transition-duration: 1.6s, 2s, 2s;
  transition-delay: 2.05s;
}
.js .szklo__tresc > * {
  opacity: 0;
  translate: 0 calc(16 * var(--u));
  filter: blur(7px);
  transition-property: opacity, translate, filter;
  transition-duration: .4s, .5s, .4s;
  transition-delay: 0s;
}
.js .hero.jest-w-kadrze .szklo__tresc > * {
  opacity: 1;
  translate: 0 0;
  filter: blur(0);
  transition-duration: 1.5s, 1.9s, 1.5s;
}
.js .hero.jest-w-kadrze .szklo__tresc > :nth-child(1) { transition-delay: 2.35s; }
.js .hero.jest-w-kadrze .szklo__tresc > :nth-child(2) { transition-delay: 2.55s; }
.js .hero.jest-w-kadrze .szklo__tresc > :nth-child(3) { transition-delay: 2.75s; }

.js .szklo__strzalka {
  opacity: 0;
  scale: .4;
  transition-property: opacity, scale, box-shadow;
  transition-duration: .4s, .5s, .3s;
}
.js .hero.jest-w-kadrze .szklo__strzalka {
  opacity: 1;
  scale: 1;
  transition-duration: 1.2s, 1.4s, .3s;
  transition-delay: 3.05s, 3.05s, 0s;
}

/* przycisk */
.js .wiecej {
  opacity: 0;
  translate: calc(-40 * var(--u)) 0;
  filter: blur(8px);
  transition-property: opacity, translate, filter, box-shadow;
  transition-duration: .45s, .55s, .45s, .35s;
  transition-delay: 0s;
}
.js .hero.jest-w-kadrze .wiecej {
  opacity: 1;
  translate: 0 0;
  filter: blur(0);
  transition-duration: 1.5s, 2s, 1.5s, .35s;
  transition-delay: 2.85s, 2.85s, 2.85s, 0s;
}

/* przycisk social — po KONTAKT, potem ikony jedna po drugiej */
.js .social {
  opacity: 0;
  translate: 0 calc(60 * var(--u));
  transition: opacity .45s var(--ease), translate .55s var(--ease);
}
.js .hero.jest-w-kadrze .social {
  opacity: 1;
  translate: 0 0;
  transition-duration: 1.4s, 1.9s;
  transition-delay: 2.95s;
}
.js .soc {
  opacity: 0;
  translate: 0 calc(22 * var(--u));
  filter: blur(6px);
  transition: opacity .4s var(--ease), translate .5s var(--ease), filter .4s var(--ease);
}
.js .hero.jest-w-kadrze .soc {
  opacity: 1;
  translate: 0 0;
  filter: blur(0);
  transition-duration: 1.3s, 1.7s, 1.3s;
  transition-delay: calc(3.1s + var(--i) * .15s);
}

/* światło studyjne rusza dopiero, gdy wszystko stoi */
.hero.jest-w-kadrze .karta__swiatlo {
  animation: swiatlo 8s cubic-bezier(.45, .05, .35, 1) 3.6s infinite;
}
@keyframes swiatlo {
  0%   { transform: translate3d(-110%, 0, 0) skewX(-14deg); }
  34%  { transform: translate3d(260%, 0, 0) skewX(-14deg); }
  100% { transform: translate3d(260%, 0, 0) skewX(-14deg); }
}

/* ============================================================
   KURSOR
   ============================================================ */
.kursor { display: none; }
.kursor-wlasny, .kursor-wlasny * { cursor: none !important; }
.kursor-wlasny .kursor {
  display: block;
  position: fixed;
  inset: 0;
  z-index: 9999;
  pointer-events: none;
}
.kursor__kropka, .kursor__pierscien {
  position: absolute;
  left: 0;
  top: 0;
  border-radius: 50%;
  opacity: 0;
  transition: opacity .3s ease;
}
.kursor.jest-widoczny .kursor__kropka,
.kursor.jest-widoczny .kursor__pierscien { opacity: 1; }
.kursor__kropka {
  width: 6px;
  height: 6px;
  margin: -3px 0 0 -3px;
  background: var(--czerwien);
}
.kursor__pierscien {
  width: 34px;
  height: 34px;
  margin: -17px 0 0 -17px;
  border: 1.5px solid rgba(38, 37, 37, .45);
  display: grid;
  place-items: center;
  transition: opacity .3s ease, width .45s var(--ease), height .45s var(--ease), margin .45s var(--ease),
              background-color .35s ease, border-color .35s ease;
}
.kursor.jest-nad .kursor__pierscien {
  width: 70px;
  height: 70px;
  margin: -35px 0 0 -35px;
  border-color: rgba(143, 29, 20, .7);
  background-color: rgba(143, 29, 20, .06);
}
.kursor.jest-wcisniety .kursor__pierscien { scale: .85; }

/* ============================================================
   SEKCJA TESTOWA — to samo tło, więc styk jest bez linii
   ============================================================ */
.test {
  min-height: 100svh;
  display: grid;
  place-items: center;
  background: linear-gradient(180deg, var(--tlo), #efefef);
  color: #9a9493;
  font-size: 14px;
  letter-spacing: .04em;
}

/* ============================================================
   TELEFON I PIONOWY EKRAN
   Osobna kompozycja w skali 390 px. Proporcje nagłówka i podtytułu
   te same co na wzorcu: podtytuł ma 0,966 szerokości nagłówka,
   odstęp między nimi 0,234 stopnia nagłówka.
   ============================================================ */
@media (max-width: 900px), (max-aspect-ratio: 1/1) {
  :root {
    --u: min(100vw / 390, 1.9px);
    --r-karta: 22;
    --ln-l: 12;
    --ln-s: 20;
    --ln-w: 128;
    --ln-d: 30;
    --lg-r: 22;         /* sygnet w lewym górnym rogu karty, jak w stopce */
    --lg-g: 9;
    --ln-r: 13;
    --bn-w: 196;
    --bn-h: 74;
    --bn-r: 16;
    --sz-r: 20;
    --sz-n: 62;
    --soc-r: 20;
    --soc-d: 52;
    --soc-f: 11;
    --soc-g: 12;
  }
  .hero { min-height: calc(700 * var(--u)); }

  .karta-cien,
  .js .hero.jest-w-kadrze .karta-cien {
    top: calc(10 * var(--u));
    left: calc(10 * var(--u));
    right: calc(10 * var(--u));
    bottom: calc(12 * var(--u));
    filter: blur(0) drop-shadow(0 calc(10 * var(--u)) calc(18 * var(--u)) rgba(22, 22, 28, .14));
  }
  /* Auto stoi w dolnej części karty, nad nim czysta ściana pod tekstem. */
  .karta__auto {
    top: auto;
    height: 56%;
    object-position: 78% 100%;
    -webkit-mask-image: linear-gradient(180deg, transparent 0%, #000 22%);
    mask-image: linear-gradient(180deg, transparent 0%, #000 22%);
  }
  .karta__swiatlo { width: 70%; }
  .social { right: calc(10 * var(--u)); bottom: calc(12 * var(--u)); }
  .soc svg { width: calc(15 * var(--u)); height: calc(15 * var(--u)); }
  .karta-przod { display: none; }
  .hero { --sg-r: 0; }
  .sygnet { display: none; }

  /* sygnet w narożnym wycięciu karty (karta zaczyna się 10 od krawędzi) */
  .logo {
    display: block;
    left: calc(10 * var(--u));
    top: calc(10 * var(--u));
    width: calc(2 * var(--lg-r) * var(--u));
    height: calc(2 * var(--lg-r) * var(--u));
  }
  .logo img { display: block; width: 100%; height: 100%; filter: drop-shadow(0 calc(4 * var(--u)) calc(8 * var(--u)) rgba(0, 0, 0, .18)); }
  .menu { display: none; }

  .menu-tel {
    display: flex;
    align-items: center;
    gap: calc(8 * var(--u));
    position: absolute;
    z-index: 31;
    right: calc(66 * var(--u));
    top: calc(13 * var(--u));
    height: calc(24 * var(--u));
    padding: 0;
    border: 0;
    background: none;
    color: var(--grafit);
    font: 400 calc(9 * var(--u))/1 'Draco', sans-serif;
  }
  .menu-tel__kreski { display: grid; gap: calc(4 * var(--u)); width: calc(14 * var(--u)); }
  .menu-tel__kreski i {
    display: block;
    height: 2px;
    background: var(--czerwien);
    border-radius: 2px;
    transition: transform .4s var(--ease-ruch);
  }
  .menu-tel[aria-expanded="true"] .menu-tel__kreski i:first-child { transform: translateY(calc(3 * var(--u))) rotate(45deg); }
  .menu-tel[aria-expanded="true"] .menu-tel__kreski i:last-child { transform: translateY(calc(-3 * var(--u))) rotate(-45deg); }

  .menu-panel {
    position: absolute;
    z-index: 30;        /* nad szkłem (5), autem i przyciskami hero */
    inset: calc(60 * var(--u)) calc(22 * var(--u)) auto;
    display: grid;
    gap: calc(2 * var(--u));
    padding: calc(10 * var(--u));
    border-radius: calc(20 * var(--u));
    background: rgba(248, 248, 248, .72);
    -webkit-backdrop-filter: blur(20px) saturate(1.3);
    backdrop-filter: blur(20px) saturate(1.3);
    box-shadow: 0 20px 50px rgba(20, 20, 30, .18), inset 0 0 0 1px rgba(255, 255, 255, .8);
    opacity: 0;
    translate: 0 calc(-12 * var(--u));
    transition: opacity .35s var(--ease), translate .45s var(--ease);
  }
  .menu-panel[hidden] { display: grid; visibility: hidden; }
  .menu-panel.jest-otwarty { opacity: 1; translate: 0 0; visibility: visible; }
  /* wiersz: ikona w kółku, nazwa i podpis, strzałka */
  .menu-panel a {
    display: grid;
    grid-template-columns: calc(26 * var(--u)) minmax(0, 1fr) auto;
    column-gap: calc(10 * var(--u));
    align-items: center;
    padding: calc(10 * var(--u)) calc(10 * var(--u));
    border-radius: calc(14 * var(--u));
    color: var(--grafit);
    transition: background .3s var(--ease);
  }
  .menu-panel a:hover,
  .menu-panel a:active { background: rgba(143, 29, 20, .07); }
  .menu-panel a:hover .menu-panel__strz { translate: calc(4 * var(--u)) 0; stroke: var(--czerwien); }
  .menu-panel a:hover .menu-panel__ik { background: rgba(143, 29, 20, .12); }
  .menu-panel__ik {
    width: calc(26 * var(--u));
    height: calc(26 * var(--u));
    padding: calc(6 * var(--u));
    border-radius: 50%;
    fill: none;
    stroke: var(--czerwien);
    stroke-width: 1.7;
    stroke-linecap: round;
    stroke-linejoin: round;
    background: rgba(143, 29, 20, .06);
    box-shadow: inset 0 0 0 1.2px rgba(143, 29, 20, .4);
  }
  .menu-panel span { font: 400 calc(9 * var(--u))/1 'Draco', sans-serif; letter-spacing: .04em; }
  .menu-panel__strz {
    width: calc(13 * var(--u));
    height: calc(13 * var(--u));
    fill: none;
    stroke: #b4aeae;
    stroke-width: 2;
    stroke-linecap: round;
    stroke-linejoin: round;
    transition: translate .35s var(--ease), stroke .3s var(--ease);
  }
  /* aktywna strona — bordowa pigułka jak przyciski */
  .menu-panel a.jest-aktywna {
    color: #fff;
    background:
      linear-gradient(180deg, rgba(150, 148, 148, .5) 0%, rgba(150, 148, 148, 0) 55%),
      linear-gradient(90deg, #840000, #6c0000 55%, #5a0000);
  }
  .menu-panel a.jest-aktywna .menu-panel__ik { stroke: #fff; background: rgba(255, 255, 255, .12); box-shadow: inset 0 0 0 1.2px rgba(255, 255, 255, .45); }
  .menu-panel a.jest-aktywna .menu-panel__strz,
  .menu-panel a.jest-aktywna:hover .menu-panel__strz { stroke: #fff; }
  .menu-panel a.jest-aktywna:hover .menu-panel__ik { background: rgba(255, 255, 255, .2); }
  /* telefon na dole panelu */
  a.menu-panel__tel:hover { background: rgba(143, 29, 20, .07); }
  a.menu-panel__tel {
    display: flex;
    justify-content: center;
    gap: calc(8 * var(--u));
    margin-top: calc(6 * var(--u));
    padding: calc(11 * var(--u));
    border-radius: 999px;
    color: var(--czerwien);
    box-shadow: inset 0 0 0 1.5px rgba(143, 29, 20, .5);
  }
  .menu-panel__tel svg { width: calc(13 * var(--u)); height: calc(13 * var(--u)); fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
  .menu-panel__tel b { font-size: calc(11 * var(--u)); font-weight: 700; }

  .tytul__duzy {
    left: calc(29.6 * var(--u));
    top: calc(72 * var(--u));
    font-size: calc(31 * var(--u));
  }
  .tytul__pod {
    left: calc(25.5 * var(--u));
    top: calc(109.6 * var(--u));
    font-size: calc(9.25 * var(--u));
  }

  .szklo {
    left: calc(22 * var(--u));
    right: calc(22 * var(--u));
    top: calc(146 * var(--u));
    width: auto;
    height: auto;
  }
  .szklo__tafla { position: relative; }
  .szklo__tresc { padding: calc(22 * var(--u)) calc(22 * var(--u)) calc(24 * var(--u)); }
  .szklo__nad { font-size: calc(9 * var(--u)); letter-spacing: .2em; }
  .szklo__akapit { margin-top: calc(10 * var(--u)); font-size: calc(12 * var(--u)); line-height: 1.6; }
  /* liczby nie mogą wejść w wycięcie z przyciskiem */
  .szklo__liczby {
    gap: calc(16 * var(--u));
    margin-top: calc(16 * var(--u));
    padding-right: calc(46 * var(--u));
  }
  .szklo__liczby strong { font-size: calc(17 * var(--u)); }
  .szklo__liczby span { font-size: calc(8 * var(--u)); letter-spacing: .08em; margin-top: calc(6 * var(--u)); }
  .szklo__strzalka { width: calc(46 * var(--u)); height: calc(46 * var(--u)); }

  .wiecej {
    left: calc(14 * var(--u));
    bottom: calc(12 * var(--u));
    width: calc(178 * var(--u));
    height: calc(58 * var(--u));
    border-radius: calc(14 * var(--u));
  }
  .za-szklem__linie {
    left: calc(-10 * var(--u));
    top: calc(330 * var(--u));
    width: calc(420 * var(--u));
    transform: rotate(-11deg);
  }

  .wiecej__napis { font-size: calc(9 * var(--u)); translate: calc(-2 * var(--u)) calc(1 * var(--u)); }

}

/* ============================================================
   OGRANICZONY RUCH — wszystko widoczne od razu, bez przejść
   ============================================================ */
@media (prefers-reduced-motion: reduce) {
  .js .sygnet,
  .js .karta__auto, .js .karta__ruch, .js .karta-przod, .js .logo, .js .menu__poz, .js .z, .js .soc, .js .social,
  .js .szklo, .js .szklo__tresc > *, .js .szklo__strzalka, .js .wiecej {
    opacity: 1 !important;
    transform: none !important;
    translate: none !important;
    scale: none !important;
    filter: none !important;
    transition: none !important;
  }
  .js .karta-cien { opacity: 1 !important; transform: none !important; transition: none !important; }
  .js .za-szklem, .js .za-szklem__linie i { opacity: 1 !important; scale: none !important; transition: none !important; }
  .hero.jest-w-kadrze .karta__swiatlo { animation: none; }
  .wiecej::after { display: none; }
}