/* Portfolio na scenie (portfolio/portfolio.js; opis: assets/concepts/portfolio_README.md).
   Warstwa .pf-layer leży w .stage nad telewizorkiem i tabliczką (6), pod kurtynami (9) i frontonem (10) — jak prasa z CV (7).
   Haczyki do kliknięcia nie odstają od sceny: ta sama rycina i cień co reszta rekwizytów, zdradza je tylko poruszenie
   i kursor-dłoń (--pf-cursor ustawia portfolio.js, gdy rycina kursora jest na miejscu). Zasłona .pf-block na czas animacji
   (klik = od razu koniec). Wymiary rekwizytów liczą moduły w props/ w px sceny (od --sh). */

.pf-layer { position: absolute; inset: 0; z-index: 7; pointer-events: none; }
.pf-layer img { position: absolute; left: 0; top: 0; max-width: none; user-select: none; -webkit-user-drag: none; }

/* haczyk: przycisk bez wyglądu przycisku; pole dotyku powiększone niewidzialnym marginesem (telefon: co najmniej 44 px) */
.pf-hook { position: absolute; left: 0; top: 0; margin: 0; padding: 0; border: 0; background: none; color: inherit; font: inherit;
  pointer-events: auto; cursor: var(--pf-cursor, pointer); -webkit-tap-highlight-color: transparent; }
.pf-hook::before { content: ""; position: absolute; inset: -14px -10px; }
.pf-hook:focus-visible { outline: none; }   /* fokus z klawiatury: poświata wokół samej ryciny (każdy rekwizyt w swoim CSS) */

.pf-block { position: fixed; inset: 0; z-index: 28; cursor: progress; }
.pf-block[hidden] { display: none; }

/* papier i druk w rekwizytach (szyldy, woblery, zawieszki): ten sam papier z ziarnem co tabliczki sceny */
.pf-paper { background: var(--paper-light) var(--grain); color: var(--ink); border: 1px solid var(--ink); box-shadow: 3px 3px 0 rgb(42 33 26 / .22); }
/* zawieszka z linkiem do źródła: klikalna tylko wtedy, gdy jej karta (szyld, liścik, rozkład) jest widoczna — dziedziczy
   pointer-events po niej (nie włączać tu na stałe: niewidoczny link łapał kliknięcia, uwaga Jacka 19.10); zamknięty rekwizyt
   i tak jest martwy poza haczykiem (inert z portfolio.js) */
.pf-tag { position: absolute; display: inline-block; padding: .45em .8em .4em; font: 700 max(12px, calc(var(--sh) * .026))/1.15 "Courier Prime", monospace; letter-spacing: .02em;
  color: var(--ink); text-decoration: none; white-space: nowrap; cursor: pointer; transform-origin: 50% -40%; }
.pf-tag:hover, .pf-tag:focus-visible { color: #8e1b1b; }
.pf-tag:focus-visible { outline: 2px solid #8e1b1b; outline-offset: 3px; }

/* wąż (lib/waz.js): guma, prążki w poprzek i blik od lewej z góry; cień jak przy innych rekwizytach */
.pf-hose { position: absolute; left: 0; top: 0; width: 100%; height: 100%; overflow: visible; pointer-events: none; filter: drop-shadow(3px 4px 0 rgb(42 33 26 / .22)); }
.pf-hose-body { stroke: #221b16; }
.pf-hose-ribs { stroke: #382f28; }
.pf-hose-shine { stroke: rgb(236 220 190 / .3); }

/* licznik znalezionych (schowany; ?licznik w adresie) */
.pf-ticket { position: absolute; right: calc(var(--curtain-w) + 10px); bottom: calc(var(--sh) * .03); z-index: 11; margin: 0; padding: 5px 10px 4px; rotate: 2deg;
  font: 700 11px/1 var(--font-mono); letter-spacing: .12em; text-transform: uppercase; background: var(--paper-light) var(--grain); color: var(--ink); border: 1px dashed var(--ink); }
.pf-ticket[hidden] { display: none; }

@media (prefers-reduced-motion: reduce) { .pf-tag { transition: none; } }

/* bębenki licznika (lib/licznik.js): taksometr i inne */
.pf-drums { display: flex; align-items: center; justify-content: center; gap: .05em; font: 700 1em/1 "Courier Prime", monospace; color: #231a12; }
.pf-drum { display: inline-block; width: .64em; height: 1em; overflow: hidden; background: linear-gradient(#e9dcc0, #fbf3e2 40% 60%, #e2d3b4); box-shadow: inset 0 0 0 1px rgb(42 33 26 / .5); border-radius: .08em; }
.pf-drum i { display: block; font-style: normal; text-align: center; line-height: 1; will-change: transform; }
.pf-drums b { width: .3em; text-align: center; }
.pf-drums em { margin-left: .25em; font: 700 .6em/1 "Courier Prime", monospace; font-style: normal; letter-spacing: .04em; }

/* gdy jeden rekwizyt jest otwarty, pozostałe chowają się na chwilę (haczyki nie wchodzą w kadr) */
.pf-away { opacity: 0; visibility: hidden; transition: opacity .3s steps(3), visibility 0s .3s; }

/* karta „przed sceną” na telefonie (szyld, liścik, tektura, rozkład): w oknie, między kurtynami, czytelna */
.pf-front { position: fixed !important; }