/* Sekcja z animacją główną. Tempo stroi się jedną liczbą, --tor-przewijania: 160vh to około 3 do 5 sekund
   zwykłego przewijania kółkiem albo dwa machnięcia palcem. Co dzieje się przy którym postępie, mówi
   animacja/os-czasu.js, a napisy mają swoje zakresy w atrybutach data-od i data-do. */
.hero-kolano {
  --tor-przewijania: 160vh;
  --tlo: #0e1428;
  --tekst: #eef0f4;
  --tekst-cichy: #9aa3b2;
  --zloto: #f2c24e;
  --bol: #ff4b33;
  position: relative;
  height: calc(100vh + var(--tor-przewijania));
  background: var(--tlo);
  color: var(--tekst);
  font-family: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
}

.hero-kolano__scena {
  position: sticky;
  top: 0;
  height: 100vh;
  height: 100svh;
  overflow: hidden;
}

.hero-kolano__plotno {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  display: block;
}

/* Napis zajmuje całe wolne miejsce na lewo od Bartosza. Postać stoi na 57% szerokości, a jej rozmiar rośnie
   z wysokością ekranu, stąd szerokość z vw minus vh. Nagłówek liczy się od szerokości tego pola (cqi), więc
   najdłuższa linijka mieści się przy każdej proporcji; na szerokim monitorze był za mały (właściciel, 30.09.2026). */
.hero-kolano__napisy {
  position: absolute;
  left: clamp(16px, 6vw, 96px);
  top: 50%;
  transform: translateY(-50%);
  width: clamp(300px, min(51vw - 30px, 57vw - 126px) - 25vh, 720px);
  height: 460px;
  container-type: inline-size;
  pointer-events: none;
  z-index: 2;
}

.hero-kolano__etap {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  justify-content: center;
  opacity: 0;
  will-change: opacity, transform;
}

/* Pierwszy napis widać od razu: gdyby skrypt się spóźnił albo nie ruszył, nagłówek i tak jest na ekranie. */
.hero-kolano__etap:first-child { opacity: 1; }

.hero-kolano__etap--aktywny { pointer-events: auto; }

.hero-kolano__podpis-sekcji {
  font-size: 15px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--tekst-cichy);
  margin: 0 0 18px;
}

.hero-kolano__etap h1,
.hero-kolano__etap h2 {
  font-size: clamp(30px, min(13.5cqi, 9vh), 96px);
  line-height: 1.08;
  font-weight: 700;
  letter-spacing: -0.01em;
  margin: 0;
  /* Strona, na którą trafia animacja, może mieć własny limit szerokości nagłówka; tu decyduje pole napisu. */
  max-width: none;
  text-wrap: balance;
}

.hero-kolano__etap > p:not(.hero-kolano__podpis-sekcji) {
  font-size: clamp(17px, 1.45vw, 24px);
  line-height: 1.5;
  color: var(--tekst-cichy);
  margin: 18px 0 0;
  max-width: 30ch;
}

/* Słowa niosące sens nagłówka: złote i grubsze od reszty. Strona, która wczytuje pismo w wybranych grubościach,
   musi mieć też 800, inaczej przeglądarka pogrubi litery sztucznie. */
.hero-kolano__zlote { color: var(--zloto); font-weight: 800; }

.hero-kolano__przycisk {
  display: inline-block;
  align-self: flex-start;
  margin-top: 32px;
  padding: 18px 34px;
  font-size: 18px;
  border-radius: 999px;
  background: var(--zloto);
  color: #1a1406;
  font-weight: 700;
  text-decoration: none;
  box-shadow: 0 0 40px rgba(242, 194, 78, 0.35);
}

/* Podpis odręczny i funkcje Bartosza pod przyciskiem, przy prawej krawędzi kolumny, tuż obok postaci
   (właściciel, 30.09.2026). W dół schodzi transformacją, żeby napis i przycisk nad nim nie podjechały do góry.
   Litery są wypełnionym kształtem, nie kreską, więc pisanie to maska pochylona jak pismo, przesuwana od lewej.
   Rusza, gdy etap staje się aktywny, i cofa się przy przewinięciu w górę, więc po powrocie pisze się od nowa. */
.hero-kolano__autor {
  align-self: flex-end;
  /* Szerokość wprost, bo bez niej opis w jednej linii rozpycha blok na całą kolumnę i podpis zostaje po lewej. */
  width: min(100%, 62cqi);
  margin-top: 40px;
  transform: translateY(24px);
  --szerokosc-podpisu: 100%;
}

.hero-kolano__podpis-odreczny { display: block; width: var(--szerokosc-podpisu); }

.hero-kolano__podpis-odreczny svg {
  display: block;
  width: 100%;
  height: auto;
  fill: var(--tekst);
  /* Włoskowe kreski pisma giną na laptopie; obrys w jednostkach pisma dodaje im około piksela. */
  stroke: var(--tekst);
  stroke-width: 10;
  stroke-linejoin: round;
  mask-image: linear-gradient(105deg, #000 40%, transparent 60%);
  mask-size: 300% 100%;
  mask-position: 100% 0;
  mask-repeat: no-repeat;
}

.hero-kolano__etap--aktywny .hero-kolano__podpis-odreczny svg {
  animation: hero-kolano-pisanie 1.8s 0.3s ease-in-out forwards;
}

@keyframes hero-kolano-pisanie { to { mask-position: 0 0; } }

/* Funkcje stoją wyśrodkowane pod podpisem, na jego szerokości, i idą szeryfową kursywą strony: wersaliki
   z odstępami obok odręcznego podpisu wyglądały jak z maszyny (właściciel, 30.09.2026). */
.hero-kolano__funkcje {
  width: var(--szerokosc-podpisu);
  margin: 10px 0 0;
  font-family: var(--pismo-tekst, Georgia), serif;
  font-style: italic;
  font-size: 17px;
  line-height: 1.45;
  text-align: center;
  color: var(--tekst-cichy);
  text-wrap: balance;
}

/* Podpisy uszkodzonych części: kropka siedzi w miejscu urazu, napis odchodzi w bok.
   Czerwona kropka to uraz, złota to miejsce, które pas skanu już minął. */
.hero-kolano__etykiety {
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 1;
}

.hero-kolano__etykieta {
  position: absolute;
  left: 0;
  top: 0;
  opacity: 0;
  will-change: transform, opacity;
}

.hero-kolano__kropka {
  position: absolute;
  left: -5px;
  top: -5px;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: var(--bol);
  box-shadow: 0 0 14px var(--bol);
  transition: background 0.4s, box-shadow 0.4s;
}

.hero-kolano__etykieta--wyleczona .hero-kolano__kropka {
  background: var(--zloto);
  box-shadow: 0 0 14px var(--zloto);
}

.hero-kolano__nazwa {
  position: absolute;
  top: -8px;
  white-space: nowrap;
  font-size: 12px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--tekst);
}

.hero-kolano__nazwa::before {
  content: "";
  position: absolute;
  top: 50%;
  width: 16px;
  height: 1px;
  background: currentColor;
  opacity: 0.6;
}

.hero-kolano__etykieta[data-strona="lewo"] .hero-kolano__nazwa { right: 24px; }
.hero-kolano__etykieta[data-strona="lewo"] .hero-kolano__nazwa::before { right: -20px; }
.hero-kolano__etykieta[data-strona="prawo"] .hero-kolano__nazwa { left: 24px; }
.hero-kolano__etykieta[data-strona="prawo"] .hero-kolano__nazwa::before { left: -20px; }

.hero-kolano__podpowiedz {
  position: absolute;
  left: 50%;
  bottom: 28px;
  transform: translateX(-50%);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  font-size: 12px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--tekst-cichy);
  z-index: 2;
}

.hero-kolano__podpowiedz span {
  width: 1px;
  height: 36px;
  background: linear-gradient(var(--tekst-cichy), transparent);
  animation: hero-kolano-kapanie 1.6s ease-in-out infinite;
}

@keyframes hero-kolano-kapanie {
  0% { transform: scaleY(0); transform-origin: top; }
  50% { transform: scaleY(1); transform-origin: top; }
  51% { transform-origin: bottom; }
  100% { transform: scaleY(0); transform-origin: bottom; }
}

/* Na telefonie napisy idą na górę, a scena pod nimi; kadr sceny ustawia hero.js według proporcji ekranu. */
@media (max-width: 760px) {
  .hero-kolano__napisy {
    left: 16px;
    right: 16px;
    top: 8vh;
    bottom: 0;
    transform: none;
    width: auto;
    height: auto;
  }
  .hero-kolano__etap { justify-content: flex-start; }
  .hero-kolano__podpis-sekcji { font-size: 13px; }
  .hero-kolano__etap h1,
  .hero-kolano__etap h2 { font-size: 30px; }
  .hero-kolano__etap > p:not(.hero-kolano__podpis-sekcji) { font-size: 15px; margin-top: 12px; max-width: 34ch; }
  /* Przycisk, podpis i funkcje stoją na środku ekranu, napis i akapit zostają przy lewej krawędzi (właściciel, 30.09.2026). */
  .hero-kolano__przycisk { align-self: center; margin-top: 16px; padding: 12px 20px; font-size: inherit; }
  /* Postać stoi tu pod napisem, a każda linijka napisu spycha ją w dół (czubekPostaci w hero.js), więc podpis
     nie idzie pod przycisk, tylko na dół kadru, na postać. Napisy sięgają do dołu sceny, a margines auto spycha
     tam podpis; cień pod spodem daje mu kontrast na jasnych przedramionach (właściciel, 30.09.2026). */
  .hero-kolano__autor {
    align-self: stretch;
    width: auto;
    transform: none;
    margin: auto -16px 0;
    padding: 56px 16px 22px;
    background: linear-gradient(to bottom, transparent, color-mix(in srgb, var(--tlo) 88%, transparent) 55%);
    --szerokosc-podpisu: min(78%, 290px);
  }
  .hero-kolano__podpis-odreczny { margin-inline: auto; }
  .hero-kolano__funkcje { margin: 6px auto 0; font-size: 14px; }
  .hero-kolano__nazwa { font-size: 10px; letter-spacing: 0.1em; }
  .hero-kolano__podpowiedz { bottom: 14px; }
}

@media (prefers-reduced-motion: reduce) {
  .hero-kolano { height: 100vh; }
  .hero-kolano__podpowiedz { display: none; }
  .hero-kolano__podpis-odreczny svg { mask-image: none; animation: none; }
}