/* ============================================================
   KAKAWA — scroll-film: warstwa filmu, oprawa tekstowa, finał produktowy
   Orion · 25.07.2026 · dyrektywy Roberta: kamera schodzi w dół,
   treści wjeżdżają z dołu, lektor osobno, 3 warianty na finał.
   ============================================================ */

/* ---------- SCENA FILMU (pinned canvas) ---------- */
.film-scena{position:relative;height:100vh;width:100%;overflow:hidden;background:var(--surface-0)}
.film-canvas{position:absolute;inset:0;width:100%;height:100%;display:block}
.film-scena::after{ /* winieta + wygaszenie dołu pod tekst */
  content:"";position:absolute;inset:0;pointer-events:none;
  background:
    radial-gradient(120% 85% at 50% 45%, transparent 55%, rgba(20,16,12,.55) 100%),
    linear-gradient(to top, rgba(20,16,12,.92) 0%, rgba(20,16,12,.45) 22%, transparent 48%);
}

/* ---------- PASEK PRZEWIJANIA: schowany (dyrektywa 25.07) ---------- */
html{scrollbar-width:none;-ms-overflow-style:none}
html::-webkit-scrollbar,body::-webkit-scrollbar{width:0;height:0;display:none}

/* ---------- OŚ OPOWIEŚCI („żyła kakao") — lewa krawędź ---------- */
.zyla{position:fixed;left:clamp(16px,2.6vw,40px);top:13vh;bottom:13vh;width:2px;z-index:40;
  background:linear-gradient(to bottom,transparent,var(--line) 6%,var(--line) 94%,transparent);
  transition:opacity 400ms var(--ease-out)}
.zyla.schowana{opacity:0;pointer-events:none} /* oś znika razem z odtwarzaczem — po filmie już niepotrzebna */
.zyla__wypelnienie{position:absolute;left:-1px;top:0;width:4px;height:0%;border-radius:2px;
  background:linear-gradient(to bottom,rgba(227,154,85,.25),var(--accent) 32%,var(--accent-hi));
  box-shadow:0 0 16px rgba(201,123,61,.5)}
/* czoło osi: kropla kakao z ogonem i pulsem */
.zyla__kropla{position:absolute;left:-5px;width:12px;height:12px;border-radius:50% 50% 55% 45%;
  background:radial-gradient(60% 60% at 40% 35%,#F6C88A,var(--accent-hi) 55%,var(--accent));
  box-shadow:0 0 22px rgba(227,154,85,.9),0 0 46px rgba(201,123,61,.35);
  transform:translateY(-50%);opacity:.95}
.zyla__kropla::after{content:"";position:absolute;left:4px;bottom:10px;width:4px;height:26px;
  border-radius:2px;background:linear-gradient(to top,rgba(227,154,85,.55),transparent);opacity:.85}
.zyla__puls{position:absolute;left:-11px;width:24px;height:24px;border-radius:50%;
  border:1px solid rgba(227,154,85,.55);transform:translateY(-50%) scale(.6);opacity:0;pointer-events:none}
.zyla__puls.bije{animation:pulsOsi 900ms var(--ease-out) 1}
@keyframes pulsOsi{0%{opacity:.9;transform:translateY(-50%) scale(.5)}100%{opacity:0;transform:translateY(-50%) scale(2.1)}}

/* węzły rozdziałów na osi + etykiety */
.zyla__wezly{position:absolute;inset:0}
.zyla__wezel{position:absolute;left:-3px;width:8px;height:8px;border-radius:50%;
  background:var(--surface-0);border:1px solid var(--line);transform:translateY(-50%);
  transition:background 400ms var(--ease-out),border-color 400ms var(--ease-out),box-shadow 400ms var(--ease-out)}
.zyla__wezel.minięty{background:var(--accent);border-color:var(--accent-hi);box-shadow:0 0 12px rgba(201,123,61,.6)}
.zyla__wezel span{position:absolute;left:18px;top:50%;transform:translateY(-50%) translateX(-6px);
  font-size:10px;letter-spacing:.24em;text-transform:uppercase;color:var(--accent);white-space:nowrap;
  opacity:0;transition:opacity 600ms var(--ease-out),transform 600ms var(--ease-out)}
.zyla:hover .zyla__wezel span{opacity:.8;transform:translateY(-50%)}
/* podpis rozdziału pokazuje się w chwili minięcia węzła i po chwili gaśnie */
.zyla__wezel.pokaz span{opacity:1;transform:translateY(-50%)}
/* iskry spływające osią w trakcie filmu */
.zyla__iskra{position:absolute;left:-1px;width:4px;height:4px;border-radius:50%;
  background:var(--accent-hi);box-shadow:0 0 10px rgba(227,154,85,.8);opacity:0;pointer-events:none}
@media (max-width:760px){.zyla__wezel span{display:none}}

/* ---------- ZNACZNIK ROZDZIAŁU (górna-prawa) ---------- */
.rozdzial{position:fixed;top:clamp(18px,3.5vh,34px);right:clamp(18px,3vw,44px);z-index:45;text-align:right;
  opacity:0;transition:opacity var(--t-standard) var(--ease-out)}
.rozdzial.jest{opacity:1}
.rozdzial__nr{font-size:var(--fs-0);letter-spacing:.28em;text-transform:uppercase;color:var(--accent)}
.rozdzial__nazwa{font-family:var(--font-display);font-size:var(--fs-2);color:var(--text-hi);margin-top:2px}
/* ruchome podkreślenie tytułu rozdziału */
.rozdzial__linia{display:block;margin-top:8px;width:min(28vw,240px);height:8px;margin-left:auto;overflow:visible}
.rozdzial__tor{stroke:var(--line);stroke-width:1;fill:none}
.rozdzial__rysowana{stroke:var(--accent);stroke-width:2;fill:none;stroke-linecap:round;
  stroke-dasharray:236;stroke-dashoffset:236}
.rozdzial.jest .rozdzial__rysowana{animation:rysujLinie 900ms var(--ease-out) forwards}
.rozdzial__iskra{fill:var(--accent-hi);opacity:0;filter:drop-shadow(0 0 6px rgba(227,154,85,.9))}
.rozdzial.jest .rozdzial__iskra{animation:biegIskry 2600ms cubic-bezier(.45,.05,.55,.95) 900ms infinite}
@keyframes rysujLinie{to{stroke-dashoffset:0}}
@keyframes biegIskry{
  0%{opacity:0;transform:translateX(6px)}
  12%{opacity:1}
  88%{opacity:1}
  100%{opacity:0;transform:translateX(234px)}
}

/* ---------- PODPIS NARRACYJNY (dolna-lewa, synchro z lektorem) ---------- */
.podpis{position:fixed;left:clamp(34px,6vw,96px);bottom:clamp(56px,12vh,120px);z-index:45;
  max-width:min(42ch,40vw);font-family:var(--font-display);font-style:italic;
  font-size:clamp(19px,2vw,27px);line-height:1.35;color:rgba(243,235,221,.92);
  text-shadow:0 2px 24px rgba(20,16,12,.85),0 1px 3px rgba(20,16,12,.9);
  opacity:0;transform:translateY(14px);transition:opacity 420ms var(--ease-out),transform 420ms var(--ease-out)}
.podpis.jest{opacity:1;transform:none}

/* ---------- HERO ---------- */
.hero{position:fixed;inset:0;z-index:30;display:grid;place-items:center;pointer-events:none;
  transition:opacity 500ms var(--ease-out)}
.hero__marka{font-family:var(--font-display);font-size:clamp(46px,9vw,124px);letter-spacing:.16em;
  color:var(--text-hi);text-shadow:0 6px 60px rgba(20,16,12,.7)}
.hero__pod{margin-top:var(--s-2);text-align:center;font-size:var(--fs-0);letter-spacing:.34em;
  text-transform:uppercase;color:var(--accent)}
/* ---------- PRZYCISK „OPOWIEŚĆ" (start filmu + dźwięku) ---------- */
.opowiesc{position:fixed;top:clamp(18px,3.5vh,34px);left:clamp(34px,6vw,96px);z-index:60;
  display:inline-flex;align-items:center;gap:11px;padding:11px 20px;border-radius:var(--r-pill);
  border:1px solid var(--accent);background:rgba(29,23,18,.6);backdrop-filter:blur(10px);
  color:var(--text-hi);font-size:var(--fs-0);letter-spacing:.2em;text-transform:uppercase;cursor:pointer;
  transition:border-color var(--t-standard),background var(--t-standard),transform var(--t-standard)}
.opowiesc:hover{background:rgba(201,123,61,.18);transform:translateY(-2px)}
/* Wygaszanie razem z oprawą filmu (29.07, dyrektywa Roberta) — ten sam czas
   i ta sama krzywa co panel kina, żeby cała oprawa schodziła jednym ruchem,
   a nie trzema. pointer-events zdjęte, bo niewidoczny przycisk nadal łapałby
   kliknięcia w rogu nad kolejnymi sekcjami. */
.opowiesc{transition:opacity 400ms var(--ease-out),transform 400ms var(--ease-out)}
.opowiesc.schowany{opacity:0;transform:translateY(-14px);pointer-events:none}
/* pierścień zapraszający ma milczeć, kiedy przycisku nie ma */
.opowiesc.schowany::after{animation:none;opacity:0}
.opowiesc__ikona{width:0;height:0;border-left:10px solid var(--accent-hi);
  border-top:6px solid transparent;border-bottom:6px solid transparent;transition:all 160ms var(--ease-out)}
.opowiesc.gra .opowiesc__ikona{width:9px;height:11px;border:0;
  background:linear-gradient(to right,var(--accent-hi) 0 3px,transparent 3px 6px,var(--accent-hi) 6px 9px)}
.opowiesc::after{content:"";position:absolute;inset:-1px;border-radius:var(--r-pill);
  border:1px solid var(--accent-hi);opacity:0;pointer-events:none}
.opowiesc:not(.gra)::after{animation:zapraszaj 3.2s ease-out infinite}
@keyframes zapraszaj{0%{opacity:.7;transform:scale(1)}70%,100%{opacity:0;transform:scale(1.12)}}

/* ---------- TREŚĆ PO FILMIE (wjazd z dołu) ---------- */
.po-filmie{position:relative;z-index:20;background:var(--surface-0)}
.pas{padding:clamp(80px,14vh,180px) clamp(28px,7vw,140px)}
.pas--jasny{background:var(--surface-light);color:var(--ink-on-light)}
.pas--jasny .oko{color:var(--accent)}
.pas__siatka{display:grid;grid-template-columns:repeat(12,1fr);gap:var(--s-4);align-items:start}
.oko{font-size:var(--fs-0);letter-spacing:.3em;text-transform:uppercase;color:var(--accent)}
.pas h2{font-size:clamp(30px,4.6vw,57px);margin-top:var(--s-2)}
.pas p{margin-top:var(--s-3);color:var(--text-mid);max-width:62ch}
.pas--jasny p{color:var(--ink-mid-light)}
.kol-6{grid-column:span 6}.kol-5{grid-column:span 5}.kol-7{grid-column:span 7}.kol-12{grid-column:span 12}
.pas__siatka > .kol-5 + .kol-7,
.pas__siatka > .kol-7 + .kol-5{padding-left:clamp(0px,2vw,40px)}
.pas p{max-width:64ch}
.przepis{margin-top:var(--s-4);max-width:52ch}
@media (max-width:900px){.kol-6,.kol-5,.kol-7{grid-column:span 12}.pas__siatka > * + *{padding-left:0}}

/* wjazd z dołu — stan startowy (GSAP zdejmuje) */
.wjazd{opacity:0;transform:translateY(56px)}

/* ---------- FINAŁ: TRZY WARIANTY ---------- */
.finał{padding:clamp(90px,16vh,200px) clamp(28px,7vw,140px) clamp(70px,12vh,150px);
  background:linear-gradient(to bottom,var(--surface-0),var(--surface-1))}
.finał__naglowek{text-align:center;margin-bottom:clamp(46px,7vh,90px)}
.finał__naglowek h2{font-size:clamp(30px,4.4vw,54px);margin-top:var(--s-2)}
.trio{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(18px,2.6vw,42px);align-items:end;max-width:1440px;margin:0 auto}
@media (max-width:980px){.trio{grid-template-columns:1fr;gap:var(--s-5)}}

/* ── Wskazanie produktu z innej strony (29.07) ──
   Odnośniki z Odmian („Zobacz produkt", wiersz „Wydanie") prowadzą do KONKRETNEJ
   karty, nie do sekcji. Sam skok kotwicą zostawiał człowieka przed trzema
   kartami bez informacji, po którą przyszedł — więc wskazana karta zapala się
   na trzy sekundy i gaśnie. Podświetlenie jest czasowe celowo: ma pokazać cel,
   a nie zostać trwałym stanem, którego nikt nie prosił.
   scroll-margin-top odsuwa kartę spod przyklejonej belki. */
.slot{scroll-margin-top:120px}
.slot.wskazany{border-color:var(--accent);
  box-shadow:0 0 0 1px var(--accent),0 18px 60px -22px rgba(201,123,61,.75);
  animation:wskazanieSlotu 3s var(--ease-out) 1}
@keyframes wskazanieSlotu{
  0%   {box-shadow:0 0 0 1px var(--accent),0 0 0 0 rgba(201,123,61,.55)}
  22%  {box-shadow:0 0 0 1px var(--accent),0 0 0 12px rgba(201,123,61,0)}
  100% {box-shadow:0 0 0 1px var(--accent),0 18px 60px -22px rgba(201,123,61,.75)}
}
@media (prefers-reduced-motion:reduce){ .slot.wskazany{animation:none} }

.slot{position:relative;border:1px solid var(--line);border-radius:var(--r-m);padding:var(--s-3);
  background:rgba(29,23,18,.45);transition:border-color var(--t-standard),transform var(--t-standard),background var(--t-standard)}
.slot:hover{border-color:var(--accent);transform:translateY(-6px);background:rgba(42,33,26,.6)}
.slot--hero{order:0}
@media (min-width:981px){.slot--hero{order:0;transform:translateY(-22px)}.slot--hero:hover{transform:translateY(-30px)}}
.slot__ramka{position:relative;aspect-ratio:1/1;border-radius:var(--r-s);overflow:hidden;background:#0d0a07}
.slot__ramka img{width:100%;height:100%;object-fit:cover}
.slot__poswiata{position:absolute;inset:0;pointer-events:none;
  background:radial-gradient(60% 55% at 50% 45%,rgba(201,123,61,.16),transparent 70%);opacity:0;transition:opacity 600ms var(--ease-out)}
.slot.gotowy .slot__poswiata{opacity:1}
.slot__pusty{position:absolute;inset:0;display:grid;place-items:center;color:var(--text-low);
  font-size:var(--fs-0);letter-spacing:.24em;text-transform:uppercase;
  border:1px dashed var(--line);border-radius:var(--r-s);transition:opacity 500ms var(--ease-out)}
.slot.gotowy .slot__pusty{opacity:0}
.slot__nazwa{font-family:var(--font-display);font-size:var(--fs-3);margin-top:var(--s-3)}
.slot__nuta{color:var(--text-mid);font-size:var(--fs-1);margin-top:6px;min-height:3.1em}
.slot__stopka{display:flex;justify-content:space-between;align-items:baseline;margin-top:var(--s-3);
  padding-top:var(--s-2);border-top:1px solid var(--line)}
.slot__cena{font-size:var(--fs-2);color:var(--text-hi)}
.slot__waga{font-size:var(--fs-0);color:var(--text-low);letter-spacing:.14em}
.slot__znacznik{position:absolute;top:calc(var(--s-3) + 10px);left:calc(var(--s-3) + 10px);z-index:2;
  padding:5px 11px;border-radius:var(--r-pill);background:var(--accent);color:var(--accent-ink);
  font-size:12px;letter-spacing:.16em;text-transform:uppercase}

/* ---------- WYŁANIANIE PRODUKTU Z FILMU (zamiast przelotu kadru) ---------- */
.slot--hero .slot__ramka{background:radial-gradient(60% 60% at 50% 50%,#171009,#0b0806 70%)}
.slot--hero #oro{
  opacity:0;transform:scale(1.14);filter:blur(16px) brightness(.45) saturate(.7);
  /* ── Rozmycia NIE animujemy (zgłoszenie Roberta 29.07: zacięcia w finale) ──
     `filter:blur()` na obrazie 1024×1024 przez 1,7 s oznacza, że przeglądarka
     musi rozmyć milion pikseli w KAŻDEJ klatce — sto razy pod rząd. To najdroższa
     rzecz, jaką da się animować, i to ona ścinała całą sekcję.
     Zostają opacity i transform: obie liczy kompozytor, obie są darmowe.
     Filtr przełącza się skokowo w momencie startu, kiedy krycie jest jeszcze
     zerowe — więc skoku nie widać, a efekt wyłonienia zostaje. */
  transition:opacity 1500ms cubic-bezier(.16,.84,.28,1),
             transform 1900ms cubic-bezier(.16,.84,.28,1);
  will-change:opacity,transform;
}
.slot--hero.wylania #oro{opacity:1;transform:scale(1);filter:none;will-change:auto}
.slot--hero .slot__pusty{transition:opacity 900ms var(--ease-out)}
.slot--hero.wylania .slot__pusty{opacity:0}
/* ETAP 1 — karta zbliża się do kadru: puste miejsce budzi się i czeka na krążek */
.slot--hero.czeka .slot__pusty{
  color:var(--accent);border-color:rgba(201,123,61,.45);
  animation:czekaNaKrazek 1900ms ease-in-out infinite}
.slot--hero.czeka .slot__ramka{
  box-shadow:0 0 0 1px rgba(201,123,61,.22),0 0 44px rgba(201,123,61,.14) inset;
  transition:box-shadow 700ms var(--ease-out)}
@keyframes czekaNaKrazek{
  0%,100%{opacity:.45;letter-spacing:.24em}
  50%    {opacity:.95;letter-spacing:.3em}
}
.slot--hero.czeka .slot__poswiata{opacity:.35;transition:opacity 900ms var(--ease-out)}
.slot--hero .slot__poswiata{
  background:radial-gradient(58% 54% at 50% 46%,rgba(227,154,85,.34),rgba(201,123,61,.10) 55%,transparent 74%);
  opacity:0;transition:opacity 1600ms var(--ease-out)}
.slot--hero.wylania .slot__poswiata{opacity:1}
.slot--hero .slot__znacznik{opacity:0;transform:translateY(-6px);
  transition:opacity 700ms var(--ease-out) 900ms,transform 700ms var(--ease-out) 900ms}
.slot--hero.wylania .slot__znacznik{opacity:1;transform:none}
/* subtelny oddech światła w chwili wyłonienia */
/* Rozbłysk szedł po `box-shadow` — a cień o rozmyciu 66 px przemalowuje
   duży obszar w każdej klatce. Ten sam efekt na warstwie ze stałym cieniem,
   której animujemy wyłącznie krycie: kompozytor zamiast malarza. */
/* Warstwa cienia siedzi na KARCIE, nie w ramce: ramka ma `overflow:hidden`,
   więc cień rysowany w jej wnętrzu byłby przycięty do jej własnej krawędzi
   i rozbłysku nie byłoby widać wcale. */
.slot--hero::after{
  content:"";position:absolute;inset:0;border-radius:inherit;pointer-events:none;z-index:-1;
  box-shadow:0 0 66px rgba(227,154,85,.30);opacity:0}
.slot--hero.wylania::after{animation:rozblysk 2100ms var(--ease-out) 1 forwards}
@keyframes rozblysk{
  0%{opacity:0}
  38%{opacity:1}
  100%{opacity:.4}
}

.cta{margin-top:clamp(56px,9vh,110px);text-align:center}
.cta__link{display:inline-flex;align-items:center;gap:12px;padding:16px 34px;border-radius:var(--r-pill);
  background:var(--accent);color:var(--accent-ink);text-decoration:none;font-size:var(--fs-1);
  letter-spacing:.1em;text-transform:uppercase;transition:background var(--t-standard),transform var(--t-standard)}
.cta__link:hover{background:var(--accent-hi);transform:translateY(-3px)}
.cta__pod{margin-top:var(--s-3);color:var(--text-low);font-size:var(--fs-0);letter-spacing:.18em;text-transform:uppercase}
.cta__pod a{color:var(--text-mid);text-decoration:none;border-bottom:1px solid transparent;transition:color var(--t-standard),border-color var(--t-standard)}
.cta__pod a:hover{color:var(--accent);border-color:var(--accent)}

/* ---------- HISTORIA (miejsce, w którym zatrzymuje się strona po filmie) ---------- */
.historia{position:relative;padding:clamp(70px,12vh,150px) clamp(28px,7vw,140px) clamp(80px,14vh,170px);
  background:linear-gradient(to bottom,var(--surface-0),var(--surface-1) 55%,var(--surface-0))}
.historia__media{margin:0 auto clamp(40px,6vh,80px);max-width:1180px}
.detal--panorama{aspect-ratio:21/9}
.historia__tekst{max-width:1180px;margin:0 auto}
.historia__tekst h2{font-size:clamp(30px,4.4vw,54px);margin-top:var(--s-2)}
.historia__kolumny{display:grid;grid-template-columns:1.35fr .65fr;gap:clamp(24px,4vw,64px);
  align-items:start;margin-top:var(--s-4)}
.historia__kolumny p{color:var(--text-mid);max-width:60ch}
.historia__kolumny p + p{margin-top:var(--s-3)}
.historia__kolumny b{color:var(--text-hi);font-weight:400}
.historia__mala{max-width:340px;margin-left:auto}
.historia__stopka{margin-top:clamp(28px,4vh,56px);padding-top:var(--s-3);border-top:1px solid var(--line);
  color:var(--text-low);max-width:92ch;font-size:var(--fs-1)}
.historia__stopka b{color:var(--text-mid);font-weight:400}
@media (max-width:900px){.historia__kolumny{grid-template-columns:1fr}.historia__mala{margin:0;max-width:none}}

/* ---------- SEKCJA ZAKUPOWA — treść wokół produktów ---------- */
.zakup{max-width:1440px;margin:clamp(50px,8vh,96px) auto 0;display:grid;
  grid-template-columns:repeat(12,1fr);gap:clamp(20px,3vw,48px)}
.zakup__blok{grid-column:span 4}
@media (max-width:980px){.zakup__blok{grid-column:span 12}}
.zakup__blok h4{font-family:var(--font-display);font-size:var(--fs-2);margin-bottom:var(--s-2)}
.zakup__blok p{color:var(--text-mid)}
.zakup__lista{list-style:none;margin-top:var(--s-2)}
.zakup__lista li{display:flex;gap:12px;padding:9px 0;border-bottom:1px solid var(--line);color:var(--text-mid);font-size:var(--fs-1)}
.zakup__lista li::before{content:"—";color:var(--accent);flex:0 0 auto}
.zakup__nota{grid-column:span 12;margin-top:var(--s-3);padding-top:var(--s-3);border-top:1px solid var(--line);
  color:var(--text-low);font-size:var(--fs-0);max-width:88ch}

/* ---------- STOPKA ---------- */
.stopka{padding:var(--s-6) clamp(28px,7vw,140px) var(--s-5);border-top:1px solid var(--line);
  color:var(--text-low);font-size:var(--fs-0);letter-spacing:.12em;text-transform:uppercase;background:var(--surface-1)}
.stopka__odcisk{width:100%;margin-top:var(--s-4);padding-top:var(--s-3);border-top:1px solid var(--line);
  display:flex;justify-content:space-between;gap:var(--s-3);flex-wrap:wrap;
  font-size:11px;letter-spacing:.18em;color:rgba(138,122,102,.55);text-transform:none}
.stopka__odcisk b{font-weight:400;color:rgba(199,185,166,.75)}
/* ── Środek stopki musi BYĆ środkiem (zgłoszenie Roberta 29.07) ──────────────
   `justify-content:space-between` rozkłada ODSTĘPY, nie elementy. Przy trzech
   pozycjach o różnej szerokości — „KAKAWA — demonstrator technologii" ma ~280 px,
   „© 2026" ~50 px — środkowa nie ląduje na osi strony, tylko dryfuje w stronę
   węższej sąsiadki. Przycisk nad stopką stoi wtedy nad pustym miejscem, a nie
   nad żadną z pozycji, i to jest ten „rozjazd", którego nie dało się wytłumaczyć
   marginesami.

   Siatka trzech kolumn 1fr–auto–1fr rozwiązuje to z definicji: skrajne kolumny
   są sobie równe, więc środkowa siedzi dokładnie na osi, niezależnie od tego,
   jak długie są napisy po bokach. */
.stopka{
  display:grid; grid-template-columns:1fr auto 1fr; align-items:baseline;
  gap:var(--s-3) var(--s-4);
}
.stopka > span:nth-of-type(1){justify-self:start}
.stopka > span:nth-of-type(2){justify-self:center;text-align:center}
.stopka > span:nth-of-type(3){justify-self:end}
.stopka__odcisk{grid-column:1 / -1}
@media (max-width:860px){
  .stopka{grid-template-columns:1fr;justify-items:center;text-align:center}
  .stopka > span:nth-of-type(1),
  .stopka > span:nth-of-type(2),
  .stopka > span:nth-of-type(3){justify-self:center}
}

/* ══ JEDNA MIARA DLA BLOKU DALEJ I STOPKI (zgłoszenie Roberta 29.07) ══════════
   Rozjazd brał się stąd, że oba bloki miały poziomy oddech reszty strony, ale
   NIE MIAŁY jej miary. Każda sekcja stoi w `max-width:1440px` wyśrodkowanym
   w oknie; blok „dalej" i stopka rozciągały się na całą szerokość okna.
   Skutek: na szerokim ekranie przycisk celował w środek OKNA, a pozycje stopki
   uciekały do jego skrajnych krawędzi — dwa różne układy odniesienia jeden pod
   drugim.

   Padding liczony przez `max()` trzyma tło i górną krawędź stopki na pełnej
   szerokości (bo tak ma być — to pas, nie karta), a samą TREŚĆ wprowadza
   w tę samą miarę co reszta strony. Środek przycisku to od teraz środek
   kolumny tekstu, nie środek monitora.

   Poniżej 860 px stopka przestaje być rzędem: `space-between` przy zawijaniu
   ustawia elementy w miejscach przypadkowych. Kolumna, wyśrodkowana tak jak
   przycisk nad nią — jeden układ zamiast dwóch. */
:root{ --miara:1440px; --oddech:clamp(28px,7vw,140px); }
.cta,
.stopka{ padding-inline:max(var(--oddech), (100% - var(--miara)) / 2); }

/* Podpis autorski — jeden tytuł w całym portfolio (decyzja Roberta 29.07).
   Odcisk jest rzędem elastycznym, więc tytuł i zdanie dostają pełną szerokość,
   żeby nie rozjeżdżały się do trzech kolumn na szerokim ekranie. */
.stopka__odcisk .rola{flex:1 1 100%;color:rgba(199,185,166,.75)}
.stopka__odcisk .wyjasnienie{
  flex:1 1 100%;max-width:44em;margin-top:6px;
  font-family:var(--font-body,inherit);font-size:12.5px;letter-spacing:0;line-height:1.6;
  text-transform:none;color:rgba(138,122,102,.75);
}

/* ---------- ODTWARZACZ (tryb kina: film + lektor prowadzą stronę w dół) ---------- */
.kino-video{position:absolute;width:1px;height:1px;opacity:0;pointer-events:none;left:-9999px}

.kino{position:fixed;left:50%;transform:translateX(-50%);bottom:clamp(16px,3.2vh,32px);z-index:60;
  display:flex;align-items:center;gap:clamp(12px,1.6vw,22px);
  padding:12px clamp(14px,1.8vw,22px);border-radius:var(--r-pill);
  border:1px solid var(--line);background:rgba(20,16,12,.72);backdrop-filter:blur(14px);
  box-shadow:0 18px 60px rgba(0,0,0,.45);width:min(720px,calc(100vw - 40px));
  transition:opacity 400ms var(--ease-out),transform 400ms var(--ease-out)}
.kino.schowany{opacity:0;transform:translate(-50%,26px);pointer-events:none}

.kino__play{flex:0 0 auto;width:46px;height:46px;border-radius:50%;border:1px solid var(--accent);
  background:var(--accent);cursor:pointer;display:grid;place-items:center;
  transition:background var(--t-standard),transform var(--t-standard)}
.kino__play:hover{background:var(--accent-hi);transform:scale(1.05)}
.kino__ikona{width:0;height:0;margin-left:3px;border-left:13px solid var(--accent-ink);
  border-top:8px solid transparent;border-bottom:8px solid transparent;transition:all 160ms var(--ease-out)}
.kino.gra .kino__ikona{margin-left:0;width:12px;height:14px;border:0;
  background:linear-gradient(to right,var(--accent-ink) 0 4px,transparent 4px 8px,var(--accent-ink) 8px 12px)}

.kino__srodek{flex:1 1 auto;min-width:0}
.kino__etykieta{display:flex;justify-content:space-between;align-items:baseline;gap:12px;margin-bottom:8px}
.kino__rozdzial{font-size:var(--fs-0);letter-spacing:.16em;text-transform:uppercase;color:var(--text-mid);
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.kino__czas{font-size:var(--fs-0);color:var(--text-low);font-variant-numeric:tabular-nums;flex:0 0 auto}

.kino__pasek{position:relative;height:16px;cursor:pointer}
.kino__tlo{position:absolute;left:0;right:0;top:7px;height:2px;background:var(--line);border-radius:2px}
.kino__postep{position:absolute;left:0;top:6px;height:4px;width:0%;border-radius:3px;
  background:linear-gradient(to right,var(--accent),var(--accent-hi));box-shadow:0 0 14px rgba(201,123,61,.55)}
.kino__postep::after{content:"";position:absolute;right:-5px;top:-3px;width:10px;height:10px;border-radius:50%;
  background:var(--accent-hi);box-shadow:0 0 12px rgba(227,154,85,.9)}
.kino__znaczniki i{position:absolute;top:4px;width:1px;height:8px;background:rgba(243,235,221,.34)}

/* ---------- DETALE Z FILMU w pasach treści (parallax — „zawieszenie oka") ---------- */
.detal{position:relative;border-radius:var(--r-m);overflow:hidden;background:#0d0a07;
  box-shadow:0 30px 80px rgba(0,0,0,.45)}
.detal img{width:100%;height:100%;object-fit:cover;transform:scale(1.12);will-change:transform}
.detal::after{content:"";position:absolute;inset:0;
  background:linear-gradient(to top,rgba(20,16,12,.6),transparent 45%)}
.detal__podpis{position:absolute;left:var(--s-3);bottom:var(--s-3);z-index:2;
  font-family:var(--font-display);font-style:italic;font-size:var(--fs-1);color:rgba(243,235,221,.92);
  text-shadow:0 2px 18px rgba(20,16,12,.9)}
.detal--wysoki{aspect-ratio:3/4}
.detal--szeroki{aspect-ratio:16/10}
.pas--jasny .detal{box-shadow:0 30px 70px rgba(20,16,12,.22)}

/* ---------- SCROLL-DRIVEN ANIMATIONS (CSS `animation-timeline: view()`)
   Najnowszy standard: animacja sterowana pozycją elementu w kadrze, bez JS.
   Statyczne kadry dostają mocny parallax + zoom + rozjaśnienie + odsłonę kadru.
   Fallback (starsze przeglądarki): GSAP ScrollTrigger w film.js.            ---------- */
@supports (animation-timeline: view()) {
  .detal img{
    transform:none;
    animation:kadrParallax linear both;
    animation-timeline:view();
    animation-range:entry 0% exit 100%;
  }
  @keyframes kadrParallax{
    from{transform:translateY(-16%) scale(1.34);filter:brightness(.62) saturate(.82) contrast(1.02)}
    50% {filter:brightness(1) saturate(1)}
    to  {transform:translateY(16%)  scale(1.10);filter:brightness(1.08) saturate(1.06) contrast(1)}
  }
  .detal{
    animation:kadrOdslona linear both;
    animation-timeline:view();
    animation-range:entry 0% entry 78%;
  }
  @keyframes kadrOdslona{
    from{clip-path:inset(14% 8% 14% 8% round 16px);opacity:.35;box-shadow:0 10px 30px rgba(0,0,0,.25)}
    to  {clip-path:inset(0 0 0 0 round 16px);opacity:1;box-shadow:0 30px 80px rgba(0,0,0,.45)}
  }
  .detal__podpis{
    animation:podpisWjazd linear both;
    animation-timeline:view();
    animation-range:entry 25% entry 85%;
  }
  @keyframes podpisWjazd{from{opacity:0;transform:translateY(18px)}to{opacity:1;transform:none}}

  /* karty produktów też oddychają przy przewijaniu */
  .slot{animation:kartaOddech linear both;animation-timeline:view();animation-range:entry 0% entry 90%}
  @keyframes kartaOddech{from{transform:translateY(46px) scale(.965);opacity:.25}to{transform:none;opacity:1}}
  .slot--hero{animation-range:entry 0% entry 95%}
}

@media (prefers-reduced-motion:reduce){
  @supports (animation-timeline: view()){
    .detal img,.detal,.detal__podpis,.slot{animation:none}
    .detal img{transform:scale(1.04)}
  }
}

/* liczby-fakty (licznik przy wjeździe) */
.fakty{display:flex;gap:clamp(24px,4vw,64px);flex-wrap:wrap;margin-top:var(--s-5)}
.fakt__l{font-family:var(--font-display);font-size:clamp(28px,3.6vw,48px);color:var(--accent);line-height:1}
.fakt__o{font-size:var(--fs-0);letter-spacing:.2em;text-transform:uppercase;color:var(--text-low);margin-top:8px}
.pas--jasny .fakt__o{color:var(--ink-mid-light)}

/* pasek-cytat między pasami */
.cytat{padding:clamp(60px,10vh,120px) clamp(28px,7vw,140px);text-align:center;background:var(--surface-1)}
.cytat p{font-family:var(--font-display);font-style:italic;font-size:clamp(22px,3vw,38px);
  color:var(--text-hi);max-width:24ch;margin:0 auto;line-height:1.3}
.cytat span{display:block;margin-top:var(--s-3);font-size:var(--fs-0);letter-spacing:.28em;
  text-transform:uppercase;color:var(--accent)}

/* ---------- OVERLAY „handoff" (kadr filmu → karta) ---------- */
#handoff{position:fixed;z-index:55;pointer-events:none;border-radius:var(--r-s);overflow:hidden;opacity:0}
#handoff canvas{width:100%;height:100%;display:block}

@media (prefers-reduced-motion:reduce){
  .wjazd{opacity:1;transform:none}
  .opowiesc:not(.gra)::after{animation:none}
}

/* (odnośniki bloku opisane wyżej, przy pozostałych regułach — jeden format) */