/* ══════════════════════════════════════════════════════════════
   HALDEN — CZYTNIK

   Dwie zasady, których nie łamiemy:
   1. 95% czasu na ekranie jest wyłącznie tekst.
   2. ŻADEN efekt nie zaczyna się od pustego ekranu. Czytelnik nigdy
      nie ma „doskrolowywać przez nicość" do obrazu — obraz albo już
      tam jest, albo rozrywa tekst, który właśnie czytał.
   ══════════════════════════════════════════════════════════════ */

body.czytnik{
  background:var(--bg); color:var(--ink);
  transition:background-color 1.1s cubic-bezier(.4,0,.2,1), color .9s cubic-bezier(.4,0,.2,1);
}

/* ── pasek postępu ───────────────────────────────────────────── */
.postep{ position:fixed; top:0; left:0; right:0; height:2px; z-index:40; background:rgba(236,227,210,.08); }
.postep i{ display:block; height:100%; width:0; background:linear-gradient(90deg,var(--zloto),var(--zloto-mig)); }

/* ── belka: pełne tło, żeby tekst pod nią nie prześwitywał ───── */
.belka{
  position:fixed; top:0; left:0; right:0; z-index:35;
  display:flex; align-items:center; gap:1rem;
  padding:.7rem clamp(.9rem,4vw,2rem);
  padding-top:calc(.7rem + env(safe-area-inset-top));
  background:#080b16;
  border-bottom:1px solid rgba(236,227,210,.08);
  transition:transform .4s cubic-bezier(.4,0,.2,1), opacity .4s;
}
.belka.schowana{ transform:translateY(-115%); opacity:0; }
.belka-znak{
  /* Znak marki w belce: stały, jak podpis na każdej stronie książki.
     Kolory biorą się ze sceny (--znak-1/2/3 na body[data-sekcja]) i płynnie
     przechodzą, gdy czytelnik wjeżdża w następną — razem z atramentem. */
  display:block; width:1.7rem; height:1.7rem; flex:0 0 auto; line-height:0;
}
.belka-znak svg{ width:100%; height:100%; display:block; fill:none; stroke:none; }
.belka-znak path{ transition:fill 1.1s ease; stroke:#080b16; stroke-width:3; paint-order:stroke; }
.belka-znak path.w1{ fill:var(--znak-1,#3f7f98); }
.belka-znak path.w2{ fill:var(--znak-2,#7fb8cf); }
.belka-znak path.w3{ fill:var(--znak-3,var(--ink-hi)); }
@media (prefers-reduced-motion: reduce){ .belka-znak path{ transition:none; } }

.belka-wroc, .belka-dzwiek{
  flex:none; display:grid; place-items:center;
  width:2.4rem; height:2.4rem; border-radius:50%;
  color:var(--ink-mute); background:#141a2e;
  border:1px solid var(--linia); cursor:pointer;
  transition:color .25s, border-color .25s;
}
.belka-wroc:hover, .belka-dzwiek:hover{ color:var(--ink-hi); border-color:rgba(232,184,75,.5); }
.belka-srodek{
  flex:1; min-width:0; display:grid; gap:.15rem; justify-items:center;
}
/* Licznik stron — zmienia się skokowo, na granicach kartek. Ma dawać to samo,
   co papier: „jestem na dziewięćdziesiątej piątej". Stąd numer złotem. */
.belka-strona{
  font-family:var(--proza); font-size:.63rem; letter-spacing:0;
  color:var(--ink-mute); white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
  max-width:100%; opacity:0; transition:opacity .5s;
}
.belka-strona.jest{ opacity:1; }
.belka-strona b{ color:var(--zloto); font-weight:600; }
.belka-tytul{
  text-align:center; min-width:0;
  font-size:.66rem; letter-spacing:.16em; text-transform:uppercase; color:var(--ink-mute);
  overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
}
.belka-dzwiek .ikona-on{ display:none; }
.belka-dzwiek[aria-pressed="true"]{ color:var(--zloto); border-color:rgba(232,184,75,.5); }
.belka-dzwiek[aria-pressed="true"] .ikona-on{ display:block; }
.belka-dzwiek[aria-pressed="true"] .ikona-off{ display:none; }
.belka-dzwiek[data-brak="1"]{ opacity:.32; }

/* ── okładka rozdziału ───────────────────────────────────────── */
.okladka-rozdzialu{
  position:relative; min-height:100svh;
  display:grid; place-items:center; text-align:center;
  padding:6rem 1.5rem 7rem; overflow:hidden;
}
.okladka-film{
  position:absolute; inset:0; width:100%; height:100%;
  object-fit:cover; opacity:0; transition:opacity 1.2s ease;
}
.okladka-film.gra{ opacity:1; }
@media (prefers-reduced-motion: reduce){ .okladka-film{ display:none; } }

.okladka-tlo{
  position:absolute; inset:-6%; overflow:hidden;
  background-size:cover; background-position:center 35%;
  opacity:.92; will-change:transform;
}
.okladka-rozdzialu::after{
  content:""; position:absolute; inset:0;
  background:
    radial-gradient(100% 62% at 50% 48%, rgba(7,10,20,.15), rgba(7,10,20,.85) 78%),
    linear-gradient(180deg, rgba(7,10,20,.7), transparent 32%, var(--bg) 97%);
}
.okladka-tresc{ position:relative; z-index:2; max-width:32rem; }
.nadtytul{ font-size:.72rem; letter-spacing:.24em; text-transform:uppercase; color:var(--zloto); margin:0 0 1.6rem; }
.okladka-rozdzialu h1{
  font-family:var(--proza); font-weight:400;
  font-size:clamp(2.8rem,11vw,5.5rem); line-height:1;
  margin:0 0 1.6rem; color:var(--ink-hi); text-wrap:balance;
  text-shadow:0 4px 40px rgba(0,0,0,.75);
}
.okladka-meta{ font-size:.78rem; letter-spacing:.16em; text-transform:uppercase; color:var(--ink-mute); margin:0; }
.wskaznik{
  position:absolute; bottom:3rem; left:50%; transform:translateX(-50%); z-index:2;
  width:1px; height:3.5rem; background:var(--linia); overflow:hidden;
}
.wskaznik span{
  position:absolute; inset:0; display:block;
  background:linear-gradient(180deg,transparent,var(--zloto));
  animation:kapie 2.6s cubic-bezier(.6,0,.4,1) infinite;
}
@keyframes kapie{ 0%{transform:translateY(-100%)} 60%,100%{transform:translateY(100%)} }

/* ── proza ───────────────────────────────────────────────────── */
.proza{ position:relative; z-index:2; padding:clamp(3rem,10vh,6rem) 0 4rem; }

.akapit, .echo{
  color:var(--ink);            /* atrament liczony na akapicie — inaczej tryb i paleta sceny nie działają */
  transition:color 1.1s cubic-bezier(.4,0,.2,1);
  font-family:var(--proza);
  font-size:clamp(1.135rem, 1.02rem + .55vw, 1.36rem);
  line-height:1.78;
  /* Cień, nie przyciemnianie strony: litera ma własny kontrast niezależnie
     od tego, co akurat przesuwa się w tle. Za słaby, żeby go zobaczyć,
     dość mocny, żeby tło przestało gryźć. */
  text-shadow:0 1px 16px rgba(0,0,0,.85), 0 0 4px rgba(0,0,0,.6);
  max-width:36rem;
  margin:0 auto 1.45em;
  padding-inline:clamp(1.35rem,6vw,2rem);
  text-wrap:pretty;
}
.akapit.dialog{ margin-bottom:1.15em; }

.akapit.otwarcie{
  text-align:center; color:var(--zloto-mig);
  margin-bottom:3.4em; text-wrap:balance;
}
.akapit.oddech{
  text-align:center; color:var(--zloto-mig);
  margin-block:3em; text-wrap:balance;
}
.akapit.oddech.dialog{ text-align:left; }

.pov{
  font-family:var(--ui); font-size:.76rem; font-weight:500;
  letter-spacing:.4em; text-transform:uppercase; text-indent:.4em;
  color:var(--zloto); text-align:center;
  max-width:36rem; margin:0 auto 2.6em; padding-top:.6em;
}
.przerwa{ display:grid; place-items:center; margin:2.6em auto; max-width:36rem; }
.przerwa span{
  font-family:var(--proza); font-size:1.15rem; line-height:1;
  color:var(--zloto); opacity:.5; letter-spacing:.1em;
}

html.js .akapit, html.js .pov, html.js .przerwa{
  opacity:0; transform:translateY(14px);
  transition:opacity .75s cubic-bezier(.2,.6,.2,1), transform .75s cubic-bezier(.2,.6,.2,1);
}
html.js .widoczny{ opacity:1; transform:none; }

/* ══════════════════════════════════════════════════════════════
   1 · ROZDARCIE — rwie się PRAWDZIWA strona

   Dwie kopie tego samego, realnego kawałka prozy leżą jedna na drugiej
   i są przycięte komplementarnie wzdłuż poszarpanej linii. Przy zamkniętej
   kartce składają się w jedną, nierozróżnialną stronę tekstu — czytelnik
   po prostu czyta. Potem rozjeżdżają się i rwie się dokładnie to zdanie,
   na którym stał, razem z papierem.
   ══════════════════════════════════════════════════════════════ */
.rozdarcie{ position:relative; height:230svh; --p:0; --o:0; }
.rozdarcie-scena{ position:sticky; top:0; height:100svh; overflow:hidden; background:var(--bg); }

.rozdarcie-obraz{ position:absolute; inset:0; margin:0; z-index:1; }
.rozdarcie-obraz img{
  width:100%; height:100%; object-fit:cover;
  transform:scale(calc(1.06 - var(--o) * .06));
}
.rozdarcie-obraz figcaption{
  position:absolute; left:0; right:0; bottom:max(2.2rem, env(safe-area-inset-bottom));
  text-align:center; padding:0 1.5rem;
  font-family:var(--proza); font-size:1rem; letter-spacing:.05em;
  color:var(--ink-hi); text-shadow:0 2px 22px rgba(0,0,0,.95);
  opacity:calc((var(--o) - .62) * 2.8);
}

/* kartka: pełny ekran prozy, dwa razy, przycięty w dwie strony */
.kartka-gora, .kartka-dol{
  position:absolute; inset:0; z-index:2;
  background:var(--bg);
  display:grid; align-content:center;
  pointer-events:none;
}
[data-fx] .kartka-gora, [data-fx] .kartka-dol, [data-fx] .tafla, [data-fx] .welon,
[data-fx] .okno-obraz, [data-fx] .rozdarcie-obraz img, [data-fx] .mgla-obraz img{ will-change:auto; }
[data-fx].blisko .kartka-gora, [data-fx].blisko .kartka-dol, [data-fx].blisko .tafla, [data-fx].blisko .welon,
[data-fx].blisko .okno-obraz{ will-change:transform; }
.kartka-tresc{ width:100%; }
.kartka-gora .akapit, .kartka-dol .akapit{ opacity:1 !important; transform:none !important; margin-bottom:1.3em; }
.kartka-gora .akapit:last-child, .kartka-dol .akapit:last-child{ margin-bottom:0; }

.kartka-gora{
  transform:translate3d(0, calc(var(--o) * -56%), 0) rotate(calc(var(--o) * -.35deg));
  clip-path:polygon(0% 0%, 100% 0%, 100.00% 50.35%, 99.09% 52.66%, 98.18% 52.75%, 97.27% 52.27%, 96.36% 52.07%, 95.45% 52.07%, 94.55% 51.00%, 93.64% 50.59%, 92.73% 50.12%, 91.82% 50.46%, 90.91% 51.12%, 90.00% 50.79%, 89.09% 50.61%, 88.18% 50.84%, 87.27% 50.61%, 86.36% 50.24%, 85.45% 49.67%, 84.55% 48.56%, 83.64% 48.62%, 82.73% 48.71%, 81.82% 48.24%, 80.91% 48.14%, 80.00% 48.82%, 79.09% 48.25%, 78.18% 47.99%, 77.27% 49.34%, 76.36% 49.02%, 75.45% 49.10%, 74.55% 49.28%, 73.64% 49.38%, 72.73% 49.20%, 71.82% 49.30%, 70.91% 49.24%, 70.00% 49.45%, 69.09% 49.65%, 68.18% 49.91%, 67.27% 49.80%, 66.36% 49.78%, 65.45% 50.28%, 64.55% 50.11%, 63.64% 50.06%, 62.73% 50.04%, 61.82% 49.74%, 60.91% 49.39%, 60.00% 49.60%, 59.09% 49.56%, 58.18% 49.77%, 57.27% 50.26%, 56.36% 50.38%, 55.45% 49.51%, 54.55% 49.58%, 53.64% 49.76%, 52.73% 49.83%, 51.82% 49.54%, 50.91% 49.15%, 50.00% 49.39%, 49.09% 49.73%, 48.18% 49.80%, 47.27% 49.99%, 46.36% 49.89%, 45.45% 49.68%, 44.55% 49.85%, 43.64% 49.98%, 42.73% 49.73%, 41.82% 49.94%, 40.91% 49.75%, 40.00% 50.06%, 39.09% 50.27%, 38.18% 50.17%, 37.27% 49.73%, 36.36% 49.46%, 35.45% 49.57%, 34.55% 49.78%, 33.64% 49.28%, 32.73% 49.38%, 31.82% 49.34%, 30.91% 50.47%, 30.00% 50.47%, 29.09% 50.72%, 28.18% 50.49%, 27.27% 50.80%, 26.36% 50.91%, 25.45% 50.65%, 24.55% 50.75%, 23.64% 50.87%, 22.73% 51.15%, 21.82% 51.79%, 20.91% 51.53%, 20.00% 51.67%, 19.09% 51.73%, 18.18% 51.79%, 17.27% 52.29%, 16.36% 51.58%, 15.45% 51.70%, 14.55% 51.53%, 13.64% 51.79%, 12.73% 51.58%, 11.82% 51.23%, 10.91% 51.06%, 10.00% 50.78%, 9.09% 49.94%, 8.18% 49.51%, 7.27% 49.18%, 6.36% 50.18%, 5.45% 50.18%, 4.55% 50.37%, 3.64% 50.39%, 2.73% 50.50%, 1.82% 50.60%, 0.91% 50.63%, 0.00% 50.35%);
}
.kartka-dol{
  transform:translate3d(0, calc(var(--o) * 56%), 0) rotate(calc(var(--o) * .35deg));
  clip-path:polygon(0.00% 49.65%, 0.91% 49.93%, 1.82% 49.90%, 2.73% 49.80%, 3.64% 49.69%, 4.55% 49.67%, 5.45% 49.48%, 6.36% 49.48%, 7.27% 48.48%, 8.18% 48.81%, 9.09% 49.24%, 10.00% 50.08%, 10.91% 50.36%, 11.82% 50.53%, 12.73% 50.88%, 13.64% 51.09%, 14.55% 50.83%, 15.45% 51.00%, 16.36% 50.88%, 17.27% 51.59%, 18.18% 51.09%, 19.09% 51.03%, 20.00% 50.97%, 20.91% 50.83%, 21.82% 51.09%, 22.73% 50.45%, 23.64% 50.17%, 24.55% 50.05%, 25.45% 49.95%, 26.36% 50.21%, 27.27% 50.10%, 28.18% 49.79%, 29.09% 50.02%, 30.00% 49.77%, 30.91% 49.77%, 31.82% 48.64%, 32.73% 48.68%, 33.64% 48.58%, 34.55% 49.08%, 35.45% 48.87%, 36.36% 48.76%, 37.27% 49.03%, 38.18% 49.47%, 39.09% 49.57%, 40.00% 49.36%, 40.91% 49.05%, 41.82% 49.24%, 42.73% 49.03%, 43.64% 49.28%, 44.55% 49.15%, 45.45% 48.98%, 46.36% 49.19%, 47.27% 49.29%, 48.18% 49.10%, 49.09% 49.03%, 50.00% 48.69%, 50.91% 48.45%, 51.82% 48.84%, 52.73% 49.13%, 53.64% 49.06%, 54.55% 48.88%, 55.45% 48.81%, 56.36% 49.68%, 57.27% 49.56%, 58.18% 49.07%, 59.09% 48.86%, 60.00% 48.90%, 60.91% 48.69%, 61.82% 49.04%, 62.73% 49.34%, 63.64% 49.36%, 64.55% 49.41%, 65.45% 49.58%, 66.36% 49.08%, 67.27% 49.10%, 68.18% 49.21%, 69.09% 48.95%, 70.00% 48.75%, 70.91% 48.54%, 71.82% 48.60%, 72.73% 48.50%, 73.64% 48.68%, 74.55% 48.58%, 75.45% 48.40%, 76.36% 48.32%, 77.27% 48.64%, 78.18% 47.29%, 79.09% 47.55%, 80.00% 48.12%, 80.91% 47.44%, 81.82% 47.54%, 82.73% 48.01%, 83.64% 47.92%, 84.55% 47.86%, 85.45% 48.97%, 86.36% 49.54%, 87.27% 49.91%, 88.18% 50.14%, 89.09% 49.91%, 90.00% 50.09%, 90.91% 50.42%, 91.82% 49.76%, 92.73% 49.42%, 93.64% 49.89%, 94.55% 50.30%, 95.45% 51.37%, 96.36% 51.37%, 97.27% 51.57%, 98.18% 52.05%, 99.09% 51.96%, 100.00% 49.65%, 100% 100%, 0% 100%);
}

/* światło na świeżo rozdartej krawędzi — bez drop-shadow, bo to kosztuje */
.kartka-gora::after, .kartka-dol::after{
  content:""; position:absolute; left:-2%; right:-2%; height:52%;
  opacity:calc(var(--o) * 1.5); pointer-events:none;
}
.kartka-gora::after{
  top:48%;
  background:linear-gradient(180deg, rgba(236,227,210,.34), rgba(0,0,0,.55) 6px, transparent 26px);
}
.kartka-dol::after{
  bottom:48%;
  background:linear-gradient(0deg, rgba(236,227,210,.28), rgba(0,0,0,.5) 6px, transparent 26px);
}

/* ══════════════════════════════════════════════════════════════
   2 · MGŁA — obraz wychodzi z mgły, która się rozwiewa
   Obraz jest widoczny od pierwszej klatki. Zero pustki.
   ══════════════════════════════════════════════════════════════ */
.mgla{ position:relative; height:200svh; --p:0; }
.mgla-scena{ position:sticky; top:0; height:100svh; overflow:hidden; background:var(--bg); }
.mgla-obraz{ position:absolute; inset:0; margin:0; }
.mgla-obraz img{
  width:100%; height:100%; object-fit:cover;
  transform:scale(calc(1.07 - var(--p) * .07));
}
.mgla .welon{
  position:absolute; inset:-25%; pointer-events:none; display:block;
  opacity:calc(1 - var(--p) * 1.25);
}
.mgla .w1{
  background:
    radial-gradient(55% 38% at 28% 42%, rgba(226,240,244,.62), transparent 72%),
    radial-gradient(45% 30% at 78% 62%, rgba(198,224,232,.5), transparent 72%);
  animation:dryf-a 46s ease-in-out infinite alternate;
}
.mgla .w2{
  background:
    radial-gradient(60% 34% at 62% 30%, rgba(206,228,236,.5), transparent 74%),
    radial-gradient(50% 40% at 18% 78%, rgba(232,244,247,.44), transparent 74%);
  animation:dryf-b 62s ease-in-out infinite alternate;
}
@keyframes dryf-a{ from{ transform:translate3d(-4%,1%,0) } to{ transform:translate3d(5%,-2%,0) } }
@keyframes dryf-b{ from{ transform:translate3d(4%,-2%,0) } to{ transform:translate3d(-5%,2%,0) } }
.mgla-obraz figcaption{
  position:absolute; left:0; right:0; bottom:max(2.2rem, env(safe-area-inset-bottom)); z-index:3;
  text-align:center; padding:0 1.5rem;
  font-family:var(--proza); font-size:1rem; letter-spacing:.05em;
  color:var(--ink-hi); text-shadow:0 2px 22px rgba(0,0,0,.95);
  opacity:calc((var(--p) - .45) * 3);
}

/* ══════════════════════════════════════════════════════════════
   3 · OKNO — rycina w kolumnie tekstu rozrasta się na cały ekran
   Za oknem od początku leży rozmyty ten sam obraz. Zero pustki.
   ══════════════════════════════════════════════════════════════ */
.okno{ position:relative; height:240svh; --p:0; --k:0; }
.okno-scena{ position:sticky; top:0; height:100svh; overflow:hidden; background:var(--bg); }
.okno-tlo{ position:absolute; inset:-8%; margin:0; }
.okno-tlo img{
  width:100%; height:100%; object-fit:cover;
  filter:saturate(.55) brightness(.26) contrast(.9);
  transform:scale(1.35);
}
.okno-obraz{
  position:absolute; left:50%; top:50%; transform:translate(-50%,-50%);
  margin:0; overflow:hidden; border-radius:calc(3px * (1 - var(--k)));
  --w0:min(20rem, 78vw);
  --h0:min(26rem, 46svh);
  width:calc(var(--w0) + (100vw - var(--w0)) * var(--k));
  height:calc(var(--h0) + (100svh - var(--h0)) * var(--k));
  box-shadow:
    0 0 0 1px rgba(232,184,75, calc(.55 * (1 - var(--k)))),
    0 40px 80px -30px rgba(0,0,0,.9);
}
.okno-obraz img{ width:100%; height:100%; object-fit:cover; }
.okno-obraz figcaption{
  position:absolute; left:0; right:0; bottom:1.4rem;
  text-align:center; padding:0 1.2rem;
  font-family:var(--proza); font-size:1rem; letter-spacing:.05em;
  color:var(--ink-hi); text-shadow:0 2px 22px rgba(0,0,0,.95);
  opacity:calc((var(--k) - .55) * 2.6);
}

/* ══════════════════════════════════════════════════════════════
   4 · WITRAŻ — obraz składa się z pięciu tafli kolorowego szkła
   Jak kopuła sanktuarium, która łamie dzień na klejnoty.
   Pod spodem od początku leży przyciemniony obraz. Zero pustki.
   ══════════════════════════════════════════════════════════════ */
.witraz{ position:relative; height:220svh; --p:0; }
.witraz-scena{ position:sticky; top:0; height:100svh; overflow:hidden; background:var(--bg); }
.witraz-obraz{ position:absolute; inset:0; margin:0; }
.witraz-obraz img{
  width:100%; height:100%; object-fit:cover;
  opacity:calc(.2 + var(--p) * .8);
}
.witraz .tafle{ position:absolute; inset:0; opacity:calc(1 - var(--p) * 1.1); }
.witraz .tafla{
  position:absolute; inset:0; display:block;
  clip-path:inset(0 calc((4 - var(--i)) * 20%) 0 calc(var(--i) * 20%));
  transform:translate3d(0, calc((1 - var(--p)) * var(--kier) * (32svh + var(--i) * 5svh)), 0);
  backface-visibility:hidden;
}
.witraz .tafla:nth-child(odd){  --kier:-1; }
.witraz .tafla:nth-child(even){ --kier: 1; }
.witraz .tafla img{ width:100%; height:100%; object-fit:cover; }
.witraz .tafla::after{
  content:""; position:absolute; inset:0; mix-blend-mode:screen;
  opacity:calc((1 - var(--p)) * .55);
}
.witraz .tafla:nth-child(1)::after{ background:var(--caldo); }
.witraz .tafla:nth-child(2)::after{ background:var(--ren); }
.witraz .tafla:nth-child(3)::after{ background:var(--arenin); }
.witraz .tafla:nth-child(4)::after{ background:var(--denvir); }
.witraz .tafla:nth-child(5)::after{ background:var(--zloto); }
.witraz-obraz figcaption{
  position:absolute; left:0; right:0; bottom:max(2.2rem, env(safe-area-inset-bottom)); z-index:3;
  text-align:center; padding:0 1.5rem;
  font-family:var(--proza); font-size:1rem; letter-spacing:.05em;
  color:var(--ink-hi); text-shadow:0 2px 22px rgba(0,0,0,.95);
  opacity:calc((var(--p) - .5) * 3);
}

/* ══════════════════════════════════════════════════════════════
   TRYBY — cała strona zmienia temperaturę razem z bohaterką
   ══════════════════════════════════════════════════════════════ */
.klimat{ position:fixed; inset:0; z-index:3; pointer-events:none; opacity:0; transition:opacity 1.2s ease; }

html.tryb-wizja body[data-sekcja], html.tryb-wizja body{
  --bg:#05101a; --ink:#bfe0ec; --ink-hi:#eafaff; --ink-mute:#6f8b96; --zaslona:rgba(4,14,24,.72);
}
html.tryb-wizja .klimat{
  opacity:1;
  background:
    radial-gradient(92% 72% at 50% 45%, transparent 42%, rgba(5,16,26,.5) 100%),
    linear-gradient(180deg, rgba(63,191,182,.07), transparent 30%);
}
html.tryb-wizja .akapit{
  text-shadow:.75px 0 0 rgba(63,191,182,.28), -.75px 0 0 rgba(190,130,170,.16);
}

html.tryb-trumna body[data-sekcja], html.tryb-trumna body{
  --bg:#04060c; --ink:#c2baa9; --ink-hi:#e8e0d0; --ink-mute:#6b665d; --zaslona:rgba(2,4,8,.8);
}
html.tryb-trumna .klimat{
  opacity:1;
  background:radial-gradient(95% 80% at 50% 50%, transparent 45%, rgba(0,0,0,.5));
}
html.tryb-trumna .klimat::before{
  content:""; position:absolute; left:0; right:0; top:-200px; height:calc(100% + 400px);
  background:repeating-linear-gradient(0deg,
      rgba(255,206,140,0)    0 58px,
      rgba(255,206,140,.05) 74px,
      rgba(255,206,140,0)   90px 152px);
  animation:szpary 11s linear infinite;
  will-change:transform;
}
@keyframes szpary{ from{ transform:translate3d(0,0,0); } to{ transform:translate3d(0,152px,0); } }

html.tryb-ida body[data-sekcja], html.tryb-ida body{
  --bg:#0c0e18; --ink:#d7d3e0; --ink-hi:#f1eff7; --zaslona:rgba(10,10,22,.7);
}
html.tryb-ida .akapit{ color:#cfc9dd; }
html.tryb-ida .klimat{
  opacity:1;
  background:linear-gradient(180deg, rgba(215,211,224,.04), transparent 22%, rgba(215,211,224,.03));
}

html.tryb-dama body[data-sekcja], html.tryb-dama body{
  --bg:#0d0a16; --ink:#d6c5ee; --ink-hi:#f2e9ff; --zaslona:rgba(12,8,22,.66);
}
html.tryb-dama .akapit{ text-shadow:0 0 18px rgba(150,110,220,.28), 0 1px 14px rgba(0,0,0,.72); }
html.tryb-dama .klimat{
  opacity:1;
  background:
    radial-gradient(85% 65% at 50% 40%, transparent 40%, rgba(16,8,30,.46) 100%),
    linear-gradient(180deg, rgba(168,132,232,.06), transparent 30%);
}

html.tryb-zar body[data-sekcja], html.tryb-zar body{
  --bg:#120a06; --ink:#eccdaa; --ink-hi:#ffe9c9; --zaslona:rgba(16,8,4,.64);
}
html.tryb-zar .akapit{ text-shadow:0 0 16px rgba(255,150,60,.16), 0 1px 14px rgba(0,0,0,.72); }
html.tryb-zar .klimat{
  opacity:1;
  background:
    radial-gradient(110% 55% at 50% 108%, rgba(255,140,50,.10), transparent 55%),
    radial-gradient(90% 70% at 50% 42%, transparent 45%, rgba(14,6,2,.5) 100%);
}

/* ── koniec rozdziału ────────────────────────────────────────── */
.koniec-rozdzialu{
  position:relative; z-index:2; text-align:center;
  padding:7rem clamp(1.35rem,6vw,2rem) 6rem;
  border-top:1px solid var(--linia); margin-top:5rem;
}
.koniec-znak{ font-family:var(--proza); font-size:1.6rem; color:var(--zloto); margin:0 0 1.5rem; display:inline-block; }
.koniec-lead{ font-size:.74rem; letter-spacing:.22em; text-transform:uppercase; color:var(--ink-mute); margin:0 0 1rem; }
.koniec-rozdzialu h2{
  font-family:var(--proza); font-weight:400; font-size:clamp(1.9rem,6.5vw,3rem);
  margin:0 0 2rem; color:var(--ink-hi); text-wrap:balance;
}
.koniec-info{ color:var(--ink-mute); font-family:var(--proza); font-size:1.15rem; margin:0; }
.koniec-zapis{ margin:4.5rem auto 3rem; max-width:26rem; }
.koniec-zapis > p{ font-family:var(--proza); font-size:1.15rem; color:var(--ink); margin:0 0 1.1rem; }
.koniec-powrot{ display:inline-block; margin-top:2rem; font-size:.85rem; color:var(--ink-mute); text-decoration:none; }
.koniec-powrot:hover{ color:var(--zloto); }

/* ── zakładka: „wróć tam, gdzie skończyłeś" ──────────────────── */
.zakladka{
  position:fixed; z-index:36; left:50%; transform:translate(-50%, 1rem);
  bottom:calc(1.2rem + env(safe-area-inset-bottom));
  display:flex; align-items:center; gap:.7rem;
  padding:.6rem .7rem .6rem 1.1rem; border-radius:100px;
  background:#141a2e; border:1px solid rgba(232,184,75,.35);
  box-shadow:var(--cien);
  font-size:.86rem; color:var(--ink);
  opacity:0; pointer-events:none; transition:opacity .5s, transform .5s;
  max-width:calc(100vw - 2rem);
}
.zakladka.jest{ opacity:1; transform:translate(-50%,0); pointer-events:auto; }
.zakladka button{
  border:0; border-radius:100px; cursor:pointer; white-space:nowrap;
  padding:.5em 1em; font-family:var(--ui); font-size:.86rem; font-weight:600;
  background:var(--zloto); color:#0a0d16;
}
.zakladka .zamknij{ background:transparent; color:var(--ink-faint); padding:.4em .55em; font-size:1.15rem; line-height:1; }

/* ── mniej ruchu, proszę ─────────────────────────────────────── */
@media (prefers-reduced-motion: reduce){
  html.js .akapit, html.js .pov, html.js .przerwa{ opacity:1; transform:none; transition:none; }
  .rozdarcie, .mgla, .okno, .witraz{ height:auto; }
  .mgla-scena, .okno-scena, .witraz-scena{
    position:static; height:auto; aspect-ratio:2/3; max-height:80svh;
  }
  .rozdarcie-scena{ position:static; height:auto; }
  .kartka-dol, .welon, .witraz .tafle, .okno-tlo{ display:none; }
  .kartka-gora{ position:static; clip-path:none; transform:none; padding:2.5rem 0; }
  .kartka-gora::after, .kartka-dol::after{ display:none; }
  .rozdarcie-obraz{ position:static; aspect-ratio:2/3; max-height:80svh; }
  .rozdarcie-obraz img, .mgla-obraz img, .witraz-obraz img{ transform:none; opacity:1; }
  .okno-obraz{ position:static; transform:none; width:100%; height:100%; }
  .rozdarcie-obraz figcaption, .mgla-obraz figcaption,
  .okno-obraz figcaption, .witraz-obraz figcaption{ opacity:1; }
  .wskaznik span{ animation:none; }
  html.tryb-trumna .klimat{ animation:none; }
  .mgla .welon{ animation:none; }
}

/* ── Lenis (tylko myszka) ────────────────────────────────────── */
html.lenis, html.lenis body{ height:auto; }
.lenis.lenis-smooth{ scroll-behavior:auto !important; }
.lenis.lenis-stopped{ overflow:hidden; }

/* ══════════════════════════════════════════════════════════════
   TEKST TEŻ MOŻE SZALEĆ
   Dwa efekty na akapicie. Rzadkie, więc mocne.
   ══════════════════════════════════════════════════════════════ */

/* SZEPT — myśl umarłego, która przebija się przez wizję.
   Wyłania się z rozmycia, litery zbiegają się z rozsypania. */
.akapit.szept{
  text-align:center; font-style:italic;
  color:var(--morze-jasne); margin-block:3em;
  text-shadow:0 0 28px rgba(63,191,182,.5);
}
html.js .akapit.szept{ filter:blur(11px); }
html.js .akapit.szept.widoczny{
  filter:blur(0);
  transition:opacity 1.7s ease, transform 1.7s ease, filter 1.7s cubic-bezier(.2,.7,.2,1);
}

/* WSTRZĄS — akapit, w którym coś w bohaterkę uderza. */
html.js .akapit.wstrzas.widoczny{
  animation:wstrzas .55s cubic-bezier(.36,.07,.19,.97) both;
}
@keyframes wstrzas{
  0%{   transform:translate3d(0,14px,0); filter:blur(3px); }
  14%{  transform:translate3d(-7px,0,0); filter:blur(0); }
  30%{  transform:translate3d(6px,0,0); }
  46%{  transform:translate3d(-4px,0,0); }
  62%{  transform:translate3d(3px,0,0); }
  78%{  transform:translate3d(-2px,0,0); }
  100%{ transform:none; }
}

@media (prefers-reduced-motion: reduce){
  html.js .akapit.szept{ filter:none; }
  html.js .akapit.wstrzas.widoczny{ animation:none; }
}


/* ══════════════════════════════════════════════════════════════
   TŁO, KTÓRE ZMIENIA SIĘ Z NASTROJEM TEKSTU

   Za prozą leży rozmyty kadr, inny dla każdej sceny rozdziału,
   przenikający przy przejściu. Do tego cała paleta atramentu
   przesuwa się razem z nim. Nigdzie NIE zmieniamy rozmiaru pisma —
   tylko temperaturę. Rozmiar tekstu jest jeden na cały rozdział.
   ══════════════════════════════════════════════════════════════ */
.tlo{ position:fixed; inset:0; z-index:0; pointer-events:none; }
.tlo .warstwa{
  position:absolute; inset:-4%; display:block;
  background-size:cover; background-position:center;
  opacity:0; transition:opacity 2s cubic-bezier(.4,0,.2,1);
  will-change:opacity, transform;
  /* Delikatny dryf — tło żyje, ale nie goni tekstu. Dwie warstwy dostają
     przeciwne kierunki (nth-child), żeby przenikanie nie szło „w tę samą stronę". */
  animation:tlo-dryf 75s ease-in-out infinite alternate;
  /* Rozmycie to nie ozdoba: ostra plama tła (np. ukośna smuga światła
     w sekcji 3) tnie litery w poprzek i tekst przestaje się czytać.
     Nastrój zostaje, rysunek znika. inset:-4% chowa brzegi rozmycia. */
  filter:blur(1.5px) saturate(1.05);
}
.tlo .warstwa.jest{ opacity:.78; }
.tlo .warstwa:nth-child(2){ animation-duration:95s; animation-direction:alternate-reverse; }
@keyframes tlo-dryf{
  from{ transform:translate3d(-1.6%, -1.2%, 0) scale(1.06); }
  to{   transform:translate3d( 1.6%,  1.4%, 0) scale(1.11); }
}
.tlo::after{
  content:""; position:absolute; inset:0;
  background:
    radial-gradient(120% 75% at 50% 45%, rgba(0,0,0,.1), rgba(0,0,0,.42) 100%),
    linear-gradient(180deg, rgba(0,0,0,.42), rgba(0,0,0,.16) 30%, rgba(0,0,0,.16) 70%, rgba(0,0,0,.42)),
    var(--zaslona, rgba(7,10,20,.62));
  transition:background 1.6s ease;
}

/* paleta na scenę — atrament i podkład wędrują razem z nastrojem */
/* Każda scena ma swoją temperaturę — i znak marki w belce bierze ją razem
   z atramentem tekstu. Trzy barwy: tył (dźwięk), środek (obraz), przód (tekst,
   najjaśniejszy — bo na ciemnej belce to przód ma być czytelny). Przód zawsze
   równa się --ink-hi, więc nie rozjedzie się z kolorem liter obok. */
body[data-sekcja="1"]{ --ink:#dde7ec; --ink-hi:#f2fafd; --zaslona:rgba(5,11,20,.5);  --znak-1:#3f7f98; --znak-2:#7fb8cf; --znak-3:#f2fafd; }  /* chłód, mgła, morze */
body[data-sekcja="2"]{ --ink:#e6e2d6; --ink-hi:#faf6ec; --zaslona:rgba(12,16,26,.52); --znak-1:#6b6a7c; --znak-2:#b7b2bf; --znak-3:#faf6ec; }  /* kamień, krypta */
body[data-sekcja="3"]{ --ink:#ecdcc2; --ink-hi:#fdf1da; --zaslona:rgba(14,9,6,.54);  --znak-1:#9a5a2e; --znak-2:#d9a45a; --znak-3:#fdf1da; }  /* ogień, bursztyn */
body[data-sekcja="4"]{ --ink:#f6ecd8; --ink-hi:#fffaf0; --zaslona:rgba(8,12,8,.56);  --znak-1:#4e7a4a; --znak-2:#9dbb7a; --znak-3:#fffaf0; }  /* zieleń, droga */
body[data-sekcja="5"]{ --ink:#dbd5e6; --ink-hi:#f3effa; --zaslona:rgba(11,10,20,.52); --znak-1:#5b4f86; --znak-2:#a396cc; --znak-3:#f3effa; }  /* fiolet, noc, wizja */
body[data-sekcja="6"]{ --ink:#dbe7ea; --ink-hi:#f2fbfd; --zaslona:rgba(6,12,18,.52);  --znak-1:#2f6f78; --znak-2:#6fb5bd; --znak-3:#f2fbfd; }  /* głębia, woda */
body[data-sekcja="7"]{ --ink:#e8dccb; --ink-hi:#fbf3e6; --zaslona:rgba(16,10,8,.54);  --znak-1:#7a3f3a; --znak-2:#c98a74; --znak-3:#fbf3e6; }  /* rdza, krew, zachód */
body[data-sekcja="8"]{ --ink:#e4e2d8; --ink-hi:#f7f5ee; --zaslona:rgba(10,12,14,.54);  --znak-1:#55606a; --znak-2:#9aa6b0; --znak-3:#f7f5ee; }  /* popiół, świt */

/* tryby dokładają swoją temperaturę PONAD paletę sceny */
html.tryb-wizja  .tlo .warstwa.jest{ opacity:.3; }
html.tryb-trumna .tlo .warstwa.jest{ opacity:.12; }

@media (prefers-reduced-motion: reduce){
  .tlo .warstwa{ transition:none; animation:none; }
}


/* ══════════════════════════════════════════════════════════════
   5 · ODSUNIĘCIE — kawałek strony odrywa się i odjeżdża w bok

   Ta sama zasada co przy rozdarciu: dwie kopie PRAWDZIWEJ prozy,
   przycięte komplementarnie wzdłuż poszarpanej linii — tyle że linia
   biegnie z góry na dół. Prawy strzęp odkleja się, obraca i odjeżdża
   za krawędź ekranu. Pod spodem czeka obraz.
   ══════════════════════════════════════════════════════════════ */
.odsuniecie{ position:relative; height:230svh; --p:0; --o:0; }
.odsuniecie-scena{ position:sticky; top:0; height:100svh; overflow:hidden; background:var(--bg); }

/* Lewy strzęp zostaje (cofa się ledwie o 9%), więc obraz mieszka TYLKO w odsłanianej
   części ekranu — wtedy cover kadruje w okienku, a `fokus` dociąga do krawędzi obrazu,
   nie ekranu. Krawędź strzępu po cofnięciu: 34–41% szerokości. */
.odsuniecie-obraz{ position:absolute; inset:0; left:34%; margin:0; z-index:1; }
.odsuniecie-obraz img{
  width:100%; height:100%; object-fit:cover;
  transform:scale(calc(1.06 - var(--o) * .06));
}
.odsuniecie-obraz figcaption{
  position:absolute; left:0; right:0; bottom:max(2.2rem, env(safe-area-inset-bottom));
  text-align:center; padding:0 1.5rem;
  font-family:var(--proza); font-size:1rem; letter-spacing:.05em;
  color:var(--ink-hi); text-shadow:0 2px 22px rgba(0,0,0,.95);
  opacity:calc((var(--o) - .62) * 2.8);
}

.strzep-lewy, .strzep-prawy{
  position:absolute; inset:0; z-index:2;
  background:var(--bg);
  display:grid; align-content:center;
  pointer-events:none;
}
[data-fx] .strzep-lewy, [data-fx] .strzep-prawy{ will-change:auto; }
[data-fx].blisko .strzep-lewy, [data-fx].blisko .strzep-prawy{ will-change:transform; }
.strzep-lewy .akapit, .strzep-prawy .akapit{
  opacity:1 !important; transform:none !important; margin-bottom:1.3em;
}
.strzep-lewy .akapit:last-child, .strzep-prawy .akapit:last-child{ margin-bottom:0; }

.strzep-lewy{
  transform:translate3d(calc(var(--o) * -9%), 0, 0);
  clip-path:polygon(0% 0%, 46.40% 0.00%, 47.02% 1.25%, 47.23% 2.50%, 47.69% 3.75%, 47.83% 5.00%, 47.82% 6.25%, 47.84% 7.50%, 48.30% 8.75%, 48.05% 10.00%, 48.48% 11.25%, 48.67% 12.50%, 48.95% 13.75%, 48.90% 15.00%, 50.37% 16.25%, 49.84% 17.50%, 50.02% 18.75%, 49.39% 20.00%, 48.98% 21.25%, 48.39% 22.50%, 48.19% 23.75%, 45.99% 25.00%, 46.73% 26.25%, 47.04% 27.50%, 46.12% 28.75%, 46.00% 30.00%, 46.03% 31.25%, 46.51% 32.50%, 46.73% 33.75%, 46.97% 35.00%, 46.85% 36.25%, 46.88% 37.50%, 46.63% 38.75%, 46.30% 40.00%, 46.44% 41.25%, 47.00% 42.50%, 46.72% 43.75%, 45.25% 45.00%, 45.64% 46.25%, 45.82% 47.50%, 46.00% 48.75%, 46.51% 50.00%, 46.11% 51.25%, 46.49% 52.50%, 46.09% 53.75%, 46.34% 55.00%, 46.11% 56.25%, 46.37% 57.50%, 46.65% 58.75%, 46.85% 60.00%, 47.06% 61.25%, 46.93% 62.50%, 47.08% 63.75%, 47.05% 65.00%, 46.37% 66.25%, 46.28% 67.50%, 45.79% 68.75%, 47.87% 70.00%, 47.70% 71.25%, 47.78% 72.50%, 46.82% 73.75%, 46.41% 75.00%, 46.47% 76.25%, 46.86% 77.50%, 46.80% 78.75%, 46.06% 80.00%, 46.13% 81.25%, 46.24% 82.50%, 46.23% 83.75%, 46.94% 85.00%, 46.68% 86.25%, 45.96% 87.50%, 45.57% 88.75%, 45.35% 90.00%, 44.79% 91.25%, 44.02% 92.50%, 43.72% 93.75%, 43.90% 95.00%, 44.16% 96.25%, 43.10% 97.50%, 43.21% 98.75%, 46.40% 100.00%, 0% 100%);
}
.strzep-prawy{
  transform-origin:0% 100%;
  transform:translate3d(calc(var(--o) * 108%), calc(var(--o) * 4%), 0) rotate(calc(var(--o) * 7deg));
  clip-path:polygon(45.60% 0.00%, 46.22% 1.25%, 46.43% 2.50%, 46.89% 3.75%, 47.03% 5.00%, 47.02% 6.25%, 47.04% 7.50%, 47.50% 8.75%, 47.25% 10.00%, 47.68% 11.25%, 47.87% 12.50%, 48.15% 13.75%, 48.10% 15.00%, 49.57% 16.25%, 49.04% 17.50%, 49.22% 18.75%, 48.59% 20.00%, 48.18% 21.25%, 47.59% 22.50%, 47.39% 23.75%, 45.19% 25.00%, 45.93% 26.25%, 46.24% 27.50%, 45.32% 28.75%, 45.20% 30.00%, 45.23% 31.25%, 45.71% 32.50%, 45.93% 33.75%, 46.17% 35.00%, 46.05% 36.25%, 46.08% 37.50%, 45.83% 38.75%, 45.50% 40.00%, 45.64% 41.25%, 46.20% 42.50%, 45.92% 43.75%, 44.45% 45.00%, 44.84% 46.25%, 45.02% 47.50%, 45.20% 48.75%, 45.71% 50.00%, 45.31% 51.25%, 45.69% 52.50%, 45.29% 53.75%, 45.54% 55.00%, 45.31% 56.25%, 45.57% 57.50%, 45.85% 58.75%, 46.05% 60.00%, 46.26% 61.25%, 46.13% 62.50%, 46.28% 63.75%, 46.25% 65.00%, 45.57% 66.25%, 45.48% 67.50%, 44.99% 68.75%, 47.07% 70.00%, 46.90% 71.25%, 46.98% 72.50%, 46.02% 73.75%, 45.61% 75.00%, 45.67% 76.25%, 46.06% 77.50%, 46.00% 78.75%, 45.26% 80.00%, 45.33% 81.25%, 45.44% 82.50%, 45.43% 83.75%, 46.14% 85.00%, 45.88% 86.25%, 45.16% 87.50%, 44.77% 88.75%, 44.55% 90.00%, 43.99% 91.25%, 43.22% 92.50%, 42.92% 93.75%, 43.10% 95.00%, 43.36% 96.25%, 42.30% 97.50%, 42.41% 98.75%, 45.60% 100.00%, 100% 100%, 100% 0%);
}
/* światło na świeżo oderwanej krawędzi */
.strzep-prawy::after{
  content:""; position:absolute; top:-2%; bottom:-2%; left:0; width:40%;
  background:linear-gradient(90deg, rgba(236,227,210,.3), rgba(0,0,0,.5) 6px, transparent 30px);
  opacity:calc(var(--o) * 1.4); pointer-events:none;
}

@media (prefers-reduced-motion: reduce){
  .odsuniecie{ height:auto; }
  .odsuniecie-scena{ position:static; height:auto; }
  .strzep-prawy{ display:none; }
  .strzep-lewy{ position:static; clip-path:none; transform:none; padding:2.5rem 0; }
  .strzep-prawy::after{ display:none; }
  .odsuniecie-obraz{ position:static; aspect-ratio:2/3; max-height:80svh; }
  .odsuniecie-obraz img{ transform:none; }
  .odsuniecie-obraz figcaption{ opacity:1; }
}


/* ══════════════════════════════════════════════════════════════
   DROBIAZGI — małe rzeczy sunące z własną prędkością

   Nie kropki. Konkretne przedmioty pasujące do sceny: promień słońca
   kładący się na tekście, gałąź wchodząca z boku, ślady podków znikające
   w tyle. Każdy element ma WŁASNE tempo — gdy widać dwa naraz, jeden
   zawsze sunie szybciej od drugiego. Tylko transformy.
   ══════════════════════════════════════════════════════════════ */
.pyl{ position:fixed; inset:0; z-index:1; pointer-events:none; overflow:hidden; }
.pyl i{ position:absolute; display:block; opacity:0; transition:opacity 1.8s ease; will-change:transform; }
.pyl i.jest{ opacity:1; }

/* PROMIEŃ — ukośna smuga światła kładąca się na tekst. Dwie, różne tempa. */
.pyl .promien-a, .pyl .promien-b{
  top:-60%; height:220%; width:52%;
  background:linear-gradient(100deg, transparent, var(--promien, rgba(255,228,170,.10)) 45%, transparent 78%);
  transform-origin:50% 50%; filter:blur(2px);
}
.pyl .promien-a{ left:-14%; rotate:14deg; }
.pyl .promien-b{ left:44%;  rotate:11deg; opacity:0; }
.pyl .promien-b.jest{ opacity:.7; }

/* GAŁĄŹ — sylwetka wchodząca z boku, najwolniejsza warstwa */
.pyl .galaz{
  right:-6%; top:6%; width:min(46vw, 320px); aspect-ratio:1/1;
  background:var(--galaz-cien, rgba(0,0,0,.55));
  -webkit-mask-image:var(--galaz); mask-image:var(--galaz);
  -webkit-mask-size:contain; mask-size:contain;
  -webkit-mask-repeat:no-repeat; mask-repeat:no-repeat;
  --galaz:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 200'%3E%3Cpath d='M200 18 C160 30 130 46 104 70 C86 86 72 106 60 128 M104 70 C96 52 92 38 92 22 M104 70 C122 62 138 60 154 62 M78 100 C66 88 58 76 54 62 M78 100 C96 96 110 96 124 100 M60 128 C48 122 38 114 30 104 M60 128 C74 130 86 134 96 142' fill='none' stroke='black' stroke-width='7' stroke-linecap='round'/%3E%3Ccircle cx='96' cy='30' r='6'/%3E%3Ccircle cx='150' cy='58' r='6'/%3E%3Ccircle cx='40' cy='108' r='5'/%3E%3Ccircle cx='100' cy='146' r='5'/%3E%3C/svg%3E");
}

/* PODKOWY — ślad kopyt uciekający w tył, najszybsza warstwa */
.pyl .podkowy{
  left:2%; top:-30%; width:64px; height:160%;
  background-image:var(--podkowa);
  background-size:52px 190px; background-repeat:repeat-y;
  opacity:0;
  --podkowa:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 52 190'%3E%3Cg fill='none' stroke='%23d8c9a8' stroke-width='5' stroke-linecap='round'%3E%3Cpath d='M14 24 C6 34 6 50 14 58 M14 24 C22 34 22 50 14 58'/%3E%3Cpath d='M38 116 C30 126 30 142 38 150 M38 116 C46 126 46 142 38 150'/%3E%3C/g%3E%3C/svg%3E");
}
.pyl .podkowy.jest{ opacity:.22; }

/* co gra w której scenie — reszta po prostu nie wchodzi */
body[data-sekcja="1"]{ --promien:rgba(150,195,220,.09); --galaz-cien:rgba(0,0,0,.5); }
body[data-sekcja="2"]{ --promien:rgba(215,225,240,.10); --galaz-cien:rgba(0,0,0,.45); }
body[data-sekcja="3"]{ --promien:rgba(240,170,80,.12);  --galaz-cien:rgba(0,0,0,.6); }
body[data-sekcja="4"]{ --promien:rgba(255,225,150,.16); --galaz-cien:rgba(0,0,0,.5); }
body[data-sekcja="5"]{ --promien:rgba(200,190,225,.09); --galaz-cien:rgba(0,0,0,.5); }
body[data-sekcja="6"]{ --promien:rgba(190,220,235,.12); --galaz-cien:rgba(0,0,0,.55); }

/* gałąź i podkowy tylko tam, gdzie mają sens: droga, las, dolina */
.pyl .galaz, .pyl .podkowy{ display:none; }
body[data-sekcja="4"] .pyl .galaz, body[data-sekcja="6"] .pyl .galaz,

@media (prefers-reduced-motion: reduce){ .pyl{ display:none; } }

/* ══════════════════════════════════════════════════════════════
   6 · OPADNIĘCIE — kawałek strony odrywa się i OPADA W DÓŁ

   Jak odsunięcie, ale oś pozioma i tylko dolny strzęp puszcza —
   odrywa się wzdłuż poszarpanej linii i zjeżdża w dół razem ze scrollem,
   przyspieszając, jakby kartka wypadła z ręki. Górna część zostaje.
   ══════════════════════════════════════════════════════════════ */
.opadniecie{ position:relative; height:230svh; --p:0; --o:0; }
.opadniecie-scena{ position:sticky; top:0; height:100svh; overflow:hidden; background:var(--bg); }
/* Górny płat nie rusza się nigdy (krawędź 43–47% wysokości) — obraz zaczyna się pod nim,
   inaczej górna połowa każdego kadru (twarze!) jest zasłonięta na zawsze. */
.opadniecie-obraz{ position:absolute; inset:0; top:43%; margin:0; z-index:1; }
.opadniecie-obraz img{
  width:100%; height:100%; object-fit:cover;
  transform:scale(calc(1.06 - var(--o) * .06));
}
.opadniecie-obraz figcaption{
  position:absolute; left:0; right:0; bottom:max(2.2rem, env(safe-area-inset-bottom));
  text-align:center; padding:0 1.5rem;
  font-family:var(--proza); font-size:1rem; letter-spacing:.05em;
  color:var(--ink-hi); text-shadow:0 2px 22px rgba(0,0,0,.95);
  opacity:calc((var(--o) - .62) * 2.8);
}
.plat-gorny, .plat-dolny{
  position:absolute; inset:0; z-index:2;
  background:var(--bg); display:grid; align-content:center; pointer-events:none;
}
[data-fx] .plat-gorny, [data-fx] .plat-dolny{ will-change:auto; }
[data-fx].blisko .plat-gorny, [data-fx].blisko .plat-dolny{ will-change:transform; }
.plat-gorny .akapit, .plat-dolny .akapit{ opacity:1 !important; transform:none !important; margin-bottom:1.3em; }
.plat-gorny .akapit:last-child, .plat-dolny .akapit:last-child{ margin-bottom:0; }

.plat-gorny{ clip-path:polygon(0% 0%, 100% 0%, 100.00% 44.40%, 98.96% 45.39%, 97.92% 45.62%, 96.88% 45.31%, 95.83% 44.76%, 94.79% 46.32%, 93.75% 46.10%, 92.71% 45.81%, 91.67% 45.77%, 90.62% 45.58%, 89.58% 45.44%, 88.54% 45.72%, 87.50% 46.10%, 86.46% 45.77%, 85.42% 46.03%, 84.38% 46.03%, 83.33% 45.92%, 82.29% 45.58%, 81.25% 45.28%, 80.21% 45.09%, 79.17% 44.85%, 78.12% 44.17%, 77.08% 44.02%, 76.04% 44.28%, 75.00% 43.68%, 73.96% 43.66%, 72.92% 43.78%, 71.88% 43.54%, 70.83% 43.75%, 69.79% 44.09%, 68.75% 43.58%, 67.71% 44.52%, 66.67% 43.59%, 65.62% 43.12%, 64.58% 43.45%, 63.54% 43.55%, 62.50% 43.60%, 61.46% 43.40%, 60.42% 43.30%, 59.38% 43.38%, 58.33% 43.49%, 57.29% 43.04%, 56.25% 43.23%, 55.21% 43.74%, 54.17% 43.63%, 53.12% 43.55%, 52.08% 43.20%, 51.04% 43.19%, 50.00% 43.08%, 48.96% 43.61%, 47.92% 43.79%, 46.88% 43.68%, 45.83% 43.70%, 44.79% 43.87%, 43.75% 43.66%, 42.71% 43.32%, 41.67% 43.36%, 40.62% 43.87%, 39.58% 44.30%, 38.54% 44.29%, 37.50% 44.12%, 36.46% 44.19%, 35.42% 44.75%, 34.38% 45.45%, 33.33% 45.46%, 32.29% 45.46%, 31.25% 45.71%, 30.21% 45.60%, 29.17% 45.59%, 28.12% 45.37%, 27.08% 45.30%, 26.04% 45.50%, 25.00% 46.00%, 23.96% 45.83%, 22.92% 45.56%, 21.88% 45.76%, 20.83% 46.38%, 19.79% 46.11%, 18.75% 46.17%, 17.71% 45.99%, 16.67% 45.60%, 15.62% 45.65%, 14.58% 45.71%, 13.54% 46.02%, 12.50% 45.64%, 11.46% 45.74%, 10.42% 46.04%, 9.38% 46.09%, 8.33% 46.58%, 7.29% 46.20%, 6.25% 45.75%, 5.21% 45.61%, 4.17% 45.50%, 3.12% 44.95%, 2.08% 44.34%, 1.04% 44.33%, 0.00% 44.40%); }
.plat-dolny{
  transform-origin:100% 0%;
  /* kwadrat postępu = przyspieszanie, jak spadająca kartka */
  transform:translate3d(0, calc(var(--o) * var(--o) * 115%), 0) rotate(calc(var(--o) * -3deg));
  clip-path:polygon(0.00% 43.60%, 1.04% 43.53%, 2.08% 43.54%, 3.12% 44.15%, 4.17% 44.70%, 5.21% 44.81%, 6.25% 44.95%, 7.29% 45.40%, 8.33% 45.78%, 9.38% 45.29%, 10.42% 45.24%, 11.46% 44.94%, 12.50% 44.84%, 13.54% 45.22%, 14.58% 44.91%, 15.62% 44.85%, 16.67% 44.80%, 17.71% 45.19%, 18.75% 45.37%, 19.79% 45.31%, 20.83% 45.58%, 21.88% 44.96%, 22.92% 44.76%, 23.96% 45.03%, 25.00% 45.20%, 26.04% 44.70%, 27.08% 44.50%, 28.12% 44.57%, 29.17% 44.79%, 30.21% 44.80%, 31.25% 44.91%, 32.29% 44.66%, 33.33% 44.66%, 34.38% 44.65%, 35.42% 43.95%, 36.46% 43.39%, 37.50% 43.32%, 38.54% 43.49%, 39.58% 43.50%, 40.62% 43.07%, 41.67% 42.56%, 42.71% 42.52%, 43.75% 42.86%, 44.79% 43.07%, 45.83% 42.90%, 46.88% 42.88%, 47.92% 42.99%, 48.96% 42.81%, 50.00% 42.28%, 51.04% 42.39%, 52.08% 42.40%, 53.12% 42.75%, 54.17% 42.83%, 55.21% 42.94%, 56.25% 42.43%, 57.29% 42.24%, 58.33% 42.69%, 59.38% 42.58%, 60.42% 42.50%, 61.46% 42.60%, 62.50% 42.80%, 63.54% 42.75%, 64.58% 42.65%, 65.62% 42.32%, 66.67% 42.79%, 67.71% 43.72%, 68.75% 42.78%, 69.79% 43.29%, 70.83% 42.95%, 71.88% 42.74%, 72.92% 42.98%, 73.96% 42.86%, 75.00% 42.88%, 76.04% 43.48%, 77.08% 43.22%, 78.12% 43.37%, 79.17% 44.05%, 80.21% 44.29%, 81.25% 44.48%, 82.29% 44.78%, 83.33% 45.12%, 84.38% 45.23%, 85.42% 45.23%, 86.46% 44.97%, 87.50% 45.30%, 88.54% 44.92%, 89.58% 44.64%, 90.62% 44.78%, 91.67% 44.97%, 92.71% 45.01%, 93.75% 45.30%, 94.79% 45.52%, 95.83% 43.96%, 96.88% 44.51%, 97.92% 44.82%, 98.96% 44.59%, 100.00% 43.60%, 100% 100%, 0% 100%);
}
.plat-dolny::after{
  content:""; position:absolute; left:-2%; right:-2%; top:0; height:46%;
  background:linear-gradient(180deg, rgba(236,227,210,.3), rgba(0,0,0,.5) 6px, transparent 28px);
  opacity:calc(var(--o) * 1.4); pointer-events:none;
}

@media (prefers-reduced-motion: reduce){
  .opadniecie{ height:auto; }
  .opadniecie-scena{ position:static; height:auto; }
  .plat-dolny{ display:none; }
  .plat-gorny{ position:static; clip-path:none; transform:none; padding:2.5rem 0; }
  .plat-dolny::after{ display:none; }
  .opadniecie-obraz{ position:static; aspect-ratio:2/3; max-height:80svh; }
  .opadniecie-obraz img{ transform:none; }
  .opadniecie-obraz figcaption{ opacity:1; }
}


/* ══════════════════════════════════════════════════════════════
   7 · ZWIJANIE — strona pęka i dolny płat ZWIJA SIĘ w dół

   Jak obieranie jabłka: płat odchyla się wokół własnej górnej krawędzi
   w głąb ekranu, podkręcając się przy tym w bok. Perspektywa robi resztę.
   Po przekroczeniu pionu tył kartki znika, więc nie widać lustrzanego tekstu.
   ══════════════════════════════════════════════════════════════ */
.zwijanie{ position:relative; height:240svh; --p:0; --o:0; }
.zwijanie-scena{
  position:sticky; top:0; height:100svh; overflow:hidden; background:var(--bg);
  perspective:1100px; perspective-origin:50% 45%;
}
.zwijanie-obraz{ position:absolute; inset:0; margin:0; z-index:1; }
.zwijanie-obraz img{ width:100%; height:100%; object-fit:cover; transform:scale(calc(1.06 - var(--o) * .06)); }
.zwijanie-obraz figcaption{
  position:absolute; left:0; right:0; bottom:max(2.2rem, env(safe-area-inset-bottom));
  text-align:center; padding:0 1.5rem;
  font-family:var(--proza); font-size:1rem; letter-spacing:.05em;
  color:var(--ink-hi); text-shadow:0 2px 22px rgba(0,0,0,.95);
  opacity:calc((var(--o) - .62) * 2.8);
}
.zwoj-gorny, .zwoj-dolny{
  position:absolute; inset:0; z-index:2;
  background:var(--bg); display:grid; align-content:center; pointer-events:none;
}
[data-fx] .zwoj-gorny, [data-fx] .zwoj-dolny{ will-change:auto; }
[data-fx].blisko .zwoj-gorny, [data-fx].blisko .zwoj-dolny{ will-change:transform; }
.zwoj-gorny .akapit, .zwoj-dolny .akapit{ opacity:1 !important; transform:none !important; margin-bottom:1.3em; }
.zwoj-gorny .akapit:last-child, .zwoj-dolny .akapit:last-child{ margin-bottom:0; }

.zwoj-gorny{ clip-path:polygon(0% 0%, 100% 0%, 100.00% 44.40%, 98.96% 45.39%, 97.92% 45.62%, 96.88% 45.31%, 95.83% 44.76%, 94.79% 46.32%, 93.75% 46.10%, 92.71% 45.81%, 91.67% 45.77%, 90.62% 45.58%, 89.58% 45.44%, 88.54% 45.72%, 87.50% 46.10%, 86.46% 45.77%, 85.42% 46.03%, 84.38% 46.03%, 83.33% 45.92%, 82.29% 45.58%, 81.25% 45.28%, 80.21% 45.09%, 79.17% 44.85%, 78.12% 44.17%, 77.08% 44.02%, 76.04% 44.28%, 75.00% 43.68%, 73.96% 43.66%, 72.92% 43.78%, 71.88% 43.54%, 70.83% 43.75%, 69.79% 44.09%, 68.75% 43.58%, 67.71% 44.52%, 66.67% 43.59%, 65.62% 43.12%, 64.58% 43.45%, 63.54% 43.55%, 62.50% 43.60%, 61.46% 43.40%, 60.42% 43.30%, 59.38% 43.38%, 58.33% 43.49%, 57.29% 43.04%, 56.25% 43.23%, 55.21% 43.74%, 54.17% 43.63%, 53.12% 43.55%, 52.08% 43.20%, 51.04% 43.19%, 50.00% 43.08%, 48.96% 43.61%, 47.92% 43.79%, 46.88% 43.68%, 45.83% 43.70%, 44.79% 43.87%, 43.75% 43.66%, 42.71% 43.32%, 41.67% 43.36%, 40.62% 43.87%, 39.58% 44.30%, 38.54% 44.29%, 37.50% 44.12%, 36.46% 44.19%, 35.42% 44.75%, 34.38% 45.45%, 33.33% 45.46%, 32.29% 45.46%, 31.25% 45.71%, 30.21% 45.60%, 29.17% 45.59%, 28.12% 45.37%, 27.08% 45.30%, 26.04% 45.50%, 25.00% 46.00%, 23.96% 45.83%, 22.92% 45.56%, 21.88% 45.76%, 20.83% 46.38%, 19.79% 46.11%, 18.75% 46.17%, 17.71% 45.99%, 16.67% 45.60%, 15.62% 45.65%, 14.58% 45.71%, 13.54% 46.02%, 12.50% 45.64%, 11.46% 45.74%, 10.42% 46.04%, 9.38% 46.09%, 8.33% 46.58%, 7.29% 46.20%, 6.25% 45.75%, 5.21% 45.61%, 4.17% 45.50%, 3.12% 44.95%, 2.08% 44.34%, 1.04% 44.33%, 0.00% 44.40%); }
.zwoj-dolny{
  transform-origin:50% 0%;
  backface-visibility:hidden;
  transform:rotateX(calc(var(--o) * -108deg)) rotate(calc(var(--o) * 4deg));
  clip-path:polygon(0.00% 43.60%, 1.04% 43.53%, 2.08% 43.54%, 3.12% 44.15%, 4.17% 44.70%, 5.21% 44.81%, 6.25% 44.95%, 7.29% 45.40%, 8.33% 45.78%, 9.38% 45.29%, 10.42% 45.24%, 11.46% 44.94%, 12.50% 44.84%, 13.54% 45.22%, 14.58% 44.91%, 15.62% 44.85%, 16.67% 44.80%, 17.71% 45.19%, 18.75% 45.37%, 19.79% 45.31%, 20.83% 45.58%, 21.88% 44.96%, 22.92% 44.76%, 23.96% 45.03%, 25.00% 45.20%, 26.04% 44.70%, 27.08% 44.50%, 28.12% 44.57%, 29.17% 44.79%, 30.21% 44.80%, 31.25% 44.91%, 32.29% 44.66%, 33.33% 44.66%, 34.38% 44.65%, 35.42% 43.95%, 36.46% 43.39%, 37.50% 43.32%, 38.54% 43.49%, 39.58% 43.50%, 40.62% 43.07%, 41.67% 42.56%, 42.71% 42.52%, 43.75% 42.86%, 44.79% 43.07%, 45.83% 42.90%, 46.88% 42.88%, 47.92% 42.99%, 48.96% 42.81%, 50.00% 42.28%, 51.04% 42.39%, 52.08% 42.40%, 53.12% 42.75%, 54.17% 42.83%, 55.21% 42.94%, 56.25% 42.43%, 57.29% 42.24%, 58.33% 42.69%, 59.38% 42.58%, 60.42% 42.50%, 61.46% 42.60%, 62.50% 42.80%, 63.54% 42.75%, 64.58% 42.65%, 65.62% 42.32%, 66.67% 42.79%, 67.71% 43.72%, 68.75% 42.78%, 69.79% 43.29%, 70.83% 42.95%, 71.88% 42.74%, 72.92% 42.98%, 73.96% 42.86%, 75.00% 42.88%, 76.04% 43.48%, 77.08% 43.22%, 78.12% 43.37%, 79.17% 44.05%, 80.21% 44.29%, 81.25% 44.48%, 82.29% 44.78%, 83.33% 45.12%, 84.38% 45.23%, 85.42% 45.23%, 86.46% 44.97%, 87.50% 45.30%, 88.54% 44.92%, 89.58% 44.64%, 90.62% 44.78%, 91.67% 44.97%, 92.71% 45.01%, 93.75% 45.30%, 94.79% 45.52%, 95.83% 43.96%, 96.88% 44.51%, 97.92% 44.82%, 98.96% 44.59%, 100.00% 43.60%, 100% 100%, 0% 100%);
}
/* cień na zaginającej się krawędzi — sprzedaje zwijanie */
.zwoj-dolny::after{
  content:""; position:absolute; left:0; right:0; top:0; height:40%;
  background:linear-gradient(180deg, rgba(0,0,0,.7), transparent 60%);
  opacity:calc(var(--o) * 1.2); pointer-events:none;
}

@media (prefers-reduced-motion: reduce){
  .zwijanie{ height:auto; }
  .zwijanie-scena{ position:static; height:auto; perspective:none; }
  .zwoj-dolny{ display:none; }
  .zwoj-gorny{ position:static; clip-path:none; transform:none; padding:2.5rem 0; }
  .zwijanie-obraz{ position:static; aspect-ratio:2/3; max-height:80svh; }
  .zwijanie-obraz img{ transform:none; }
  .zwijanie-obraz figcaption{ opacity:1; }
}


/* ══════════════════════════════════════════════════════════════
   8 · ODSUNIĘCIE W LEWO — lustro odsunięcia

   Ten sam mechanizm, przeciwny kierunek: tym razem puszcza polygon(0% 0%, 46.40% 0.00%, 47.02% 1.25%, 47.23% 2.50%, 47.69% 3.75%, 47.83% 5.00%, 47.82% 6.25%, 47.84% 7.50%, 48.30% 8.75%, 48.05% 10.00%, 48.48% 11.25%, 48.67% 12.50%, 48.95% 13.75%, 48.90% 15.00%, 50.37% 16.25%, 49.84% 17.50%, 50.02% 18.75%, 49.39% 20.00%, 48.98% 21.25%, 48.39% 22.50%, 48.19% 23.75%, 45.99% 25.00%, 46.73% 26.25%, 47.04% 27.50%, 46.12% 28.75%, 46.00% 30.00%, 46.03% 31.25%, 46.51% 32.50%, 46.73% 33.75%, 46.97% 35.00%, 46.85% 36.25%, 46.88% 37.50%, 46.63% 38.75%, 46.30% 40.00%, 46.44% 41.25%, 47.00% 42.50%, 46.72% 43.75%, 45.25% 45.00%, 45.64% 46.25%, 45.82% 47.50%, 46.00% 48.75%, 46.51% 50.00%, 46.11% 51.25%, 46.49% 52.50%, 46.09% 53.75%, 46.34% 55.00%, 46.11% 56.25%, 46.37% 57.50%, 46.65% 58.75%, 46.85% 60.00%, 47.06% 61.25%, 46.93% 62.50%, 47.08% 63.75%, 47.05% 65.00%, 46.37% 66.25%, 46.28% 67.50%, 45.79% 68.75%, 47.87% 70.00%, 47.70% 71.25%, 47.78% 72.50%, 46.82% 73.75%, 46.41% 75.00%, 46.47% 76.25%, 46.86% 77.50%, 46.80% 78.75%, 46.06% 80.00%, 46.13% 81.25%, 46.24% 82.50%, 46.23% 83.75%, 46.94% 85.00%, 46.68% 86.25%, 45.96% 87.50%, 45.57% 88.75%, 45.35% 90.00%, 44.79% 91.25%, 44.02% 92.50%, 43.72% 93.75%, 43.90% 95.00%, 44.16% 96.25%, 43.10% 97.50%, 43.21% 98.75%, 46.40% 100.00%, 0% 100%) strzęp
   i odjeżdża za lewą krawędź, a prawy zostaje. Dzięki temu dwa odsunięcia
   w jednym rozdziale nie wyglądają jak powtórka.
   ══════════════════════════════════════════════════════════════ */
.odsuniecie-l{ position:relative; height:230svh; --p:0; --o:0; }
.odsuniecie-l-scena{ position:sticky; top:0; height:100svh; overflow:hidden; background:var(--bg); }
/* lustro: prawy strzęp zostaje, krawędź po odsunięciu 51–59% → obraz w lewych 59% */
.odsuniecie-l-obraz{ position:absolute; inset:0; right:41%; margin:0; z-index:1; }
.odsuniecie-l-obraz img{ width:100%; height:100%; object-fit:cover; transform:scale(calc(1.06 - var(--o) * .06)); }
.odsuniecie-l-obraz figcaption{
  position:absolute; left:0; right:0; bottom:max(2.2rem, env(safe-area-inset-bottom));
  text-align:center; padding:0 1.5rem;
  font-family:var(--proza); font-size:1rem; letter-spacing:.05em;
  color:var(--ink-hi); text-shadow:0 2px 22px rgba(0,0,0,.95);
  opacity:calc((var(--o) - .62) * 2.8);
}
.strzep-l-lewy, .strzep-l-prawy{
  position:absolute; inset:0; z-index:2;
  background:var(--bg); display:grid; align-content:center; pointer-events:none;
}
[data-fx] .strzep-l-lewy, [data-fx] .strzep-l-prawy{ will-change:auto; }
[data-fx].blisko .strzep-l-lewy, [data-fx].blisko .strzep-l-prawy{ will-change:transform; }
.strzep-l-lewy .akapit, .strzep-l-prawy .akapit{ opacity:1 !important; transform:none !important; margin-bottom:1.3em; }
.strzep-l-lewy .akapit:last-child, .strzep-l-prawy .akapit:last-child{ margin-bottom:0; }

.strzep-l-lewy{
  transform-origin:100% 100%;
  transform:translate3d(calc(var(--o) * -108%), calc(var(--o) * 4%), 0) rotate(calc(var(--o) * -7deg));
  clip-path:polygon(0% 0%, 46.40% 0.00%, 47.02% 1.25%, 47.23% 2.50%, 47.69% 3.75%, 47.83% 5.00%, 47.82% 6.25%, 47.84% 7.50%, 48.30% 8.75%, 48.05% 10.00%, 48.48% 11.25%, 48.67% 12.50%, 48.95% 13.75%, 48.90% 15.00%, 50.37% 16.25%, 49.84% 17.50%, 50.02% 18.75%, 49.39% 20.00%, 48.98% 21.25%, 48.39% 22.50%, 48.19% 23.75%, 45.99% 25.00%, 46.73% 26.25%, 47.04% 27.50%, 46.12% 28.75%, 46.00% 30.00%, 46.03% 31.25%, 46.51% 32.50%, 46.73% 33.75%, 46.97% 35.00%, 46.85% 36.25%, 46.88% 37.50%, 46.63% 38.75%, 46.30% 40.00%, 46.44% 41.25%, 47.00% 42.50%, 46.72% 43.75%, 45.25% 45.00%, 45.64% 46.25%, 45.82% 47.50%, 46.00% 48.75%, 46.51% 50.00%, 46.11% 51.25%, 46.49% 52.50%, 46.09% 53.75%, 46.34% 55.00%, 46.11% 56.25%, 46.37% 57.50%, 46.65% 58.75%, 46.85% 60.00%, 47.06% 61.25%, 46.93% 62.50%, 47.08% 63.75%, 47.05% 65.00%, 46.37% 66.25%, 46.28% 67.50%, 45.79% 68.75%, 47.87% 70.00%, 47.70% 71.25%, 47.78% 72.50%, 46.82% 73.75%, 46.41% 75.00%, 46.47% 76.25%, 46.86% 77.50%, 46.80% 78.75%, 46.06% 80.00%, 46.13% 81.25%, 46.24% 82.50%, 46.23% 83.75%, 46.94% 85.00%, 46.68% 86.25%, 45.96% 87.50%, 45.57% 88.75%, 45.35% 90.00%, 44.79% 91.25%, 44.02% 92.50%, 43.72% 93.75%, 43.90% 95.00%, 44.16% 96.25%, 43.10% 97.50%, 43.21% 98.75%, 46.40% 100.00%, 0% 100%);
}
.strzep-l-prawy{
  transform:translate3d(calc(var(--o) * 9%), 0, 0);
  clip-path:polygon(45.60% 0.00%, 46.22% 1.25%, 46.43% 2.50%, 46.89% 3.75%, 47.03% 5.00%, 47.02% 6.25%, 47.04% 7.50%, 47.50% 8.75%, 47.25% 10.00%, 47.68% 11.25%, 47.87% 12.50%, 48.15% 13.75%, 48.10% 15.00%, 49.57% 16.25%, 49.04% 17.50%, 49.22% 18.75%, 48.59% 20.00%, 48.18% 21.25%, 47.59% 22.50%, 47.39% 23.75%, 45.19% 25.00%, 45.93% 26.25%, 46.24% 27.50%, 45.32% 28.75%, 45.20% 30.00%, 45.23% 31.25%, 45.71% 32.50%, 45.93% 33.75%, 46.17% 35.00%, 46.05% 36.25%, 46.08% 37.50%, 45.83% 38.75%, 45.50% 40.00%, 45.64% 41.25%, 46.20% 42.50%, 45.92% 43.75%, 44.45% 45.00%, 44.84% 46.25%, 45.02% 47.50%, 45.20% 48.75%, 45.71% 50.00%, 45.31% 51.25%, 45.69% 52.50%, 45.29% 53.75%, 45.54% 55.00%, 45.31% 56.25%, 45.57% 57.50%, 45.85% 58.75%, 46.05% 60.00%, 46.26% 61.25%, 46.13% 62.50%, 46.28% 63.75%, 46.25% 65.00%, 45.57% 66.25%, 45.48% 67.50%, 44.99% 68.75%, 47.07% 70.00%, 46.90% 71.25%, 46.98% 72.50%, 46.02% 73.75%, 45.61% 75.00%, 45.67% 76.25%, 46.06% 77.50%, 46.00% 78.75%, 45.26% 80.00%, 45.33% 81.25%, 45.44% 82.50%, 45.43% 83.75%, 46.14% 85.00%, 45.88% 86.25%, 45.16% 87.50%, 44.77% 88.75%, 44.55% 90.00%, 43.99% 91.25%, 43.22% 92.50%, 42.92% 93.75%, 43.10% 95.00%, 43.36% 96.25%, 42.30% 97.50%, 42.41% 98.75%, 45.60% 100.00%, 100% 100%, 100% 0%);
}
.strzep-l-lewy::after{
  content:""; position:absolute; top:-2%; bottom:-2%; right:0; width:40%;
  background:linear-gradient(270deg, rgba(236,227,210,.3), rgba(0,0,0,.5) 6px, transparent 30px);
  opacity:calc(var(--o) * 1.4); pointer-events:none;
}

@media (prefers-reduced-motion: reduce){
  .odsuniecie-l{ height:auto; }
  .odsuniecie-l-scena{ position:static; height:auto; }
  .strzep-l-lewy{ display:none; }
  .strzep-l-prawy{ position:static; clip-path:none; transform:none; padding:2.5rem 0; }
  .odsuniecie-l-obraz{ position:static; aspect-ratio:2/3; max-height:80svh; }
  .odsuniecie-l-obraz img{ transform:none; }
  .odsuniecie-l-obraz figcaption{ opacity:1; }
}


/* ══════════════════════════════════════════════════════════════
   9 · PODERWANIE — górny płat odrywa się i ucieka W GÓRĘ

   Lustro opadnięcia. Tam kartka spadała pod własnym ciężarem,
   tu zostaje poderwana i wyrywa się do góry, przeciwnie do scrolla —
   stąd wrażenie, że coś zabiera ją siłą.
   ══════════════════════════════════════════════════════════════ */
.poderwanie{ position:relative; height:230svh; --p:0; --o:0; }
.poderwanie-scena{ position:sticky; top:0; height:100svh; overflow:hidden; background:var(--bg); }
/* Kadr NIE jest na cały ekran, tylko na ten pas, który rozdarcie odsłania.
   Odrywa się górna połowa kartki, więc widać wyłącznie górne ~44% ekranu —
   obraz na pełną wysokość pokazywałby w tym pasie sam sufit. Pas plus
   object-position ustawia w nim to, co ma być widać: człowieka, nie żyrandol. */
.poderwanie-obraz{ position:absolute; left:0; right:0; top:0; height:47svh; margin:0; z-index:1; }
.poderwanie-obraz img{
  width:100%; height:100%; object-fit:cover; object-position:center 55%;
  transform:scale(calc(1.06 - var(--o) * .06));
}
.poderwanie-obraz figcaption{
  position:absolute; left:0; right:0; top:max(4.6rem, env(safe-area-inset-top));
  text-align:center; padding:0 1.5rem;
  font-family:var(--proza); font-size:1rem; letter-spacing:.05em;
  color:var(--ink-hi); text-shadow:0 2px 22px rgba(0,0,0,.95);
  opacity:calc((var(--o) - .62) * 2.8);
}
.pod-gorny, .pod-dolny{
  position:absolute; inset:0; z-index:2;
  background:var(--bg); display:grid; align-content:center; pointer-events:none;
}
[data-fx] .pod-gorny, [data-fx] .pod-dolny{ will-change:auto; }
[data-fx].blisko .pod-gorny, [data-fx].blisko .pod-dolny{ will-change:transform; }
.pod-gorny .akapit, .pod-dolny .akapit{ opacity:1 !important; transform:none !important; margin-bottom:1.3em; }
.pod-gorny .akapit:last-child, .pod-dolny .akapit:last-child{ margin-bottom:0; }

.pod-dolny{ clip-path:polygon(0.00% 43.60%, 1.04% 43.53%, 2.08% 43.54%, 3.12% 44.15%, 4.17% 44.70%, 5.21% 44.81%, 6.25% 44.95%, 7.29% 45.40%, 8.33% 45.78%, 9.38% 45.29%, 10.42% 45.24%, 11.46% 44.94%, 12.50% 44.84%, 13.54% 45.22%, 14.58% 44.91%, 15.62% 44.85%, 16.67% 44.80%, 17.71% 45.19%, 18.75% 45.37%, 19.79% 45.31%, 20.83% 45.58%, 21.88% 44.96%, 22.92% 44.76%, 23.96% 45.03%, 25.00% 45.20%, 26.04% 44.70%, 27.08% 44.50%, 28.12% 44.57%, 29.17% 44.79%, 30.21% 44.80%, 31.25% 44.91%, 32.29% 44.66%, 33.33% 44.66%, 34.38% 44.65%, 35.42% 43.95%, 36.46% 43.39%, 37.50% 43.32%, 38.54% 43.49%, 39.58% 43.50%, 40.62% 43.07%, 41.67% 42.56%, 42.71% 42.52%, 43.75% 42.86%, 44.79% 43.07%, 45.83% 42.90%, 46.88% 42.88%, 47.92% 42.99%, 48.96% 42.81%, 50.00% 42.28%, 51.04% 42.39%, 52.08% 42.40%, 53.12% 42.75%, 54.17% 42.83%, 55.21% 42.94%, 56.25% 42.43%, 57.29% 42.24%, 58.33% 42.69%, 59.38% 42.58%, 60.42% 42.50%, 61.46% 42.60%, 62.50% 42.80%, 63.54% 42.75%, 64.58% 42.65%, 65.62% 42.32%, 66.67% 42.79%, 67.71% 43.72%, 68.75% 42.78%, 69.79% 43.29%, 70.83% 42.95%, 71.88% 42.74%, 72.92% 42.98%, 73.96% 42.86%, 75.00% 42.88%, 76.04% 43.48%, 77.08% 43.22%, 78.12% 43.37%, 79.17% 44.05%, 80.21% 44.29%, 81.25% 44.48%, 82.29% 44.78%, 83.33% 45.12%, 84.38% 45.23%, 85.42% 45.23%, 86.46% 44.97%, 87.50% 45.30%, 88.54% 44.92%, 89.58% 44.64%, 90.62% 44.78%, 91.67% 44.97%, 92.71% 45.01%, 93.75% 45.30%, 94.79% 45.52%, 95.83% 43.96%, 96.88% 44.51%, 97.92% 44.82%, 98.96% 44.59%, 100.00% 43.60%, 100% 100%, 0% 100%); }
.pod-gorny{
  transform-origin:0% 100%;
  transform:translate3d(0, calc(var(--o) * var(--o) * -115%), 0) rotate(calc(var(--o) * 3deg));
  clip-path:polygon(0% 0%, 100% 0%, 100.00% 44.40%, 98.96% 45.39%, 97.92% 45.62%, 96.88% 45.31%, 95.83% 44.76%, 94.79% 46.32%, 93.75% 46.10%, 92.71% 45.81%, 91.67% 45.77%, 90.62% 45.58%, 89.58% 45.44%, 88.54% 45.72%, 87.50% 46.10%, 86.46% 45.77%, 85.42% 46.03%, 84.38% 46.03%, 83.33% 45.92%, 82.29% 45.58%, 81.25% 45.28%, 80.21% 45.09%, 79.17% 44.85%, 78.12% 44.17%, 77.08% 44.02%, 76.04% 44.28%, 75.00% 43.68%, 73.96% 43.66%, 72.92% 43.78%, 71.88% 43.54%, 70.83% 43.75%, 69.79% 44.09%, 68.75% 43.58%, 67.71% 44.52%, 66.67% 43.59%, 65.62% 43.12%, 64.58% 43.45%, 63.54% 43.55%, 62.50% 43.60%, 61.46% 43.40%, 60.42% 43.30%, 59.38% 43.38%, 58.33% 43.49%, 57.29% 43.04%, 56.25% 43.23%, 55.21% 43.74%, 54.17% 43.63%, 53.12% 43.55%, 52.08% 43.20%, 51.04% 43.19%, 50.00% 43.08%, 48.96% 43.61%, 47.92% 43.79%, 46.88% 43.68%, 45.83% 43.70%, 44.79% 43.87%, 43.75% 43.66%, 42.71% 43.32%, 41.67% 43.36%, 40.62% 43.87%, 39.58% 44.30%, 38.54% 44.29%, 37.50% 44.12%, 36.46% 44.19%, 35.42% 44.75%, 34.38% 45.45%, 33.33% 45.46%, 32.29% 45.46%, 31.25% 45.71%, 30.21% 45.60%, 29.17% 45.59%, 28.12% 45.37%, 27.08% 45.30%, 26.04% 45.50%, 25.00% 46.00%, 23.96% 45.83%, 22.92% 45.56%, 21.88% 45.76%, 20.83% 46.38%, 19.79% 46.11%, 18.75% 46.17%, 17.71% 45.99%, 16.67% 45.60%, 15.62% 45.65%, 14.58% 45.71%, 13.54% 46.02%, 12.50% 45.64%, 11.46% 45.74%, 10.42% 46.04%, 9.38% 46.09%, 8.33% 46.58%, 7.29% 46.20%, 6.25% 45.75%, 5.21% 45.61%, 4.17% 45.50%, 3.12% 44.95%, 2.08% 44.34%, 1.04% 44.33%, 0.00% 44.40%);
}
.pod-gorny::after{
  content:""; position:absolute; left:-2%; right:-2%; bottom:0; height:46%;
  background:linear-gradient(0deg, rgba(236,227,210,.3), rgba(0,0,0,.5) 6px, transparent 28px);
  opacity:calc(var(--o) * 1.4); pointer-events:none;
}

@media (prefers-reduced-motion: reduce){
  .poderwanie{ height:auto; }
  .poderwanie-scena{ position:static; height:auto; }
  .pod-gorny{ display:none; }
  .pod-dolny{ position:static; clip-path:none; transform:none; padding:2.5rem 0; }
  .poderwanie-obraz{ position:static; height:auto; aspect-ratio:2/3; max-height:80svh; }
  .poderwanie-obraz img{ transform:none; }
  .poderwanie-obraz figcaption{ opacity:1; }
}


/* ── Ruchome kadry w scenach ─────────────────────────────────────
   Film leży NAD statycznym obrazem tej samej sceny i pokazuje się
   dopiero po `canplay` — do tego momentu (i wszędzie, gdzie wideo
   nie może grać) czytelnik widzi zwykłe zdjęcie. figcaption zostaje
   na wierzchu, bo jest ostatnie w DOM. */
.scena-film{
  position:absolute; inset:0; width:100%; height:100%; object-fit:cover;
  opacity:0; transition:opacity 1.1s ease; pointer-events:none;
}
.scena-film.gra{ opacity:1; }
@media (prefers-reduced-motion: reduce){ .scena-film{ display:none; } }



/* ══════════════════════════════════════════════════════════════
   DWIE POPRAWKI, KTÓRE ZOSTAJĄ

   Gaszenie tekstu i kartek zostało WYCOFANE — autor: „animacje są
   słabo, są gradientem… ma być jak w rozdziale 1 wcześniej". Miał
   rację: przenikanie zamieniło rozdarcie papieru w miękki crossfade
   i zabrało efektom cały charakter. Rwące się kartki wróciły do
   pierwotnej postaci.

   Powód, dla którego je w ogóle wprowadziłem — tekst przecięty
   w połowie linijki — miał zupełnie inne źródło: kartka brała więcej
   prozy, niż mieści ekran. To naprawia build.py, patrz blok o skali
   niżej. Objaw leczyłem w złym miejscu.
   ══════════════════════════════════════════════════════════════ */
/* ── 2 · TŁO WARSTW MA NADĄŻAĆ ZA TŁEM STRONY ────────────────
   Tryby (wizja, trumna, Ida, dama, żar) przestawiają --bg na <body>.
   Body ma na to transition 1,1 s — ale sceny i płaty, choć biorą
   kolor z tej samej zmiennej, zmieniały go NATYCHMIAST. Przez ponad
   sekundę połowa ekranu miała nowy kolor, a połowa stary, z ostrą
   poziomą krawędzią między nimi. Stąd „tło nagle i brzydko zmienia
   kolor i wygląda to jak błąd" — bo to był błąd.

   Ta sama krzywa i ten sam czas co w body.czytnik. */
.rozdarcie-scena, .mgla-scena, .okno-scena, .witraz-scena,
.odsuniecie-scena, .odsuniecie-l-scena, .opadniecie-scena,
.zwijanie-scena, .poderwanie-scena,
.kartka-gora, .kartka-dol, .plat-gorny, .plat-dolny,
.pod-gorny, .pod-dolny, .zwoj-gorny, .zwoj-dolny,
.strzep-lewy, .strzep-prawy, .strzep-l-lewy, .strzep-l-prawy{
  transition:background-color 1.1s cubic-bezier(.4,0,.2,1);
}

/* Bez ruchu nie ma czego gasić — tam kartka po prostu stoi. */
@media (prefers-reduced-motion: reduce){
  .kartka-gora .akapit,  .kartka-dol .akapit,
  .plat-gorny .akapit,   .plat-dolny .akapit,
  .pod-gorny .akapit,    .pod-dolny .akapit,
  .zwoj-gorny .akapit,   .zwoj-dolny .akapit,
  .strzep-lewy .akapit,  .strzep-prawy .akapit,
  .strzep-l-lewy .akapit, .strzep-l-prawy .akapit{
    opacity:1 !important;
  }
}

/* ── 4 · KARTKA, KTÓRA NIE MIEŚCI SIĘ NA EKRANIE ─────────────
   Scena ma sztywne 100svh i `overflow:hidden`, więc proza dłuższa niż
   ekran po prostu znikała pod krawędzią — a te akapity są usunięte
   z normalnego przepływu i żyją WYŁĄCZNIE na kartce. Czytelnik tracił
   je bezpowrotnie: przy `96-uczta` było to 1694 znaki wpuszczone
   w kadr, który mieści siedemset.

   Build liczy teraz budżet uczciwie i tnie kartkę na granicy akapitu.
   Kiedy jednak pojedynczy akapit sam przekracza ekran, nie ma czego
   odcinać — wtedy dostaje mniejszy stopień pisma i mieści się w całości.
   `--skala` wylicza build; podłoga to 0,66. */
.kartka-scisk{
  font-size:calc(var(--skala, 1) * 1em);
  line-height:1.68;
}