/* Tel-Raf: ruch na stronie (wejście elementów, rozwijanie FAQ, menu główne na komputerze).
   Pracuje razem z tel-raf-ruch.js. Tylko transform i opacity (plus kolory tła w FAQ).
   Przy „ogranicz ruch” w systemie nic się nie rusza, a bez JS cała treść jest widoczna od razu. */

:root {
	--wa-anim-dystans: 40px;
	--wa-anim-czas: 650ms;
	--wa-anim-krzywa: cubic-bezier(.22, .61, .36, 1);
	--wa-faq-t: 260ms;
}

@media (max-width: 767px) {
	:root {
		--wa-anim-dystans: 24px;
		--wa-anim-czas: 550ms;
	}
}

/* wjazd z boku nie może poszerzyć strony */
.wa-section {
	overflow-x: clip;
}

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

	/* ---------- wejście elementów (atrybuty ustawia JS) ---------- */

	/* Przejście tylko przy wjeździe: ukrycie bez przejścia, bo widoczny tekst powoli gasł
	   (PM 2026-10-30, blok tekst + zdjęcie). */
	html.wa-anim [data-wa-a] {
		opacity: 0;
		will-change: opacity, transform;
	}

	html.wa-anim [data-wa-a="lewo"] {
		transform: translateX(calc(var(--wa-anim-dystans) * -1));
	}

	html.wa-anim [data-wa-a="prawo"] {
		transform: translateX(var(--wa-anim-dystans));
	}

	html.wa-anim [data-wa-a="dol"] {
		transform: translateY(var(--wa-anim-dystans));
	}

	/* na telefonie wszystko z dołu, bez ruchu w poziomie */
	@media (max-width: 767px) {
		html.wa-anim [data-wa-a="lewo"],
		html.wa-anim [data-wa-a="prawo"] {
			transform: translateY(var(--wa-anim-dystans));
		}
	}

	html.wa-anim [data-wa-a].wa-wjechal {
		opacity: 1;
		transform: none;
		transition: opacity var(--wa-anim-czas) var(--wa-anim-krzywa), transform var(--wa-anim-czas) var(--wa-anim-krzywa);
		transition-delay: var(--wa-d, 0ms);
	}

	/* po animacji kafle wracają do własnego najechania 0,2 s */
	html.wa-anim [data-wa-a].wa-gotowe {
		transition-delay: 0ms;
		will-change: auto;
	}

	html.wa-anim .wa-karty__card.wa-gotowe {
		transition: box-shadow .2s, transform .2s;
	}

	/* transform: none z .wa-wjechal (0,3,1) zjadał uniesienie karty z linkiem po najechaniu
	   (karty/style.css, 0,2,0). Dopisane przy wdrożeniu, poza plikiem od PM. */
	@media (hover: hover) {
		html.wa-anim .wa-karty__card--link.wa-gotowe:hover {
			transform: translateY(-4px);
		}
	}

	/* ---------- FAQ: płynne rozwijanie (JS dodaje klasę wa-anim-faq i wa-zamykanie) ---------- */

	html.wa-anim-faq .wa-faq {
		overflow-anchor: none;
	}

	html.wa-anim-faq .wa-faq__item {
		transition: background-color var(--wa-faq-t) var(--wa-anim-krzywa), border-radius var(--wa-faq-t) var(--wa-anim-krzywa), border-bottom-color var(--wa-faq-t) var(--wa-anim-krzywa);
	}

	html.wa-anim-faq .wa-faq__pytanie {
		transition: padding-bottom var(--wa-faq-t) var(--wa-anim-krzywa);
	}

	html.wa-anim-faq .wa-faq__ikona {
		transition: transform var(--wa-faq-t) var(--wa-anim-krzywa) !important;
	}

	html.wa-anim-faq .wa-faq__item[open]::before {
		animation: wa-faq-pasek var(--wa-faq-t) var(--wa-anim-krzywa) both;
		transition: opacity var(--wa-faq-t) var(--wa-anim-krzywa);
	}

	html.wa-anim-faq .wa-faq__item.wa-zamykanie {
		background-color: transparent;
		border-bottom-color: var(--wa-color-line);
		border-radius: 0;
	}

	html.wa-anim-faq .wa-faq__item.wa-zamykanie::before {
		opacity: 0;
		animation: none;
	}

	html.wa-anim-faq .wa-faq__item.wa-zamykanie .wa-faq__ikona {
		transform: none;
	}

	@keyframes wa-faq-pasek {
		from {
			opacity: 0;
			transform: scaleY(.2);
		}

		to {
			opacity: 1;
			transform: none;
		}
	}

	/* ---------- menu główne na komputerze ---------- */
	/* Nazwa kategorii: stała grubość pisma, podkreślenie rysuje się od lewej, strzałka się obraca.
	   Podmenu opada z góry i zamyka się z opóźnieniem 120 ms. Nakładka na treść jest lżejsza.
	   Pozycje podmenu zostają bez przesuwania (pomarańczowy kolor po najechaniu zostaje z motywu).
	   Te reguły nadpisują blok menu w motywie potomnym (ta sama specyficzność, ładowane później). */

	#ast-desktop-header .ast-builder-menu-1 .main-header-menu > .menu-item > .menu-link {
		position: relative;
	}

	#ast-desktop-header .ast-builder-menu-1 .main-header-menu > .menu-item > .menu-link::after {
		content: "";
		position: absolute;
		left: 0;
		right: 0;
		bottom: -6px;
		height: 2px;
		background: var(--ast-global-color-1, #d35400);
		transform: scaleX(0);
		transform-origin: left center;
		transition: transform 280ms var(--wa-anim-krzywa);
		pointer-events: none;
	}

	#ast-desktop-header .ast-builder-menu-1 .main-header-menu > .menu-item:is(:hover, .focus, :focus-within) > .menu-link {
		font-weight: 400;
	}

	#ast-desktop-header .ast-builder-menu-1 .main-header-menu > .menu-item:is(:hover, .focus, :focus-within) > .menu-link::after {
		transform: scaleX(1);
	}

	#ast-desktop-header .ast-builder-menu-1 .main-header-menu > .menu-item > .menu-link .dropdown-menu-toggle {
		transition: transform 280ms var(--wa-anim-krzywa);
	}

	#ast-desktop-header .ast-builder-menu-1 .main-header-menu > .menu-item:is(:hover, .focus, :focus-within) > .menu-link .dropdown-menu-toggle {
		transform: rotate(180deg);
	}

	#ast-desktop-header .ast-builder-menu-1 .main-header-menu > .menu-item > .sub-menu {
		transform: translateY(-10px);
		transition: opacity 160ms ease 120ms, transform 160ms ease 120ms, visibility 0s linear 280ms;
	}

	#ast-desktop-header .ast-builder-menu-1 .main-header-menu > .menu-item:is(:hover, .focus, :focus-within) > .sub-menu {
		transform: none;
		transition: opacity 280ms var(--wa-anim-krzywa), transform 280ms var(--wa-anim-krzywa), visibility 0s;
	}

	#content::before {
		background-color: rgba(0, 26, 36, .26);
		transition: opacity 220ms ease;
	}

	body:has(#ast-hf-menu-1 > .menu-item-has-children:is(:hover, .focus, :focus-within)) #content::before {
		transition-delay: 100ms;
	}
}