/* PLIK GENEROWANY — nie edytuj ręcznie. Źródła w animacje-logo/: pk-logo-animacje.css, strona/strona.css.
   Wdrożenie: python3 animacje-logo/wdroz.py */
/* PK Systems — style animacji logo: Sygnał, Ostrość, Matryca.
   Kolory jak w assets/css/main.css (paleta z Figmy). Każdy komponent działa też bez JS
   (zostaje statyczne logo) i przy ograniczonym ruchu (bez animacji).
   Motyw: strona może nadpisać kolory tokenami --pk-logo-ink, --pk-logo-accent, --pk-grid-a,
   --pk-intro-bg, --pk-intro-hint i --af-* (np. ciemny motyw). Bez nich obowiązują jasne wartości. */

/* ── 1. Sygnał ─────────────────────────────────────────────────────────── */
.pk-sygnal {
  --pk-accent: var(--pk-logo-accent, #FF6D00);   /* pomarańcz-1 */
  --pk-o1: #FF6D00; --pk-o3: #FF8B33; --pk-o5: #FFA966;
  display: block;
  width: 100%;
  height: auto;
  overflow: visible;
  color: var(--pk-logo-ink, #121212);            /* kolor logo 2026 */
}
.pk-sygnal__trail { fill: var(--pk-accent); }
.pk-sygnal__ring { stroke: var(--pk-accent); }

/* Intro: zasłona od pierwszej klatki (klasę dodaje skrypt w <head>) */
.pk-intro-pending body::after {
  content: "";
  position: fixed;
  inset: 0;
  z-index: 999;
  background: var(--pk-intro-bg, #fff);
}
/* pełny ekran blokuje przewijanie; intro w miejscu hero nie (bez skoku paska przewijania) */
.pk-intro-on:not(.pk-intro-area) { overflow: hidden; }
.pk-intro-on .pk-intro-target { visibility: hidden; }

.pk-intro {
  position: fixed;
  inset: 0;
  z-index: 1000;
  pointer-events: none;       /* nagłówek nad obszarem intra zostaje klikalny */
}
/* obszar intra: od górnej krawędzi (albo spod nagłówka) do dołu ekranu; zasłona chowa się w nim */
.pk-intro__clip {
  position: absolute;
  inset: 0;
  overflow: hidden;
  pointer-events: auto;
  cursor: pointer;
}
.pk-intro__shutter {
  position: absolute;
  inset: 0;
  background: var(--pk-intro-bg, #fff);
}
/* linia skanu na dolnej krawędzi zasłony, widoczna, gdy zasłona odjeżdża w górę */
.pk-intro__shutter::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: -1px;
  height: 2px;
  background: #FF6D00;
  box-shadow: 0 0 1.25rem .2rem rgba(255, 109, 0, .45);
  opacity: 0;
  transition: opacity .15s;
}
.pk-intro.is-leaving .pk-intro__shutter::after { opacity: 1; }
.pk-intro.is-leaving .pk-intro__clip { cursor: default; pointer-events: none; }
/* scena intra: logo Sygnału w środku, kamera Ostrości na cały ekran, matryca w środku */
.pk-intro__stage { position: absolute; }
.pk-intro__stage--logo { left: 50%; top: 50%; width: min(72vw, 40rem); transform: translate(-50%, -52%); }
.pk-intro__stage--full { inset: 0; }
.pk-intro__stage--full > .pk-af { position: absolute; inset: 0; aspect-ratio: auto; cursor: inherit; }
.pk-intro__stage--matrix { left: 50%; top: 50%; width: min(86vw, 52rem); transform: translate(-50%, -52%); }
.pk-intro__stage--matrix > .pk-mx { cursor: inherit; }
/* przy wyjściu z Ostrości nakładka kamery gaśnie, zostaje samo logo */
.pk-intro__stage.is-outro .pk-af__hud,
.pk-intro__stage.is-outro .pk-af__osd,
.pk-intro__stage.is-outro .pk-af__grain { opacity: 0 !important; transition: opacity .24s; }
/* kopia logo, która przelatuje do nagłówka */
.pk-intro__flight {
  position: absolute;
  display: block;
  overflow: visible;
  transform-origin: 0 0;
  color: var(--pk-logo-ink, #121212);
  pointer-events: none;
}
.pk-intro--ostrosc .pk-intro__hint { bottom: 4.75rem; }
.pk-intro__hint {
  position: absolute;
  left: 0;
  right: 0;
  bottom: max(1.75rem, env(safe-area-inset-bottom));
  margin: 0;
  text-align: center;
  font: 650 .6875rem/1 "Saira", system-ui, sans-serif;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--pk-intro-hint, #6B6B6B);
  transition: opacity .2s;
}
.pk-intro.is-leaving .pk-intro__hint { opacity: 0; }

/* ── 2. Ostrość ────────────────────────────────────────────────────────── */
.pk-af {
  --pk-accent: var(--pk-logo-accent, #FF6D00);
  position: relative;
  overflow: hidden;
  isolation: isolate;
  aspect-ratio: 12 / 5;
  max-width: 100%;
  background: var(--af-bg, #F0F0F0);
  color: var(--af-ink, #121212);
  cursor: crosshair;
  touch-action: manipulation;
  -webkit-user-select: none;
  user-select: none;
  -webkit-tap-highlight-color: transparent;
}
.pk-af > img { position: absolute; left: 22%; top: 50%; width: 56%; height: auto; transform: translateY(-55%); }
.pk-af__view { position: absolute; inset: 0; transform-origin: 0 0; will-change: transform; }
.pk-af__logo, .pk-af__ghost {
  position: absolute;
  display: block;
  overflow: visible;
  transform-origin: 50% 50%;
  will-change: filter, transform;
}
.pk-af__ghost { color: var(--pk-accent); mix-blend-mode: var(--af-blend, multiply); opacity: 0; }
.pk-af__grain {
  position: absolute;
  inset: -12%;
  background-size: 128px 128px;
  mix-blend-mode: var(--af-blend, multiply);
  opacity: .1;
  pointer-events: none;
  animation: pk-grain .5s steps(5) infinite;
}
@keyframes pk-grain {
  0% { transform: translate(0, 0); }
  20% { transform: translate(-3%, 2%); }
  40% { transform: translate(2%, -3%); }
  60% { transform: translate(-2%, -1%); }
  80% { transform: translate(3%, 3%); }
  100% { transform: translate(0, 0); }
}
.pk-af__hud { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; pointer-events: none; }
.pk-af__guides { stroke: var(--af-guide, rgba(15, 15, 15, .22)); stroke-width: 1; fill: none; }
.pk-af__br { fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: square; }
.pk-af__scale-bg { fill: var(--af-osd-bg, rgba(240, 240, 240, .8)); opacity: 0; transition: opacity .3s; }
.pk-af.is-zoomed .pk-af__scale-bg { opacity: 1; }
.pk-af__scale line { stroke: var(--af-scale, rgba(15, 15, 15, .55)); stroke-width: 1; }
.pk-af__scale text {
  fill: var(--af-scale-text, rgba(15, 15, 15, .6));
  font: 700 8px/1 "Orbitron", "Saira", system-ui, sans-serif;
  letter-spacing: .08em;
}
.pk-af__needle { fill: var(--pk-accent); }
.pk-af__trk-br { fill: none; stroke: var(--pk-accent); stroke-width: 2; stroke-linecap: square; }
.pk-af__trk-bg { fill: var(--af-label-bg, #0F0F0F); }
.pk-af__trk-tx {
  fill: var(--af-label-fg, #fff);
  font: 700 9.5px/1 "Orbitron", "Saira", system-ui, sans-serif;
  letter-spacing: .12em;
}
.pk-af__osd {
  position: absolute;
  z-index: 2;
  display: flex;
  align-items: center;
  gap: .9rem;
  font: 700 .625rem/1.2 "Orbitron", "Saira", system-ui, sans-serif;
  letter-spacing: .14em;
  color: var(--af-osd, #0F0F0F);
  white-space: pre;
  pointer-events: none;
  padding: .3rem .45rem;
  margin: -.3rem -.45rem;
  transition: background-color .3s;
}
/* przy zoomie litery wchodzą pod napisy: wtedy podkład jak w nakładce kamery */
.pk-af.is-zoomed .pk-af__osd { background: var(--af-osd-bg, rgba(240, 240, 240, .8)); }
.pk-af__osd--tl { top: 1.35rem; left: 1.6rem; }
.pk-af__osd--tr { top: 1.35rem; right: 1.6rem; font-variant-numeric: tabular-nums; }
.pk-af__osd--bl { bottom: 1.35rem; left: 1.6rem; }
.pk-af__osd--br { bottom: 1.35rem; right: 1.6rem; font-variant-numeric: tabular-nums; }
.pk-af__rec, .pk-af__af { display: inline-flex; align-items: center; gap: .45rem; }
.pk-af__rec::before {
  content: "";
  width: .5rem;
  height: .5rem;
  border-radius: 50%;
  background: var(--pk-accent);
  box-shadow: 0 0 .5rem rgba(255, 109, 0, .8);
  animation: pk-rec 1.6s steps(1) infinite;
}
.pk-af__af::before {
  content: "";
  width: .5rem;
  height: .5rem;
  box-sizing: border-box;
  border: 1.5px solid currentColor;
  animation: pk-rec .5s steps(1) infinite;
}
.pk-af.is-locked .pk-af__af::before { background: var(--pk-accent); border-color: var(--pk-accent); animation: none; }
@keyframes pk-rec { 50% { opacity: .15; } }

@media (max-width: 40rem) {
  .pk-af { aspect-ratio: 4 / 3.2; }
  .pk-af__osd { font-size: .5625rem; gap: .6rem; }
  .pk-af__osd--tl, .pk-af__osd--bl { left: 1rem; }
  .pk-af__osd--tr, .pk-af__osd--br { right: 1rem; }
  .pk-af__osd--tl, .pk-af__osd--tr { top: 1rem; }
  .pk-af__osd--bl, .pk-af__osd--br { bottom: 1rem; }
  .pk-af__ptz { display: none; }
}

/* ── 3. Matryca ────────────────────────────────────────────────────────── */
.pk-mx {
  --mx-ink: var(--pk-logo-ink, #121212);
  --mx-accent: var(--pk-logo-accent, #FF6D00);
  --mx-grid-a: var(--pk-grid-a, .13);
  position: relative;
  aspect-ratio: 27 / 10;
  max-width: 100%;
  cursor: crosshair;
  touch-action: pan-y;
  -webkit-tap-highlight-color: transparent;
}
.pk-mx.is-night { --mx-ink: #F0F0F0; --mx-grid-a: .11; }
.pk-mx__canvas { position: absolute; inset: 0; display: block; width: 100%; height: 100%; }
.pk-mx > img { position: absolute; left: 3%; top: 50%; width: 94%; height: auto; transform: translateY(-50%); }
.pk-mx.is-ready > img { visibility: hidden; }

@media (prefers-reduced-motion: reduce) {
  .pk-af__grain, .pk-af__rec::before, .pk-af__af::before { animation: none; }
}

/* ── Strona: logo w nagłówku, intro w miejscu hero, Matryca w tle sekcji Kontakt ─────────── */

/* Logo w nagłówku jako wektor (PKSygnal.mount zastępuje <img>): te same szerokości co <img> w main.css */
.brand > .pk-sygnal { width: 10.5rem; }
@media (max-width: 60rem) { .brand > .pk-sygnal { width: 8.5rem; } }

/* Intro w miejscu hero: od pierwszej klatki hero i logo w nagłówku są niewidoczne (miejsce zostaje).
   Klasę dodaje skrypt w <head>, zdejmuje ją start intra albo bezpiecznik po 5 s. */
.pk-hero-intro [data-hero],
.pk-hero-intro .site-header .brand { visibility: hidden; }

/* Tekst hero wjeżdża („rise” z main.css) dopiero wtedy, gdy zasłona intra rusza w górę */
.pk-intro-on:not(.pk-intro-out) .hero__head > *,
.pk-intro-on:not(.pk-intro-out) .hero__copy > * { animation: none; }

/* Kontakt: matryca jest tłem całej sekcji (siatka punktów pod treścią), a logo z punktów stoi
   w pasie na dole, pod treścią, więc biała karta go nie zasłania. Pas ma szerokość treści
   i wysokość szerokość × 700/2335; sekcja dostaje na niego miejsce w dolnym odstępie. */
.contact--matryca {
  /* szerokość treści jak w .wrap (main.css): kontener, ale nie więcej niż ekran minus marginesy */
  --mx-logo-h: calc(min(var(--container), 100vw - 2 * var(--gutter)) * .2998);
  position: relative;
  isolation: isolate;
  overflow: hidden;
  padding-bottom: calc(var(--section-y) * .5 + var(--gutter) + var(--mx-logo-h));
}
.contact--matryca > .contact__layout { position: relative; z-index: 1; }
.contact__matryca { position: absolute; inset: 0; z-index: 0; pointer-events: none; }
.contact__matryca.pk-mx { position: absolute; aspect-ratio: auto; max-width: none; cursor: auto; --mx-grid-a: .1; }
/* telefon: wysoka sekcja, więc tło z punktów tylko w pasie przy logo (lżej i logo zostaje ostre) */
@media (max-width: 40rem) {
  .contact__matryca { top: auto; height: calc(var(--mx-logo-h) + var(--gutter) + 5rem); }
}
/* bez JS: zwykłe logo dokładnie tam, gdzie powstaje logo z punktów */
.contact .contact__matryca > img {
  position: absolute;
  top: auto;
  bottom: var(--gutter);
  left: 50%;
  width: min(var(--container), 100% - 2 * var(--gutter));
  height: auto;
  transform: translateX(-50%);
}