/**
 * Dom360 — warstwa ruchu (wariant „Nocna głębia").
 *
 * Plik ładuje się TYLKO wtedy, gdy aktywny wariant stylu ustawia
 * settings.custom.motion = "on" (patrz inc/assets.php). Pozostałe trzy
 * warianty go nie pobierają, więc nie płacą za niego ani bajtem.
 *
 * Dwie zasady, od których nie ma odstępstw:
 *
 * 1. Treść jest czytelna bez animacji. Wejścia sterowane przewijaniem żyją
 *    w @supports (animation-timeline), a wejścia przy załadowaniu w
 *    @media (prefers-reduced-motion: no-preference). Przeglądarka, która
 *    nie zna tych mechanizmów, pokazuje gotową stronę — nie pustą.
 * 2. Nic nie miga i nie skacze. Ruch to przesunięcie o kilkanaście pikseli
 *    i zmiana przezroczystości, nigdy zmiana układu.
 */

/* ---------------------------------------------------- Paleta termowizyjna */

/*
 * Kolory poświat wywodzą się z palety wariantu (zimny cyan → gorący bursztyn),
 * czyli z tej samej skali, którą widać na zdjęciach z kamery termowizyjnej.
 */
:root {
	--dom360-glow-cold: color-mix(in srgb, var(--wp--preset--color--brand) 60%, transparent);
	--dom360-glow-hot: color-mix(in srgb, var(--wp--preset--color--accent) 55%, transparent);
}

/* --------------------------------------------------------- Tło termiczne */

/*
 * Sekcje hero dostają wolno dryfującą mgłę cieplną. Rysuje ją warstwa
 * ::before pod treścią, więc nic nie przesłania tekstu ani nie łapie kliknięć.
 */
.has-brand-fade-gradient-background,
.has-inverse-fade-gradient-background {
	position: relative;
	isolation: isolate;
	overflow: hidden;
}

.has-brand-fade-gradient-background::before,
.has-inverse-fade-gradient-background::before {
	content: "";
	position: absolute;
	inset: -30%;
	z-index: -1;
	pointer-events: none;
	background:
		radial-gradient(38% 46% at 18% 28%, var(--dom360-glow-cold) 0%, transparent 62%),
		radial-gradient(34% 40% at 82% 22%, var(--dom360-glow-hot) 0%, transparent 60%),
		radial-gradient(46% 52% at 62% 84%, var(--dom360-glow-cold) 0%, transparent 66%);
	opacity: 0.5;
	filter: blur(28px) saturate(130%);
}

@media (prefers-reduced-motion: no-preference) {
	.has-brand-fade-gradient-background::before,
	.has-inverse-fade-gradient-background::before {
		animation: dom360-drift 26s ease-in-out infinite alternate;
	}
}

@keyframes dom360-drift {
	from { transform: translate3d(-3%, -2%, 0) scale(1); }
	to   { transform: translate3d(4%, 3%, 0) scale(1.12); }
}

/* Delikatna siatka pomiarowa — czytelny znak „dokumentacja techniczna". */
.has-brand-fade-gradient-background::after {
	content: "";
	position: absolute;
	inset: 0;
	z-index: -1;
	pointer-events: none;
	background-image:
		linear-gradient(to right, color-mix(in srgb, var(--wp--preset--color--contrast) 6%, transparent) 1px, transparent 1px),
		linear-gradient(to bottom, color-mix(in srgb, var(--wp--preset--color--contrast) 6%, transparent) 1px, transparent 1px);
	background-size: 72px 72px;
	mask-image: radial-gradient(70% 60% at 50% 40%, #000 0%, transparent 78%);
	-webkit-mask-image: radial-gradient(70% 60% at 50% 40%, #000 0%, transparent 78%);
}

/* ------------------------------------------- Wejście treści po załadowaniu */

@media (prefers-reduced-motion: no-preference) {
	.has-brand-fade-gradient-background :is(h1, .is-style-eyebrow, .is-style-lead, .wp-block-buttons, .wp-block-group.is-style-card) {
		animation: dom360-rise 0.72s cubic-bezier(0.22, 1, 0.36, 1) both;
	}

	/* Kolejność wejścia prowadzi wzrok: etykieta → nagłówek → lead → akcja. */
	.has-brand-fade-gradient-background .is-style-eyebrow { animation-delay: 0.04s; }
	.has-brand-fade-gradient-background h1                { animation-delay: 0.12s; }
	.has-brand-fade-gradient-background .is-style-lead    { animation-delay: 0.22s; }
	.has-brand-fade-gradient-background .wp-block-buttons { animation-delay: 0.32s; }
	.has-brand-fade-gradient-background .wp-block-group.is-style-card { animation-delay: 0.4s; }
}

@keyframes dom360-rise {
	from { opacity: 0; transform: translate3d(0, 18px, 0); }
	to   { opacity: 1; transform: none; }
}

/* ----------------------------------------- Odsłanianie przy przewijaniu */

/*
 * Animacje sterowane przewijaniem (animation-timeline) działają bez
 * JavaScriptu. Element już widoczny przy wczytaniu ma zakres „entry" za sobą,
 * więc renderuje się od razu w stanie końcowym — nic nie miga.
 */
@supports (animation-timeline: view()) {
	@media (prefers-reduced-motion: no-preference) {
		main :is(.wp-block-group, .wp-block-columns).alignwide,
		main .wp-block-details.is-style-faq {
			animation: dom360-reveal linear both;
			animation-timeline: view();
			animation-range: entry 8% cover 26%;
		}

		/* Karty w siatce wchodzą pojedynczo, każda własnym zakresem. */
		main .wp-block-group.is-style-card,
		main .wp-block-group.is-style-card-hover {
			animation: dom360-reveal-card linear both;
			animation-timeline: view();
			animation-range: entry 4% cover 24%;
		}
	}
}

@keyframes dom360-reveal {
	from { opacity: 0; transform: translate3d(0, 26px, 0); }
	to   { opacity: 1; transform: none; }
}

@keyframes dom360-reveal-card {
	from { opacity: 0; transform: translate3d(0, 20px, 0) scale(0.985); }
	to   { opacity: 1; transform: none; }
}

/* ------------------------------------------------------------- Karty */

.wp-block-group.is-style-card,
.wp-block-group.is-style-card-hover {
	position: relative;
	background: color-mix(in srgb, var(--wp--preset--color--base-2) 82%, transparent);
	backdrop-filter: blur(10px);
	-webkit-backdrop-filter: blur(10px);
	border-color: color-mix(in srgb, var(--wp--preset--color--contrast) 10%, transparent);
	overflow: hidden;
}

/* Poświata wędrująca za kursorem — bez JS, na czystym przejściu krycia. */
.wp-block-group.is-style-card-hover::after {
	content: "";
	position: absolute;
	inset: -1px;
	border-radius: inherit;
	pointer-events: none;
	opacity: 0;
	transition: opacity 0.35s ease;
	background: radial-gradient(60% 70% at 50% 0%, var(--dom360-glow-cold) 0%, transparent 70%);
	mix-blend-mode: screen;
}

.wp-block-group.is-style-card-hover:hover::after,
.wp-block-group.is-style-card-hover:focus-within::after {
	opacity: 0.4;
}

.wp-block-group.is-style-card-hover:hover {
	border-color: color-mix(in srgb, var(--wp--preset--color--brand) 45%, transparent);
	box-shadow:
		0 1px 0 0 color-mix(in srgb, var(--wp--preset--color--brand) 22%, transparent) inset,
		0 24px 60px -28px var(--dom360-glow-cold);
}

/* ------------------------------------------------------------ Przyciski */

.wp-block-button__link {
	position: relative;
	overflow: hidden;
	transition: transform 0.22s cubic-bezier(0.22, 1, 0.36, 1), box-shadow 0.22s ease,
		background-color 0.22s ease, color 0.22s ease, border-color 0.22s ease;
}

/* Refleks przesuwający się po przycisku przy najechaniu. */
.wp-block-button__link::before {
	content: "";
	position: absolute;
	inset: 0;
	pointer-events: none;
	background: linear-gradient(105deg, transparent 38%, rgba(255, 255, 255, 0.28) 50%, transparent 62%);
	transform: translateX(-120%);
}

@media (prefers-reduced-motion: no-preference) {
	.wp-block-button__link:hover::before {
		animation: dom360-sheen 0.7s ease-out;
	}
}

@keyframes dom360-sheen {
	to { transform: translateX(120%); }
}

.wp-block-button__link:hover {
	transform: translateY(-2px);
	box-shadow: 0 14px 34px -14px var(--dom360-glow-cold);
}

.wp-block-button.is-style-accent .wp-block-button__link:hover {
	box-shadow: 0 14px 34px -14px var(--dom360-glow-hot);
}

/* --------------------------------------------------- Ikony i liczniki */

.dom360-icon {
	position: relative;
	background: color-mix(in srgb, var(--wp--preset--color--brand) 14%, transparent);
	box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--wp--preset--color--brand) 30%, transparent);
	transition: box-shadow 0.3s ease, background-color 0.3s ease;
}

.wp-block-group.is-style-card-hover:hover .dom360-icon {
	background: color-mix(in srgb, var(--wp--preset--color--brand) 24%, transparent);
	box-shadow:
		inset 0 0 0 1px color-mix(in srgb, var(--wp--preset--color--brand) 55%, transparent),
		0 0 24px -6px var(--dom360-glow-cold);
}

.dom360-step {
	background: linear-gradient(140deg, var(--wp--preset--color--brand), var(--wp--preset--color--accent));
	color: #06121a;
	box-shadow: 0 8px 24px -12px var(--dom360-glow-hot);
}

/* Liczby w pasku zaufania czyta się jak odczyt z przyrządu. */
.wp-block-columns.is-style-divided .wp-block-column > p:first-child {
	background: linear-gradient(120deg,
		var(--wp--preset--color--contrast) 0%,
		var(--wp--preset--color--brand) 55%,
		var(--wp--preset--color--accent) 100%);
	-webkit-background-clip: text;
	background-clip: text;
	color: transparent;
	background-size: 220% 100%;
}

@media (prefers-reduced-motion: no-preference) {
	.wp-block-columns.is-style-divided .wp-block-column > p:first-child {
		animation: dom360-scan 9s ease-in-out infinite alternate;
	}
}

@keyframes dom360-scan {
	from { background-position: 0% 50%; }
	to   { background-position: 100% 50%; }
}

/* ------------------------------------------------------------ Nagłówek */

.dom360-header {
	background: color-mix(in srgb, var(--wp--preset--color--base) 72%, transparent);
	border-bottom-color: color-mix(in srgb, var(--wp--preset--color--contrast) 10%, transparent);
	transition: box-shadow 0.3s ease;
}

/* Pasek zyskuje cień dopiero po odjechaniu od góry — sterowane przewijaniem. */
@supports (animation-timeline: scroll()) {
	@media (prefers-reduced-motion: no-preference) {
		.dom360-header {
			animation: dom360-header-lift linear both;
			animation-timeline: scroll(root block);
			animation-range: 0 140px;
		}
	}
}

@keyframes dom360-header-lift {
	from { box-shadow: 0 0 0 0 transparent; }
	to   { box-shadow: 0 10px 30px -18px rgba(0, 0, 0, 0.75); }
}

/* Podkreślenie menu rozjaśnia się kolorem marki. */
.dom360-header .wp-block-navigation-item__content::after {
	background: linear-gradient(90deg, var(--wp--preset--color--brand), var(--wp--preset--color--accent));
}

/* ------------------------------------------------------------ Etykiety */

/* Przed nadtytułem pulsuje punkt — jak dioda pracującego czujnika. */
.is-style-eyebrow {
	display: flex;
	align-items: center;
	gap: 0.6rem;
}

.is-style-eyebrow::before {
	content: "";
	width: 0.45rem;
	height: 0.45rem;
	flex: none;
	border-radius: var(--wp--custom--radius--pill);
	background: currentColor;
	box-shadow: 0 0 0 0 currentColor;
}

@media (prefers-reduced-motion: no-preference) {
	.is-style-eyebrow::before {
		animation: dom360-pulse 2.6s ease-out infinite;
	}
}

@keyframes dom360-pulse {
	0%   { box-shadow: 0 0 0 0 currentColor; opacity: 1; }
	70%  { box-shadow: 0 0 0 0.5rem transparent; opacity: 0.75; }
	100% { box-shadow: 0 0 0 0 transparent; opacity: 1; }
}

/* ---------------------------------------------------------------- FAQ */

.wp-block-details.is-style-faq {
	border-bottom-color: color-mix(in srgb, var(--wp--preset--color--contrast) 12%, transparent);
	transition: border-color 0.3s ease;
}

.wp-block-details.is-style-faq:hover {
	border-bottom-color: color-mix(in srgb, var(--wp--preset--color--brand) 45%, transparent);
}

@media (prefers-reduced-motion: no-preference) {
	.wp-block-details.is-style-faq[open] > :not(summary) {
		animation: dom360-rise 0.4s cubic-bezier(0.22, 1, 0.36, 1) both;
	}
}

/* --------------------------------------------------------- Separatory */

.wp-block-separator.is-style-wide-line {
	border-top: none;
	height: 1px;
	background: linear-gradient(90deg,
		transparent,
		color-mix(in srgb, var(--wp--preset--color--brand) 45%, transparent),
		transparent);
}

/* ------------------------------------------------------- Bezpieczniki */

/*
 * Ostatnie słowo należy do ustawień dostępności użytkownika. Reguła stoi na
 * końcu pliku, więc wygrywa z każdą deklaracją powyżej.
 */
@media (prefers-reduced-motion: reduce) {
	*,
	*::before,
	*::after {
		animation: none !important;
		transition: none !important;
	}

	main :is(.wp-block-group, .wp-block-columns).alignwide,
	main .wp-block-group.is-style-card,
	main .wp-block-group.is-style-card-hover,
	main .wp-block-details.is-style-faq {
		opacity: 1 !important;
		transform: none !important;
	}
}

/* Druk: żadnych teł, poświat ani siatek. */
@media print {
	.has-brand-fade-gradient-background::before,
	.has-brand-fade-gradient-background::after,
	.has-inverse-fade-gradient-background::before,
	.wp-block-group.is-style-card-hover::after {
		display: none !important;
	}
}

/* ----------------------------------------- Sekcje kinetyczne: ruch */

/*
 * Rotator wymienia słowa czystym CSS-em. Każde słowo ma własne opóźnienie
 * wyliczone z --i, więc dodanie kolejnego w PHP nie wymaga dotykania stylów
 * poza zmienną --dom360-slow.
 */
@media (prefers-reduced-motion: no-preference) {
	.dom360-kinetic__rotator {
		--dom360-slow: 4;   /* liczba słów w rotatorze */
	}

	.dom360-kinetic__word {
		animation: dom360-rotate calc(var(--dom360-slow) * 2.6s) linear infinite both;
		animation-delay: calc(var(--i) * 2.6s);
	}

	.dom360-kinetic__word:first-child {
		opacity: 0;
	}
}

/*
 * Każde słowo startuje 25% cyklu po poprzednim, więc wygaszanie musi sięgać
 * poza ten próg — inaczej poprzednie słowo znika, zanim następne zdąży się
 * pojawić, i nagłówek na moment ma dziurę. Zakresy 23–27% i 0–3% zachodzą
 * na siebie, dając przenikanie zamiast przerwy.
 */
@keyframes dom360-rotate {
	0%                        { opacity: 0; transform: translate3d(0, 0.45em, 0); }
	3%, 23%                   { opacity: 1; transform: none; }
	27%, 100%                 { opacity: 0; transform: translate3d(0, -0.45em, 0); }
}

/* Linia skanująca pod nagłówkiem — odwołanie do pracy kamerą termowizyjną. */
.dom360-kinetic__rotator::after {
	content: "";
	position: absolute;
	left: 0;
	right: 0;
	bottom: -0.12em;
	height: 2px;
	background: linear-gradient(90deg, transparent, var(--wp--preset--color--brand), var(--wp--preset--color--accent), transparent);
	transform-origin: left;
}

@media (prefers-reduced-motion: no-preference) {
	.dom360-kinetic__rotator::after {
		animation: dom360-scanline 2.6s ease-in-out infinite;
	}
}

@keyframes dom360-scanline {
	0%, 100% { transform: scaleX(0.15); opacity: 0.45; }
	50%      { transform: scaleX(1); opacity: 1; }
}

/* Pasek uprawnień: pętla bez JavaScriptu — druga kopia listy domyka obrót. */
@media (prefers-reduced-motion: no-preference) {
	.dom360-marquee__track {
		animation: dom360-marquee 34s linear infinite;
	}

	.dom360-marquee:hover .dom360-marquee__track {
		animation-play-state: paused;
	}
}

@keyframes dom360-marquee {
	from { transform: translate3d(0, 0, 0); }
	to   { transform: translate3d(-50%, 0, 0); }
}

/* Kroki przebiegu odsłaniają się kolejno przy przewijaniu. */
@supports (animation-timeline: view()) {
	@media (prefers-reduced-motion: no-preference) {
		.dom360-flow__step {
			animation: dom360-reveal-card linear both;
			animation-timeline: view();
			animation-range: entry 6% cover 28%;
		}
	}
}

.dom360-flow__step {
	transition: border-color 0.3s ease, box-shadow 0.3s ease;
}

.dom360-flow__step:hover {
	border-color: color-mix(in srgb, var(--wp--preset--color--brand) 45%, transparent);
	box-shadow: 0 20px 50px -30px var(--dom360-glow-cold);
}

/* Sygnały pod nagłówkiem wchodzą razem z resztą hero. */
@media (prefers-reduced-motion: no-preference) {
	.has-brand-fade-gradient-background .dom360-signals {
		animation: dom360-rise 0.72s cubic-bezier(0.22, 1, 0.36, 1) both;
		animation-delay: 0.46s;
	}

	.dom360-kinetic {
		animation: dom360-rise 0.72s cubic-bezier(0.22, 1, 0.36, 1) both;
		animation-delay: 0.12s;
	}
}