/* ========================================================================== WikTymOne - animations.css Stany POCZĄTKOWE elementów animowanych + zachowanie przy braku ruchu. Zasada: stany startowe obowiązują wyłącznie, gdy w ustawiono klasę .ruch na (jest JS i użytkownik nie prosił o brak animacji). Bez tej klasy strona jest od razu kompletna i czytelna - nic nie znika. ========================================================================== */ /* --- Hero ----------------------------------------------------------------- */ .ruch .hero__wers > span { transform: translateY(105%); will-change: transform; } .ruch .hero__etykieta, .ruch .hero__lead, .ruch .hero__cta, .ruch .hero__spec-poz, .ruch .hero__podpis, .ruch .hero__naroza, .ruch .hero__wskaznik { opacity: 0; will-change: opacity, transform; } /* Wartość zapasowa: większa niż realna długość ścieżki (~1700 jednostek), więc linia jest niewidoczna zanim JS policzy getTotalLength(). */ .ruch .hero__instalacja .instalacja__sciezka { stroke-dasharray: 4000; stroke-dashoffset: 4000; } .ruch .hero__instalacja .instalacja__impuls { opacity: 0; } .ruch .hero__kadr-okno { /* Kadr wchodzi maską od góry w dół - zasuwa, nie fade. */ clip-path: inset(0% 0% 100% 0%); will-change: clip-path; } /* --- Wejścia sekcji ------------------------------------------------------- */ .ruch [data-reveal] { opacity: 0; transform: translateY(18px); will-change: opacity, transform; } /* --- Wejścia grupowe sekcji ----------------------------------------------- */ /* Stan startowy trzymany w CSS, bo GSAP inicjalizuje sceny dopiero po zakończeniu intro - bez tego elementy mrugnęłyby na moment. Zdjęcie klasy .ruch (bezpiecznik 6 s w HTML) przywraca je do widocznych. */ .ruch [data-scena="wejscia"] .wejscie, .ruch [data-scena="uslugi"] .rejestr__poz, .ruch [data-scena="metody"] .metoda, .ruch [data-scena="b2b"] .b2b__poz, .ruch [data-scena="sprzet"] > div, .ruch [data-scena="opinie"] .opinia, .ruch [data-scena="obszar"] li, .ruch [data-scena="faq"] .faq__poz, .ruch [data-scena="hub"] .hub__karta, .ruch [data-scena="segmenty"] .segment-b2b, .ruch [data-scena="czynniki"] .czynnik, .ruch [data-scena="dziennik"] .realizacja, .ruch [data-krok] { opacity: 0; will-change: opacity, transform; } /* --- Kamera --------------------------------------------------------------- */ .ruch .kamera .przystanek { opacity: 0; transform: translateY(14px); } .ruch .kamera .przystanek[data-przystanek="0"] { opacity: 1; transform: none; } /* --- Brak ruchu: wszystko widoczne, nic nie mruga ------------------------- */ @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: 0.001ms !important; animation-iteration-count: 1 !important; transition-duration: 0.001ms !important; scroll-behavior: auto !important; } .hero__wers > span { transform: none !important; } .hero__etykieta, .hero__lead, .hero__cta, .hero__spec-poz, .hero__podpis, .hero__naroza, .hero__wskaznik { opacity: 1 !important; } .hero__kadr-okno { clip-path: none !important; } .hero__kadr, .hero__kadr-okno img { transform: none !important; } .hero__winieta { display: none !important; } [data-reveal] { opacity: 1 !important; transform: none !important; } [data-scena] .wejscie, [data-scena] .rejestr__poz, [data-scena] .metoda, [data-scena] .b2b__poz, [data-scena] .opinia, [data-scena] li, [data-scena] .faq__poz, [data-scena] .hub__karta, [data-scena] .segment-b2b, [data-scena] .czynnik, [data-scena] .realizacja, [data-scena] > div, [data-krok] { opacity: 1 !important; transform: none !important; } .proces__nitka i { transform: scaleY(1) !important; } .instalacja__sciezka { stroke-dasharray: none !important; stroke-dashoffset: 0 !important; } .instalacja__impuls { display: none !important; } } /* --- Impuls ciśnienia w linii instalacji (dekoracja, nie treść) ----------- */ .instalacja__impuls { filter: drop-shadow(0 0 6px rgba(90, 166, 224, .8)); } /* --- Pulsujący wskaźnik nagrywania w HUD kamery --------------------------- */ @keyframes rec-puls { 0%, 100% { opacity: 1; } 50% { opacity: .25; } } .ruch .kamera__rec::before { animation: rec-puls 1.8s var(--ease) infinite; }