/*! * ICAN Reveal v1.4 — CSS silnika animacji odkrywania * (treść bez zmian od 1.1; numer trzyma parę z reveal.js) * --------------------------------------------------------------------------- * ZASADA NACZELNA: FAIL-OPEN. * Stan początkowy (opacity:0) obowiązuje WYŁĄCZNIE gdy na jest klasa * `rv-on`, którą dodaje reveal.js. Brak pliku JS / błąd JS / stara przeglądarka * / prefers-reduced-motion => brak klasy => treść jest po prostu widoczna. * Nie da się w ten sposób „zgubić" sekcji na produkcji. * --------------------------------------------------------------------------- * ZMIANY 1.0 → 1.1 * • translate3d → translate (2D). translate3d + backface-visibility promowało * KAŻDY element z data-reveal do osobnej warstwy kompozytora już w stanie * spoczynku. Na stronie z 60–80 elementami to dziesiątki megabajtów pamięci * GPU i zacinanie na mobile. Warstwę włącza teraz JS (`will-change`) tylko * na czas trwania animacji i gasi ją po `transitionend`. * • kaskada słów ma własne zmienne czasu (--rv-w-dur), wcześniej były zaszyte. * * PUŁAPKI (świadome, do wiedzy autora szablonu): * 1. `transition` żyje na elemencie także PO odkryciu. Jeśli ten sam element * ma efekt :hover na transform/opacity, odziedziczy 720 ms i easing wjazdu. * ROZWIĄZANIE: data-reveal dawaj na WRAPPER, nie na interaktywną kartę. * 2. Nie zakładaj data-reveal na element będący LCP (główny nagłówek/hero * powyżej zgięcia) — opacity:0 przez ~0,7 s pogarsza wynik LCP. * 3. Nie zagnieżdżaj data-reveal w data-reveal — zagnieżdżone transformy * dają dryf pozycji. Do kaskad służy data-reveal-stagger na rodzicu. * --------------------------------------------------------------------------- */:root{--rv-dur:720ms;--rv-delay:0ms;--rv-ease:cubic-bezier(.22,.61,.36,1);--rv-shift:26px;--rv-scale:.96;--rv-w-dur:500ms;--rv-w-shift:.45em}html.rv-on [data-reveal]{opacity:0;transition:opacity var(--rv-dur) var(--rv-ease) var(--rv-delay),transform var(--rv-dur) var(--rv-ease) var(--rv-delay)}html.rv-on [data-reveal=up]{transform:translateY(var(--rv-shift))}html.rv-on [data-reveal=down]{transform:translateY(calc(var(--rv-shift) * -1))}html.rv-on [data-reveal=left]{transform:translateX(calc(var(--rv-shift) * -1.25))}html.rv-on [data-reveal=right]{transform:translateX(calc(var(--rv-shift) * 1.25))}html.rv-on [data-reveal=scale]{transform:scale(var(--rv-scale))}html.rv-on [data-reveal=fade]{transform:none}html.rv-on [data-reveal].rv-in{opacity:1;transform:none}html.rv-on [data-reveal=custom]{opacity:1;transform:none;transition:none}html.rv-on [data-reveal=words]{opacity:1;transform:none;transition:none}html.rv-on [data-reveal=words] .rv-w{display:inline-block;opacity:0;transform:translateY(var(--rv-w-shift));transition:opacity var(--rv-w-dur) ease var(--rv-w-delay,0ms),transform var(--rv-w-dur) var(--rv-ease) var(--rv-w-delay,0ms)}html.rv-on [data-reveal=words].rv-in .rv-w{opacity:1;transform:none}html.rv-on [data-reveal][data-reveal-instant],html.rv-on [data-reveal][data-reveal-instant] .rv-w{transition:none!important}@media (prefers-reduced-motion:reduce){html.rv-on [data-reveal],html.rv-on [data-reveal] .rv-w{opacity:1!important;transform:none!important;transition:none!important}}@media print{html.rv-on [data-reveal],html.rv-on [data-reveal] .rv-w{opacity:1!important;transform:none!important}}