/* ══════════════════════════════════════════════════════════════════════ MOTION - jeden system ruchu dla calego serwisu. Dwa rodzaje ruchu i nic wiecej: 1. REVEAL - tresc wchodzaca w kadr przy przewijaniu. Uruchamiany raz, przez js/ruch.js (IntersectionObserver), znacznikami w HTML: data-reveal -> ten jeden element wjezdza data-reveal-grupa -> dzieci wjezdzaja jedno po drugim (kaskada) Czasy i dystans z tokenow (--d-reveal, --reveal-y, --reveal-krok), wiec kalibracja calego serwisu to jedna zmiana w tokens.css. 2. HOVER / FOCUS - reakcja na kursor. Zawsze `transition`, zawsze --d-fast + --ease-out, zawsze na wlasciwosci wymienionej wprost (nigdy `transition: all`). Style hoveru mieszkaja przy swoich komponentach (components.css), nie tutaj - tutaj sa tylko wspolne prymitywy i kontrakt. ── DLACZEGO REVEAL JEST ANIMACJA, A NIE PRZEJSCIEM ────────────────── Reveal oparty na `transition` musialby trzymac na elemencie dlugi czas przejscia (700 ms). Ten sam element ma potem reagowac na kursor w 150 ms - i nie reaguje, bo dziedziczy dlugi czas z reveala. To wlasnie blad "JS opoznia hover". Tutaj reveal to `animation` (wlasny kanal, nie dotyka `transition`), a po jej zakonczeniu js/ruch.js zdejmuje znacznik z elementu - wtedy po animacji nie zostaje ani `animation`, ani wymuszony `transform`, ktory bilby transform z hoveru (animacja z `fill-mode` wygrywa z regulami arkusza, wiec musi zniknac, nie tylko sie skonczyc). Po wjezdzie element jest znowu zwyklym elementem. ── BEZ RUCHU / BEZ JS ────────────────────────────────────────────── Stan poczatkowy (ukrycie) obowiazuje WYLACZNIE pod klasa `.ruch` na , ktora ustawia jednolinijkowy skrypt w - i tylko wtedy, gdy uzytkownik nie prosil o ograniczony ruch. Bez tej klasy strona jest po prostu widoczna od pierwszej klatki: brak JS, stary silnik albo prefers-reduced-motion nie ukrywa tresci, tylko pomija animacje. ══════════════════════════════════════════════════════════════════════ */ /* ══ REVEAL ════════════════════════════════════════════════════════════ */ /* Stan przed wjazdem - tylko przy wlaczonym ruchu, patrz naglowek pliku. Wariant grupowy (`> *`) obowiazuje wylacznie w oknie miedzy pierwsza klatka a startem js/ruch.js: skrypt od razu rozwija grupe, przenoszac `data-reveal` na kazde dziecko z osobna (uzasadnienie w js/ruch.js). Ta regula jest wiec zabezpieczeniem przed mignieciem tresci, a nie docelowym stanem - po starcie skryptu dziala juz tylko selektor pojedynczy. */ .ruch [data-reveal], .ruch [data-reveal-grupa] > * { opacity: 0; } /* wjazd - `both` trzyma stan koncowy do momentu, w ktorym js/ruch.js zdejmie znacznik (i razem z nim cala te regule) */ .ruch [data-reveal].is-in { animation: reveal-in var(--d-reveal) var(--ease-out) both; /* --i ustawia js/ruch.js na kolejnych dzieciach rozwinietej grupy; pojedynczy element nie ma tej zmiennej i rusza bez zwloki */ animation-delay: calc(var(--i, 0) * var(--reveal-krok)); } @keyframes reveal-in { from { opacity: 0; transform: translateY(var(--reveal-y)); } to { opacity: 1; transform: none; } } /* ══ WEJSCIE HERO ══════════════════════════════════════════════════════ Hero nie korzysta z reveala na obserwatorze - jest w kadrze od pierwszej klatki, wiec nie ma na co czekac. Dostaje za to krotkie wejscie w czystym CSS, i wylacznie na opisie oraz przyciskach. Naglowek i kadr zostaja NIETKNIETE, celowo. Oba sa kandydatami na LCP (najwiekszy malowany element strony), a element odslaniany animacja liczy sie jako namalowany dopiero po jej zakonczeniu - animowanie ich zepsuloby wynik szybkosci strony bez zadnego zysku wizualnego. */ .ruch .hero__opis, .ruch .hero__akcje { animation: reveal-in var(--d-reveal) var(--ease-out) both; } .ruch .hero__akcje { animation-delay: var(--reveal-krok); } /* ══ HOVER: WSPOLNE PRYMITYWY ══════════════════════════════════════════ Uniesienie pod kursorem. Jedna wartosc (--lift, tokens.css) dla wszystkiego, co ma sie unosic - przycisk i kafel nie moga ruszac sie inaczej, bo to ta sama obietnica: "to jest klikalne". Dzis niesie ja `.btn:hover`/`.btn:active` wprost w components.css. Uwaga: unosimy tylko elementy INTERAKCYJNE. Karta bez odnosnika (np. parametry modulu) zostaje nieruchoma - obiecywalaby klikniecie, ktorego nie ma. `.lift` (gotowa klasa-narzedzie z ta sama regula) skasowana 2026-08-14 - martwy kod, zero uzyc w HTML. Gdyby przybyl kolejny element z tym samym unoszeniem, to tutaj wraca. */