/* Widok 03 — Portfolio. Tylko układ; wartości z tokenów system.css. Kompozycja: hero z nagłówkiem
   do lewej pod znakiem → chmura pyłu, z której wyłania się KOPUŁA Z KAFELKÓW (widz w środku) →
   oś „Jak pracuję" → domknięcie. */

.portfolio { pointer-events: none; }
.portfolio :is(h1, h2, h3, p, li, a, button, .pf-kopula) { pointer-events: auto; }
.portfolio > section { position: relative; padding-inline: var(--margines); }

/* ==========================================================================
   1. HERO — znak w górnej części kadru (poza w portfolio.php), nagłówek oversize do lewej
   na dole, zdanie obok. Hero mieści się na ekranie razem z całą treścią.
   ========================================================================== */
.pf-hero {
  min-height: 100vh; min-height: 100svh;
  display: grid;
  align-content: end;
  gap: var(--o-5);
  padding-top: calc(var(--logo-wys) + var(--o-8));
  padding-bottom: var(--o-8);
}
.pf-tytul { font-size: var(--r-6); font-weight: var(--w-rzezba); line-height: .98; letter-spacing: -.03em; max-width: 14ch; text-wrap: balance; }
.pf-tytul-cena { color: var(--tekst-2); }
.pf-lead { max-width: 46ch; color: var(--tekst-2); font-size: var(--r-lead); line-height: 1.6; }
@media (min-width: 960px) {
  .pf-hero { grid-template-columns: minmax(0, 1fr) minmax(16rem, 24rem); align-items: end; column-gap: var(--o-8); }
  .pf-lead { padding-bottom: .55em; }         /* zdanie siada na linii bazowej drugiego wiersza */
}

/* ==========================================================================
   2. REALIZACJE — KOPUŁA Z KAFELKÓW (widok 03, Jakub 30.09). Widz w środku sfery: kafle na
   jej wewnętrznej ścianie (rzędy i kolumny po sferze, skrajne bliżej i skręcone ku widzowi).
   portfolio.js: stawia kafle szklane, liczy kąty kafli (transform w stylu elementu), obraca scenę
   (jeden transform .pf-scena — liczy kompozytor). Bez skryptu i przy ograniczonym ruchu:
   płaska siatka realizacji, opisy pod nią.
   ========================================================================== */
.pf-realizacje { padding-block: var(--o-8); }
.pf-glowa { display: grid; gap: var(--o-3); max-width: 40rem; margin-bottom: var(--o-6); color: var(--tekst-2); }
.pf-glowa h2 { color: var(--tekst); font-size: var(--r-5); line-height: 1.04; letter-spacing: -.02em; }

.pf-scena { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 18rem), 1fr)); gap: var(--o-5); margin: 0; padding: 0; list-style: none; }
.pf-okno {
  display: block; width: 100%;
  padding: 0; border: 0; border-radius: var(--rama-promien); background: none;
  color: inherit; font: inherit; text-align: left;
  cursor: pointer;
}
.pf-okno:focus-visible { outline: 2px solid var(--akcent); outline-offset: 4px; }
.pf-rama { aspect-ratio: 16 / 10; }
.pf-kadr { display: block; width: 100%; height: 100%; object-fit: cover; object-position: 50% 0; }
/* podpis na kaflu — nazwa i typ; wybór czytelny bez najeżdżania */
.pf-podpis {
  position: absolute; left: 0; right: 0; bottom: 0;
  display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 2px var(--o-3);
  padding: var(--o-5) var(--o-3) var(--o-2);
  background: linear-gradient(transparent, color-mix(in srgb, var(--noc) 88%, transparent));
  pointer-events: none;
}
.pf-podpis-nazwa { font-size: var(--r-1); font-weight: var(--w-mocny); line-height: 1.2; }
.pf-podpis-nazwa .tytul-obraz { height: 1.5em; vertical-align: calc((var(--lb, .75) - 1) * 1.5em); }
.pf-podpis .fakt { color: var(--tekst-2); font-size: var(--r-mini); }

/* KOPUŁA — scena 3D (portfolio.js dodaje .pf-kopula--3d). Perspektywa = odległość oka od ekranu;
   scena przesunięta o nią w stronę widza, więc jej obrót to rozglądanie się z miejsca widza */
.pf-kopula--3d {
  position: relative;
  height: clamp(26rem, 80svh, 50rem);        /* kadr jak w pierwszej wersji, odrobinę większy (Jakub 30.09) */
  margin-inline: calc(-1 * var(--margines));
  overflow: hidden;
  perspective: var(--pf-p);
  touch-action: pan-y;                       /* pion — strona, poziom — kopuła */
  /* kopuła rozpływa się w niebie — pierwszy i ostatni rząd, boki (Jakub 30.09: jak w pierwszej wersji).
     Maska robi z kopuły „korzeń tła" — dopuszczalne, bo kafle nie mają filtra tła (niżej) */
  -webkit-mask-image: linear-gradient(transparent, #000 14%, #000 86%, transparent), linear-gradient(90deg, transparent, #000 7%, #000 93%, transparent);
  -webkit-mask-composite: source-in;
  mask-image: linear-gradient(transparent, #000 14%, #000 86%, transparent), linear-gradient(90deg, transparent, #000 7%, #000 93%, transparent);
  mask-composite: intersect;
  cursor: grab;
  user-select: none; -webkit-user-select: none;
}
.pf-kopula--3d.pf-ciagnie { cursor: grabbing; }
.pf-kopula--3d .pf-scena {
  display: block;
  position: absolute; left: 50%; top: 50%; width: 0; height: 0;
  transform-style: preserve-3d;
}
.pf-kopula--3d :is(.pf-kafel, .pf-szklo) {
  position: absolute;
  left: calc(var(--pf-kw) / -2); top: calc(var(--pf-kh) / -2);
  width: var(--pf-kw); height: var(--pf-kh);
  backface-visibility: hidden;
}
/* przestrzeń 3D tylko w kaflu realizacji (wysuwa się przy najechaniu). Kafel szklany zostaje płaski:
   jego warstwy szkła (::before, ::after) w przestrzeni 3D leżałyby w tej samej płaszczyźnie co kafel
   i cięły się paskami (z-fighting) */
.pf-kopula--3d .pf-kafel { transform-style: preserve-3d; }
.pf-kopula--3d .pf-okno, .pf-kopula--3d .pf-rama { height: 100%; }
.pf-kopula--3d .pf-okno { transition: transform .45s var(--e-lagodna); }
.pf-kopula--3d.pf-ciagnie .pf-okno { pointer-events: none; }     /* przeciąganie nie klika */
/* światło z kąta kafla względem światła z lewej-góry (portfolio.js: --pf-cien 0…1) */
.pf-kopula--3d .pf-rama::after {
  content: ""; position: absolute; inset: 0; z-index: 1; pointer-events: none;
  background: color-mix(in srgb, var(--noc) calc(var(--pf-cien, 0) * 100%), transparent);
  transition: opacity .45s var(--e-lagodna);
}
@media (hover: hover) and (pointer: fine) {
  .pf-kopula--3d .pf-okno:hover, .pf-kopula--3d .pf-okno:focus-visible { transform: translateZ(calc(var(--pf-kh) * .22)); }
  .pf-kopula--3d .pf-okno:is(:hover, :focus-visible) .pf-rama::after { opacity: 0; }
}

/* kafle szklane = TAFLA systemu (.tafla + .szklo--{barwa}, system.css) — ten sam kod szkła co tafle
   z napisami: półprzezroczysty podkład, faktura gwiazd, odbarwienia, rant irysu, światła, cień, ożywienie
   pod kursorem (szklo.js). Przez szkło widać ŻYWE niebo i pył znaku (Jakub 30.09: kafle mają być
   przezroczyste). W kopule zmienione tylko:
   • układ — rozmiar z kopuły, promień ramy, bez wnętrza i miary tafli;
   • rant 2 px — w 3D kafel jest pochylony i pomniejszony, rant 1,5 px rwał się w kreski;
   • BEZ filtra tła (pomiary 30.09: soczewka na wszystkich kaflach 75 → 10 kl/s; rozmycie przelicza się
     pod każdym kaflem przy każdym przewinięciu i ruchu znaku) — szkło jak na poziomie „lekkie", ale
     przezroczyste */
.pf-kopula--3d .pf-szklo {
  display: block; max-width: none; padding: 0;
  border-radius: var(--rama-promien);
  --szklo-rant: 2px;
  --szklo-rant-krycie: 1;
  -webkit-backdrop-filter: none !important; backdrop-filter: none !important;
  --szklo-cien: inherit;                     /* ostry cień 1 px z systemu */
  /* OBRAMOWANIE kafla (Jakub 05.10: kafle to w praktyce rama, ledwo widoczna — okrojone do minimum): warga,
     pierścień 1 px i jedna miękka fazka. Każdy rozmyty cień to raster przy wjeździe kafla w kadr, a kafli
     jest 24–32 w 3D; opalizowanie niesie rant irysu (::after) */
  box-shadow:
    inset 0 1.5px 0 -.5px rgba(255, 255, 255, .34),
    inset 0 0 0 1px color-mix(in srgb, var(--szklo-swiatlo) 18%, transparent),
    inset 0 0 14px -4px var(--szklo-fazka-swiatlo),
    var(--szklo-cien);
}
/* kafle bez barwy (klasyczne) — podkład tafli z tekstem, ale w kopule przezroczysty jak barwne (~⅓) */
.pf-kopula--3d .pf-szklo:not([class*="szklo--"]) { --szklo-podklad: color-mix(in srgb, var(--szklo-podklad-tekst) 35%, transparent); }
/* kopuła nie ma filtra tła na żadnym poziomie szkła — w „lekkim" kafle zostają przezroczyste i barwne
   (system.css kładzie tam jednolity, prawie nieprzezroczysty podkład) */
[data-szklo="lekkie"] .pf-kopula--3d .pf-szklo { background-color: var(--szklo-podklad); }
/* ODBARWIENIA — opalizowanie jak w Liquid Glass (wzór Jakuba 30.09: tęcza cienkiej warstwy na szkle):
   smuga róż → fiolet → błękit → złoto i plamy barw przy krawędziach, gdzie grube szkło rozszczepia
   światło najmocniej. Barwy z opalizowania rantu systemu (--szklo-irys-*, przełączają się z trybem),
   ułożenie z fazy szkła kafla (--szklo-los — każdy kafel inaczej). Tło elementu — leży pod warstwami
   szkła (::before, ::after); statyczne, bez kosztu klatek */
.pf-kopula--3d .pf-szklo {
  --pf-kat: calc(var(--szklo-los, 0) * 360deg);
  background-image:
    linear-gradient(calc(118deg + var(--szklo-los, 0) * 90deg), transparent 16%,
      color-mix(in srgb, var(--szklo-irys-roz) 26%, transparent) 32%,
      color-mix(in srgb, var(--szklo-irys-fiolet) 24%, transparent) 42%,
      color-mix(in srgb, var(--szklo-irys-niebieski) 26%, transparent) 52%,
      color-mix(in srgb, var(--szklo-irys-bez) 22%, transparent) 62%, transparent 78%),
    radial-gradient(58% 48% at calc(50% + 48% * cos(var(--pf-kat))) calc(50% + 48% * sin(var(--pf-kat))),
      color-mix(in srgb, var(--szklo-irys-niebieski) 34%, transparent), transparent 70%),
    radial-gradient(52% 44% at calc(50% - 46% * cos(var(--pf-kat))) calc(50% - 42% * sin(var(--pf-kat))),
      color-mix(in srgb, var(--szklo-irys-roz) 32%, transparent), transparent 70%),
    radial-gradient(44% 38% at calc(50% + 42% * sin(var(--pf-kat))) calc(50% - 46% * cos(var(--pf-kat))),
      color-mix(in srgb, var(--szklo-irys-bez) 28%, transparent), transparent 70%);
}
.pf-kopula--3d :is(.pf-kafel, .pf-szklo).pf-poza { visibility: hidden; }

/* wyłanianie kopuły z chmury pyłu — sterowane przewijaniem, RUCHEM (krycie na kopule odcięłoby szkłu
   niebo — patrz wyżej); na opakowaniu, scena ma własny transform */
@supports (animation-timeline: view()) {
  @media (prefers-reduced-motion: no-preference) {
    .pf-kopula--3d { animation: pf-wylon linear both; animation-timeline: view(); animation-range: entry 0% cover 42%; }
  }
}
@keyframes pf-wylon { from { transform: translateY(12vh) scale(.9); } to { transform: none; } }

/* opisy realizacji: bez skryptu i przy ograniczonym ruchu — po kolei pod siatką; przy kopule
   mieszkają w karcie realizacji (portfolio.js przenosi opis do karty i z powrotem) */
.pf-opisy { display: grid; gap: var(--o-7); margin-top: var(--o-6); }
.pf-kopula--3d + .pf-opisy { display: none; }
.pf-opis { display: grid; gap: var(--o-2); max-width: 44rem; }
.pf-opis[hidden] { display: none; }
.pf-nazwa { font-size: var(--r-3); font-weight: var(--w-lekki); line-height: 1.15; }
.pf-typ { color: var(--tekst-2); }
.pf-zakres { color: var(--tekst-2); font-size: var(--r-0-5); line-height: 1.6; }
.pf-cena { display: flex; flex-wrap: wrap; align-items: baseline; gap: var(--o-1) var(--o-3); margin-top: var(--o-1); }
.pf-cena .fakt { color: var(--tekst-2); }
.pf-cena strong { font-size: var(--r-2); font-weight: var(--w-mocny); font-variant-numeric: tabular-nums lining-nums; }
.pf-odnosniki { display: flex; flex-wrap: wrap; align-items: center; gap: var(--o-2) var(--o-6); margin-top: var(--o-2); }
.pf-wyjdz { display: inline-flex; align-items: center; gap: var(--o-1); min-height: 40px; font-size: var(--r-0-5); color: var(--tekst-2); }
.pf-wyjdz .ikona { width: 14px; height: 14px; color: var(--akcent); }
.pf-wyjdz:hover { color: var(--tekst); }

/* KARTA REALIZACJI — kafel wyjęty z kopuły (portfolio.js prowadzi animację wyjścia i powrotu):
   duży kadr, pod nim opis i wybór — podgląd na żywo, wejście na stronę, podstrona */
.pf-karta {
  position: fixed; inset: 0;
  width: 100%; max-width: none; height: 100%; max-height: none;
  margin: 0;
  padding: max(var(--o-6), env(safe-area-inset-top)) var(--margines) max(var(--o-6), env(safe-area-inset-bottom));
  border: 0; background: transparent; color: var(--tekst);
  overflow: auto; overscroll-behavior: contain;
}
.pf-karta[open] { display: grid; place-items: center; }
.pf-kafel--wyjety { visibility: hidden; }              /* kafel jest teraz kartą */
html.pf-karta-otwarta { overflow: hidden; }
.pf-karta::backdrop { background: color-mix(in srgb, var(--noc) 62%, transparent); }
.pf-karta-wnetrze { position: relative; display: grid; gap: var(--o-5); width: min(100%, 68rem, calc((100svh - 21rem) * 1.6)); }
@media (max-width: 699px) { .pf-karta-wnetrze { width: 100%; } }
.pf-karta-rama { aspect-ratio: 16 / 10; transform-origin: 0 0; will-change: transform; }
.pf-karta-rama img { display: block; width: 100%; height: 100%; object-fit: cover; object-position: 50% 0; }
.pf-karta-zamknij { justify-self: end; justify-content: center; width: 44px; height: 44px; margin-bottom: calc(var(--o-3) - var(--o-5)); }   /* nad kadrem, poza zrzutem strony */
.pf-karta-dol { display: grid; gap: var(--o-4); }
.pf-karta-opis .pf-opis { max-width: none; }
.pf-karta-akcje .ikona { width: 16px; height: 16px; }
@media (min-width: 960px) {
  .pf-karta-dol { grid-template-columns: minmax(0, 1fr) auto; align-items: end; column-gap: var(--o-7); }
}

/* ==========================================================================
   3. JAK PRACUJĘ — nagłówek po lewej trzyma się ekranu, oś po prawej. Linia osi wypełnia się
   z przewijaniem; kropka kroku zapala się, gdy krok dochodzi do środka ekranu.
   ========================================================================== */
.pf-praca { display: grid; gap: var(--o-7); padding-block: var(--o-9); }
.pf-praca-glowa { display: grid; gap: var(--o-3); align-content: start; max-width: 32rem; color: var(--tekst-2); }
.pf-praca-glowa h2 { color: var(--tekst); font-size: var(--r-5); line-height: 1.04; letter-spacing: -.02em; }
.pf-praca-dalej { margin-top: var(--o-3); }
@media (min-width: 960px) {
  .pf-praca { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); column-gap: var(--o-8); }
  .pf-praca-glowa { position: sticky; top: calc(var(--logo-wys) + var(--o-8)); }
}
.pf-os { --pf-kropka: 11px; position: relative; display: grid; gap: var(--o-7); margin: 0; padding: 0 0 0 var(--o-7); list-style: none; max-width: 38rem; }
/* linia osi: włoskowa, wypełnienie akcentem rośnie z przewijaniem (scaleY) */
.pf-os::before, .pf-os::after {
  content: ""; position: absolute; left: calc(var(--pf-kropka) / 2 - .5px); top: .6em; bottom: .6em; width: 1px;
  background: var(--linia);
}
.pf-os::after { background: var(--akcent); transform-origin: 50% 0; transform: scaleY(1); }
.pf-krok { position: relative; display: grid; gap: var(--o-2); }
.pf-krok::before {
  content: ""; position: absolute; left: calc(-1 * var(--o-7)); top: .55em;
  width: var(--pf-kropka); height: var(--pf-kropka); border-radius: 50%;
  border: 1px solid var(--akcent); background: var(--akcent);
}
.pf-krok h3 { display: flex; align-items: center; gap: var(--o-3); font-size: var(--r-3); font-weight: var(--w-lekki); line-height: 1.15; }
.pf-krok-ikona { flex: none; width: .9em; height: .9em; color: var(--akcent); }   /* ikona kroku (Jakub 30.10) */
.pf-krok p { color: var(--tekst-2); font-size: var(--r-0-5); line-height: 1.65; max-width: 52ch; }
@supports (animation-timeline: view()) {
  @media (prefers-reduced-motion: no-preference) {
    .pf-os::after { animation: pf-os linear both; animation-timeline: view(); animation-range: cover 20% cover 80%; }
    .pf-krok::before { animation: pf-kropka linear both; animation-timeline: view(); animation-range: entry 100% cover 50%; }
  }
}
@keyframes pf-os { from { transform: scaleY(0); } to { transform: scaleY(1); } }
@keyframes pf-kropka { from { background: var(--noc); } to { background: var(--akcent); } }

/* ==========================================================================
   4. DOMKNIĘCIE — jeden pełny przycisk strony
   ========================================================================== */
.pf-domkniecie { display: grid; justify-items: start; gap: var(--o-4); padding-block: var(--o-8) var(--o-9); }
.pf-domkniecie h2 { font-size: var(--r-5); line-height: 1.04; letter-spacing: -.02em; }
.pf-domkniecie p { color: var(--tekst-2); max-width: 46ch; }
.pf-domkniecie .przycisk { margin-top: var(--o-2); }