/*
 * Ruch i zachowanie z szablonu byq Avenir, przeniesione 1:1 (wartości z js/main.js i css/styles.css szablonu,
 * odczyt 22.10.2026). Skrypt: assets/js/avenir.js. Ładowany ostatni z arkuszy PDM.
 *
 * Klasy chowające treść dodaje wyłącznie skrypt, a .av-js w <head> ma bezpiecznik (2,5 s), więc bez JS
 * i przy błędzie skryptu strona jest widoczna. Przy prefers-reduced-motion nic się nie rusza.
 */
@layer components {
	/* Lenis: przewijanie prowadzi skrypt, więc bez przewijania płynnego z CSS. */
	html.lenis, html.lenis body { height: auto; }
	html.lenis { scroll-behavior: auto !important; }
	.lenis.lenis-smooth [data-lenis-prevent] { overscroll-behavior: contain; }
	.lenis.lenis-stopped { overflow: clip; }
	.lenis.lenis-smooth iframe { pointer-events: none; }

	@media (prefers-reduced-motion: no-preference) {
		/* Treść nad zgięciem czeka na skrypt (bez mrugnięcia przed wejściem). */
		.av-js:not(.av-start) :is(.c-hero__tresc, .c-page-head__tytul) { opacity: 0; }

		/* Wejścia „opacity-01/02/03”: 0,6 s, opóźnienie 0,3 / 0,4 / 0,5 s z data-av. */
		.av-ruch [data-av]:not(.av-on) { opacity: 0; }
		.av-ruch [data-av].av-on:not(.av-po) {
			transition: opacity 0.6s cubic-bezier(0.25, 0.46, 0.45, 0.94) var(--av-d, 0ms);
		}

		/* Zapalanie tekstu: znaki startują od 48% krycia, resztę ustawia skrypt. */
		.av-scrub .av-slowo { white-space: nowrap; }
		.av-scrub .av-slowo > span { opacity: 0.48; }

		/* Paralaksa pasa: zdjęcie wyższe o tyle, by przesunięcie -25% nigdy nie odsłoniło krawędzi. */
		/* To samo dla zdjęcia nagłówka podstrony (zamiast stojącego zdjęcia z ruch.css) i pokazu na stronie głównej. */
		.av-paralaksa { overflow: hidden; }
		:root .av-paralaksa .av-paralaksa__ruch {
			position: relative;
			inset: auto;
			width: 100%;
			height: 134%;
			animation: none;
			transform: translate3d(0, -25%, 0);
			will-change: transform;
		}
		:root .c-page-head__media.av-paralaksa { clip-path: none; }
		:root .c-hero.av-paralaksa .c-hero__slajdy { position: absolute; inset: 0 0 auto; }
		:root .c-wezwanie__plyta.av-paralaksa .c-wezwanie__tlo { position: absolute; inset: 0 0 auto; }
	}

	/* Przyciski: po najechaniu tło przechodzi w jasny odcień (0,3 s), szerokość stoi (Marcin 22.10: bez strzałki z Avenir). */
	:is(.c-content, .c-main, .c-wezwanie) .wp-block-button:not(.is-style-link) .wp-block-button__link,
	.c-button { transition: background-color 0.3s ease, color 0.3s ease, border-color 0.3s ease; }
	:is(.c-content, .c-main, .c-wezwanie) .wp-block-button:not(.is-style-link) .wp-block-button__link:hover,
	.c-button:hover {
		background-color: var(--primary-200, #ced5ef);
		border-color: var(--primary-200, #ced5ef);
		color: var(--primary-900, #262645);
	}

	/* Link trzeciorzędny: kreska ucieka w prawo (0,4 s) i wraca przy zejściu kursora. */
	.c-more::before,
	.c-realizacja__wiecej::before,
	:is(.c-content, .c-main) .wp-block-button.is-style-link .wp-block-button__link::before {
		transform-origin: right;
		transition: transform 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94);
	}
	.c-more:hover::before,
	.c-realizacja__link:hover .c-realizacja__wiecej::before,
	:is(.c-content, .c-main) .wp-block-button.is-style-link .wp-block-button__link:hover::before {
		animation: none;
		transform: scaleX(0);
	}

	/* Karty ze zdjęciem „[cms-item]”: zdjęcie rośnie do 110% w 0,4 s. */
	.c-realizacja__img,
	.c-galeria__img,
	.c-sekcje .is-style-karta-szklo .wp-block-cover__image-background {
		transition: transform 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94);
	}
	.c-realizacja__link:hover .c-realizacja__img,
	.c-galeria__link:hover .c-galeria__img,
	.c-sekcje .is-style-karta-szklo:hover .wp-block-cover__image-background { transform: scale(1.1); }

	/* Listy linków w stopce i w rozwijanym menu: najechany zostaje, sąsiedzi gasną do 50% w 0,4 s. */
	:is(.c-footer__list, .c-nav__list .sub-menu) a { transition: opacity 0.4s ease, background-color 0.3s ease; }
	:is(.c-footer__list, .c-nav__list .sub-menu):hover a:not(:hover) { opacity: 0.5; }

	@media (prefers-reduced-motion: no-preference) {
		/* Rysowanie ikon: każda kreska ma długość 1 (pathLength), więc wystarczy przesunąć kreskowanie. */
		.av-rys .c-start-ikona :is(path, line, polyline, polygon, rect, circle, ellipse) {
			stroke-dasharray: 1;
			stroke-dashoffset: 1;
		}
		.av-rys.av-rys--gotowe .c-start-ikona :is(path, line, polyline, polygon, rect, circle, ellipse) {
			stroke-dashoffset: 0;
			transition: stroke-dashoffset 1s cubic-bezier(0.65, 0, 0.35, 1) calc(var(--av-k, 0) * 0.15s + var(--av-j, 0) * 0.06s + 0.3s);
		}
		/* Bez efektu po najechaniu (Marcin 22.10: boksy migały przy przesuwaniu kursora po siatce). */

		/* Pokaz na stronie głównej: aktywne zdjęcie powoli się przybliża (1 do 1,1 w 8 s), każde w inną stronę;
		   przenikanie 1 s zostaje z sekcje.css. Pauza pokazu zatrzymuje też przybliżanie. */
		.c-hero__zdjecie:is(.is-aktywny, .is-poprzedni) { animation: av-przyblizenie 8s linear both; }
		.c-hero:has(.c-hero__pauza[aria-pressed="true"]) .c-hero__zdjecie { animation-play-state: paused; }
		.c-hero__zdjecie:nth-child(6n + 1) { transform-origin: 30% 40%; }
		.c-hero__zdjecie:nth-child(6n + 2) { transform-origin: 75% 30%; }
		.c-hero__zdjecie:nth-child(6n + 3) { transform-origin: 50% 75%; }
		.c-hero__zdjecie:nth-child(6n + 4) { transform-origin: 15% 65%; }
		.c-hero__zdjecie:nth-child(6n + 5) { transform-origin: 85% 60%; }
		.c-hero__zdjecie:nth-child(6n + 6) { transform-origin: 45% 20%; }
		@keyframes av-przyblizenie { from { transform: scale(1); } to { transform: scale(1.1); } }
	}

}