/* * Animacje — ładowane TYLKO na stronie (nie w edytorze bloków). * Gdy odwiedzający ma w systemie włączone „ogranicz ruch” * (klasa html.dw-reduce), zamiast przesuwania jest tylko łagodne * pojawianie się — patrz koniec pliku. */ @keyframes dw-rise { from { opacity: 0; transform: translate3d(0, 26px, 0); } to { opacity: 1; transform: none; } } @keyframes dw-zoom-out { from { transform: scale(1.16); } to { transform: scale(1.05); } } /* ---------- HERO (strona główna): wejście od razu po załadowaniu ---------- * Wcześniej napisy i przyciski czekały na wbudowane opóźnienia motywu * nadrzędnego (delay-3 / delay-5). Teraz cała sekwencja trwa poniżej * sekundy: etykieta → tytuł → opis → przyciski. */ .dw-hero .dw-hero__eyebrow { animation: dw-rise .8s cubic-bezier(.22, .8, .3, 1) .05s both; } .dw-hero .dw-hero__title { animation: dw-rise .9s cubic-bezier(.22, .8, .3, 1) .15s both; } .dw-hero .dw-hero__lead { animation: dw-rise .9s cubic-bezier(.22, .8, .3, 1) .28s both; } .dw-hero .dw-hero__buttons { animation: dw-rise .9s cubic-bezier(.22, .8, .3, 1) .40s both; } /* ---------- PODSTRONA OFERTY: wejście przy załadowaniu ---------- */ .dw-single-hero .dw-single-hero__back { animation: dw-rise .7s cubic-bezier(.22, .8, .3, 1) .05s both; } .dw-page-hero .dw-page-hero__back { animation: dw-rise .7s cubic-bezier(.22, .8, .3, 1) .05s both; } .dw-single-hero .dw-single-hero__title { animation: dw-rise .9s cubic-bezier(.22, .8, .3, 1) .15s both; } .dw-page-hero .dw-page-hero__title { animation: dw-rise .9s cubic-bezier(.22, .8, .3, 1) .15s both; } .dw-single-body .dw-single-body__text { animation: dw-rise .9s cubic-bezier(.22, .8, .3, 1) .30s both; } .dw-single-body .dw-cta-card { animation: dw-rise .9s cubic-bezier(.22, .8, .3, 1) .42s both; } /* ---------- POJAWIANIE PRZY PRZEWIJANIU ---------- * Klasę is-inview dokłada assets/motion.js, gdy element wjedzie w ekran. * Stan „ukryty” działa tylko, gdy ma klasę dw-js (ustawianą w * ), więc bez JS wszystko jest po prostu widoczne. */ html.dw-js :is( .dw-about .dw-section-head, .dw-about__text > p, .dw-stats, .dw-offer .dw-section-head, .dw-offer-carousel, .dw-contact .dw-section-head, .dw-faq .dw-section-head, .dw-faq__list, .dw-reviews .dw-section-head, .dw-reviews__grid, .dw-video .dw-section-head, .dw-video__player, .dw-contact__card, .dw-related__head, .dw-related .wp-block-post ):not(.is-inview) { opacity: 0; transform: translate3d(0, 28px, 0); } html.dw-js :is( .dw-about .dw-section-head, .dw-about__text > p, .dw-stats, .dw-offer .dw-section-head, .dw-offer-carousel, .dw-contact .dw-section-head, .dw-faq .dw-section-head, .dw-faq__list, .dw-reviews .dw-section-head, .dw-reviews__grid, .dw-video .dw-section-head, .dw-video__player, .dw-contact__card, .dw-related__head, .dw-related .wp-block-post ) { transition: opacity .9s cubic-bezier(.22, .8, .3, 1) var(--dw-d, 0s), transform .9s cubic-bezier(.22, .8, .3, 1) var(--dw-d, 0s); } /* cienkie linie „rosną” od lewej */ html.dw-js :is(.dw-about .dw-rule, .dw-offer .dw-rule, .dw-related .dw-rule, .dw-contact .dw-rule, .dw-faq .dw-rule, .dw-reviews .dw-rule, .dw-video .dw-rule) { transform-origin: left center; transition: transform 1.1s cubic-bezier(.65, 0, .2, 1) var(--dw-d, 0s); } html.dw-js :is(.dw-about .dw-rule, .dw-offer .dw-rule, .dw-related .dw-rule, .dw-contact .dw-rule, .dw-faq .dw-rule, .dw-reviews .dw-rule, .dw-video .dw-rule):not(.is-inview) { transform: scaleX(0); } /* ---------- ZDJĘCIE „O MNIE”: wysuwa się od dołu do ramki ---------- * Ramka odsłania się od dołu do góry (clip-path), a samo zdjęcie * jednocześnie sunie w górę i delikatnie się „odpręża” (zoom-out). */ html.dw-js .dw-about__photo { overflow: hidden; clip-path: inset(100% 0 0 0); transition: clip-path 1.3s cubic-bezier(.77, 0, .18, 1); } html.dw-js .dw-about__photo img { transform: translate3d(0, 16%, 0) scale(1.22); transition: transform 1.8s cubic-bezier(.16, .84, .24, 1); will-change: transform; } html.dw-js .dw-about__photo.is-inview { clip-path: inset(0 0 0 0); } html.dw-js .dw-about__photo.is-inview img { transform: none; } /* ---------- TRYB „OGRANICZ RUCH” ---------- * Bez przesuwania, powiększania i odsłaniania — tylko delikatny fade. */ @keyframes dw-fade { from { opacity: 0; } to { opacity: 1; } } html.dw-reduce .dw-hero :is(.dw-hero__eyebrow, .dw-hero__title, .dw-hero__lead, .dw-hero__buttons), html.dw-reduce .dw-single-hero :is(.dw-single-hero__back, .dw-single-hero__title), html.dw-reduce .dw-page-hero :is(.dw-page-hero__back, .dw-page-hero__title), html.dw-reduce .dw-single-body :is(.dw-single-body__text, .dw-cta-card) { animation-name: dw-fade; } html.dw-reduce :is( .dw-about .dw-section-head, .dw-about__text > p, .dw-stats, .dw-offer .dw-section-head, .dw-offer-carousel, .dw-contact .dw-section-head, .dw-faq .dw-section-head, .dw-faq__list, .dw-reviews .dw-section-head, .dw-reviews__grid, .dw-video .dw-section-head, .dw-video__player, .dw-contact__card, .dw-related__head, .dw-related .wp-block-post ):not(.is-inview) { transform: none; } html.dw-reduce :is(.dw-about .dw-rule, .dw-offer .dw-rule, .dw-related .dw-rule, .dw-contact .dw-rule, .dw-faq .dw-rule, .dw-reviews .dw-rule, .dw-video .dw-rule) { transition: opacity .8s ease var(--dw-d, 0s); } html.dw-reduce :is(.dw-about .dw-rule, .dw-offer .dw-rule, .dw-related .dw-rule, .dw-contact .dw-rule, .dw-faq .dw-rule, .dw-reviews .dw-rule, .dw-video .dw-rule):not(.is-inview) { transform: none; opacity: 0; } html.dw-reduce .dw-about__photo, html.dw-reduce .dw-about__photo.is-inview { clip-path: none; transition: opacity 1.1s ease; } html.dw-reduce .dw-about__photo:not(.is-inview) { opacity: 0; } html.dw-reduce .dw-about__photo img, html.dw-reduce .dw-about__photo.is-inview img { transform: none; transition: none; }