/* Widok 02 — O mnie. Tylko układ; wartości z tokenów system.css, wygląd tafli
   z komponentu „TAFLA" (nie nadpisywany). Sekcje spokojne — bez ruchu ozdobnego.
   Znak 3D stoi pod treścią (fixed, tor „podróż" — kotwice w o-mnie.php). */

/* treść przepuszcza wskaźnik do sceny poza taflami i zdjęciami (obracanie znaku) */
.o-mnie { pointer-events: none; }
.o-mnie :is(h1, .tafla, .om-hero-pasek, .om-kadr, .om-talia, .podpowiedz) { pointer-events: auto; }
.o-mnie :is(h1, h2),
.om-puenta strong { hyphens: auto; overflow-wrap: break-word; }

/* — 1. hero: pasek z napisami pod menu, niżej talia · znak · wideo ---------
   Komputer i tablet: trzy kolumny — talie przy krawędziach, znak w polu środka.
   Telefon: pasek → znak (pole) → obie talie w pasie na dole ekranu. */
.om-hero {
  --karta-szer: clamp(7.5rem, 36vw, 10rem);
  --karta-wys: calc(var(--karta-szer) * 1.6);
  position: relative;
  min-height: 100vh;
  min-height: 100svh;
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  grid-template-rows: auto minmax(8rem, 1fr) auto;
  grid-template-areas: "pasek pasek" "scena scena" "zdjecia wideo";
  row-gap: var(--o-4);
  /* pod logotypem i menu (nagłówek: góra --o-3 + --logo-wys) */
  padding: calc(max(var(--o-3), env(safe-area-inset-top)) + var(--logo-wys) + var(--o-4)) 0 var(--o-6);
  overflow-x: clip;                           /* talie wychodzą spoza krawędzi ekranu */
}
.om-hero-pasek {
  grid-area: pasek;
  justify-self: center;
  display: grid;
  justify-items: center;
  gap: var(--o-3);
  max-width: 36rem;
  margin: 0 var(--margines);
  text-align: center;
}
.om-hero-tytul { margin: 0; }
.om-hero-imie { display: block; font-size: var(--r-5); }
.om-hero-kto {
  display: block;
  margin-top: var(--o-2);
  font-size: var(--r-2);
  letter-spacing: -.01em;
  line-height: 1.2;
}
.om-hero-zdanie {
  margin: 0;
  max-width: 34rem;
  font-size: var(--r-0-5);
  line-height: 1.5;
  text-wrap: balance;
}
.om-hero-scena { grid-area: scena; }
/* podpowiedź gestów pod znakiem; „?" stoi w nagłówku (naglowek.php) */
.om-hero .podpowiedz { top: calc(50svh + var(--znak-polwys) + var(--o-4)); }

@media (min-width: 700px) {
  .om-hero {
    --karta-szer: clamp(11rem, 16vw, 18.5rem);
    grid-template-columns: auto minmax(0, 1fr) auto;
    grid-template-rows: auto minmax(0, 1fr);
    grid-template-areas: "pasek pasek pasek" "zdjecia scena wideo";
    row-gap: var(--o-5);
    padding-bottom: var(--o-7);
  }
  .om-hero-imie { font-size: var(--r-5); }
}

/* — talie: karty trzymane w dłoni, spoza krawędzi ------------------------------
   Jedna mechanika ruchu na element: .om-talia — wysunięcie (translate),
   .om-talia-wachlarz — pochylenie w 3D, .om-karta — kąt w wachlarzu i głębia.
   Stan „wysunięta": najazd myszą / fokus / pierwsze dotknięcie (klasa z JS). */
.om-talia {
  --kier: 1;                                  /* 1 — lewa krawędź, −1 — prawa (lustro) */
  --wysun: -.3;                               /* część karty za krawędzią ekranu */
  --unies: 0px;
  --krok: 5deg;                               /* rozłożenie wachlarza */
  --baza: 3deg;                               /* pochylenie całej dłoni do środka ekranu */
  --pochyl-y: 14deg;
  --pochyl-x: 6deg;
  position: relative;
  grid-area: zdjecia;
  justify-self: start;
  align-self: end;
  width: var(--karta-szer);
  height: var(--karta-wys);
  margin-top: var(--o-6);                     /* miejsce na podpis nad kartami */
  perspective: 1100px;
  perspective-origin: 260% 0%;                /* oko od strony środka ekranu — grubość kart widać */
  transform: translate3d(calc(var(--kier) * var(--wysun) * var(--karta-szer)), var(--unies), 0);
  transition: transform .7s var(--e-sprezyna);
  -webkit-tap-highlight-color: transparent;
}
.om-talia--wideo { --kier: -1; grid-area: wideo; justify-self: end; perspective-origin: -160% 0%; }
.om-talia.wysunieta,
.om-talia:focus-within {
  --wysun: .08;
  --unies: calc(-1 * var(--o-3));
  --krok: 8deg;
  --baza: -1deg;
  --pochyl-y: 6deg;
  --pochyl-x: 3deg;
}
@media (hover: hover) and (pointer: fine) {
  .om-talia:hover {
    --wysun: .08;
    --unies: calc(-1 * var(--o-3));
    --krok: 10deg;
    --baza: -1deg;
    --pochyl-y: 6deg;
    --pochyl-x: 3deg;
  }
}
@media (min-width: 700px) {
  .om-talia { align-self: center; margin-top: 0; --wysun: -.22; }
}
.om-talia-wachlarz {
  position: relative;
  width: 100%; height: 100%;
  transform-style: preserve-3d;
  transform: rotateX(var(--pochyl-x)) rotateY(calc(var(--kier) * var(--pochyl-y)));
  pointer-events: none;                       /* w 3D leży przed kartami — przepuszcza do nich */
  transition: transform .7s var(--e-lagodna);
}

/* karta: odbitka w ramce o prawdziwej grubości — dwie płyty za licem (::before,
   ::after) w głębi 3D; z ukosa widać ich krawędź. Wierzch talii = --i: 0,
   karty spod spodu wychodzą w stronę środka ekranu, każda o --krok dalej. */
.om-karta {
  --grubosc: 7px;
  position: absolute; inset: 0;
  display: block;
  padding: 6px;
  border: 1px solid color-mix(in srgb, var(--tekst) 16%, transparent);
  border-radius: var(--z-maly);
  background-color: var(--noc-2);
  background-size: cover;
  background-origin: content-box;
  background-clip: content-box;               /* miniatura (LQIP) pod zdjęciem, nie pod ramką */
  color: inherit;
  transform-style: preserve-3d;
  transform-origin: 50% 135%;                 /* oś wachlarza — w dłoni, pod kartami */
  transform: translateZ(calc(var(--i) * -14px))
    rotate(calc(var(--kier) * (var(--i) * var(--krok) + var(--baza))));
  transition: transform .7s var(--e-sprezyna);
  cursor: zoom-in;
  pointer-events: auto;
}
.om-karta::before,
.om-karta::after {
  content: "";
  position: absolute; inset: -1px;
  border-radius: inherit;
  pointer-events: none;
}
.om-karta::before {                           /* środek grubości — jasna krawędź kartonu */
  background: color-mix(in srgb, var(--tekst) 22%, var(--noc-2));
  transform: translateZ(calc(var(--grubosc) * -.5));
}
.om-karta::after {                            /* tył karty, z cieniem na tle */
  background: color-mix(in srgb, var(--tekst) 10%, var(--noc-2));
  transform: translateZ(calc(var(--grubosc) * -1));
  box-shadow: 0 18px 34px -14px rgba(0, 0, 0, .8);
}
.om-karta img {
  display: block;
  width: 100%; height: 100%;
  object-fit: cover;
  border-radius: calc(var(--z-maly) - 6px);
}
.om-karta:focus-visible { outline-offset: 3px; }

/* rewers karty wideo — do czasu nagrania; nie otwiera się */
.om-karta--rewers {
  display: grid;
  place-content: center;
  justify-items: center;
  gap: var(--o-3);
  background-image: none;
  cursor: default;
}
.om-karta--rewers > * { transform: translateZ(0); }
.om-karta--rewers .ikona { width: 3rem; height: 3rem; color: var(--fiolet); }
.om-karta--rewers .fakt { color: var(--tekst-2); }
.om-karta--film { font: inherit; }
.om-karta--film video { display: block; width: 100%; height: 100%; object-fit: cover; border-radius: calc(var(--z-maly) - 6px); }

/* podpis talii — nad kartami, po stronie ekranu */
.om-talia-etykieta {
  position: absolute;
  bottom: calc(100% + var(--o-3));
  left: 50%;
  margin: 0;
  color: var(--tekst-2);
  white-space: nowrap;
}
.om-talia--wideo .om-talia-etykieta { left: auto; right: 50%; }

/* — sekcje: jedna szerokość, powietrze między nimi (znak widać w przerwach) -- */
.om-sekcja {
  width: min(100% - 2 * var(--margines), 78rem);
  margin: var(--o-9) auto 0;
}
.om-sekcja:last-child { margin-bottom: var(--o-9); }

.om-tekst { display: grid; gap: var(--o-5); }
.om-tekst p { max-width: var(--szer-tekstu); }
.om-lead { font-size: var(--r-2); line-height: 1.45; }

/* — 3. jak pracuję: zdjęcia stanowiska w tafli, parą równych kadrów -----------
   Telefon: para pod leadem (część sekcji, nie osobny blok). Komputer: kolumna
   zdjęć obok tekstu, w tej samej tafli. Pod zdjęciem stoi miniatura (LQIP). */
.om-zdjecia {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--o-3);
}
.om-kadr {
  position: relative;
  display: block;
  aspect-ratio: 4 / 5;
  overflow: hidden;
  border-radius: calc(var(--z-maly) - 4px);
  background-size: cover;
  cursor: zoom-in;
}
.om-kadr img {
  display: block;
  width: 100%; height: 100%;
  object-fit: cover;
  transition: transform .6s var(--e-lagodna);
}
@media (hover: hover) and (pointer: fine) {
  .om-kadr:hover img { transform: scale(1.03); }
}
@media (min-width: 960px) {
  .om-praca-tafla {
    max-width: 56rem;
    margin-left: auto;                        /* znak w wolnym polu po lewej (poza x −.6) */
    grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
    column-gap: var(--o-7);
  }
  .om-praca-tafla > * { grid-column: 1; }
  .om-praca-tafla > .om-zdjecia { grid-column: 2; grid-row: 1 / span 6; align-self: center; }
}

/* — 4. czego nie robię: tabela granic — zdanie i dopowiedź w jednym wierszu -- */
.om-granice-tafla { display: grid; gap: var(--o-4); }
.om-granice-wstep { font-size: var(--r-2); }
.om-granice-lista { margin: var(--o-4) 0 0; padding: 0; list-style: none; }
.om-granice-lista li {
  display: grid;
  gap: var(--o-2);
  padding: var(--o-5) 0;
  border-top: 1px solid var(--tafla-linia);
}
.om-granice-lista strong {
  font-family: var(--kroj-naglowek);
  font-size: var(--r-3);
  font-weight: 600;
  line-height: 1.05;
  letter-spacing: -.02em;
  text-wrap: balance;
}
@media (min-width: 960px) {
  .om-granice-lista li {
    grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
    column-gap: var(--o-6);
    align-items: baseline;
  }
}
/* telefon: zwarta tabela zamiast ściany — mniejszy stopień, gęstsze wiersze */
@media (max-width: 699px) {
  .om-granice-wstep { font-size: var(--r-1); }
  .om-granice-lista { margin-top: 0; }
  .om-granice-lista li { gap: var(--o-1); padding: var(--o-3) 0; }
  .om-granice-lista strong { font-size: var(--r-lead); line-height: 1.25; letter-spacing: -.01em; }
  .om-granice-lista .drugi { font-size: var(--r-0); line-height: 1.45; }
}
/* puenta — nie przypis: największy tekst sekcji, po ostatniej linii listy */
.om-puenta {
  padding-top: var(--o-7);
  border-top: 1px solid var(--tafla-linia);
  font-size: var(--r-2);
  line-height: 1.45;
}
.om-puenta strong {
  display: block;
  max-width: 18ch;
  margin-top: var(--o-5);
  font-family: var(--kroj-naglowek);
  font-size: var(--r-4);
  font-weight: 600;
  line-height: .98;
  letter-spacing: -.035em;
  text-wrap: balance;
}
@media (max-width: 699px) {
  .om-sekcja { margin-top: var(--o-8); }
  .om-puenta { padding-top: var(--o-5); font-size: var(--r-1); }
  .om-puenta strong { margin-top: var(--o-3); }
}

/* — 5. domknięcie ----------------------------------------------------------- */
.om-domkniecie-tafla {
  display: grid;
  justify-items: start;
  gap: var(--o-5);
  max-width: 44rem;
}
.om-domkniecie-tafla p { font-size: var(--r-2); line-height: 1.45; }
/* pole znaku nad kaflem: na końcu strony w oknie mieszczą się pole, kafel i stopka —
   --om-dol = kafel + stopka + odstępy (zmierzone 30.09) */
.om-domkniecie { --om-dol: 35rem; margin-top: var(--o-5); }
.om-sekcja.om-domkniecie { margin-bottom: var(--o-6); }
.om-domkniecie-scena { height: max(8rem, min(22rem, calc(100svh - var(--om-dol)))); }
@media (max-width: 699px) {
  .om-domkniecie-tafla { gap: var(--o-4); }
  .om-domkniecie-tafla p { font-size: var(--r-1); }
}

/* ==========================================================================
   PODGLĄD W NIEWAŻKOŚCI — <dialog>; zdjęcie wylatuje z kadru (lot, JS),
   dryfuje jak znak (img), na myszce przechyla się za kursorem (płyta, JS).
   Jedna mechanika ruchu na element: lot · płyta · img.
   ========================================================================== */
html.om-podglad-otwarty { overflow: hidden; }
.om-podglad {
  position: fixed; inset: 0; z-index: 70;
  display: grid; place-items: center;
  width: 100%; max-width: none; height: 100%; max-height: none;
  margin: 0; padding: var(--o-7) var(--margines);
  border: 0;
  background: transparent;
  color: var(--tekst);
  touch-action: none;                        /* palec prowadzi podgląd, strona pod spodem stoi */
}
.om-podglad:not([open]) { display: none; }
.om-podglad::backdrop { background: transparent; }
.om-podglad-tlo {
  position: fixed; inset: 0;
  background: color-mix(in srgb, var(--noc) 82%, transparent);
  opacity: 0;
  transition: opacity .45s var(--e-lagodna);
}
[data-szklo="pelne"] .om-podglad-tlo { -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); }
.om-podglad-kadr {
  position: relative;
  display: grid; justify-items: center; gap: var(--o-4);
  margin: 0;
  pointer-events: none;                      /* klik obok zdjęcia trafia w tło = zamknięcie */
}
.om-podglad-plyta {
  border-radius: var(--z-maly);
  background-size: cover;
  transition: transform .6s var(--e-lagodna);
  pointer-events: auto;
}
.om-podglad-img {
  width: auto; height: auto;
  max-width: min(92vw, 72rem);
  max-height: 76svh;
  border-radius: inherit;
  animation: om-dryf 13s ease-in-out infinite;
}
@keyframes om-dryf {
  33% { transform: translate3d(0, -6px, 0) rotate(.35deg); }
  66% { transform: translate3d(4px, 3px, 0) rotate(-.3deg); }
}
.om-podglad-podpis {
  max-width: 60ch;
  font-size: var(--r-0);
  line-height: 1.5;
  color: var(--tekst-2);
  text-align: center;
  pointer-events: auto;
}
.om-podglad-licznik { color: var(--akcent); margin-right: var(--o-2); }
.om-podglad-przycisk {
  position: fixed; z-index: 1;
  display: grid; place-items: center;
  width: 48px; height: 48px;
  padding: 0;
  border: 1px solid var(--szklo-linia);
  border-radius: var(--z-pigulka);
  background: var(--szklo-tlo);
  box-shadow: inset 0 1px 0 var(--szklo-blysk), var(--szklo-cien);
  color: var(--tekst);
  cursor: pointer;
}
[data-szklo="pelne"] .om-podglad-przycisk { -webkit-backdrop-filter: blur(14px) saturate(150%); backdrop-filter: blur(14px) saturate(150%); }
.om-podglad-zamknij { top: max(var(--o-4), env(safe-area-inset-top)); right: var(--margines); }
.om-podglad-poprz, .om-podglad-nast { top: 50%; margin-top: -24px; }
.om-podglad-poprz { left: var(--margines); }
.om-podglad-nast { right: var(--margines); }
@media (max-width: 699px) {
  /* telefon: strzałki pod zdjęciem, nie na nim */
  .om-podglad { padding-bottom: calc(var(--o-8) + var(--o-4)); }
  .om-podglad-poprz, .om-podglad-nast { top: auto; margin: 0; bottom: max(var(--o-5), env(safe-area-inset-bottom)); }
}
.om-podglad :is(.om-podglad-podpis, .om-podglad-przycisk) { opacity: 0; transition: opacity .35s ease .15s; }
.om-podglad.otwarte :is(.om-podglad-tlo, .om-podglad-podpis, .om-podglad-przycisk) { opacity: 1; }
.om-podglad.zamyka :is(.om-podglad-tlo, .om-podglad-podpis, .om-podglad-przycisk) { opacity: 0; transition-delay: 0s; }

@media (prefers-reduced-motion: reduce) {
  .om-kadr img, .om-talia, .om-talia-wachlarz, .om-karta, .om-podglad-plyta, .om-podglad-tlo, .om-podglad :is(.om-podglad-podpis, .om-podglad-przycisk) { transition: none; }
}