/*
 * INB Developer — base.css
 *
 * WSPÓLNY KONTRAKT KLAS (REUSABLE CORE). Nazwy klas z tego pliku są zamrożone:
 * sekcje mogą ich używać, ale nie mogą ich nadpisywać globalnie ani zmieniać nazw.
 * Kolory wyłącznie przez tokeny z theme.json (--wp--preset--color--*, --wp--custom--color--*).
 *
 * Spis:
 *  0. Izolacja HERO (HOME v2 nie zmienia typografii ani przycisków HERO)
 *  1. Ciemne sekcje (dziedziczenie koloru, linki, fokus)
 *  2. Typografia: nagłówki sekcji, eyebrow, lead, linia pionowa
 *  3. Przyciski (style bloków: inb-accent, inb-ghost-light, inb-ghost) + mikrointerakcje v2
 *  4. Krzywa „tarasu” (szew między sekcjami)
 *  5. Media (obrazy wypełniające)
 *  6. Ruch: odsłonięcia przy przewijaniu (reveal, mask, stagger, licznik) + prefers-reduced-motion
 *  7. Dostępność (sr-only; skip link dostarcza core WordPressa)
 */

/* ---------------------------------------------------------------------
 * 0. Izolacja HERO
 * HOME v2 zmienia krój tekstu podstawowego na Manrope. HERO (placeholder ETAPU 7,
 * zastąpi go cinematic 2.5D) zostaje w typografii v1: systemowy krój także dla
 * akapitu i przycisków. Mikrointerakcje v2 przycisków działają tylko w nagłówku,
 * stopce i sekcjach poza HERO (sekcja 3), więc przyciski HERO zachowują zachowanie v1.
 * ------------------------------------------------------------------- */

.inb-hero,
.inb-hero .wp-block-button__link {
	font-family: var(--wp--preset--font-family--system);
}

/* ---------------------------------------------------------------------
 * 1. Ciemne sekcje
 * Sekcja ciemna = natywny kolor tła bloku (primary-deep / primary) + textColor surface.
 * Dodatkowa klasa .inb-on-dark ustawia linki i fokus czytelne na zieleni.
 * ------------------------------------------------------------------- */

html {
	scroll-behavior: smooth;
}

body {
	overflow-x: clip;
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
}

:where(.wp-site-blocks) > * {
	margin-block-start: 0;
}

[id] {
	/* Wysokość nagłówka mierzy site.js; 4.5rem to wartość bez JS. */
	scroll-margin-top: calc(var(--inb-header-height, 4.5rem) + 1rem);
}

.inb-on-dark,
.has-primary-deep-background-color,
.has-primary-background-color {
	--inb-focus: var(--wp--custom--color--focus-on-dark);
	color: var(--wp--custom--color--on-dark);
}

.inb-on-dark a:where(:not(.wp-element-button)),
.has-primary-deep-background-color a:where(:not(.wp-element-button)),
.has-primary-background-color a:where(:not(.wp-element-button)) {
	color: inherit;
	text-decoration-color: var(--wp--custom--color--rule-on-dark);
	text-underline-offset: 0.2em;
}

.inb-on-dark a:where(:not(.wp-element-button)):hover,
.has-primary-deep-background-color a:where(:not(.wp-element-button)):hover,
.has-primary-background-color a:where(:not(.wp-element-button)):hover {
	text-decoration-color: currentColor;
}

.inb-muted {
	color: var(--wp--custom--color--text-muted);
}

.inb-on-dark .inb-muted,
.has-primary-deep-background-color .inb-muted,
.has-primary-background-color .inb-muted {
	color: var(--wp--custom--color--on-dark-muted);
}

/* ---------------------------------------------------------------------
 * 2. Typografia
 * ------------------------------------------------------------------- */

/*
 * Nagłówki sekcji (HOME v2): systemowy krój, waga ok. 750, ciasne rozstrzelenie i interlinia
 * (charakter strony „w budowie”). Jednolita waga; <strong> nie pogrubia — na ciemnych tłach
 * sekcje barwią go piaskiem (kontrast AA), na jasnych pozostaje w kolorze tekstu.
 * HERO ma własne style (.inb-hero__title) i tej reguły nie używa.
 */
.inb-display,
.inb-heading {
	font-family: var(--wp--preset--font-family--heading);
	font-weight: var(--wp--custom--font-weight--title);
	line-height: var(--wp--custom--line-height--title);
	letter-spacing: var(--wp--custom--letter-spacing--title);
	text-wrap: balance;
}

.inb-display strong,
.inb-display b,
.inb-heading strong {
	font-weight: inherit;
}

/*
 * Podtytuł sekcji („eyebrow”): mały napis wersalikami z piaskową kreską po lewej.
 * Tekst w kolorze tekstu sekcji (na jasnym tle piasek ma kontrast 1,99:1 — ADR 0002),
 * kreska jest dekoracją. Na zieleni tekst piaskowy (6,09:1).
 */
.inb-eyebrow {
	display: flex;
	align-items: center;
	gap: 0.875rem;
	margin-block: 0;
	font-family: var(--wp--preset--font-family--body);
	font-size: 0.8125rem;
	font-weight: var(--wp--custom--font-weight--bold);
	line-height: 1.3;
	letter-spacing: var(--wp--custom--letter-spacing--eyebrow);
	text-transform: uppercase;
	color: var(--wp--custom--color--text);
}

.inb-eyebrow::before {
	content: "";
	flex: 0 0 2.25rem;
	height: 2px;
	border-radius: 2px;
	background: var(--wp--custom--color--accent-on-dark);
}

.inb-on-dark .inb-eyebrow,
.has-primary-deep-background-color .inb-eyebrow,
.has-primary-background-color .inb-eyebrow {
	color: var(--wp--custom--color--accent-on-dark);
}

/* Akapit wiodący. */
.inb-lead {
	font-size: var(--wp--preset--font-size--large);
	font-weight: var(--wp--custom--font-weight--light);
	line-height: 1.45;
	text-wrap: pretty;
}

/* Pionowa piaskowa linia (motyw z billboardu i katalogu). Tylko na ciemnym tle. */
.inb-rule-left {
	border-inline-start: 2px solid var(--wp--custom--color--accent-on-dark);
	padding-inline-start: clamp(1rem, 0.5rem + 1.5vw, 2rem);
}

/* Cienka pozioma linia pomiędzy elementami listy itp. */
.inb-hairline-top {
	border-block-start: 1px solid var(--wp--custom--color--rule);
}

.inb-on-dark .inb-hairline-top,
.has-primary-deep-background-color .inb-hairline-top,
.has-primary-background-color .inb-hairline-top {
	border-block-start-color: var(--wp--custom--color--rule-on-dark);
}

/* Duża liczba / wartość — krój nagłówków (Manrope z cyframi tabelarycznymi rozsuwa „67”). */
.inb-figure {
	font-family: var(--wp--preset--font-family--heading);
	font-size: var(--wp--preset--font-size--jumbo);
	font-weight: var(--wp--custom--font-weight--black);
	line-height: 0.9;
	letter-spacing: var(--wp--custom--letter-spacing--display);
	font-variant-numeric: lining-nums tabular-nums;
}

/* Lista bez punktorów (natywny blok listy + klasa). */
.inb-plain-list {
	list-style: none;
	padding-inline-start: 0;
}

/* ---------------------------------------------------------------------
 * 3. Przyciski — style bloków zarejestrowane w functions.php
 * ------------------------------------------------------------------- */

.wp-block-button .wp-block-button__link {
	transition: background-color var(--wp--custom--motion--duration) var(--wp--custom--motion--easing),
		color var(--wp--custom--motion--duration) var(--wp--custom--motion--easing),
		border-color var(--wp--custom--motion--duration) var(--wp--custom--motion--easing);
}

.wp-block-button.is-style-inb-accent .wp-block-button__link {
	background-color: var(--wp--custom--color--accent-on-dark);
	color: var(--wp--custom--color--surface-dark);
	border: 2px solid var(--wp--custom--color--accent-on-dark);
}

.wp-block-button.is-style-inb-accent .wp-block-button__link:hover {
	background-color: var(--wp--custom--color--on-dark);
	border-color: var(--wp--custom--color--on-dark);
	color: var(--wp--custom--color--surface-dark);
}

.wp-block-button.is-style-inb-ghost-light .wp-block-button__link {
	background-color: transparent;
	color: var(--wp--custom--color--on-dark);
	border: 2px solid var(--wp--custom--color--on-dark-muted);
}

.wp-block-button.is-style-inb-ghost-light .wp-block-button__link:hover {
	background-color: transparent;
	border-color: var(--wp--custom--color--on-dark);
	color: var(--wp--custom--color--on-dark);
}

.wp-block-button.is-style-inb-ghost .wp-block-button__link {
	background-color: transparent;
	color: var(--wp--custom--color--action);
	border: 2px solid var(--wp--custom--color--action);
}

.wp-block-button.is-style-inb-ghost .wp-block-button__link:hover {
	background-color: var(--wp--custom--color--action);
	color: var(--wp--custom--color--on-action);
}

/*
 * Mikrointerakcje przycisków v2 — zakres: nagłówek, stopka i wszystkie sekcje poza HERO
 * (:where nie podnosi specyficzności; style v1 powyżej zostają dla HERO).
 *  - kierunkowe wypełnienie tła (::before) wjeżdżające od lewej, zjeżdżające w prawo,
 *  - strzałka (::after) przy linkach do sekcji, e-mail i zewnętrznych (nie przy telefonie),
 *  - minimalne uniesienie i cień; :active — krótkie „wciśnięcie”,
 *  - na ekranach dotykowych (hover: none) bez trwałego stanu hover; wypełnienie tylko przy dotyku.
 * Zmiana koloru nie jest jedynym sygnałem stanu (ADR 0002): ruch strzałki, uniesienie i cień.
 */
:where(.inb-header, .inb-footer, main > :not(.inb-hero)) .wp-block-button .wp-block-button__link {
	/* Jaśniejsza zieleń (ok. 6,7:1 z białym tekstem): primary-deep na primary byłby niewidoczny (1,05:1). */
	--inb-btn-fill: color-mix(in srgb, var(--wp--custom--color--action) 80%, var(--wp--preset--color--surface));
	--inb-btn-fill-text: var(--wp--custom--color--on-action);
	position: relative;
	isolation: isolate;
	overflow: hidden;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 0.65em;
	transition: color var(--wp--custom--motion--duration-fast) var(--wp--custom--motion--easing),
		border-color var(--wp--custom--motion--duration-fast) var(--wp--custom--motion--easing),
		box-shadow var(--wp--custom--motion--duration-fast) var(--wp--custom--motion--easing),
		transform var(--wp--custom--motion--duration-fast) var(--wp--custom--motion--easing);
}

:where(.inb-header, .inb-footer, main > :not(.inb-hero)) .wp-block-button__link::before {
	content: "";
	position: absolute;
	inset: 0;
	z-index: -1;
	background: var(--inb-btn-fill);
	transform: scaleX(0);
	transform-origin: right center;
	transition: transform 420ms var(--wp--custom--motion--easing-out);
}

:where(.inb-header, .inb-footer, main > :not(.inb-hero)) .wp-block-button__link:where([href^="#"], [href^="/#"], [href^="mailto:"], [href^="http"])::after {
	content: "";
	flex: 0 0 auto;
	width: 1em;
	height: 1em;
	background: currentColor;
	-webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 12h15M13 6l6 6-6 6'/%3E%3C/svg%3E") center / contain no-repeat;
	mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 12h15M13 6l6 6-6 6'/%3E%3C/svg%3E") center / contain no-repeat;
	transition: transform var(--wp--custom--motion--duration-fast) var(--wp--custom--motion--easing-out);
}

/* Kolory wypełnienia per styl (tło spoczynkowe zostaje, ruch daje ::before). */
:where(.inb-header, .inb-footer, main > :not(.inb-hero)) .wp-block-button.is-style-inb-accent .wp-block-button__link {
	--inb-btn-fill: var(--wp--custom--color--on-dark);
	--inb-btn-fill-text: var(--wp--custom--color--surface-dark);
}

:where(.inb-header, .inb-footer, main > :not(.inb-hero)) .wp-block-button.is-style-inb-ghost-light .wp-block-button__link {
	--inb-btn-fill: var(--wp--custom--color--on-dark);
	--inb-btn-fill-text: var(--wp--custom--color--surface-dark);
}

:where(.inb-header, .inb-footer, main > :not(.inb-hero)) .wp-block-button.is-style-inb-ghost .wp-block-button__link {
	--inb-btn-fill: var(--wp--custom--color--action);
	--inb-btn-fill-text: var(--wp--custom--color--on-action);
}

/* Stan aktywny wypełnienia: hover (tylko urządzenia z kursorem) i fokus z klawiatury. */
@media (hover: hover) {
	:where(.inb-header, .inb-footer, main > :not(.inb-hero)) .wp-block-button .wp-block-button__link:hover {
		transform: translate3d(0, -2px, 0);
		box-shadow: 0 0.875rem 1.75rem -1rem color-mix(in srgb, var(--wp--preset--color--primary-deep) 75%, transparent);
	}

	:where(.inb-header, .inb-footer, main > :not(.inb-hero)) .wp-block-button .wp-block-button__link:hover::before {
		transform: scaleX(1);
		transform-origin: left center;
	}

	:where(.inb-header, .inb-footer, main > :not(.inb-hero)) .wp-block-button .wp-block-button__link:hover::after {
		transform: translate3d(0.25em, 0, 0);
	}
}

:where(.inb-header, .inb-footer, main > :not(.inb-hero)) .wp-block-button .wp-block-button__link:focus-visible::before {
	transform: scaleX(1);
	transform-origin: left center;
}

:where(.inb-header, .inb-footer, main > :not(.inb-hero)) .wp-block-button .wp-block-button__link:focus-visible::after {
	transform: translate3d(0.25em, 0, 0);
}

/*
 * Stan aktywny: tło spoczynkowe zostaje, zmianę robi wypełnienie (::before); bez podkreślenia.
 * Kolory dla :hover tylko na urządzeniach z kursorem — na dotyku przeglądarki zostawiają :hover
 * po stuknięciu (bez wypełnienia tekst stałby się nieczytelny); tam obowiązuje wygląd hover v1.
 * :focus-visible i :active (wciśnięcie palcem) — wszędzie.
 */
:where(.inb-header, .inb-footer, main > :not(.inb-hero)) .wp-block-button .wp-block-button__link:is(:focus-visible, :active) {
	color: var(--inb-btn-fill-text);
	text-decoration: none;
}

:where(.inb-header, .inb-footer, main > :not(.inb-hero)) .wp-block-button:not([class*="is-style-"]) .wp-block-button__link:is(:focus-visible, :active) {
	background-color: var(--wp--custom--color--action);
}

:where(.inb-header, .inb-footer, main > :not(.inb-hero)) .wp-block-button.is-style-inb-accent .wp-block-button__link:is(:focus-visible, :active) {
	background-color: var(--wp--custom--color--accent-on-dark);
	border-color: var(--wp--custom--color--on-dark);
	color: var(--inb-btn-fill-text);
}

:where(.inb-header, .inb-footer, main > :not(.inb-hero)) .wp-block-button.is-style-inb-ghost-light .wp-block-button__link:is(:focus-visible, :active) {
	background-color: transparent;
	border-color: var(--wp--custom--color--on-dark);
	color: var(--inb-btn-fill-text);
}

:where(.inb-header, .inb-footer, main > :not(.inb-hero)) .wp-block-button.is-style-inb-ghost .wp-block-button__link:is(:focus-visible, :active) {
	background-color: transparent;
	border-color: var(--wp--custom--color--action);
	color: var(--inb-btn-fill-text);
}

@media (hover: hover) {
	:where(.inb-header, .inb-footer, main > :not(.inb-hero)) .wp-block-button .wp-block-button__link:hover {
		color: var(--inb-btn-fill-text);
		text-decoration: none;
	}

	:where(.inb-header, .inb-footer, main > :not(.inb-hero)) .wp-block-button:not([class*="is-style-"]) .wp-block-button__link:hover {
		background-color: var(--wp--custom--color--action);
	}

	:where(.inb-header, .inb-footer, main > :not(.inb-hero)) .wp-block-button.is-style-inb-accent .wp-block-button__link:hover {
		background-color: var(--wp--custom--color--accent-on-dark);
		border-color: var(--wp--custom--color--on-dark);
		color: var(--inb-btn-fill-text);
	}

	:where(.inb-header, .inb-footer, main > :not(.inb-hero)) .wp-block-button.is-style-inb-ghost-light .wp-block-button__link:hover {
		background-color: transparent;
		border-color: var(--wp--custom--color--on-dark);
		color: var(--inb-btn-fill-text);
	}

	:where(.inb-header, .inb-footer, main > :not(.inb-hero)) .wp-block-button.is-style-inb-ghost .wp-block-button__link:hover {
		background-color: transparent;
		border-color: var(--wp--custom--color--action);
		color: var(--inb-btn-fill-text);
	}
}

/* Dotyk i klik: krótkie wciśnięcie; na dotyku wypełnienie tylko na czas naciśnięcia. */
:where(.inb-header, .inb-footer, main > :not(.inb-hero)) .wp-block-button .wp-block-button__link:active {
	transform: translate3d(0, 0, 0) scale(0.97);
	box-shadow: none;
	transition-duration: 90ms;
}

:where(.inb-header, .inb-footer, main > :not(.inb-hero)) .wp-block-button .wp-block-button__link:active::before {
	transform: scaleX(1);
	transform-origin: left center;
	transition-duration: 160ms;
}

:where(.inb-header, .inb-footer, main > :not(.inb-hero)) .wp-block-button .wp-block-button__link:focus-visible {
	outline-offset: 3px;
}

/* Fokus czytelny w obu kontekstach. */
.inb-on-dark :focus-visible,
.has-primary-deep-background-color :focus-visible,
.has-primary-background-color :focus-visible {
	outline: 2px solid var(--wp--custom--color--focus-on-dark);
	outline-offset: 3px;
}

/* ---------------------------------------------------------------------
 * 4. Krzywa „tarasu”
 * Sekcja z klasą .inb-wave-top rysuje nad sobą miękki łuk w kolorze własnego tła,
 * który zachodzi na sekcję powyżej (szew zdjęcie → zieleń z materiałów klienta).
 * Element musi mieć kolor tła.
 * ------------------------------------------------------------------- */

.inb-wave-top {
	position: relative;
	isolation: isolate;
}

.inb-wave-top::before {
	content: "";
	position: absolute;
	inset-inline: 0;
	bottom: calc(100% - 1px);
	height: var(--wp--custom--wave--height);
	background: inherit;
	pointer-events: none;
	-webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1440 120' preserveAspectRatio='none'%3E%3Cpath d='M0 120V58C240 8 520-12 820 22c250 28 430 70 620 58v40z'/%3E%3C/svg%3E") center bottom / 100% 100% no-repeat;
	mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1440 120' preserveAspectRatio='none'%3E%3Cpath d='M0 120V58C240 8 520-12 820 22c250 28 430 70 620 58v40z'/%3E%3C/svg%3E") center bottom / 100% 100% no-repeat;
	z-index: 1;
}

/* ---------------------------------------------------------------------
 * 5. Media
 * ------------------------------------------------------------------- */

/* Obraz wypełniający swój kontener (np. kolumnę) z kadrowaniem. */
.inb-media-fill {
	margin: 0;
	height: 100%;
}

.inb-media-fill img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

/* Podpis poglądowy wizualizacji. */
.inb-caption,
.inb-media-fill figcaption {
	font-size: var(--wp--preset--font-size--small);
	color: var(--wp--custom--color--text-muted);
	margin-block-start: 0.6rem;
}

.inb-on-dark .inb-caption,
.has-primary-deep-background-color .inb-caption,
.has-primary-background-color .inb-caption,
.has-primary-deep-background-color figcaption,
.has-primary-background-color figcaption {
	color: var(--wp--custom--color--on-dark-muted);
}

/* ---------------------------------------------------------------------
 * 6. Ruch — odsłonięcia przy przewijaniu (HOME v2)
 *
 * Zasady:
 *  - stan ukryty istnieje wyłącznie z html.inb-js (ustawiane w <head>) i bez
 *    prefers-reduced-motion — bez JS albo z ograniczeniem ruchu treść jest od razu widoczna,
 *  - site.js dodaje .is-inview dopiero, gdy element wejdzie w widok (IntersectionObserver),
 *    jednokrotnie; elementy poniżej ekranu nie startują przy ładowaniu strony,
 *  - animujemy tylko opacity, transform i clip-path; brak animacji nieskończonych.
 *
 * Klasy (dodawane w polu „Dodatkowe klasy CSS” bloku):
 *  .inb-reveal                 — wejście z dołu (+ --left / --right / --fade),
 *  .inb-mask (+ --left/--right/--up/--down) — obraz odsłaniany maską z kierunku,
 *                                obraz w środku delikatnie „osiada” (skala),
 *  .inb-stagger                — dzieci kontenera wchodzą kolejno (site.js ustawia --inb-i),
 *  .inb-eyebrow                — kreska podtytułu dorysowuje się przy wejściu,
 *  .inb-count                  — licznik liczby całkowitej (site.js; treść w HTML = wartość końcowa).
 * Opóźnienie: --inb-delay (element) / --inb-stagger-base i --inb-stagger-step (kontener).
 * ------------------------------------------------------------------- */

@media (prefers-reduced-motion: no-preference) {
	/* 6a. Pojedynczy element */
	.inb-js .inb-reveal {
		opacity: 0;
		transform: translate3d(var(--inb-from-x, 0), var(--inb-from-y, 2rem), 0);
		transition: opacity var(--wp--custom--motion--duration) var(--wp--custom--motion--easing),
			transform var(--wp--custom--motion--duration-long) var(--wp--custom--motion--easing-out);
		transition-delay: var(--inb-delay, 0ms);
	}

	.inb-js .inb-reveal--left { --inb-from-x: -2.5rem; --inb-from-y: 0; }
	.inb-js .inb-reveal--right { --inb-from-x: 2.5rem; --inb-from-y: 0; }
	.inb-js .inb-reveal--fade { --inb-from-y: 0; }

	.inb-js .inb-reveal.is-inview {
		opacity: 1;
		transform: none;
	}

	/* 6b. Maska obrazu: kierunek = krawędź, od której obraz się odsłania. */
	.inb-js .inb-mask {
		clip-path: inset(var(--inb-clip, 0 100% 0 0));
		transition: clip-path 1300ms var(--wp--custom--motion--easing-out);
		transition-delay: var(--inb-delay, 0ms);
	}

	.inb-js .inb-mask--left { --inb-clip: 0 100% 0 0; }
	.inb-js .inb-mask--right { --inb-clip: 0 0 0 100%; }
	.inb-js .inb-mask--up { --inb-clip: 100% 0 0 0; }
	.inb-js .inb-mask--down { --inb-clip: 0 0 100% 0; }

	.inb-js .inb-mask img {
		transform: scale(1.12);
		transition: transform 2000ms var(--wp--custom--motion--easing-out);
		transition-delay: var(--inb-delay, 0ms);
	}

	.inb-js .inb-mask.is-inview {
		clip-path: inset(0 0 0 0);
	}

	.inb-js .inb-mask.is-inview img {
		transform: none;
	}

	/* 6c. Kolejne dzieci kontenera */
	.inb-js .inb-stagger > * {
		opacity: 0;
		transform: translate3d(0, 1.25rem, 0);
		transition: opacity var(--wp--custom--motion--duration) var(--wp--custom--motion--easing),
			transform var(--wp--custom--motion--duration-long) var(--wp--custom--motion--easing-out);
		transition-delay: calc(var(--inb-stagger-base, 0ms) + var(--inb-i, 0) * var(--inb-stagger-step, var(--wp--custom--motion--stagger)));
	}

	.inb-js .inb-stagger.is-inview > * {
		opacity: 1;
		transform: none;
	}

	/* 6d. Kreska podtytułu */
	.inb-js .inb-eyebrow::before {
		transform: scaleX(0);
		transform-origin: left center;
		transition: transform 900ms var(--wp--custom--motion--easing-out);
		transition-delay: calc(var(--inb-stagger-base, 0ms) + 200ms);
	}

	.inb-js .inb-eyebrow.is-inview::before,
	.inb-js .is-inview > .inb-eyebrow::before {
		transform: none;
	}
}

/* Wydruk: cała treść widoczna niezależnie od stanu animacji. */
@media print {
	.inb-js .inb-reveal,
	.inb-js .inb-mask,
	.inb-js .inb-mask img,
	.inb-js .inb-stagger > * {
		opacity: 1 !important;
		transform: none !important;
		clip-path: none !important;
	}
}

/*
 * Kadr maski przycina powiększony obraz także dla obszaru przewijania (clip-path tego nie robi).
 * overflow: clip nie tworzy kontenera przewijania, więc nie psuje position: sticky.
 */
.inb-mask {
	overflow: clip;
}

/* Licznik: cyfry o stałej szerokości, bez przesunięć układu (site.js rezerwuje szerokość). */
.inb-count {
	font-variant-numeric: lining-nums tabular-nums;
}

@media (prefers-reduced-motion: reduce) {
	html {
		scroll-behavior: auto;
	}

	*,
	*::before,
	*::after {
		animation-duration: 0.01ms !important;
		animation-iteration-count: 1 !important;
		transition-duration: 0.01ms !important;
	}
}

/* ---------------------------------------------------------------------
 * 7. Dostępność
 * ------------------------------------------------------------------- */

.inb-sr-only {
	position: absolute !important;
	width: 1px;
	height: 1px;
	margin: -1px;
	padding: 0;
	border: 0;
	overflow: hidden;
	clip: rect(0 0 0 0);
	white-space: nowrap;
}