/* Odsłony przy przewijaniu — ruch robi CSS (kompozytor), skrypt dokłada `is-in`, a po końcu ruchu `is-done`.
   Stan początkowy TYLKO z klasą `js-animations` na <html> (dokładana w <head>),
   inaczej wyłączony JS ukryłby treść. Tylko opacity i transform.

   Reguły odsłony obowiązują tylko do `is-done`: potem element wraca do WŁASNYCH przejść
   (karta unosi się z myszą, przycisk reaguje na wciśnięcie w 90 ms). Bez tego przejście odsłony
   (z opóźnieniem z kolejki) i `transform: none` przykrywały uniesienie i wciśnięcie. */

:root {
    /* easeOutCubic: miękki start bez „szarpnięcia” krzywej expo, długi dobieg. */
    --reveal-ease: cubic-bezier(0.33, 1, 0.68, 1);
    --reveal-time: 0.95s;
    /* Arkusz zjeżdżający ze zdjęcia: jednostajnie przyspiesza i hamuje jak głowica plotera. */
    --sheet-ease: cubic-bezier(0.65, 0, 0.35, 1);
}

/* ---------- stan przed odsłoną ---------- */
.js-animations [data-anim] [data-anim-head]:not(.is-in) { opacity: 0; transform: translateX(-18px); }
.js-animations [data-anim] [data-anim-rule] { transform-origin: left center; }
.js-animations [data-anim] [data-anim-rule]:not(.is-in) { transform: scaleX(0); }
.js-animations [data-anim-item]:not(.is-in) { opacity: var(--anim-from, 0); transform: translateY(var(--anim-shift, 28px)); }
.js-animations [data-anim-step]:not(.is-in) { opacity: 0; transform: translateX(-10px); }
/* Zdjęcie w kadrze (rodzic z overflow: hidden) delikatnie się oddala. */
.js-animations [data-anim] [data-anim-img]:not(.is-in) { transform: scale(1.12); }

/* ---------- ruch odsłony (do is-done) ---------- */
/* Kafle po kolei. Numer w kolejce (--anim-step) i tempo (--anim-each) dokłada skrypt. */
.js-animations [data-anim-item] {
    --anim-delay: calc(var(--anim-lead, 0ms) + var(--anim-step, 0) * var(--anim-each, 80ms));
}
.js-animations [data-anim] [data-anim-head]:not(.is-done) {
    transition: opacity var(--reveal-time) var(--reveal-ease), transform var(--reveal-time) var(--reveal-ease);
}
.js-animations [data-anim] [data-anim-rule]:not(.is-done) { transition: transform 0.9s var(--reveal-ease) 0.12s; }
.js-animations [data-anim-item]:not(.is-done) {
    transition: opacity var(--reveal-time) var(--reveal-ease), transform var(--reveal-time) var(--reveal-ease);
    transition-delay: var(--anim-delay);
}
.js-animations [data-anim-step]:not(.is-done) {
    transition: opacity 0.75s var(--reveal-ease), transform 0.75s var(--reveal-ease);
    transition-delay: calc(var(--anim-lead, 0ms) + var(--anim-step, 0) * var(--anim-each, 50ms));
}
.js-animations [data-anim] [data-anim-img]:not(.is-done) { transition: transform 1.2s cubic-bezier(0.22, 1, 0.36, 1); }

/* Sekcja bez wydzielonych elementów wjeżdża w całości. */
.js-animations [data-anim].is-whole:not(.is-in) { opacity: 0; transform: translateY(24px); }
.js-animations [data-anim].is-whole { transition: opacity var(--reveal-time) var(--reveal-ease), transform var(--reveal-time) var(--reveal-ease); }

/* ---------- tytuły: słowa wychodzą spod linii jedno po drugim (js/words.js) ---------- */
/* Ramka słowa przycina tylko ruch; zapas na ogonki, kreski nad literami i kursywę oddają ujemne marginesy. */
.word {
    display: inline-block; vertical-align: top; overflow: hidden;
    padding: 0.14em 0.08em 0.18em; margin: -0.14em -0.08em -0.18em;
}
.word__inner { display: inline-block; }
.js-animations [data-anim] [data-anim-head].is-split:not(.is-in) { opacity: 1; transform: none; }
.js-animations [data-anim-head]:not(.is-in) .word__inner { transform: translateY(calc(100% + 0.4em)); }
.js-animations [data-anim-head]:not(.is-done) .word__inner {
    transition: transform 1.05s cubic-bezier(0.25, 1, 0.5, 1) calc(var(--word, 0) * 70ms);
}

/* ---------- zdjęcie odsłania „głowica plotera” ---------- */
/* Arkusz papieru z linią na krawędzi zjeżdża w dół, a zdjęcie pod nim się oddala. Kolejka jak u kafla. */
.js-animations [data-anim-sheet] { position: relative; overflow: hidden; }
/* Arkusz o 1 px większy od kadru (i tak przycięty): przy przesuwanej karcie nie zostaje szpara na krawędzi. */
.js-animations [data-anim-sheet]::after {
    content: ""; position: absolute; inset: -1px; z-index: 3; pointer-events: none;
    background: var(--paper-2); border-top: 1px solid var(--ink-strong);
    transition: transform 1.15s var(--sheet-ease) calc(var(--anim-delay, 0ms) + 120ms);
}
.js-animations [data-anim].is-in [data-anim-sheet]::after { transform: translateY(101%); }
.js-animations [data-anim-sheet] img {
    transform: scale(1.14);
    transition: transform 1.6s cubic-bezier(0.22, 1, 0.36, 1) calc(var(--anim-delay, 0ms) + 120ms);
}
.js-animations [data-anim].is-in [data-anim-sheet] img { transform: none; }

/* Wejście przejściem między stronami (vt-entry: base.html → animations.js): przez cały przejazd treść stoi
   gotowa — nowa strona wjeżdża jak dalszy ciąg poprzedniej, a jej migawka nie przerysowuje się co klatkę
   (to przycinało na telefonach). Po przejeździe ekran zostaje odsłonięty bez ruchu, reszta czeka na przewinięcie.
   `transition: none` — skrypty z defer czytają układ PRZED „pagereveal”, więc stan ukryty bywa już policzony
   i bez tego odsłona odegrałaby się w trakcie przejazdu. */
.vt-entry.js-animations [data-anim] [data-anim-head]:not(.is-in),
.vt-entry.js-animations [data-anim-item]:not(.is-in),
.vt-entry.js-animations [data-anim-step]:not(.is-in),
.vt-entry.js-animations [data-anim] [data-anim-img]:not(.is-in),
.vt-entry.js-animations [data-anim].is-whole:not(.is-in),
.vt-entry.js-animations [data-anim-head]:not(.is-in) .word__inner,
.vt-entry.js-animations [data-anim-sheet] img { opacity: 1; transform: none; transition: none; }
.vt-entry.js-animations [data-anim] [data-anim-rule]:not(.is-in) { transform: scaleX(1); transition: none; }
.vt-entry.js-animations [data-anim-sheet]::after { display: none; }

/* Preferencja zmieniona po wczytaniu strony: treść od razu widoczna (czasy przejść zeruje base.css). */
@media (prefers-reduced-motion: reduce) {
    .js-animations [data-anim] [data-anim-head]:not(.is-in),
    .js-animations [data-anim-item]:not(.is-in),
    .js-animations [data-anim-step]:not(.is-in),
    .js-animations [data-anim] [data-anim-img]:not(.is-in),
    .js-animations [data-anim].is-whole:not(.is-in),
    .js-animations [data-anim-head]:not(.is-in) .word__inner,
    .js-animations [data-anim-sheet] img { opacity: 1; transform: none; }
    .js-animations [data-anim] [data-anim-rule]:not(.is-in) { transform: scaleX(1); }
    .js-animations [data-anim-sheet]::after { display: none; }
}

/* --- pasek przewijany automatycznie (marquee.js) ---
   Ramka przycina zawsze; wygaszona tylko prawa krawędź. */
.autoscroll {
    overflow: hidden;
    --autoscroll-fade: 34px;
    -webkit-mask-image: linear-gradient(90deg, #000 0, #000 calc(100% - var(--autoscroll-fade)), transparent 100%);
    mask-image: linear-gradient(90deg, #000 0, #000 calc(100% - var(--autoscroll-fade)), transparent 100%);
}
/* Pasek NIGDY nie przycina sam siebie w ramce automatu — także w trybie palca (is-manual). Pasek z własnym
   overflow-x: auto (przewijanie bez skryptu, np. .ticker__track) stał przesunięty transformem i przycinał
   wszystko: po każdym dotknięciu był pusty, aż automat wrócił. */
.autoscroll > .autoscroll__track { overflow: visible; flex-wrap: nowrap; }
.autoscroll.is-running > .autoscroll__track { will-change: transform; }
/* Palec przejmuje: przewija się RAMKA, pasek stoi na transform. */
.autoscroll.is-manual { overflow-x: auto; scrollbar-width: none; scroll-behavior: auto; }
.autoscroll.is-manual::-webkit-scrollbar { display: none; }