@charset "UTF-8";

/**
 * Ruch na stronie – bez JavaScriptu i bez bibliotek (0 KB JS).
 *
 * 1. Przejścia między stronami: View Transitions API (nawigacja wielostronicowa).
 * 2. Pojawianie się elementów przy przewijaniu: CSS scroll-driven animations.
 * 3. Nagłówek po przewinięciu: mocniejszy cień (bez zmiany wysokości – zero CLS).
 *
 * Zasady: hero (H1, zdjęcie) nie jest animowany – nie pogarszamy LCP; animujemy
 * tylko `translate` i `scale` (nie `transform`, który służy do efektów hover);
 * przeglądarki bez wsparcia po prostu pokazują treść; „ogranicz ruch” = brak ruchu.
 * Ładowany tylko na froncie (inc/assets.php), nie w edytorze.
 *
 * @package CleanCode
 */

@media (prefers-reduced-motion: no-preference) {

	/* 1. Płynne przejście między podstronami; pasek nagłówka zostaje na miejscu. */
	@view-transition {
		navigation: auto;
	}

	.site-header {
		view-transition-name: site-header;
	}

	::view-transition-old(root),
	::view-transition-new(root) {
		animation-duration: 0.25s;
	}

	/* 2. Elementy pojawiają się, gdy wjeżdżają w ekran (te widoczne od razu – bez animacji). */
	@supports (animation-timeline: view()) {

		main :is(
			.wp-block-cleancode-service-card,
			.wp-block-cleancode-stat-counter,
			.wp-block-cleancode-step,
			.cc-project-card,
			.cc-post-row,
			.is-style-post-card,
			.is-style-card,
			.is-style-section-dark,
			.wp-block-cleancode-faq,
			.wp-block-cleancode-reviews,
			.is-style-form-card,
			.cc-team-card
		):not(.is-hero *, .cc-post-body *),
		main .alignfull:not(.is-hero) > :is(.wp-block-heading, .is-style-eyebrow) {
			animation: cc-reveal linear both;
			animation-timeline: view();
			animation-range: entry 0% entry 55%;
		}

		/* Kolejne elementy w rzędzie – z lekkim opóźnieniem (po kolei, nie naraz). */
		main :is(.wp-block-cleancode-service-card, .wp-block-cleancode-stat-counter, .cc-project-card, .is-style-post-card):nth-child(3n + 2) {
			animation-range: entry 8% entry 63%;
		}

		main :is(.wp-block-cleancode-service-card, .wp-block-cleancode-stat-counter, .cc-project-card, .is-style-post-card):nth-child(3n) {
			animation-range: entry 16% entry 71%;
		}
	}

	/* 3. Nagłówek: po przewinięciu ~120 px mocniejszy cień. */
	@supports (animation-timeline: scroll()) {

		.site-header__bar {
			animation: cc-header-scrolled linear both;
			animation-timeline: scroll(root);
			animation-range: 0 120px;
		}
	}
}

/* Bez opacity: półprzezroczysty tekst w trakcie animacji psułby pomiar kontrastu (Lighthouse, axe). */
@keyframes cc-reveal {

	from {
		translate: 0 1.5rem;
		scale: 0.97;
	}
}

@keyframes cc-header-scrolled {

	to {
		box-shadow: 0 14px 34px -14px rgb(0 32 64 / 0.28);
	}
}