/*
Theme Name: Krzysztof Jurkiewicz
Theme URI: https://pawelszydlowski.pl/
Author: Paweł Szydłowski
Author URI: https://pawelszydlowski.pl/
Description: Klasyczny motyw dla Krzysztofa Jurkiewicza i zespołu Słodki Całus od Buby. Jednostronicowa opowieść „od morza w góry” — akwarelowe pejzaże, śpiewnik z chwytami, blog pisany jak korespondencja. Całe copy edytowalne w Wygląd → Dostosuj.
Version: 1.2.0
Requires at least: 6.0
Tested up to: 6.7
Requires PHP: 7.4
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: jurkiewicz
Tags: one-column, custom-colors, custom-menu, blog, translation-ready
*/
/* ==========================================================================
Style strony. Sekcje niżej pochodzą 1:1 z zatwierdzonej paczki statycznej
(koncept-2026-07/paczka/jurkiewicz-strona/index.html).
Blok mobilny ≤840px: tło niesie całą sekcję, treść leży NA nim.
Na końcu pliku: style bloga (wpisy, strony, archiwa, 404, odpowiedzi).
========================================================================== */
:root{
--papier:#EDE4CE; --papier-karta:#F4EDDC; --atrament:#2E2A23; --sepia:#6B5138;
--dzins:#5B7186; --rdza:#C4762F; --swierk:#52603F; --stempel:#A03D2E;
--bg:#EDE4CE; --ink:#2E2A23; --akcent:#6B5138;
--serif:'Literata',Georgia,serif; --mono:'IBM Plex Mono',monospace;
--s1:.5rem; --s2:1rem; --s3:2rem; --s4:4rem; --s5:8rem;
/* maski rozlewu — rasteryzowane raz, nigdy nie przeliczane w klatce scruba.
Region filtra w userSpaceOnUse (bez znaków % w data-URI). */
}
*{box-sizing:border-box}
/* ─── zgodność z trybem standardowym przeglądarki ───
Paczka statyczna jest plikiem bez , czyli renderuje się w trybie
quirks: linia zawierająca sam obrazek albo sam element inline-block nie
rezerwuje tam miejsca na „ogonki” czcionki. WordPress zawsze wysyła
, więc bez tych dwóch reguł pod obrazkami i pod stemplami
otwierałaby się szpara ~4 px, a sekcje urosłyby o kilkanaście pikseli.
Zweryfikowane pomiarem — nie usuwaj. */
img{vertical-align:bottom}
.stempel-naglowek,.dopisz.uwaga,.kontakt-akcja,.do-gory{vertical-align:top}
body{margin:0;background:var(--bg);color:var(--ink);font-family:var(--serif);
font-size:17.5px;line-height:1.65;-webkit-font-smoothing:antialiased;overflow-x:hidden}
a{color:inherit}
.mono{font-family:var(--mono);font-size:.74rem;letter-spacing:.05em}
em{font-style:italic}
/* ziarno papieru na całości */
body::before{content:"";position:fixed;inset:0;z-index:1;pointer-events:none;opacity:.55;
mix-blend-mode:multiply;
background-image:url("data:image/svg+xml;utf8,")}
/* delikatne przybrudzenie rogów */
body::after{content:"";position:fixed;inset:0;z-index:1;pointer-events:none;mix-blend-mode:multiply;opacity:.5;
background:radial-gradient(120% 90% at 50% 40%, transparent 62%, rgba(107,81,56,.16) 100%)}
main, header, nav.lista, footer{position:relative;z-index:2}
/* akwarele kładzione wprost na papier — krawędzie wtapiane maską */
.aq{mix-blend-mode:multiply;display:block;max-width:100%;height:auto}
.aq-scena .aq, .znaczki-pas{
-webkit-mask-image:radial-gradient(104% 104% at 50% 50%, #000 70%, transparent 99%);
mask-image:radial-gradient(104% 104% at 50% 50%, #000 70%, transparent 99%)}
/* ─── kursor ─── */
.cur-dot,.cur-ring{position:fixed;top:0;left:0;pointer-events:none;z-index:400;border-radius:50%;will-change:transform;display:none}
.cur-dot{width:6px;height:6px;background:var(--ink)}
.cur-ring{width:34px;height:34px;border:1px solid var(--ink);opacity:.5;transition:width .25s,height .25s,opacity .25s}
body.cur-on .cur-dot,body.cur-on .cur-ring{display:block}
body.cur-on,body.cur-on a,body.cur-on button{cursor:none}
.cur-label{position:fixed;top:0;left:0;pointer-events:none;z-index:401;display:none;
font-family:var(--mono);font-size:.6rem;letter-spacing:.08em;background:var(--ink);
color:var(--papier);padding:2px 7px;border-radius:8px;transform:translate(14px,14px)}
body.cur-on .cur-label.show{display:block}
/* ─── sticky nav ─── */
.lista{position:fixed;top:0;left:0;right:0;z-index:300;display:flex;gap:var(--s3);align-items:center;
padding:var(--s2) var(--s3);font-family:var(--mono);font-size:.72rem;letter-spacing:.06em;
transform:translateY(-110%);transition:transform .45s cubic-bezier(.22,1,.36,1);
background:color-mix(in srgb,var(--bg) 90%,transparent);backdrop-filter:blur(6px);
border-bottom:1px solid color-mix(in srgb,var(--ink) 14%,transparent)}
body.po-hero .lista{transform:translateY(0)}
/* Na podstronach bloga nie ma hero ani skryptu, który wysuwa pasek —
musi być widoczny od razu, inaczej nie da się wrócić na stronę główną. */
body.jur-podstrona .lista{transform:translateY(0)}
.lista .kto{font-weight:500;margin-right:auto}
.lista a{text-decoration:none;opacity:.65;transition:opacity .2s}
.lista a:hover,.lista a:focus-visible,.lista a.tu{opacity:1}
.lista a.tu::before{content:"● "}
/* ─── hero: postać STOI W PEJZAŻU i jest przez niego obmywana ───
warstwy (z-index): 0 pejzaż daleki · 1 światło + rozlew · 2 postać
· 3 pejzaż PRZED postacią (mgła, przybój) · 4 winieta · 5 tekst */
.hero{height:100vh;position:relative;overflow:hidden}
/* 0 · pejzaż daleki */
.hero-tlo{position:absolute;inset:-14%;will-change:transform;z-index:0}
.hero-tlo .aq{width:100%;height:100%;object-fit:cover;object-position:52% 46%;
-webkit-mask-image:none;mask-image:none}
/* 1 · światło sceny: ciepła łuna nad postacią (screen) + poranna mgła po lewej,
która robi miejsce na tekst — zamiast pudełka pod tekstem */
.hero-swiatlo{position:absolute;inset:0;z-index:1;pointer-events:none}
.hero-swiatlo::before{content:"";position:absolute;inset:0;mix-blend-mode:screen;opacity:.9;
background:
radial-gradient(36% 44% at 72% 24%, rgba(255,233,190,.66) 0%, rgba(255,214,150,.24) 44%, transparent 74%),
linear-gradient(198deg, rgba(255,241,208,.32) 0%, transparent 44%)}
.hero-swiatlo::after{content:"";position:absolute;inset:0;
background:linear-gradient(97deg,
color-mix(in srgb,var(--papier) 93%,transparent) 0%,
color-mix(in srgb,var(--papier) 79%,transparent) 23%,
color-mix(in srgb,var(--papier) 36%,transparent) 44%,
transparent 60%)}
/* 2 · postać — bez ramki, bez kartki.
UWAGA: mix-blend-mode:multiply na PNG z alfą szarzy jasne partie akwareli
(papierowe światła mnożą się z tłem i znikają) → blend NORMAL,
a wtopienie robią: maska dolnej krawędzi + splot z pejzażem niżej. */
.postac{position:absolute;right:4.5%;bottom:0;z-index:2;margin:0;padding:0;line-height:0}
/* postać kryje w 100% — przez twarz i kurtkę nie może prześwitywać pejzaż;
wtopienie robi wyłącznie miękkie zejście przy samej dolnej krawędzi */
.postac .portret{display:block;height:88vh;width:auto;max-width:48vw;
mix-blend-mode:normal;opacity:1}
/* 3 · pejzaż PRZED postacią — dół sylwetki wchodzi w wodę i mgłę */
.mgla{position:absolute;left:-14%;right:-14%;z-index:3;pointer-events:none;
mix-blend-mode:screen;will-change:transform}
.mgla-a{bottom:7%;height:44%;opacity:.4;
background:radial-gradient(56% 100% at 44% 100%, rgba(247,241,224,.95) 0%, rgba(242,234,214,.46) 44%, transparent 78%);
animation:mgla-plyn 34s ease-in-out infinite alternate}
.mgla-b{bottom:0;height:28%;opacity:.3;
background:radial-gradient(66% 100% at 70% 100%, rgba(228,224,206,.92) 0%, rgba(214,214,198,.34) 52%, transparent 82%);
animation:mgla-plyn 47s -13s ease-in-out infinite alternate-reverse}
.przyboj{position:absolute;left:-8%;right:-8%;bottom:-2%;height:27%;z-index:3;pointer-events:none;
background:url("assets/aq-baltyk.webp") 50% 97%/cover no-repeat;
filter:blur(8px) saturate(.85);opacity:.4;mix-blend-mode:multiply;will-change:transform;
-webkit-mask-image:linear-gradient(180deg,transparent 0%,rgba(0,0,0,.5) 32%,#000 74%);
mask-image:linear-gradient(180deg,transparent 0%,rgba(0,0,0,.5) 32%,#000 74%)}
/* jedyna animacja w pętli: transform na 2 elementach (kompozytor GPU, bez przeliczania filtru) */
@keyframes mgla-plyn{
from{transform:translate3d(-2.4%,1.4%,0) scaleX(1.02)}
to{transform:translate3d(2.4%,-1.4%,0) scaleX(1.12)}}
/* 4 · winieta całego kadru */
/* miękka poświata papieru pod kolumną tytułową — pełna szerokość hero,
wygaszana poziomo, więc nie ma żadnej widocznej krawędzi */
.hero-swiatlo-txt{position:absolute;inset:0;z-index:2;pointer-events:none;
background:linear-gradient(96deg,
color-mix(in srgb,var(--papier) 94%,transparent) 0%,
color-mix(in srgb,var(--papier) 88%,transparent) 18%,
color-mix(in srgb,var(--papier) 66%,transparent) 33%,
color-mix(in srgb,var(--papier) 34%,transparent) 45%,
color-mix(in srgb,var(--papier) 12%,transparent) 55%,
transparent 66%)}
.hero-grad{position:absolute;inset:0;z-index:4;pointer-events:none;mix-blend-mode:multiply;
background:
radial-gradient(126% 96% at 64% 34%, transparent 44%, color-mix(in srgb,var(--atrament) 34%,transparent) 100%),
linear-gradient(180deg, color-mix(in srgb,var(--papier) 55%,transparent) 0%, transparent 22%,
transparent 66%, color-mix(in srgb,var(--sepia) 22%,transparent) 88%,
color-mix(in srgb,var(--sepia) 30%,transparent) 100%)}
/* dolna krawędź powitania rozpływa się w papier, tak jak krawędzie scen */
.hero::after{content:"";position:absolute;left:0;right:0;bottom:0;height:26vh;z-index:5;
pointer-events:none;background:linear-gradient(180deg,
transparent 0%, color-mix(in srgb,var(--bg) 34%,transparent) 46%,
color-mix(in srgb,var(--bg) 76%,transparent) 78%, var(--bg) 100%)}
/* 5 · JEDNA kolumna: tytuł → lead → metryczka → spis → hint na wspólnej osi (7%),
spis traci kartkę (kadr, nie trzy pudełka) */
.hero-kolumna{position:absolute;left:7%;top:0;bottom:0;z-index:5;width:min(33rem,50vw);
display:flex;flex-direction:column;justify-content:center;padding:11vh 0 15vh}
.hero-kolumna::before{content:"";position:absolute;left:-1.7rem;top:16vh;bottom:19vh;width:1px;
background:linear-gradient(180deg,transparent,
color-mix(in srgb,var(--ink) 32%,transparent) 16%,
color-mix(in srgb,var(--ink) 32%,transparent) 84%,transparent)}
/* Kolumna tytułowa leży wprost na pejzażu — bez własnego podłoża litery
giną w jasnych partiach akwareli. */
.hero-txt{max-width:none}
.hero-txt h1{font-size:clamp(2.5rem,5.1vw,4.35rem);line-height:1;font-weight:700;margin:0;letter-spacing:-.02em}
.hero-txt .amp{font-weight:300;display:block;font-size:.4em;margin-top:.5em;font-style:italic;letter-spacing:0}
.hero-txt .lead{font-size:1.1rem;max-width:27rem;margin:var(--s2) 0 0}
.hero-meta{margin:var(--s2) 0 0;color:var(--sepia)}
/* .hero-nav zostaje klasą (używa jej intro GSAP), ale przestaje być kartką —
wyższa specyficzność, bo wspólne reguły „podartego papieru” są niżej w pliku */
.hero .hero-nav{position:static;width:auto;max-width:27rem;margin:0;padding:0;
background:none;border:0;border-radius:0;box-shadow:none;rotate:0deg;filter:none}
.hero .hero-nav::before,.hero .hero-nav::after{content:none}
/* znaczki w hero usunięte na życzenie klienta — kolumna tekstu została sama */
/* rozpiska sekcji: to jest spis treści strony, a nie przypis — musi się czytać
z fotela. line-height 1.2 zamiast dziedziczonego 1.65, żeby 5 pozycji
w powiększonym kroju nadal mieściło się w kolumnie na 100vh. */
.hero-kolumna .spis{margin:var(--s3) 0 0;max-width:none}
.hero-kolumna .spis a{font-size:clamp(1.3rem,1.9vw,1.72rem);font-weight:700;
line-height:1.2;padding:.6rem .2rem;gap:.9rem}
.hero-kolumna .spis .nr{color:var(--stempel);opacity:.9;font-size:.78rem;width:2.4ch}
/* pejzaż pod listą bywa jasny — litery muszą trzymać kontrast bez karty */
.hero-kolumna .spis .tytul{color:var(--atrament);
text-shadow:0 1px 0 rgba(244,237,220,.95),0 0 10px rgba(244,237,220,.85)}
.hero-kolumna .spis .co{font-size:.74rem;letter-spacing:.04em;opacity:1;
color:color-mix(in srgb,var(--sepia) 88%,var(--atrament));
text-shadow:0 1px 0 rgba(244,237,220,.95),0 0 8px rgba(244,237,220,.8)}
.hero-kolumna .spis .kropki{border-bottom-width:2px;
border-bottom-color:color-mix(in srgb,var(--atrament) 44%,transparent)}
.hero-kolumna .spis li + li{border-top:1px solid color-mix(in srgb,var(--atrament) 20%,transparent)}
.hero-txt h1,.hero-txt .lead{text-shadow:0 1px 0 rgba(244,237,220,.7)}
/* spis ma teraz SZEŚĆ pozycji (doszedł Śpiewnik). Na niskich ekranach kolumna
musi się zmieścić w 100vh razem z podpowiedzią przewijania — inaczej ostatnia
pozycja wchodzi pod „przewiń”. Skracamy oddech kolumny, nie krój. */
@media(max-height:820px){
.hero-kolumna{padding:8vh 0 12vh}
.hero-kolumna .spis{margin-top:var(--s2)}
.hero-kolumna .spis a{padding:.45rem .2rem}
}
.hero .hint{left:7%;bottom:6vh;transform:none;color:var(--sepia);opacity:.9;z-index:5;
display:flex;align-items:center;gap:.6rem}
.hero .hint::after{content:"";width:2.6rem;height:1px;background:currentColor;
transform-origin:left center;animation:hint-ciag 2.8s ease-in-out infinite}
@keyframes hint-ciag{0%,100%{transform:scaleX(.3);opacity:.35}50%{transform:scaleX(1);opacity:.8}}
@media(prefers-reduced-motion:reduce){
.mgla-a,.mgla-b,.hero .hint::after{animation:none}
.hero .hint::after{transform:scaleX(.7);opacity:.5}
}
/* ═══════ ROZLEW — tło sceny odsłania się jak farba na mokrym papierze ═══════
.rozlew OKNO w kształcie plamy: statyczna maska SVG (gradient zniekształcony
feTurbulence+feDisplacementMap → krawędź postrzępiona, nie koło),
skalowane od punktu rozlania (transform-origin --rx/--ry).
.rozlew-w kontrskala 1/s: obraz stoi w miejscu, rośnie sama plama.
.rozlew-rant pigment zbierający się na brzegu mokrej plamy (druga maska,
TEN SAM seed szumu, więc idealnie siada na krawędzi).
Koszt klatki scruba: dwa transformy i dwie liczby. Zero filtrów per-frame.
Stan domyślny (bez JS / bez-ruchu / mobile) = plama już rozlana.
Sekcje dostają własne tło var(--bg): main/header mają z-index:2, czyli tworzą
stacking context — bez tła multiply akwareli nie ma w co wsiąkać. */
.hero,.scena,.izba,.final-nav{background:var(--bg)}
/* ROZLEW jako SEKWENCJA KLATEK (sprite 5×5): plama nie jest skalowanym kołem,
tylko odtwarzaną animacją wsiąkania — krawędź pełza, języki farby wychodzą
nierównomiernie. W klatce scruba zmienia się WYŁĄCZNIE mask-position
(przesunięcie tekstury), więc nie ma ani transformów, ani przeliczania filtrów. */
/* WYWOŁYWANIE — kadr nie rusza się przy wejściu w sekcję. Nowy obraz
pojawia się jak odbitka w wywoływaczu: od rozmycia i wyprania koloru
do pełnej ostrości. Jedyny animowany parametr to filtr na JEDNEJ warstwie. */
.rozlew{position:absolute;inset:0;z-index:0;pointer-events:none;mix-blend-mode:multiply}
.rozlew-w{position:absolute;inset:0;background:var(--bg)}
.scena-tlo, .izba-tlo, .final-tlo{
filter:blur(var(--wyw-blur,0px)) saturate(var(--wyw-sat,1)) contrast(var(--wyw-con,1));
opacity:var(--wyw-op,1)}
/* ── V2: sceny rodzą się jak izba — CAŁA akwarela z naturalnymi granicami
plamy na papierze (bez masek; granice siedzą w samym assecie z pełnym
papierowym marginesem), a fotografia wywołuje się na wierzchu na pełny
ekran tą samą radialną maską co w izbie. */
/* WZORZEC IZBY: malunek WYPEŁNIA ekran, papierowe brzegi arkusza zostają
poza kadrem — dlatego w izbie nigdy nie było widać żadnej krawędzi.
Żadnego wycinania, żadnej alfy: kadr to wnętrze plamy. */
#morze .scena-tlo, #gory .scena-tlo{inset:0}
/* Akwarela jest KLEKSEM na papierze — mniejszym niż ekran, z papierem
dookoła; fotografia wywołuje się z niego na PEŁNY EKRAN. */
#morze .scena-tlo .aq, #gory .scena-tlo .aq{
object-fit:contain;object-position:50% 46%;transform:scale(.84)}
/* wygaszanie krawędzi kadru — na warstwie równej sekcji, nie na tej,
która wystaje poza nią pod parallaks */
.rozlew, .izba-klatka, .final-tlo{
-webkit-mask-image:linear-gradient(180deg,
transparent 0%, rgba(0,0,0,.5) 7%, #000 18%, #000 82%, rgba(0,0,0,.5) 93%, transparent 100%);
mask-image:linear-gradient(180deg,
transparent 0%, rgba(0,0,0,.5) 7%, #000 18%, #000 82%, rgba(0,0,0,.5) 93%, transparent 100%)}
/* podlanie — hue sceny sięga poza plamę, sąsiednie sekcje spotykają się tonem */
.aureola{position:absolute;inset:-12%;z-index:0;pointer-events:none;mix-blend-mode:multiply;
opacity:calc(var(--aur,1)*.7);
background:radial-gradient(78% 66% at var(--rx,58%) var(--ry,52%),
rgba(var(--ton,150,138,116),.42) 0%, rgba(var(--ton,150,138,116),.2) 44%, transparent 76%)}
/* punkt rozlania + ton podlania per scena */
#morze{--rx:32%;--ry:64%;--ton:120,140,156}
#gory {--rx:70%;--ry:42%;--ton:106,120,88}
/* wersja mobilna (≤840px) mieszka w jednym bloku na końcu arkusza */
@media(prefers-reduced-motion:reduce){ .rozlew-rant{display:none} }
.spis{list-style:none;margin:var(--s4) 0 0;padding:0;max-width:31rem}
.spis a{display:flex;align-items:baseline;gap:.7rem;padding:.62rem .2rem;text-decoration:none;
font-size:1.32rem;font-weight:600;position:relative}
.spis .nr{font-family:var(--mono);font-size:.66rem;color:var(--sepia);width:2ch;flex:none}
.spis .kropki, .spiewnik-spis .kropki{flex:1;
border-bottom:2px dotted color-mix(in srgb,var(--ink) 38%,transparent);
transform:translateY(-.35em)}
.spis .co{font-family:var(--mono);font-size:.64rem;color:var(--sepia);flex:none;
opacity:.55;transition:opacity .25s,color .25s}
.spis a:hover .co,.spis a:focus-visible .co{opacity:1;color:var(--stempel)}
.spis a:hover .tytul,.spis a:focus-visible .tytul{color:var(--stempel)}
.spis .tytul{transition:color .25s}
.hint{position:absolute;left:50%;bottom:var(--s2);transform:translateX(-50%);
font-family:var(--mono);font-size:.66rem;letter-spacing:.1em;color:var(--sepia);
transition:opacity .5s;white-space:nowrap}
.hint.zuzyty{opacity:0}
/* ─── rozdziały ─── */
section{position:relative}
.rozdzial{max-width:1220px;margin:0 auto;padding:var(--s5) var(--s3);position:relative}
.stempel-naglowek{display:inline-block;font-family:var(--mono);font-size:.68rem;letter-spacing:.16em;
color:var(--stempel);border:2px solid var(--stempel);
border-radius:8px 3px 9px 4px / 4px 9px 3px 8px;padding:.34em .75em;transform:rotate(-2.4deg);margin:0 0 var(--s3);
text-transform:uppercase;mix-blend-mode:multiply;
-webkit-mask-image:url("data:image/svg+xml;utf8,");
mask-image:url("data:image/svg+xml;utf8,");
-webkit-mask-size:cover;mask-size:cover}
.rozdzial h2{font-size:clamp(1.9rem,3.8vw,2.8rem);font-weight:700;line-height:1.1;margin:0 0 var(--s2);max-width:22ch;letter-spacing:-.01em}
.rozdzial p{max-width:42rem}
/* pełnoekranowe sceny narracyjne: akwarela ożywa w fotografię */
.scena{height:100vh;position:relative;overflow:hidden}
.scena-tlo{position:absolute;inset:-6%;will-change:transform}
.scena-tlo .aq, .scena-tlo .foto, .izba-tlo .foto{width:100%;height:100%;
object-fit:cover;object-position:50% 42%;
-webkit-mask-image:none;mask-image:none}
/* V2: łagodniejsza krzywa wywołania — foto zaczyna się pokazywać wcześniej
(od ~1/4 postępu) i domyka dopiero pod koniec, zamiast wpadać w 1/6 scrolla.
Szeroki pas przejściowy (miękka obwódka maski) zostaje szeroki do końca. */
.scena-tlo .foto{position:absolute;inset:0;opacity:.93;mix-blend-mode:normal;
filter:sepia(.32) saturate(.74) brightness(.96) contrast(.87);
-webkit-mask-image:radial-gradient(130% 105% at 58% 44%,
#000 calc(var(--wywolanie,0)*150% - 44%), transparent calc(var(--wywolanie,0)*150% + 12%));
mask-image:radial-gradient(130% 105% at 58% 44%,
#000 calc(var(--wywolanie,0)*150% - 44%), transparent calc(var(--wywolanie,0)*150% + 12%))}
.izba-tlo .foto{position:absolute;inset:0;opacity:1;
filter:sepia(.34) saturate(.6) brightness(.6) contrast(.9);
-webkit-mask-image:radial-gradient(135% 120% at 57% 43%,
#000 calc(var(--wywolanie,0)*150% - 46%), transparent calc(var(--wywolanie,0)*150% + 10%));
mask-image:radial-gradient(135% 120% at 57% 43%,
#000 calc(var(--wywolanie,0)*150% - 46%), transparent calc(var(--wywolanie,0)*150% + 10%))}
/* Pas wtapiania NIE dochodzi do pełnego papieru. Sceny są pinowane po kolei,
a między zwolnieniem pinu a wjazdem następnej sceny jest ~1 ekran przewijania,
w którym widać dół sceny N i górę sceny N+1. Przy 100% var(--bg) na obu
krawędziach dawało to pełnoekranowy płaski papier — klient widział to jako
„pustą sekcję”. Krótszy i słabszy pas: sceny wchodzą jedna w drugą.
Koszt renderu bez zmian (ten sam jeden gradient). */
.scena::after{content:"";position:absolute;inset:0;z-index:2;pointer-events:none;
background:linear-gradient(180deg,
color-mix(in srgb,var(--bg) 55%,transparent) 0%,
color-mix(in srgb,var(--bg) 22%,transparent) 8%,
transparent 20%, transparent 80%,
color-mix(in srgb,var(--bg) 22%,transparent) 92%,
color-mix(in srgb,var(--bg) 55%,transparent) 100%)}
/* .beat-splash / .splash-a / .splash-b usunięte — tło sceny rozlewa się samo */
.beat{position:absolute;left:8%;top:47%;transform:translateY(-50%);max-width:40rem;z-index:3;
background:color-mix(in srgb,var(--papier-karta) 97%,transparent);
padding:var(--s3);border-radius:4px;box-shadow:0 16px 40px rgba(46,42,35,.22);
border:1px solid color-mix(in srgb,var(--atrament) 12%,transparent)}
.beat h2,.beat p,.beat ul{color:var(--atrament)}
.beat-2{left:auto;right:8%}
.scena .pocztowka{position:relative;margin-top:var(--s2)}
#gory .beat-1{left:auto;right:8%}
#gory .beat-2{left:8%;right:auto}
.szlak{list-style:none;margin:var(--s3) 0 0;padding:0;max-width:30rem}
.szlak li{display:flex;gap:var(--s2);align-items:baseline;padding:.4rem 0;
border-top:1px dotted color-mix(in srgb,var(--ink) 30%,transparent)}
.szlak .rok{font-family:var(--mono);font-size:.7rem;color:var(--sepia);min-width:5ch}
.szlak .info{margin-left:auto;font-family:var(--mono);font-size:.62rem;color:var(--sepia);text-align:right}
/* pocztówka drag */
.pocztowka{position:relative;width:min(360px,90%);background:var(--papier-karta);
border:1px solid color-mix(in srgb,var(--ink) 16%,transparent);border-radius:3px;
box-shadow:0 12px 26px rgba(46,42,35,.24);touch-action:pan-y;will-change:transform;z-index:2;
padding:10px;display:grid;grid-template-columns:1.1fr .9fr;gap:10px}
.pocztowka .widoczek{overflow:hidden;border-radius:2px}
.pocztowka .widoczek img{width:135%;margin:-6% -18% 0 -12%;mix-blend-mode:multiply}
.pocztowka .rewers{position:relative;padding-top:4px}
.pocztowka .linie{border-bottom:1.5px solid color-mix(in srgb,var(--ink) 26%,transparent);height:1.35em}
.pocztowka .znaczek-rog{position:absolute;right:0;top:0;width:44px;opacity:.85;mix-blend-mode:multiply}
.pocztowka .stempelek{position:absolute;right:-6px;top:-4px;width:74px;opacity:.55;mix-blend-mode:multiply;transform:rotate(14deg)}
/* ─── #slowo: rozlew farby + morf MORZE → MOŻE GÓRY ─── */
/* #slowo jest teraz pełnoprawną .scena — dziedziczy height/overflow/--wywolanie/.scena::after */
.morf{display:block}
/* ROZLEW: maska-plama jest STATYCZNA (rasteryzowana raz), rośnie wyłącznie transformem.
Żadnego przeliczania feTurbulence ani gradientu w klatce scruba. */
#slowo .morf-tlo{--rs:1.62} /* domyślnie = stan końcowy: farba rozlana na cały ekran */
#slowo .rozlew{position:absolute;inset:0}
/* obraz kontr-skaluje się, żeby po rozlaniu panorama nie była 60% zoomem;
przy --rs=.18 mnożnik 1.0 (mała, cała kartka), przy --rs=1.62 mnożnik .649 → kadr ≈1.05 */
#slowo .rozlew .aq, #slowo .rozlew .foto{
transform:scale(calc(.46 + (var(--rs,1.62) - .18) * .375));transform-origin:52% 47%;
object-position:50% 50%}
/* mokra krawędź plamy — ciemniejszy rant farby, gaśnie w miarę rozlewania */
#slowo .rozlew::after{content:"";position:absolute;inset:0;z-index:1;pointer-events:none;
mix-blend-mode:multiply;opacity:calc(.8 - var(--rs,1.62)*.46);
background:radial-gradient(closest-side at 50% 50%, transparent 56%,
rgba(91,113,134,.34) 80%, rgba(107,81,56,.52) 100%)}
/* TYPOGRAFIA — zero animacji width, zero overflow:hidden, wszystko na transformach */
#slowo .morf-scenografia{position:absolute;inset:0;z-index:3;display:flex;
flex-direction:column;align-items:center;justify-content:center;
pointer-events:none;text-align:center}
#slowo .morf-podklad{position:absolute;left:50%;top:50%;width:min(128vw,1600px);height:56vh;
transform:translate(-50%,-50%);pointer-events:none;opacity:0;
background:radial-gradient(58% 58% at 50% 50%, rgba(18,14,9,.66) 0%,
rgba(18,14,9,.36) 46%, transparent 78%);
}
.morf-slowo{position:relative;z-index:2;margin:0;font-weight:700;
font-size:clamp(3.2rem,12.5vw,10.5rem);line-height:1;letter-spacing:-.01em;
display:flex;align-items:baseline;white-space:nowrap;color:var(--stempel);
text-shadow:0 1px 0 rgba(244,237,220,.55), 0 3px 12px rgba(20,16,10,.30);
will-change:transform}
.morf-wers{display:inline-flex;align-items:baseline}
/* slot ma STAŁĄ szerokość „RZ”; Ż leży na nim absolutnie — layout nigdy się nie zmienia */
.morf-slot{position:relative;display:inline-flex;align-items:baseline;overflow:visible}
.morf-gory{display:inline-flex;align-items:baseline}
.morf-slowo .l, .morf-slowo .g{display:inline-block;will-change:transform,opacity}
.morf-slot .l-z2{position:absolute;left:50%;top:0}
#slowo .g-sp{width:.3em}
/* stan statyczny (brak JS / bez-ruchu / mobile / reduced-motion) = czytelne „MOŻE GÓRY” */
#slowo .l-r, #slowo .l-z{opacity:0}
#slowo .l-z2{opacity:1;transform:translateX(-50%)}
#slowo .morf-gory .g{opacity:1}
.morf-pod{position:absolute;bottom:9vh;left:50%;transform:translateX(-50%);
font-family:var(--mono);font-size:.64rem;letter-spacing:.14em;opacity:.6;
white-space:nowrap;z-index:3;color:var(--sepia)}
.morf-sr{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);margin:0}
@media(prefers-reduced-motion:reduce){
#slowo .morf-scenografia{position:relative;padding:var(--s5) 0}
#slowo .morf-pod{position:relative;bottom:auto;left:auto;transform:none;margin-top:var(--s2)}
}
body.bez-ruchu #slowo .morf-scenografia{position:relative;padding:var(--s5) 0}
body.bez-ruchu #slowo .morf-pod{position:relative;bottom:auto;left:auto;transform:none;margin-top:var(--s2)}
/* ─── zespół ─── */
.sklad{list-style:none;margin:var(--s3) 0 0;padding:0;max-width:32rem}
.sklad li{display:flex;gap:var(--s2);align-items:baseline;padding:.45rem 0;
border-top:1px dotted color-mix(in srgb,var(--ink) 30%,transparent)}
.sklad .kto-gra{font-weight:600}
.sklad .na-czym{margin-left:auto;font-family:var(--mono);font-size:.62rem;color:var(--sepia);text-align:right}
.cytat{font-size:1.3rem;font-style:italic;max-width:26rem;margin:var(--s3) 0 0;color:var(--sepia)}
/* ─── muzyka ─── */
/* Muzyka ma własny, jasny kadr — wcześniej brała tło z podkładu, który
w tym miejscu przechodzi już w nocną izbę i sekcja robiła się mroczna. */
#muzyka, #spiewnik{position:relative;isolation:isolate}
.muzyka-glowa{display:grid;grid-template-columns:1fr auto;gap:var(--s3);align-items:center;margin-top:var(--s2)}
.muzyka-glowa h2{margin:0}
.znaczki-pas{width:100%;max-width:400px;margin:0;mix-blend-mode:multiply}
.plyty-solo{display:grid;grid-template-columns:1fr 1fr;gap:var(--s4);margin-top:var(--s3);
max-width:1500px}
.plyta{background:var(--papier-karta);border-radius:4px;padding:var(--s3);position:relative;
border:1px solid color-mix(in srgb,var(--ink) 14%,transparent);
box-shadow:0 10px 26px rgba(46,42,35,.16);transition:transform .35s cubic-bezier(.22,1,.36,1),box-shadow .35s}
.plyta:hover{transform:translateY(-6px) rotate(-.4deg);box-shadow:0 20px 40px rgba(46,42,35,.22)}
.plyta h3{font-size:1.45rem;font-weight:700;margin:0}
.plyta .rok-duzy{font-family:var(--mono);font-size:.68rem;color:var(--stempel);letter-spacing:.14em}
.plyta p{font-size:.98rem;max-width:100%}
.plyta .utwory{font-family:var(--mono);font-size:.66rem;color:var(--sepia);line-height:1.9}
.dyskografia{columns:2;column-gap:var(--s4);margin-top:var(--s3);max-width:52rem}
.dyskografia li{break-inside:avoid;display:flex;gap:var(--s2);align-items:baseline;padding:.4rem 0;
border-top:1px dotted color-mix(in srgb,var(--ink) 28%,transparent);list-style:none}
.dyskografia{padding:0}
.dyskografia .rok{font-family:var(--mono);font-size:.68rem;color:var(--sepia);min-width:4.5ch}
.dopisz{margin-top:var(--s3);font-family:var(--mono);font-size:.64rem;color:var(--stempel)}
/* dopisek jako notka ołówkiem na marginesie — dla zastrzeżeń, nie dla przypisów */
.dopisz.uwaga{display:inline-block;margin-top:var(--s2);padding:.32em .64em;
border:1px dashed color-mix(in srgb,var(--stempel) 50%,transparent);border-radius:3px}
/* ─── śpiewnik ─── */
/* Sekcja nie ma własnego kadru pejzażu: tło daje warstwa ciągła, przykryta
welonem papieru (ten sam mechanizm co w #muzyka, tylko welon jest pełny). */
.spiewnik-wstep{margin-top:var(--s2)}
.spiewnik-uklad{display:grid;grid-template-columns:1.05fr .95fr;gap:var(--s4);
align-items:start;margin-top:var(--s4);max-width:1500px}
.spiewnik-etykieta{display:flex;gap:var(--s2);align-items:baseline;
margin:0 0 var(--s1);color:var(--sepia);letter-spacing:.13em}
.spiewnik-etykieta .licznik{margin-left:auto;color:var(--stempel)}
/* spis jak w papierowym śpiewniku: pozycja po pozycji, kropki do płyty i roku
(baza: .dyskografia — te same kreski i rytm, ale jedna kolumna) */
.spiewnik-spis{columns:1;margin-top:0;max-width:none}
.spiewnik-spis li{padding:.52rem 0}
.spiewnik-spis .tytul{font-weight:600}
.spiewnik-spis .skad{flex:none;font-family:var(--mono);font-size:.62rem;
color:var(--sepia);text-align:right}
/* kartka wyrwana ze śpiewnika — .karta daje podarty papier, taśmę i cień */
.kartka-piosenka{font-size:1rem}
.kartka-piosenka .metryczka{display:flex;flex-wrap:wrap;gap:.4rem .5rem;margin:0 0 var(--s2)}
.kartka-piosenka .metryczka span{font-family:var(--mono);font-size:.62rem;letter-spacing:.1em;
color:var(--sepia);padding:.2em .55em;border-radius:3px;
border:1px solid color-mix(in srgb,var(--atrament) 28%,transparent)}
.etykieta-sekcji{display:block;margin:var(--s2) 0 .2rem;font-family:var(--mono);
font-size:.56rem;letter-spacing:.16em;color:var(--sepia);opacity:.8}
/* chwyty nad tekstem: oba wiersze w tym samym monospace, więc kolumny się trzymają.
Kolor sepia — chwyty nie mogą krzyczeć głośniej niż słowa. */
/* pre TYLKO na wierszach — między blokami zostaje zwykłe składanie białych znaków,
więc wcięcia w źródle nie robią pustych linii w kartce */
.zwrotka{margin:0;font-family:var(--mono);font-size:.78rem;line-height:1.5;overflow-x:auto}
.zwrotka .chwyty{display:block;white-space:pre;color:var(--sepia)}
.zwrotka .wers{display:block;white-space:pre;color:var(--atrament)}
/* pasek narzędzi jako papierowa zakładka wsunięta w kartkę — MAKIETA, bez JS */
.zakladka{position:relative;z-index:3;margin:var(--s3) 0 0;rotate:-.5deg;
display:flex;flex-wrap:wrap;align-items:center;gap:.4rem .55rem;
padding:.55rem .8rem .55rem 1.4rem;
background:linear-gradient(180deg,
color-mix(in srgb,var(--papier) 90%,var(--sepia)) 0%,
color-mix(in srgb,var(--papier) 80%,var(--sepia)) 100%);
box-shadow:0 5px 12px rgba(30,25,18,.18);
clip-path:polygon(0 0,100% 0,100% 100%,3.5% 100%,0 52%)}
.zakladka .grupa{display:inline-flex;align-items:center;gap:.3rem}
.zakladka .opis{font-family:var(--mono);font-size:.56rem;letter-spacing:.1em;color:var(--sepia)}
.zakladka .klawisz{display:inline-flex;align-items:center;justify-content:center;
min-width:1.55rem;height:1.55rem;padding:0 .3rem;border-radius:3px;
font-family:var(--mono);font-size:.66rem;color:var(--atrament);
border:1px solid color-mix(in srgb,var(--atrament) 30%,transparent);
background:color-mix(in srgb,var(--papier-karta) 66%,transparent)}
.zakladka .klawisz.teraz{border-color:var(--stempel);color:var(--stempel)}
.zakladka .klawisz.a-m{font-size:.55rem}
.zakladka .klawisz.a-l{font-size:.84rem}
.zakladka .rozdziel{width:1px;align-self:stretch;
background:color-mix(in srgb,var(--atrament) 20%,transparent)}
.zakladka .makieta{margin-left:auto;font-family:var(--mono);font-size:.56rem;
letter-spacing:.12em;color:var(--stempel)}
/* przerzucanie kartek śpiewnika — kartka obraca się jak prawdziwa strona */
.kartnik{perspective:1600px;position:relative}
.kartka-piosenka{transform-origin:left center;will-change:transform,opacity;backface-visibility:hidden}
#spiewnik h2,#spiewnik .spiewnik-wstep p{color:#F2EAD8}
#spiewnik .spiewnik-etykieta,#spiewnik .spiewnik-spis .tytul{color:#EDE4CE}
#spiewnik .spiewnik-spis .skad{color:color-mix(in srgb,#EDE4CE 72%,transparent)}
#muzyka h2{color:#F2EAD8}
#muzyka .dyskografia li{color:#EDE4CE;border-top-color:color-mix(in srgb,#EDE4CE 26%,transparent)}
#muzyka .dyskografia .rok,#muzyka .dopisz{color:color-mix(in srgb,#EDE4CE 74%,transparent)}
.spiewnik-spis .poz{display:flex;align-items:baseline;gap:.7rem;width:100%;
background:none;border:0;padding:.42rem .2rem;font:inherit;color:inherit;text-align:left;
cursor:pointer;transition:color .2s}
.spiewnik-spis .poz:hover .tytul,.spiewnik-spis .poz:focus-visible .tytul{color:var(--stempel)}
.spiewnik-spis .poz[aria-current="true"] .tytul{color:var(--stempel);font-weight:700}
.spiewnik-spis .poz[aria-current="true"] .kropki{border-bottom-color:color-mix(in srgb,var(--stempel) 55%,transparent)}
.przerzut{display:flex;align-items:center;justify-content:center;gap:var(--s3);margin-top:var(--s2)}
.kartkuj{font:inherit;font-size:1.5rem;line-height:1;width:2.4rem;height:2.4rem;cursor:pointer;
border:1px solid color-mix(in srgb,var(--atrament) 30%,transparent);border-radius:50%;
background:color-mix(in srgb,var(--papier-karta) 80%,transparent);color:var(--atrament);
transition:background .2s,color .2s,transform .2s}
.kartkuj:hover,.kartkuj:focus-visible{background:var(--atrament);color:var(--papier-karta);transform:translateY(-2px)}
.licznik-kartek{font-size:.68rem;letter-spacing:.14em;color:var(--sepia)}
/* Muzyka i Śpiewnik mają pełne kadry w tle sekcji — weranda i ognisko —
i tak jak sceny podróży wywołują się z akwareli w fotografię.
Tło ciemnieje ku izbie: dzień → zmierzch → noc. */
#muzyka,#spiewnik{position:relative;isolation:isolate}
#muzyka > *:not(.kadr-sekcji),#spiewnik > *:not(.kadr-sekcji){position:relative;z-index:1}
.kadr-sekcji{position:absolute;top:-12vh;bottom:-12vh;left:50%;width:100vw;transform:translateX(-50%);
z-index:0;pointer-events:none;overflow:hidden;
filter:blur(var(--wyw-blur,0px)) saturate(var(--wyw-sat,1)) contrast(var(--wyw-con,1));
opacity:var(--wyw-op,1);
-webkit-mask-image:linear-gradient(180deg,transparent 0%,rgba(0,0,0,.28) 9%,rgba(0,0,0,.72) 20%,#000 32%,#000 68%,rgba(0,0,0,.72) 80%,rgba(0,0,0,.28) 91%,transparent 100%);
mask-image:linear-gradient(180deg,transparent 0%,rgba(0,0,0,.28) 9%,rgba(0,0,0,.72) 20%,#000 32%,#000 68%,rgba(0,0,0,.72) 80%,rgba(0,0,0,.28) 91%,transparent 100%)}
.kadr-sekcji img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;
object-position:50% 52%;mix-blend-mode:normal;
opacity:calc(var(--kadr-op,.42) * (1 - var(--wywolanie,0)));
transform:scale(1.22);transform-origin:50% 52%}
/* fotografia wywołuje się nad akwarelą — ta sama mechanika co w scenach */
.kadr-sekcji .foto{mix-blend-mode:normal;opacity:calc(var(--wywolanie,0) * var(--kadr-foto,.5));
-webkit-mask-image:radial-gradient(150% 130% at 50% 48%, #000 62%, transparent 100%);
mask-image:radial-gradient(150% 130% at 50% 48%, #000 62%, transparent 100%)}
.kadr-sekcji::after{content:"";position:absolute;inset:0;
background:
linear-gradient(180deg,
color-mix(in srgb,var(--bg) 40%,transparent) 0%,
color-mix(in srgb,var(--bg) 20%,transparent) 32%,
color-mix(in srgb,var(--bg) 20%,transparent) 68%,
color-mix(in srgb,var(--bg) 40%,transparent) 100%),
linear-gradient(180deg, transparent 0%,
color-mix(in srgb,var(--sepia) var(--mrok,10%),transparent) 60%,
color-mix(in srgb,var(--atrament) var(--mrok2,16%),transparent) 100%)}
#muzyka {--kadr-op:.66;--kadr-foto:.72;--mrok:5%;--mrok2:10%}
#spiewnik{--kadr-op:.76;--kadr-foto:.82;--mrok:8%;--mrok2:16%}
/* V2: pod KAŻDĄ sekcją leży ten sam papier strony — żadnych własnych
gradientów tła. Plama akwareli zawsze siedzi na tym samym kolorze,
więc nie ma ramek ani szwów na stykach. */
#muzyka,#spiewnik{background:var(--bg)}
/* Tekst poza kartkami: cień pod literami tam, gdzie tło jest ciemne,
i podbita ramka stempla tam, gdzie jasne. */
.stempel-naglowek{background:color-mix(in srgb,var(--papier) 78%,transparent);
box-shadow:0 0 0 5px color-mix(in srgb,var(--papier) 48%,transparent)}
#muzyka h2,#spiewnik h2,.izba-naglowek h2{
text-shadow:0 2px 12px rgba(18,14,9,.6),0 1px 2px rgba(18,14,9,.45)}
#muzyka .dyskografia li,#spiewnik .spiewnik-spis .tytul,
#spiewnik .spiewnik-wstep p,#spiewnik .spiewnik-etykieta,.izba-naglowek p{
text-shadow:0 1px 8px rgba(18,14,9,.55)}
#muzyka .dyskografia .rok,#muzyka .dopisz,#spiewnik .spiewnik-spis .skad{
text-shadow:0 1px 6px rgba(18,14,9,.5)}
.hint,.morf-pod{text-shadow:0 1px 5px rgba(18,14,9,.5)}
footer{position:relative}
footer::before{content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;
background:linear-gradient(180deg,transparent 0%,
color-mix(in srgb,var(--bg) 80%,transparent) 16%,var(--bg) 44%)}
/* ─── izba: pełnoekranowa noc ─── */
.izba{position:relative;overflow:hidden}
.izba-tlo{position:absolute;inset:0;z-index:0}
.izba-tlo img{width:100%;height:100%;object-fit:cover;object-position:50% 42%;
filter:brightness(.66) saturate(.82)}
.izba-tlo::after{content:"";position:absolute;inset:0;
background:
radial-gradient(130% 100% at 50% 28%, transparent 38%, rgba(18,14,9,.6) 100%),
linear-gradient(180deg, var(--bg) 0%, transparent 26%, transparent 88%, var(--bg) 100%)}
.izba-naglowek{max-width:1220px;margin:0 auto;padding:var(--s5) var(--s3) 0;position:relative;z-index:2}
.izba-naglowek h2, .izba-naglowek p{color:#EDE4CE}
#hint-lampa{color:color-mix(in srgb,#EDE4CE 75%,transparent)}
.lampa-plomien{position:absolute;left:44%;top:32%;width:26%;height:24%;border-radius:50%;
background:radial-gradient(circle,rgba(255,196,100,.55) 0%,rgba(255,180,80,.2) 45%,transparent 70%);
opacity:.4;transition:opacity .7s;pointer-events:none;mix-blend-mode:screen;z-index:1}
.karty{max-width:1280px;margin:0 auto;padding:var(--s4) var(--s3) var(--s5);display:grid;
grid-template-columns:repeat(2,1fr);gap:clamp(2rem,3.4vw,3.4rem);position:relative;z-index:2}
.karta{background:color-mix(in srgb,var(--papier-karta) 97%,transparent);color:var(--atrament);border-radius:4px;font-size:1.06rem;
padding:clamp(1.9rem,2.7vw,2.9rem);
border:1px solid color-mix(in srgb,var(--atrament) 14%,transparent);
box-shadow:0 12px 30px rgba(20,16,10,.35);position:relative;scroll-margin-top:5rem;overflow:hidden}
.karta h3{font-size:clamp(1.45rem,2vw,1.72rem);font-weight:700;line-height:1.1;margin:0 0 .3em}
.karta .mono{color:var(--sepia);display:block;margin:.2em 0 var(--s2);letter-spacing:.13em}
.karta p{max-width:38rem}
.karta ul{list-style:none;margin:var(--s3) 0 0;padding:0}
.karta li{display:flex;gap:var(--s2);align-items:baseline;padding:.72rem 0;
border-top:1px dotted color-mix(in srgb,var(--atrament) 26%,transparent)}
.karta li .rok{font-family:var(--mono);font-size:.7rem;color:var(--sepia);min-width:4.5ch}
.karta li .gdzie{margin-left:auto;font-family:var(--mono);font-size:.64rem;color:var(--sepia);text-align:right}
.karta .stempel-tlo{position:absolute;right:-30px;bottom:-26px;width:180px;opacity:.16;
mix-blend-mode:multiply;transform:rotate(-12deg);pointer-events:none}
.koperty{display:flex;flex-direction:column;gap:var(--s2);margin-top:var(--s2)}
.koperta{border:0;background:none;font:inherit;text-align:left;padding:0;color:inherit;position:relative}
.koperta .zew{display:block;background:#F0E6CB;border:1px solid color-mix(in srgb,var(--atrament) 20%,transparent);
border-radius:3px;padding:var(--s2);position:relative;overflow:hidden;transition:box-shadow .3s}
.koperta:hover .zew,.koperta:focus-visible .zew{box-shadow:0 8px 20px rgba(46,42,35,.22)}
.koperta .mini-koperta{position:absolute;right:8px;top:6px;width:64px;opacity:.9;mix-blend-mode:multiply;
transition:transform .4s cubic-bezier(.22,1,.36,1)}
.koperta:hover .mini-koperta{transform:rotate(-6deg) scale(1.06)}
.koperta .naglowek{display:flex;align-items:baseline;gap:var(--s2);padding-right:70px}
.koperta .tytul{font-weight:700;font-size:1.05rem}
.koperta .data{font-family:var(--mono);font-size:.62rem;color:var(--sepia);margin-left:auto}
.koperta .tresc{display:block;max-height:0;overflow:hidden;transition:max-height .5s cubic-bezier(.22,1,.36,1);font-size:.96rem}
.koperta.otwarta .tresc{max-height:240px}
.koperta .tresc p{margin:var(--s2) 0 0;max-width:36rem}
.kontakt-uklad{display:grid;grid-template-columns:1fr auto;gap:var(--s2);align-items:end}
.kontakt-uklad img{width:120px;mix-blend-mode:multiply;opacity:.9}
.kontakt-akcja{display:inline-block;margin-top:var(--s2);font-weight:700;font-size:1.05rem;
border:1.5px solid var(--atrament);border-radius:26px;padding:.55rem 1.35rem;text-decoration:none;
transition:background .25s,color .25s}
.kontakt-akcja:hover,.kontakt-akcja:focus-visible{background:var(--atrament);color:var(--papier-karta)}
/* powrót do nav: morze i góry w jednym kadrze */
.final-nav{min-height:100vh;position:relative;overflow:hidden;
display:flex;align-items:center;justify-content:center;padding:var(--s4) var(--s3)}
.final-tlo{position:absolute;inset:0}
.final-tlo .aq{width:100%;height:100%;object-fit:cover;object-position:50% 55%;
-webkit-mask-image:none;mask-image:none}
.final-tlo::after{content:"";position:absolute;inset:0;
background:linear-gradient(180deg, var(--bg) 0%, transparent 16%, transparent 86%, var(--bg) 100%)}
.final-karta{position:relative;z-index:2;width:min(43rem,94vw);
background:color-mix(in srgb,var(--papier-karta) 97%,transparent);
padding:var(--s3);border-radius:4px;rotate:-.5deg;
border:1px solid color-mix(in srgb,var(--atrament) 14%,transparent);
box-shadow:0 22px 50px rgba(28,24,18,.3)}
.final-karta h2{font-size:2rem;margin:0 0 var(--s1);color:var(--atrament)}
.do-gory{display:inline-block;margin-top:var(--s2);color:var(--sepia);text-decoration:none}
.do-gory:hover,.do-gory:focus-visible{color:var(--stempel)}
/* ─── KARTY JAKO PRZEDMIOTY: podarty papier zamiast nalepki ─── */
.beat,.hero-nav,.karta,.final-karta{
background:none;border:0;border-radius:0;box-shadow:none;
filter:drop-shadow(0 1px 2px rgba(30,25,18,.32)) drop-shadow(0 16px 26px rgba(30,25,18,.22))}
/* beaty jadą w scrubie — jeden lżejszy cień (koszt rasteryzacji filtra) */
.beat{filter:drop-shadow(0 10px 20px rgba(30,25,18,.28))}
.beat::before,.hero-nav::before,.karta::before,.final-karta::before{
content:"";position:absolute;inset:0;z-index:-1;
background:
url("data:image/svg+xml;utf8,"),
radial-gradient(150% 120% at 50% 28%, transparent 52%, rgba(107,81,56,.12) 100%),
var(--papier-karta);
background-blend-mode:multiply,multiply,normal;
-webkit-mask-image:url("data:image/svg+xml;utf8,");
mask-image:url("data:image/svg+xml;utf8,");
-webkit-mask-size:100% 100%;mask-size:100% 100%}
/* ─── taśma na rogach + wariacje per karta ─── */
.beat::after,.hero-nav::after,.karta::after,.final-karta::after{
content:"";position:absolute;z-index:4;top:-11px;left:calc(50% - 46px);width:92px;height:25px;
transform:rotate(-2.5deg);pointer-events:none;mix-blend-mode:multiply;
background:linear-gradient(100deg, rgba(211,192,146,0) 0%, rgba(211,192,146,.5) 6%, rgba(224,208,166,.42) 50%, rgba(211,192,146,.55) 94%, rgba(211,192,146,0) 100%);
clip-path:polygon(0 26%,5% 0,95% 4%,100% 18%,98% 58%,100% 88%,94% 100%,4% 96%,2% 70%);
filter:drop-shadow(0 1px 2px rgba(30,25,18,.2))}
.hero-nav::after{left:14%;transform:rotate(-3deg)}
.beat-2::after{left:12%;transform:rotate(3deg)}
.karta:nth-of-type(2)::after{left:auto;right:9%;transform:rotate(2.6deg)}
.karta:nth-of-type(3)::after{left:14%;transform:rotate(-3.4deg)}
.final-karta::after{left:58%;transform:rotate(2deg)}
/* każda kartka leży odrobinę inaczej */
.beat-1{rotate:-1.1deg}
.beat-2{rotate:.8deg}
.karta:nth-of-type(1){rotate:-.5deg}
.karta:nth-of-type(2){rotate:.6deg}
.karta:nth-of-type(3){rotate:.45deg}
.karta:nth-of-type(4){rotate:-.65deg}
/* rozdarcia nie mogą się powtarzać 1:1 — lustrzane odbicia maski */
.beat-2::before,.karta:nth-of-type(2)::before,.final-karta::before{transform:scale(-1,1)}
.karta:nth-of-type(3)::before{transform:scale(1,-1)}
/* taśma wystaje nad kartę — nie ciąć; stempel wchodzi DO kadru karty */
.karta{overflow:visible}
.karta .stempel-tlo{right:12px;bottom:8px;width:150px;transform:rotate(-9deg)}
/* ══════ FINAŁ — panorama rozwija się od środka i przechodzi w realizm ══════ */
.final-nav{--wywolanie:0}
.final-tlo .foto{position:absolute;inset:0;width:100%;height:100%;
object-fit:cover;object-position:50% 55%;opacity:.95;
filter:sepia(.3) saturate(.72) brightness(.99) contrast(.88);
-webkit-mask-image:linear-gradient(90deg,
transparent calc(50% - var(--wywolanie,0)*66%),
#000 calc(50% - var(--wywolanie,0)*54%),
#000 calc(50% + var(--wywolanie,0)*54%),
transparent calc(50% + var(--wywolanie,0)*66%));
mask-image:linear-gradient(90deg,
transparent calc(50% - var(--wywolanie,0)*66%),
#000 calc(50% - var(--wywolanie,0)*54%),
#000 calc(50% + var(--wywolanie,0)*54%),
transparent calc(50% + var(--wywolanie,0)*66%))}
.final-glazura{position:absolute;inset:0;pointer-events:none;mix-blend-mode:multiply;
opacity:calc(var(--wywolanie,0)*.8);
background:
radial-gradient(118% 88% at 50% 46%, transparent 46%, rgba(46,42,35,.38) 100%),
linear-gradient(165deg, rgba(91,113,134,.14) 0%, rgba(237,228,206,.08) 46%, rgba(196,118,47,.12) 76%, rgba(107,81,56,.18) 100%),
url("data:image/svg+xml;utf8,")}
/* przejście finału w papier: długi rozpływ zamiast cięcia na 16%/86% */
.final-tlo::after{content:"";position:absolute;inset:0;
background:linear-gradient(180deg,
var(--bg) 0%,
color-mix(in srgb,var(--bg) 66%,transparent) 8%,
color-mix(in srgb,var(--bg) 24%,transparent) 18%,
transparent 30%, transparent 74%,
color-mix(in srgb,var(--bg) 24%,transparent) 86%,
color-mix(in srgb,var(--bg) 66%,transparent) 94%,
var(--bg) 100%)}
/* karta finałowa: domknięcie po lewej, powrót do rozdziałów po prawej */
.final-karta{width:min(80rem,96vw);padding:clamp(2.8rem,4vw,4.2rem);
display:grid;grid-template-columns:1.1fr .9fr;gap:clamp(2rem,4vw,4rem);align-items:start}
.final-karta h2{font-size:clamp(1.95rem,3.4vw,2.7rem);line-height:1.05;
margin:0 0 var(--s2);letter-spacing:-.01em}
.final-lead{margin:0;max-width:32rem;font-size:1.08rem;color:var(--atrament)}
.final-karta .kontakt-akcja{margin-top:var(--s3)}
.final-dopisek{margin:var(--s2) 0 0;color:var(--sepia)}
.final-dopisek a{text-decoration:none;
border-bottom:1px dotted color-mix(in srgb,var(--sepia) 55%,transparent)}
.final-dopisek a:hover,.final-dopisek a:focus-visible{color:var(--stempel);border-bottom-color:var(--stempel)}
.final-prawa{align-self:stretch;padding-left:clamp(1.5rem,2.6vw,2.6rem);
border-left:1px dotted color-mix(in srgb,var(--atrament) 30%,transparent)}
.final-etykieta{margin:0;color:var(--sepia);letter-spacing:.13em}
.spis-final{margin:var(--s3) 0 0;max-width:none}
.spis-final a{font-size:1.12rem;line-height:1.25;padding:.55rem .1rem;color:var(--atrament)}
.spis-final .nr{font-size:.68rem}
.spis-final .co{font-size:.64rem}
.final-prawa .do-gory{margin-top:var(--s3);font-size:.66rem;letter-spacing:.1em}
.final-piecz{position:absolute;right:-14px;bottom:-20px;width:132px;z-index:3;
opacity:.19;mix-blend-mode:multiply;transform:rotate(-12deg);pointer-events:none}
/* ══════ IZBA — kadr trzyma się ekranu, żeby wywołanie było widoczne ══════
Bug bazy: .izba-tlo{inset:0} na ~2-ekranowej sekcji → środek maski wywołania
(57%/43% CAŁEJ sekcji) wypadał poza ekranem. Sticky kadr to naprawia;
wymaga .izba{overflow:visible}, bo overflow:hidden na przodku zabija sticky. */
.izba{overflow:visible}
/* pas wtapiania nad kadrem — działa niezależnie od tego, czy klatka
jest już przyklejona; bez niego wejście w noc było ciętą krawędzią */
.izba::before{content:"";position:absolute;left:0;right:0;top:-2px;height:230px;z-index:4;
pointer-events:none;
background:linear-gradient(180deg, var(--bg) 0%,
color-mix(in srgb,var(--bg) 72%,transparent) 34%,
color-mix(in srgb,var(--bg) 28%,transparent) 66%,
transparent 100%)}
.izba-klatka{position:sticky;top:0;height:100vh;overflow:hidden}
.izba-tlo img, .izba-tlo .foto{position:absolute;inset:0;width:100%;height:100%;
object-fit:cover;object-position:50% 44%}
.izba-klatka::after{content:"";position:absolute;inset:0;pointer-events:none;
background:radial-gradient(128% 96% at 50% 34%, transparent 34%, rgba(18,14,9,.62) 100%)}
.izba-glazura{position:absolute;inset:0;pointer-events:none;mix-blend-mode:multiply;
opacity:calc(var(--wywolanie,0)*.72);
background:
linear-gradient(168deg, rgba(46,42,35,.30) 0%, rgba(107,81,56,.18) 52%, rgba(24,18,12,.38) 100%),
url("data:image/svg+xml;utf8,")}
/* rozpływ w papier liczony w px — sekcja ma ~2 ekrany, procenty rozjeżdżały pas */
.izba-tlo::after{pointer-events:none;
background:linear-gradient(180deg,
var(--bg) 0,
color-mix(in srgb,var(--bg) 66%,transparent) 70px,
color-mix(in srgb,var(--bg) 24%,transparent) 150px,
transparent 240px,
transparent calc(100% - 320px),
color-mix(in srgb,var(--bg) 24%,transparent) calc(100% - 190px),
color-mix(in srgb,var(--bg) 66%,transparent) calc(100% - 90px),
var(--bg) 100%)}
/* ══════ STOPKA ══════ */
footer{padding:0;color:var(--sepia);position:relative;text-align:left}
.stopka-wnetrze{max-width:1220px;margin:0 auto;position:relative;
padding:var(--s4) var(--s3) var(--s3)}
.stopka-wnetrze::before{content:"";position:absolute;left:var(--s3);right:var(--s3);top:0;height:2px;
background:repeating-linear-gradient(90deg,
color-mix(in srgb,var(--ink) 34%,transparent) 0 4px, transparent 4px 10px)}
.stopka-podpis .autor{color:var(--stempel);text-decoration:none;
border-bottom:1px solid color-mix(in srgb,var(--stempel) 45%,transparent);
transition:border-color .25s,color .25s}
.stopka-podpis .autor:hover,.stopka-podpis .autor:focus-visible{
color:var(--atrament);border-bottom-color:var(--atrament)}
.stopka-zielnik{display:block;width:min(230px,64%);margin:var(--s3) 0 0;
opacity:.55;mix-blend-mode:multiply;transform:rotate(-4deg);pointer-events:none;
-webkit-mask-image:radial-gradient(88% 88% at 50% 50%, #000 50%, transparent 96%);
mask-image:radial-gradient(88% 88% at 50% 50%, #000 50%, transparent 96%)}
.stopka-kolumny{position:relative;z-index:1;display:grid;
grid-template-columns:1.5fr 1fr 1fr 1fr;gap:var(--s3);align-items:start}
.stopka-nazwa{margin:0;font-size:1.28rem;font-weight:700;line-height:1.18;color:var(--ink)}
.stopka-nazwa span{display:block;font-weight:300;font-style:italic;
font-size:.78em;color:var(--sepia)}
.stopka-opis{margin:var(--s1) 0 0;max-width:24rem;font-size:.95rem}
.stopka-miejsce{margin:var(--s2) 0 0;opacity:.8}
.stopka-tytul{margin:0 0 var(--s1);font-size:.66rem;font-weight:500;letter-spacing:.16em;
text-transform:uppercase;color:var(--stempel)}
.stopka-lista{list-style:none;margin:0;padding:0}
.stopka-lista li{display:flex;gap:.7rem;align-items:baseline;padding:.36rem 0;
border-top:1px dotted color-mix(in srgb,var(--ink) 26%,transparent);font-size:.95rem}
.stopka-lista .et{flex:none;min-width:6ch;font-family:var(--mono);font-size:.6rem;
color:var(--sepia);opacity:.75}
.stopka-lista a{text-decoration:none;color:var(--ink);
border-bottom:1px solid transparent;transition:color .2s,border-color .2s}
.stopka-lista a:hover,.stopka-lista a:focus-visible{color:var(--stempel);
border-bottom-color:color-mix(in srgb,var(--stempel) 55%,transparent)}
.stopka-lista .czeka{color:var(--sepia);opacity:.75;font-style:italic}
.stopka-stopa{position:relative;z-index:1;margin-top:var(--s4);padding-top:var(--s2);
border-top:1px dotted color-mix(in srgb,var(--ink) 26%,transparent);
display:flex;flex-wrap:wrap;gap:.35rem var(--s3);align-items:baseline}
.stopka-stopa p{margin:0;font-size:.62rem;opacity:.85}
.stopka-stopa .stopka-podpis{margin-left:auto;opacity:1}
.stopka-podpis .do-dopiecia{color:var(--stempel)}
.stopka-stempel{position:absolute;right:0;top:-56px;width:92px;z-index:0;
opacity:.24;mix-blend-mode:multiply;transform:rotate(-11deg);pointer-events:none}
/* ══════ warianty: mobile / brak ruchu / reduced-motion ══════ */
body.bez-ruchu .final-tlo .foto, body.bez-ruchu .final-glazura,
body.bez-ruchu .izba-glazura{display:none}
@media(prefers-reduced-motion:reduce){
.final-tlo .foto, .final-glazura, .izba-glazura{display:none}
}
@media(prefers-reduced-motion:reduce){
.morf{height:auto;padding:var(--s5) var(--s3)}
.hint{display:none}
}
/* wjazdy treści sterowane IO — ukryte TYLKO gdy ruch aktywny */
body.ma-ruch .wjazd{opacity:0;transform:translateY(26px);
transition:opacity .8s cubic-bezier(.22,1,.36,1),transform .8s cubic-bezier(.22,1,.36,1)}
body.ma-ruch .wjazd.widoczny{opacity:1;transform:none}
body.ma-ruch .stempel-naglowek{opacity:0;transform:rotate(4deg) scale(1.45);
transition:opacity .45s,transform .5s cubic-bezier(.34,1.56,.64,1)}
body.ma-ruch .stempel-naglowek.widoczny{opacity:1;transform:rotate(-2.4deg) scale(1)}
/* rekwizyty mają już wycięte tło (WebP z alfą) — multiply tylko by je przybrudził,
a wewnątrz warstw z transformem (parallax) blend i tak nie sięga sceny */
.znaczki-pas,.stopka-zielnik,.mini-koperta,.stempel-tlo,
.stempelek,.kontakt-uklad img,.stopka-stempel{mix-blend-mode:normal}
/* tryb pomiarowy: transform na body psuje position:sticky, więc na czas
zrzutu kadr izby przestaje być przyklejony (warstwy i gradienty bez zmian) */
body.pomiar .izba-klatka{position:static}
/* uczciwy statyczny fallback (reduced-motion / brak GSAP) */
body.bez-ruchu .scena{height:auto;overflow:visible;padding:var(--s4) var(--s3)}
body.bez-ruchu .scena-tlo{inset:0}
body.bez-ruchu .scena-tlo .aq{opacity:.45}
/* „wywoływanie zdjęcia": postęp 0→1 sterowany z GSAP przez CSS var */
.scena, .izba{--wywolanie:0}
/* glazura w palecie (dżins→papier→rdza→sepia) + winieta + ziarno — tylko na fazie foto */
.scena-tlo::after{content:"";position:absolute;inset:0;z-index:1;pointer-events:none;
mix-blend-mode:multiply;opacity:calc(var(--wywolanie,0)*.85);
background:
radial-gradient(118% 88% at 50% 42%, transparent 44%, rgba(46,42,35,.40) 100%),
linear-gradient(165deg, rgba(91,113,134,.16) 0%, rgba(237,228,206,.08) 46%, rgba(196,118,47,.12) 76%, rgba(107,81,56,.20) 100%),
url("data:image/svg+xml;utf8,")}
body.bez-ruchu .scena-tlo .foto, body.bez-ruchu .izba-tlo .foto,
body.bez-ruchu .scena-tlo::after{display:none}
@media(prefers-reduced-motion:reduce){
.scena-tlo .foto, .izba-tlo .foto, .scena-tlo::after{display:none}
}
body.bez-ruchu .beat, body.bez-ruchu .beat-2,
body.bez-ruchu #gory .beat-1, body.bez-ruchu #gory .beat-2{
position:relative;left:0;right:0;top:0;transform:none;margin:0 0 var(--s3);max-width:none}
@media(prefers-reduced-motion:reduce){
.scena{height:auto;overflow:visible;padding:var(--s4) var(--s3)}
.scena-tlo{inset:0}
.scena-tlo .aq{opacity:.45}
.beat, .beat-2, #gory .beat-1, #gory .beat-2{
position:relative;left:0;right:0;top:0;transform:none;margin:0 0 var(--s3);max-width:none}
}
/* ══════════════════════════════════════════════════════════════════════
TŁO CIĄGŁE — jedno tło strony zamiast tła per sekcja
─────────────────────────────────────────────────────────────────────
Diagnoza: każda sekcja miała własny kadr wygaszany gradientem DO KOLORU
PAPIERU (.scena::after, .final-tlo::after, .izba::before, .izba-tlo::after).
Efekt: art · papier · art · papier — czyli dokładnie te „bardzo wyraźne
przejścia". Gradienty do papieru były też widoczne jako stałe jasne pasy
u góry i u dołu ekranu przez CAŁY czas trwania pinowanej sceny.
Lek: jeden fixed podkład (papier + wash), po którym pejzaże przenikają się
globalnym postępem scrolla. Sekcje tracą nieprzezroczysty papier i gasną
ALFĄ (maska / opacity), więc po obu stronach każdego styku widać
DOKŁADNIE ten sam podkład — szew przestaje istnieć.
Koszt klatki: 2 setProperty (--w) i opacity na 2 warstwach. Zero filtrów,
zero backdrop-filter, zero masek przeliczanych per-frame.
══════════════════════════════════════════════════════════════════════ */
.tlo-ciagle{display:none;position:fixed;inset:0;z-index:0;pointer-events:none;
background:var(--bg);isolation:isolate;contain:paint}
.tw{position:absolute;inset:0;background-repeat:no-repeat;
background-size:cover;background-position:50% 46%;
mix-blend-mode:multiply;opacity:calc(var(--w,0) * var(--moc,.62));
will-change:opacity}
.tw-baltyk{background-image:url("assets/aq-baltyk.webp")}
.tw-slowo{background-image:url("assets/aq-morzegory.webp")}
.tw-gory{background-image:url("assets/aq-bieszczady.webp")}
/* MUZYKA dostaje tło w tej samej konwencji: akwarela + jej wersja foto,
które wywołuje się przy przewijaniu sekcji (jak w scenach narracyjnych) */
.tw-muzyka{background-image:url("assets/aq-morzegory.webp");--moc:.58}
.tw-muzyka-foto{background-image:url("assets/foto-morzegory.webp");--moc:.46;
mix-blend-mode:normal;background-position:50% 50%}
.tw-izba{background-image:url("assets/aq-izba.webp");--moc:.85;background-position:50% 44%}
.tw-spis{background-image:url("assets/aq-morzegory.webp");--moc:.6;background-position:50% 55%}
.tw-papier{background-image:none} /* stopka wraca na czysty papier */
/* welon: nadaje podkładowi charakter papieru i trzyma kontrast pod tekstem */
.tlo-welon{position:absolute;inset:0;
background:
linear-gradient(180deg, color-mix(in srgb,var(--bg) 44%,transparent) 0%,
color-mix(in srgb,var(--bg) 16%,transparent) 24%,
color-mix(in srgb,var(--bg) 16%,transparent) 76%,
color-mix(in srgb,var(--bg) 44%,transparent) 100%),
radial-gradient(122% 92% at 50% 42%, transparent 54%,
color-mix(in srgb,var(--sepia) 20%,transparent) 100%)}
/* ── sekcje przestają być nieprzezroczystym papierem ── */
.scena,.izba,.final-nav{background:transparent}
/* ── wygaszacze do papieru: WYŁĄCZONE (to one robiły cięcia) ──
Ich rolę przejmuje alfa + tło ciągłe. Ubywa 5 pełnoekranowych warstw
gradientowych — to także zysk na wydajności. */
.scena::after{display:none}
.final-tlo::after{display:none}
.izba::before{display:none}
.izba-tlo::after{display:none}
/* .aureola była protezą tego samego problemu („hue sceny sięga poza plamę") —
podkład robi to lepiej i taniej; jedna warstwa multiply mniej */
.aureola{display:none}
/* ── blob farby: własny papier w środku, żeby akwarela miała w co wsiąkać
teraz, gdy sekcja jest przezroczysta. Poza blobem widać podkład. ── */
.rozlew-w{background:var(--bg)}
#slowo .rozlew{background:var(--bg)}
/* rant zbiera pigment NA mokrej plamie, nie maluje po niej brązem */
.rozlew-rant{mix-blend-mode:multiply}
/* ── wygaszanie ALFĄ zamiast pasem papieru ──
Izba i finał nie są pinowane, więc mogą gasnąć w przestrzeni dokumentu.
Maski są STATYCZNE (rasteryzowane raz) — w klatce scruba nic się nie liczy.
Zweryfikowane: maska na .izba-tlo nie psuje position:sticky dziecka. */
.izba-tlo{
-webkit-mask-image:linear-gradient(180deg,transparent 0,#000 190px,
#000 calc(100% - 250px),transparent 100%);
mask-image:linear-gradient(180deg,transparent 0,#000 190px,
#000 calc(100% - 250px),transparent 100%)}
.final-tlo{
-webkit-mask-image:linear-gradient(180deg,transparent 0,#000 17%,#000 83%,transparent 100%);
mask-image:linear-gradient(180deg,transparent 0,#000 17%,#000 83%,transparent 100%)}
/* hero: krótki (7vh) rozpływ dolnej krawędzi w podkład — pod spodem leży ten
sam Bałtyk, więc styk hero→#morze przestaje być linią */
.hero{
-webkit-mask-image:linear-gradient(180deg,#000 0,#000 93%,transparent 100%);
mask-image:linear-gradient(180deg,#000 0,#000 93%,transparent 100%)}
/* ── wyjście pinowanej sceny ──
Pinowana sekcja ma box == viewport, więc NIE da się jej wygasić maską
w przestrzeni dokumentu. Zamiast tego kadr rozpuszcza się opacity-em
w tło ciągłe (var --art ze scruba). Na styku dwóch pinowanych scen obie
strony pokazują wtedy ten sam, nieruchomy podkład → zero szwu. */
.scena .rozlew{opacity:var(--art,1)}
#slowo .morf-scenografia,#slowo .morf-pod{opacity:var(--art,1)}
/* ŚPIEWNIK: ten sam chwyt, ale welon jest pełny — kartka leży na czystym papierze,
a nie na pejzażu. Krawędzie zostają miękkie, więc styki z muzyką i izbą
dalej gasną w ten sam podkład (zero dodatkowych warstw i pobrań). */
@media(prefers-reduced-motion:reduce){
.tw{will-change:auto}
.tw-muzyka-foto{display:none}
}
/* ══════════════════════════════════════════════════════════════════════
TRZY OSTATNIE STYKI (desktop) — góry→muzyka, muzyka→śpiewnik, śpiewnik→izba
─────────────────────────────────────────────────────────────────────
Diagnoza (screeny Pawła, 2026-08-05):
a) fotografia w .kadr-sekcji miała STATYCZNĄ owalną maskę — obcinała się
wewnątrz kadru do płaskiej ciemności. Sceny podróży nie mają tego
problemu, bo ich maska ROŚNIE z --wywolanie i przy 1 wychodzi poza
kadr. Kadry sekcji dostają dokładnie tę samą maskę.
b) styki liczone w % wysokości sekcji = nieprzewidywalne rampy; teraz vh.
c) kadry sąsiadów zachodzą na siebie głęboko (30–58vh) i KRZYŻUJĄ się:
foto poprzedniej gaśnie dokładnie tam, gdzie akwarela następnej
nabiera krycia — jak wywoływanie, tylko rozpisane wzdłuż scrolla.
d) izba: rampa 190px odsłaniała szary papier akwareli jednym cięciem —
teraz izba wsiąka w ognisko przez ~52vh.
Wyłącznie ≥841px — mobile ma własną, zamkniętą kompozycję tych sekcji. */
@media(min-width:841px){
.kadr-sekcji{
-webkit-mask-image:linear-gradient(180deg,transparent 0,rgba(0,0,0,.34) 16vh,
rgba(0,0,0,.78) 32vh,#000 48vh,#000 calc(100% - 48vh),
rgba(0,0,0,.78) calc(100% - 32vh),rgba(0,0,0,.34) calc(100% - 16vh),transparent 100%);
mask-image:linear-gradient(180deg,transparent 0,rgba(0,0,0,.34) 16vh,
rgba(0,0,0,.78) 32vh,#000 48vh,#000 calc(100% - 48vh),
rgba(0,0,0,.78) calc(100% - 32vh),rgba(0,0,0,.34) calc(100% - 16vh),transparent 100%)}
/* weranda wyrasta spod końcówki pinu gór; ognisko sięga w głąb izby */
#muzyka .kadr-sekcji{top:-58vh;bottom:-30vh}
#spiewnik .kadr-sekcji{top:-30vh;bottom:-56vh}
/* foto wywołuje się od środka i przy pełnym wywołaniu POKRYWA cały kadr —
identyczna mechanika jak .scena-tlo .foto */
.kadr-sekcji .foto{
-webkit-mask-image:radial-gradient(150% 130% at 50% 48%,
#000 calc(var(--wywolanie,0)*190% - 76%), transparent calc(var(--wywolanie,0)*190% - 10%));
mask-image:radial-gradient(150% 130% at 50% 48%,
#000 calc(var(--wywolanie,0)*190% - 76%), transparent calc(var(--wywolanie,0)*190% - 10%))}
/* Weranda: szerszy wycinek pary (cała scena z gitarą, ławką i lasem —
nie sam stół z kubkiem) + mniejsza skala. Kadr przestaje być makro,
które odcinało muzykę od pejzaży po obu stronach. */
#muzyka .kadr-sekcji img{transform:scale(1.05)}
/* Ściemnianie NIE jest już ścianą na granicy sekcji:
— podkład muzyki schodzi 44vh W GŁĄB śpiewnika (trzyma ciemność pod
gasnącą werandą, bo #muzyka::before kończył się dokładnie na styku),
— podkład śpiewnika zaczyna od ZERA i ciemnieje przez 42vh (wcześniej
wchodził od razu pełnym atramentem i zasłaniał kadr werandy — to była
twarda linia ze screena), a na dole schodzi 52vh w głąb izby, żeby
ognisko nie wisiało nad jasnym papierem, gdy izba jeszcze się wywołuje. */
#muzyka::before{bottom:-44vh}
#spiewnik::after{bottom:-52vh;background:linear-gradient(180deg,
transparent 0,
color-mix(in srgb,var(--atrament) 26%,transparent) 42vh,
color-mix(in srgb,var(--atrament) 46%,var(--bg)) 30%,
color-mix(in srgb,var(--atrament) 56%,var(--bg)) 72%,
color-mix(in srgb,var(--atrament) 68%,var(--bg)) calc(100% - 52vh),
color-mix(in srgb,var(--atrament) 68%,var(--bg)) 100%)}
/* izba wsiąka w ognisko: długa rampa zamiast 190px cięcia */
.izba-tlo{
-webkit-mask-image:linear-gradient(180deg,transparent 0,rgba(0,0,0,.45) 26vh,
#000 52vh,#000 calc(100% - 250px),transparent 100%);
mask-image:linear-gradient(180deg,transparent 0,rgba(0,0,0,.45) 26vh,
#000 52vh,#000 calc(100% - 250px),transparent 100%)}
}
/* ══════ V2: MUZYKA I ŚPIEWNIK NA MECHANICE IZBY ══════
Kadr sekcji = sticky klatka (jak .izba-klatka): CAŁA nocna akwarela
z naturalnymi granicami plamy leży na tle strony (papier wycięty
z assetu — alfa), a fotografia wywołuje się na wierzchu na pełny
ekran radialną maską. Stare maski/filtry kadru neutralizowane. */
.kadr-sekcji{left:calc(50% - 50vw);width:100vw;transform:none;overflow:visible;
filter:none;opacity:1;
/* pionowa rampa jak na .izba-tlo — bez niej foto kończy się cięciem;
maska na przodku sticky nie psuje sticky (zweryfikowane przy izbie).
Rampa domyka się PRZED granicą sekcji: rozwinięte foto jednej sekcji
nie podchodzi pod akwarelę następnej. */
-webkit-mask-image:linear-gradient(180deg,transparent 0,#000 14vh,
#000 calc(100% - 26vh),transparent calc(100% - 4vh));
mask-image:linear-gradient(180deg,transparent 0,#000 14vh,
#000 calc(100% - 26vh),transparent calc(100% - 4vh))}
.kadr-klatka{position:sticky;top:0;height:100vh;overflow:hidden}
.kadr-sekcji .kadr-klatka img{position:absolute;inset:0;width:100%;height:100%;transform:none}
.kadr-sekcji .kadr-klatka .aq{object-fit:contain;object-position:50% 46%;opacity:1;transform:scale(.86);
-webkit-mask-image:none;mask-image:none}
.kadr-sekcji .kadr-klatka .foto{object-fit:cover;object-position:50% 52%;
/* wywołanie bez szarpnięcia: foto nabiera krycia stopniowo (opacity ramp),
a maska ma bardzo szeroką, miękką obwódkę — realizm wsiąka, nie wskakuje */
opacity:min(1, calc(var(--wywolanie,0)*1.35));
mix-blend-mode:normal;filter:sepia(.3) saturate(.72) brightness(.82) contrast(.9);
-webkit-mask-image:radial-gradient(135% 120% at 55% 46%,
#000 calc(var(--wywolanie,0)*135% - 58%), transparent calc(var(--wywolanie,0)*135% + 34%));
mask-image:radial-gradient(135% 120% at 55% 46%,
#000 calc(var(--wywolanie,0)*135% - 58%), transparent calc(var(--wywolanie,0)*135% + 34%))}
/* kadr trzyma się granic własnej sekcji — koniec z zachodzeniem na sąsiadów */
#muzyka .kadr-sekcji{top:0;bottom:0}
#spiewnik .kadr-sekcji{top:0;bottom:0}
/* stary „mrok" (gradient przyciemnienia pod tekst) kładł się prostokątem
na CAŁYM kadrze — także na papierze wokół plamy — i obrysowywał sekcję.
Czytelność tekstu robią text-shadowy i sama plama, nie welon. */
.kadr-sekcji::after{display:none}
/* WINIETA — brakujący element wzorca izby. To ona, a nie żadne wycinanie,
sprawia, że w izbie nie widać jasnych brzegów arkusza: promieniste
przyciemnienie gasi rogi i krawędzie kadru. Ta sama krzywa co
.izba-klatka::after, tylko moc dobrana do pory dnia sceny. */
.kadr-klatka::after, #morze .rozlew::after, #gory .rozlew::after{
content:"";position:absolute;inset:0;pointer-events:none;z-index:2;
opacity:var(--wywolanie,0)}
.kadr-klatka::after{
background:radial-gradient(128% 96% at 50% 38%, transparent 30%, rgba(18,14,9,.62) 100%)}
/* sceny dzienne: ta sama winieta w tonie sepii i słabsza — zamyka kompozycję
i zjada papierowe brzegi, nie robiąc z pejzażu nocy */
#morze .rozlew::after, #gory .rozlew::after{
background:radial-gradient(126% 98% at 50% 44%, transparent 34%,
color-mix(in srgb,var(--sepia) 46%,transparent) 100%)}
/* fotografia wchodzi na pełny ekran — bez maski kształtu, jak w izbie */
#morze .scena-tlo .foto, #gory .scena-tlo .foto{object-fit:cover;object-position:50% 44%}
/* ══════════════════════════════════════════════════════════════════════
WERSJA MOBILNA ≤840px — tło niesie CAŁĄ sekcję, treść leży NA nim
─────────────────────────────────────────────────────────────────────
Diagnoza po telefonie klienta (2026-08-05): kadry-pasma zostawiały
pasy gołego papieru po 1.3–2.6 ekranu między tłami, a wszystkie kartki
leżały POZA tłem. Ten blok wraca do desktopowej zasady w pionie:
· tło sekcji = pełna wysokość sekcji (wzorzec izby: warstwa absolute
na całą sekcję + sticky klatka 100svh w środku) — kadr jedzie
z ekranem, kartki i teksty suną PO nim;
· kadry to PIONOWE wycinki źródeł (aspekt .58–.62), więc cover na
ekranie telefonu pokazuje scenę, nie makro-pasek;
· foto wywołuje się nad akwarelą scrubami, które na mobile realnie
jeżdżą (--wyw-sat w scenach, --wywolanie w muzyce/śpiewniku);
· płynność: w animowanych filtrach NIE MA blur() — na telefonie
rasteryzował pełnoekranową warstwę w każdej klatce scruba;
· styki sekcji: maska 6vh do papieru — oddech, nie kilometry.
Blok świadomie NA KOŃCU arkusza: kaskada wygrywa z fallbackami
`bez-ruchu`/`reduced-motion`; gdzie fallback ma wyższą specyficzność,
selektor jest zdublowany o `body.bez-ruchu`.
══════════════════════════════════════════════════════════════════════ */
@media(max-width:840px){
/* ── listwa nawigacji: przewijalna w poziomie, bez nazwy zespołu ── */
.lista{gap:.55rem;padding:.25rem .9rem;font-size:.66rem;
overflow-x:auto;overscroll-behavior-x:contain;scrollbar-width:none;
background:color-mix(in srgb,var(--bg) 96%,transparent);backdrop-filter:none}
.lista::-webkit-scrollbar{display:none}
.lista .kto{display:none}
.lista a{flex:none;white-space:nowrap;padding:.85rem .15rem}
/* ── HERO (koncepcja bez zmian — góra: kolumna, dół: portret) ── */
.hero{height:100svh}
.hero-kolumna{left:6%;right:6%;width:auto;top:0;bottom:36vh;
padding:4vh 0 0;justify-content:center}
.hero-kolumna::before{display:none}
.hero-txt h1{font-size:clamp(1.9rem,8.2vw,2.35rem)}
.hero-txt .lead{font-size:.95rem;line-height:1.5;max-width:none;margin-top:.7rem}
.hero-meta{margin-top:.6rem}
.hero-kolumna .spis{margin-top:var(--s2)}
.hero-kolumna .spis a{font-size:1.18rem;gap:.65rem;padding:.68rem .1rem}
.hero-kolumna .spis .nr{font-size:.66rem;width:2.2ch}
.hero-kolumna .spis .co{font-size:.6rem}
.postac{right:-8%;bottom:0}
.postac .portret{height:36vh;max-width:78vw}
.mgla-a{bottom:2%;height:34%}
.mgla-b{height:22%}
.przyboj{height:22%;filter:blur(7px) saturate(.85)}
.hero-swiatlo::after{background:linear-gradient(178deg,
color-mix(in srgb,var(--papier) 84%,transparent) 0%,
color-mix(in srgb,var(--papier) 58%,transparent) 30%,
color-mix(in srgb,var(--papier) 14%,transparent) 54%,
transparent 70%)}
.hero-swiatlo-txt{background:linear-gradient(178deg,
color-mix(in srgb,var(--papier) 88%,transparent) 0%,
color-mix(in srgb,var(--papier) 74%,transparent) 26%,
color-mix(in srgb,var(--papier) 34%,transparent) 46%,
transparent 62%)}
.hero .hint{left:6%;bottom:3.5vh}
/* ── SCENY #morze/#gory: sticky kadr pod całą sekcją, kartki NA nim ──
Pierwsze ~50svh to czysty kadr (wejście w scenę), potem kartki
nasuwają się po przypiętym pejzażu. Maska 6vh domyka tło dokładnie
do granic sekcji. Foto wywołuje się z --wyw-sat (rozlewTla):
opacity = (sat − .68)/.32 to wprost postęp wywołania. */
.scena, body.bez-ruchu .scena{height:auto;overflow:visible;
padding:50svh var(--s3) var(--s2)}
.scena .rozlew, body.bez-ruchu .scena .rozlew{
position:absolute;inset:0;height:auto;margin:0;transform:none;overflow:visible;
-webkit-mask-image:linear-gradient(180deg,transparent 0,#000 6vh,#000 calc(100% - 6vh),transparent 100%);
mask-image:linear-gradient(180deg,transparent 0,#000 6vh,#000 calc(100% - 6vh),transparent 100%)}
.rozlew-w, body.bez-ruchu .rozlew-w{position:sticky;top:0;height:100svh;
overflow:clip;background:none}
/* filtr BEZ blur() — blur rasteryzował pełny ekran w każdej klatce */
.scena-tlo, body.bez-ruchu .scena-tlo{position:absolute;inset:0;
filter:saturate(var(--wyw-sat,1)) contrast(var(--wyw-con,1))}
.scena-tlo .aq, body.bez-ruchu .scena-tlo .aq{opacity:1;display:block;
width:100%;height:100%;object-fit:cover;object-position:50% 40%;transform:none}
.scena-tlo .foto{width:100%;height:100%;object-fit:cover;
-webkit-mask-image:none;mask-image:none;
opacity:calc((var(--wyw-sat,1) - .68)/.32)}
/* kartki suną po kadrze — z-index nad sticky tłem */
.beat, .beat-2, #gory .beat-1, #gory .beat-2,
body.bez-ruchu .beat, body.bez-ruchu .beat-2,
body.bez-ruchu #gory .beat-1, body.bez-ruchu #gory .beat-2{
position:relative;z-index:2;left:0;right:0;top:0;transform:none;
margin:0 0 var(--s3);max-width:none;padding:1.6rem 1.35rem}
.beat-1{rotate:-.3deg}
.beat-2{rotate:.3deg}
/* wąskie wiersze „rok — tytuł — dopisek”: siatka zamiast flexa */
.szlak li, .karta li, #muzyka .dyskografia li{
display:grid;grid-template-columns:5ch 1fr;gap:.1rem var(--s2);
align-items:baseline}
.szlak .rok, .karta li .rok, #muzyka .dyskografia .rok{min-width:0}
.szlak .info, .karta li .gdzie, #muzyka .dyskografia .info{
grid-column:2;margin-left:0;text-align:left}
.sklad li{display:block}
.sklad .na-czym{display:block;margin:.1rem 0 0;text-align:left}
/* ── #slowo: MOŻE GÓRY leży NA pasie panoramy (jak na desktopie) ── */
#slowo, body.bez-ruchu #slowo{display:flex;flex-direction:column;
justify-content:center;min-height:46svh;
padding:var(--s3) var(--s3) calc(var(--s3) + 9svh)}
#slowo .morf-tlo{position:absolute;inset:0;height:auto;margin:0;filter:none}
#slowo .morf-tlo .rozlew{position:absolute;inset:0;height:auto;margin:0;background:none}
#slowo .rozlew .aq{width:100%;height:100%;object-fit:cover;
object-position:50% 58%;transform:none}
#slowo .rozlew .foto{display:none}
#slowo .rozlew::after{display:none}
#slowo .morf-podklad{display:none}
#slowo .morf-scenografia, body.bez-ruchu #slowo .morf-scenografia{
position:relative;inset:auto;padding:0}
.morf-slowo{font-size:clamp(2.1rem,11.8vw,4rem);
text-shadow:0 1px 0 rgba(244,237,220,.9),0 0 14px rgba(244,237,220,.85),
0 3px 10px rgba(20,16,10,.22)}
#slowo .l-r, #slowo .l-z{display:none}
#slowo .morf-slot .l-z2{position:static;left:auto;transform:none}
#slowo .morf-pod, body.bez-ruchu #slowo .morf-pod{
position:relative;left:auto;bottom:auto;transform:none;margin:var(--s2) auto 0;
color:var(--atrament);opacity:.85;
text-shadow:0 1px 0 rgba(244,237,220,.95),0 0 8px rgba(244,237,220,.9)}
/* ── MUZYKA i ŚPIEWNIK: sticky kadr pod CAŁĄ sekcją ──
Nocna weranda / ognisko jadą z ekranem przez sekcję; treść suwa się
po nich. Scrim w ::after ciemnieje w głąb sekcji, więc kremowy tekst
i kartki zawsze mają mrok pod sobą, a szczyt sekcji to czysty kadr. */
.rozdzial{padding:46svh var(--s3) var(--s3)}
.kadr-sekcji{top:0;bottom:0;left:0;width:100%;transform:none;overflow:clip;
filter:saturate(var(--wyw-sat,1)) contrast(var(--wyw-con,1));
-webkit-mask-image:linear-gradient(180deg,transparent 0,#000 6vh,#000 calc(100% - 6vh),transparent 100%);
mask-image:linear-gradient(180deg,transparent 0,#000 6vh,#000 calc(100% - 6vh),transparent 100%)}
.kadr-sekcji img{position:sticky;inset:auto;top:0;display:block;
width:100%;height:100svh;object-fit:cover;object-position:46% 44%;transform:none;
opacity:calc(1 - var(--wywolanie,0)*1.9)}
.kadr-sekcji .foto{margin-top:-100svh;
-webkit-mask-image:none;mask-image:none;
opacity:calc(var(--wywolanie,0)*1.9)}
#muzyka .kadr-sekcji img{object-position:42% 44%}
#spiewnik .kadr-sekcji img{object-position:50% 40%}
/* scrim: sunie po przypiętym kadrze — im głębiej w sekcję, tym ciemniej */
.kadr-sekcji::after{background:linear-gradient(180deg,
rgba(24,18,12,0) 0,rgba(24,18,12,.10) 34vh,
rgba(24,18,12,.55) 100vh,rgba(24,18,12,.62) 100%)}
/* podkłady bez 100vw (pasek przewijania = poziomy scroll);
noc z sepią, nie betonowa szarość czystego atramentu */
#muzyka::before,#spiewnik::after{left:0;width:100%;transform:none}
#muzyka::before{background:linear-gradient(180deg,var(--bg) 0%,
color-mix(in srgb,var(--sepia) 42%,var(--bg)) 10%,
color-mix(in srgb,var(--atrament) 56%,color-mix(in srgb,var(--sepia) 34%,var(--bg))) 26%,
color-mix(in srgb,var(--atrament) 64%,color-mix(in srgb,var(--sepia) 34%,var(--bg))) 100%)}
#spiewnik::after{background:linear-gradient(180deg,
color-mix(in srgb,var(--atrament) 64%,color-mix(in srgb,var(--sepia) 34%,var(--bg))) 0%,
color-mix(in srgb,var(--atrament) 71%,color-mix(in srgb,var(--sepia) 30%,var(--bg))) 30%,
color-mix(in srgb,var(--atrament) 80%,color-mix(in srgb,var(--sepia) 26%,var(--bg))) 78%,
color-mix(in srgb,var(--atrament) 88%,var(--bg)) 100%)}
/* kremowy tekst na nocy — cień zamiast kolejnej przesłony */
#muzyka h2,#spiewnik h2,.izba-naglowek h2{
text-shadow:0 1px 2px rgba(18,14,9,.85),0 2px 14px rgba(18,14,9,.7)}
#muzyka .dyskografia li,#spiewnik .spiewnik-spis .tytul,
#spiewnik .spiewnik-wstep p,#spiewnik .spiewnik-etykieta,.izba-naglowek p,
#muzyka .dyskografia .rok,#muzyka .dopisz,#spiewnik .spiewnik-spis .skad{
text-shadow:0 1px 2px rgba(18,14,9,.9),0 2px 10px rgba(18,14,9,.65)}
.muzyka-glowa{grid-template-columns:1fr}
.znaczki-pas{max-width:300px}
.plyty-solo,.karty,.spiewnik-uklad{grid-template-columns:1fr}
.plyty-solo{gap:var(--s3)}
.dyskografia{columns:1}
.spiewnik-uklad{gap:var(--s3);margin-top:var(--s3)}
/* wiersz spisu to