/* Drukarnia — CV z prasy (soon-cv.js; koncepcja B „Drukarnia”: assets/concepts/cv_B.png, opis assets/concepts/cv_README.md).
   Na scenie (.cv-rig w .stage, warstwa 7 — nad telewizorkiem, pod kurtynami i frontonem): klapy zapadni, ciemny otwór, studnia
   (.cv-well ucina wszystko poniżej przedniej krawędzi zapadni), w niej winda (.cv-lift) z prasą, dźwignią i dżentelmenem.
   Wymiary i położenia w px liczy soon-cv.js. Nad całą stroną: przygaszenie (.cv-dim, 25), czytnik z CV (.cv-reader, 26),
   lecący arkusz (.cv-fly, 27), zasłona na czas animacji (.cv-block, 28 — klik = od razu koniec). */

/* guzik „CV” w rzędzie linków (jak koperta: sam guzik, nazwa dla czytników) */
html.has-btn_cv .ln-cv .btn { border: 0; background-color: transparent; background-image: var(--eng-btn_cv); }
html:not(.has-btn_cv) .ln-cv .btn::after { content: "CV"; position: absolute; inset: 0; display: grid; place-items: center; font: 700 17px/1 var(--font-mono); }

/* ---------- scena: zapadnia, prasa, dżentelmen ---------- */
html.cv-up .masthead mech-letters .letters-stage { overflow: visible; }   /* litery lecą do prasy (na co dzień przycina ich wpadanie z góry) */
.cv-rig { position: absolute; inset: 0; z-index: 7; pointer-events: none; visibility: hidden; }
html.cv-up .cv-rig { visibility: visible; }
.cv-rig img { position: absolute; left: 0; top: 0; max-width: none; user-select: none; }
.cv-hole { position: absolute; height: calc(var(--sh) * .05); border-radius: 50%; opacity: 0;
  background: radial-gradient(ellipse at 50% 55%, rgb(14 9 4 / .92) 35%, rgb(14 9 4 / .6) 62%, rgb(14 9 4 / 0) 72%); }   /* cień otworu w deskach (bez ryciny) */
.cv-hole.has-art { border-radius: 0; background: var(--hole-art) center / 100% 100% no-repeat; filter: sepia(.2) brightness(.95); }   /* rycina otworu (trap_hole), wysokość z soon-cv.js */
/* dym z zapadni: wał przed podstawą prasy (trzy kawałki, skrajne odbite) i kłęby nad nim — przed prasą, pod kurzem i „ŁUP!” */
.cv-bank, .cv-smoke { z-index: 8; opacity: 0; pointer-events: none; filter: sepia(.15) brightness(.98); }
.cv-bank { transform-origin: 50% 100%; }
.cv-bank.flip, .cv-smoke.flip { scale: -1 1; }
.cv-smoke { transform-origin: 50% 85%; }
.cv-leaf { position: absolute; transform-origin: 0 100%; opacity: 0; filter: sepia(.25) brightness(.92) drop-shadow(3px 4px 0 rgb(42 33 26 / .25)); }   /* zawias: lewy dolny róg lewej klapy */
.cv-leaf.right { transform-origin: 100% 100%; }
.cv-rig .cv-leaf img { position: static; display: block; width: 100%; height: 100%; }
.cv-rig .cv-leaf.left img { transform: scaleX(-1); }      /* okucia zawiasów od strony otworu */
.cv-well { position: absolute; left: 0; right: 0; bottom: calc(var(--sh) * .175); height: 300%; overflow: hidden; }
.cv-lift { position: absolute; inset: 0; }
.cv-press { position: absolute; left: 0; top: 0; }
.cv-press img { position: absolute; left: 0; top: 0; width: 100%; height: auto; filter: sepia(.3) saturate(.8) brightness(.93) drop-shadow(6px 7px 0 rgb(42 33 26 / .25)); }
.cv-bar { transform-origin: 0 0; filter: sepia(.3) saturate(.8) brightness(.93) drop-shadow(4px 5px 0 rgb(42 33 26 / .22)); }
.cv-man { position: absolute; left: 0; width: 0; }
.cv-man .walker .wk-part.wk-hide { display: none; }
.cv-puff { z-index: 9; width: calc(var(--sh) * .2); opacity: 0; }
/* „ŁUP!” — papierowy wybuch z ryciny, napis w HTML */
.cv-burst { position: absolute; left: 0; top: 0; z-index: 10; width: calc(var(--sh) * .42); aspect-ratio: var(--burst-ar, 1.33); opacity: 0; transform-origin: 50% 50%; }
.cv-rig .cv-burst img { position: static; display: block; width: 100%; height: 100%; filter: drop-shadow(4px 5px 0 rgb(42 33 26 / .3)); }
.cv-burst b { position: absolute; inset: 0; display: grid; place-items: center; padding-top: 2%; font: 900 calc(var(--sh) * .1)/1 "Playfair Display", Georgia, serif; letter-spacing: .02em; color: var(--red, #a4382a); rotate: -6deg; }

/* ---------- czytnik ---------- */
.cv-dim { position: fixed; inset: 0; z-index: 25; opacity: 0; visibility: hidden; transition: opacity .5s steps(5), visibility 0s .5s;
  background: radial-gradient(ellipse 50% 62% at 50% 44%, rgb(255 236 190 / .1), rgb(255 236 190 / 0) 100%), radial-gradient(ellipse 66% 76% at 50% 46%, rgb(14 9 4 / .55) 25%, rgb(14 9 4 / .88) 100%); }
html.cv-dark .cv-dim { opacity: 1; visibility: visible; transition: opacity .5s steps(5); }
.cv-reader { position: fixed; inset: 0; z-index: 26; overflow-y: auto; overscroll-behavior: contain; outline: none; }
.cv-reader[hidden] { display: none; }
.cv-col { position: relative; width: var(--cvw, 920px); margin: 0 auto; padding: var(--cvtop, 28px) 0 72px; }
.cv-paper { position: relative; width: var(--cvw, 920px); height: var(--cvh, 1300px); opacity: 0; }
html.cv-read .cv-paper { opacity: 1; }
.cv-paper iframe { position: absolute; left: 0; top: 0; width: var(--ifw, 808px); height: var(--ifh, 2300px); border: 0; background: transparent; transform-origin: 0 0; transform: scale(var(--k, 1)); color-scheme: light; }
/* papierowe guziki: na szerokim ekranie słupek przy prawym brzegu arkusza (nie przewija się; ramka ma po 22 px zapasu na
   przekrzywione rogi kartek), na węższym pasek nad arkuszem */
.cv-tools { position: fixed; z-index: 2; left: calc(50% + var(--cvw, 920px) / 2 - var(--k, 1) * 22px + 28px); top: var(--cvtop, 28px); display: flex; flex-direction: column; align-items: flex-start; gap: 12px; opacity: 0; visibility: hidden; }
html.cv-read .cv-tools { opacity: 1; visibility: visible; transition: opacity .25s steps(3); }
.cv-reader.is-top .cv-tools { position: sticky; top: 0; left: auto; flex-direction: row; flex-wrap: wrap; justify-content: center; gap: 8px; padding: 10px 0 14px; margin: calc(var(--cvtop, 28px) * -1) 0 10px; }
.cv-tool, .cv-var button { display: inline-flex; align-items: center; gap: .5em; padding: 9px 14px 8px; border: 1px solid var(--ink); background: var(--paper-light) var(--grain); color: var(--ink); box-shadow: 3px 3px 0 rgb(14 9 4 / .35);
  font: 700 13px/1 var(--font-mono); letter-spacing: .06em; text-transform: uppercase; text-decoration: none; cursor: pointer; white-space: nowrap; transform: rotate(var(--r, 0deg)); }
.cv-tool:nth-child(2) { --r: -1deg; } .cv-tool:nth-child(3) { --r: .8deg; }
.cv-tool:hover, .cv-var button:hover { background: var(--ink); color: var(--paper-light); }
.cv-tool:focus-visible, .cv-var button:focus-visible { outline: 2px solid var(--paper-light); outline-offset: 3px; }
.cv-close span { font-size: 18px; line-height: .6; }
.cv-var { display: flex; }
.cv-var button { box-shadow: none; }
.cv-var button + button { border-left: 0; }
.cv-var button[aria-pressed="true"] { background: var(--ink); color: var(--paper-light); }
.cv-var { box-shadow: 3px 3px 0 rgb(14 9 4 / .35); }
.cv-fly { position: fixed; left: 0; top: 0; z-index: 27; width: 100px; height: auto; transform-origin: 0 0; pointer-events: none; box-shadow: 10px 12px 0 rgb(14 9 4 / .3); }
.cv-fly[hidden] { display: none; }
.cv-block { position: fixed; inset: 0; z-index: 28; cursor: pointer; }
.cv-block[hidden] { display: none; }

/* pasek nad arkuszem: ciemne tło, żeby przy przewijaniu nie nachodził na tekst */
.cv-reader.is-top .cv-tools { background: rgb(14 9 4 / .9); box-shadow: 0 6px 12px rgb(14 9 4 / .35); }
@media (max-width: 640px) {
  .cv-tool, .cv-var button { padding: 8px 9px 7px; font-size: 11px; letter-spacing: .04em; }
  .cv-print { display: none; }                                /* na telefonie drukowanie prawie się nie zdarza: pasek w jednym wierszu */
}
@media (prefers-reduced-motion: reduce) { .cv-dim, html.cv-dark .cv-dim, html.cv-read .cv-tools { transition-duration: 0s; transition-delay: 0s; } }