/*
 * HOME v3 — prototyp scen 00–02 (wejście marki, cinematic HERO, manifest).
 *
 * Ładowany wyłącznie, gdy renderowany jest blok `.inb-v3` (functions.php, ADR 0007).
 * Wszystkie selektory mają prefiks `inb-v3`. Plik nie dotyka `.inb-hero`, `.inb-cine`,
 * `.inb-scroll-scene` ani zmiennej `--p` (HOME v2 i scroll-scene.js).
 * Kolory wyłącznie z tokenów theme.json; fonty: Manrope (body) i systemowy stos (heading).
 *
 * Dwa tryby tego samego markupu (patterns/home-v3-entry.php):
 *  A. STATYCZNY (bazowy): bez JS, przy prefers-reduced-motion: reduce, przy niskim oknie (< 30rem)
 *     i gdy kontroler nie wystartował (html.inb-v3-fallback). Logo, render dzienny, hasło i CTA,
 *     potem manifest — wszystko widoczne od razu.
 *  B. CINEMATIC: html.inb-js (z <head>, przed pierwszym renderem) + brak ograniczenia ruchu.
 *     Sekcja `.inb-v3-scene` wydłuża się, `.inb-v3-stage` przykleja się pod nagłówkiem (CSS sticky,
 *     bez pin-spacera i bez skoku układu). Postęp i choreografię prowadzi wyłącznie GSAP ScrollTrigger
 *     (assets/js/home-v3.js): zmienne `--inb-v3-open` / `--inb-v3-shade` na scenie oraz transform/opacity
 *     elementów. Stan początkowy (postęp 0) opisuje ten plik, więc pierwszy kadr = kadr osi czasu.
 *     Manifest ma ujemny margines równy wysokości sceny przyklejonej: przesuwa się nad przypiętym
 *     kadrem (kurtyna), a po jego zakryciu strona przewija się normalnie.
 */

@property --inb-v3-open { syntax: "<number>"; inherits: true; initial-value: 0; }
@property --inb-v3-shade { syntax: "<number>"; inherits: true; initial-value: 0; }
@property --inb-v3-cap { syntax: "<number>"; inherits: false; initial-value: 1; }

/* =========================================================================
 * Wspólne (oba tryby)
 * ========================================================================= */

.inb-v3 {
	/* Wysokość nagłówka mierzy site.js (--inb-header-height); 4.5rem = wartość z layout.css bez JS. */
	--inb-v3-top: calc(var(--wp-admin--admin-bar--height, 0px) + var(--inb-header-height, 4.5rem));
	--inb-v3-gutter: max(var(--wp--preset--spacing--40), calc((100vw - var(--wp--style--global--wide-size)) / 2));
	--inb-v3-cap-h: clamp(2.5rem, 1rem + 6vw, 7.5rem);
	position: relative;
	isolation: isolate;
}

.inb-v3 > * {
	margin-block: 0;
}

.inb-v3-scene {
	position: relative;
	z-index: 0;
}

.inb-v3-stage,
.inb-v3-portal,
.inb-v3-portal__media,
.inb-v3-entry,
.inb-v3-hero__content {
	margin-block: 0 !important;
}

.inb-v3-media {
	margin: 0;
}

.inb-v3-media img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
	/* Dach leży ok. 4% od górnej krawędzi renderu: przy kadrze szerszym niż 16:9 przycinamy głównie dół. */
	object-position: 50% 18%;
}

/* Logo klienta: geometria i kolor bez zmian (plik SVG), wyłącznie skala. viewBox 1484.5 × 339.7. */
.inb-v3-logo {
	margin: 0;
}

.inb-v3-logo img {
	display: block;
	width: clamp(13rem, 7rem + 14vw, 22rem);
	height: auto;
	aspect-ratio: 1484.5 / 339.7;
}

/* Cienka linia akcentu pod logo (dekoracja; piasek na zieleni — ADR 0002). */
.inb-v3-entry__line {
	width: clamp(3rem, 2rem + 3vw, 5.5rem);
	height: 1px;
	margin-block-start: clamp(1.25rem, 1rem + 1vw, 2rem) !important;
	background: var(--wp--custom--color--accent-on-dark);
	transform-origin: 50% 50%;
}

/* Hasło: „Blisko natury.” (ciężkie) + „Blisko wszystkiego, co ważne.” (lekkie). */
.inb-v3-title {
	margin: 0;
	font-family: var(--wp--preset--font-family--heading);
	font-size: var(--wp--preset--font-size--display);
	font-weight: var(--wp--custom--font-weight--light);
	line-height: 1.04;
	letter-spacing: var(--wp--custom--letter-spacing--display);
	color: var(--wp--custom--color--on-dark);
	text-wrap: balance;
}

.inb-v3-title strong {
	display: block;
	font-weight: var(--wp--custom--font-weight--black);
	letter-spacing: var(--wp--custom--letter-spacing--title);
	line-height: var(--wp--custom--line-height--title);
	color: var(--wp--custom--color--accent-on-dark);
}

.inb-v3-lead {
	max-width: 34rem;
	margin: clamp(1rem, 0.75rem + 1vw, 1.75rem) 0 0 !important;
	font-size: var(--wp--preset--font-size--medium);
	font-weight: var(--wp--custom--font-weight--light);
	color: var(--wp--custom--color--on-dark-muted);
	text-wrap: pretty;
}

.inb-v3-actions {
	margin-block-start: clamp(1.25rem, 1rem + 1.25vw, 2.25rem) !important;
}

/* Słowa dzielone przez kontroler (wyłącznie w trybie B; kopia dostępna dla czytników jest osobno). */
.inb-v3-w {
	display: inline-block;
	overflow: clip;
	vertical-align: top;
	/* Miejsce na znaki diakrytyczne i ogonki bez zmiany wysokości wiersza. */
	padding-block: 0.08em;
	margin-block: -0.08em;
}

.inb-v3-w__in {
	display: inline-block;
	will-change: transform;
}

/* ---------- Manifest (scena 02) ---------- */

.inb-v3-manifest {
	position: relative;
	z-index: 1;
	color: var(--wp--custom--color--text);
	padding-block: clamp(4.5rem, 2rem + 9vw, 11rem);
	padding-inline: var(--inb-v3-gutter);
}

/* Łuk „tarasu” nad górną krawędzią manifestu (w kolorze tła sekcji). */
.inb-v3-manifest::before {
	content: "";
	position: absolute;
	inset-inline: 0;
	bottom: calc(100% - 1px);
	height: var(--inb-v3-cap-h);
	background: inherit;
	transform-origin: 50% 100%;
	transform: scaleY(var(--inb-v3-cap));
	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 120V96C300 20 620 0 900 8c240 7 410 40 540 70v42z'/%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 120V96C300 20 620 0 900 8c240 7 410 40 540 70v42z'/%3E%3C/svg%3E") center bottom / 100% 100% no-repeat;
}

.inb-v3-manifest__inner {
	display: grid;
	grid-template-columns: repeat(12, minmax(0, 1fr));
	column-gap: var(--wp--preset--spacing--40);
	row-gap: 0;
	max-width: var(--wp--style--global--wide-size);
	margin-inline: auto;
}

.inb-v3-manifest__inner > * {
	margin-block: 0 !important;
}

.inb-v3-eyebrow {
	grid-column: 1 / -1;
	display: flex;
	align-items: center;
	gap: 1rem;
	font-size: var(--wp--preset--font-size--small);
	font-weight: var(--wp--custom--font-weight--semibold);
	letter-spacing: var(--wp--custom--letter-spacing--eyebrow);
	text-transform: uppercase;
	color: var(--wp--custom--color--text-muted);
}

/* Kreska dekoracyjna (piasek jako dekoracja — dozwolone wg ADR 0002). */
.inb-v3-eyebrow::before {
	content: "";
	flex: none;
	width: 2.25rem;
	height: 1px;
	background: var(--wp--preset--color--accent);
}

.inb-v3-manifest__title {
	grid-column: 1 / -1;
	margin-block-start: clamp(1.5rem, 1rem + 2vw, 3rem) !important;
	font-family: var(--wp--preset--font-family--heading);
	font-size: clamp(2.6rem, 1.2rem + 5.4vw, 7.5rem);
	font-weight: var(--wp--custom--font-weight--light);
	line-height: 1;
	letter-spacing: var(--wp--custom--letter-spacing--display);
	color: var(--wp--custom--color--text);
	text-wrap: balance;
}

/* Asymetria: druga część hasła wysunięta w prawo, ciężka. */
.inb-v3-manifest__title strong {
	display: block;
	padding-inline-start: 16%;
	font-weight: var(--wp--custom--font-weight--black);
	letter-spacing: var(--wp--custom--letter-spacing--title);
	line-height: var(--wp--custom--line-height--title);
	color: var(--wp--preset--color--primary);
}

.inb-v3-manifest__lead {
	grid-column: 7 / -1;
	max-width: 36rem;
	margin-block-start: clamp(2rem, 1rem + 3vw, 4.5rem) !important;
	font-size: var(--wp--preset--font-size--large);
	font-weight: var(--wp--custom--font-weight--light);
	line-height: 1.5;
	color: var(--wp--custom--color--text-muted);
	text-wrap: pretty;
}

@media (max-width: 781px) {
	.inb-v3-manifest__title strong {
		padding-inline-start: 0;
	}

	.inb-v3-manifest__lead {
		grid-column: 1 / -1;
		font-size: var(--wp--preset--font-size--medium);
	}
}

/* =========================================================================
 * A. Tryb statyczny (bazowy)
 * ========================================================================= */

.inb-v3-stage {
	position: relative;
	display: flex;
	flex-direction: column;
}

.inb-v3-entry {
	display: flex;
	flex-direction: column;
	align-items: center;
	padding: clamp(2.5rem, 1.5rem + 4vw, 5rem) var(--wp--preset--spacing--40) clamp(2rem, 1rem + 3vw, 3.5rem);
}

.inb-v3-portal {
	position: relative;
}

.inb-v3-portal__media {
	position: relative;
	height: clamp(17rem, 52vw, 44rem);
	max-height: 76svh;
	overflow: clip;
}

.inb-v3-portal__media > .inb-v3-media {
	position: absolute;
	inset: 0;
}

/* Zmierzch jest potrzebny tylko w trybie B. display:none + loading="lazy" = brak pobierania. */
.inb-v3-media--dusk {
	display: none;
}

.inb-v3-hero__content {
	position: relative;
	padding: clamp(2rem, 1.5rem + 3vw, 4rem) var(--inb-v3-gutter) calc(var(--inb-v3-cap-h) + clamp(2rem, 1.5rem + 3vw, 4rem));
}

.inb-v3-hero__content > * {
	max-width: 46rem;
}

/* =========================================================================
 * B. Tryb cinematic
 * Warunki = te same co w gsap.matchMedia() w home-v3.js (ruch dozwolony, okno ≥ 30rem).
 * ========================================================================= */

@media (prefers-reduced-motion: no-preference) and (min-height: 30rem) {
	.inb-js:not(.inb-v3-fallback) .inb-v3-scene {
		--inb-v3-length: 420;
		height: calc(var(--inb-v3-length) * 1svh);
	}

	.inb-js:not(.inb-v3-fallback) .inb-v3-stage {
		position: sticky;
		top: var(--inb-v3-top);
		display: block;
		height: calc(100svh - var(--inb-v3-top));
		overflow: clip;
	}

	/* Kurtyna: manifest wjeżdża nad przypięty kadr dokładnie o wysokość sceny. */
	.inb-js:not(.inb-v3-fallback) .inb-v3-manifest {
		margin-block-start: calc(-1 * (100svh - var(--inb-v3-top))) !important;
	}

	/* --- 00: logo i linia nad portalem --- */
	.inb-js:not(.inb-v3-fallback) .inb-v3-entry {
		position: absolute;
		inset: 0 0 auto;
		z-index: 2;
		height: 27%;
		justify-content: center;
		padding: 0 var(--wp--preset--spacing--40);
		pointer-events: none;
	}

	/* --- 01: portal = okno kamery; otwiera się do pełnego kadru --- */
	.inb-js:not(.inb-v3-fallback) .inb-v3-portal {
		--inb-v3-inv: calc(1 - var(--inb-v3-open));
		--inb-v3-r: calc(var(--inb-v3-inv) * var(--inb-v3-arch));
		/* Łuk: promień ≈ połowa szerokości okna (28%–72% szerokości) — pełny półokrąg nad bryłą. */
		--inb-v3-arch: 22vw;
		position: absolute;
		inset: 0;
		z-index: 1;
		clip-path: inset(calc(var(--inb-v3-inv) * 28%) calc(var(--inb-v3-inv) * 28%) calc(var(--inb-v3-inv) * 8%) calc(var(--inb-v3-inv) * 28%) round var(--inb-v3-r) var(--inb-v3-r) calc(var(--inb-v3-inv) * 0.5rem) calc(var(--inb-v3-inv) * 0.5rem));
	}

	.inb-js:not(.inb-v3-fallback) .inb-v3-portal__media {
		position: absolute;
		inset: 0;
		height: auto;
		max-height: none;
		/* Zbliżenie: render w portalu jest pomniejszony i rośnie do skali 1. Punkt skalowania nisko (70%),
		   żeby w pierwszym kadrze cała bryła z dachem mieściła się w łuku (dach leży ok. 4% od krawędzi renderu). */
		transform-origin: 50% 70%;
		transform: scale(calc(0.6 + 0.4 * var(--inb-v3-open)));
		backface-visibility: hidden;
	}

	.inb-js:not(.inb-v3-fallback) .inb-v3-media--dusk {
		display: block;
		opacity: 0;
	}

	/* Cień pod hasłem (lewy dół), pojawia się razem z treścią. */
	.inb-js:not(.inb-v3-fallback) .inb-v3-portal::after {
		content: "";
		position: absolute;
		inset: 0;
		z-index: 1;
		opacity: var(--inb-v3-shade);
		background:
			linear-gradient(to top, color-mix(in srgb, var(--wp--custom--color--surface-dark) 88%, transparent) 0%, color-mix(in srgb, var(--wp--custom--color--surface-dark) 55%, transparent) 30%, transparent 62%),
			linear-gradient(to right, color-mix(in srgb, var(--wp--custom--color--surface-dark) 55%, transparent) 0%, transparent 58%);
		pointer-events: none;
	}

	/* --- Treść HERO: lewy dół, nad cieniem. Miejsce na kurtynę manifestu, żeby hasło nie było przecinane łukiem. --- */
	.inb-js:not(.inb-v3-fallback) .inb-v3-hero__content {
		position: absolute;
		inset: auto 0 0;
		z-index: 3;
		padding: 0 var(--inb-v3-gutter) clamp(2.5rem, 1.5rem + 4vw, 5.5rem);
		pointer-events: none;
	}

	.inb-js:not(.inb-v3-fallback) .inb-v3-title {
		font-size: clamp(2.75rem, 1rem + 4.2vw, 5rem);
	}

	/* Maska wyrazów hasła: tylko pionowe przycięcie, żeby wyraz wysuwał się „z linii”. */
	.inb-js:not(.inb-v3-fallback) .inb-v3-title-mask {
		overflow: clip;
		overflow-clip-margin: 0.25em;
	}

	.inb-js:not(.inb-v3-fallback) .inb-v3-hero__content > * {
		max-width: 48rem;
		opacity: 0;
		pointer-events: auto;
	}

	/* Elementy jeszcze niewidoczne nie przechwytują kliknięć; fokus klawiatury przewija do kadru z treścią. */
	.inb-js:not(.inb-v3-fallback) .inb-v3-scene:not(.is-v3-content) .inb-v3-actions {
		pointer-events: none;
	}

	/* --- Mobile: krótsza scena, kadr w górnej części, hasło na zieleni pod renderem --- */
	@media (max-width: 781px) {
		.inb-js:not(.inb-v3-fallback) .inb-v3-scene {
			--inb-v3-length: 300;
		}

		.inb-js:not(.inb-v3-fallback) .inb-v3-entry {
			height: 20%;
		}

		.inb-js:not(.inb-v3-fallback) .inb-v3-logo img {
			width: min(68vw, 17rem);
		}

		/* Kadr wyśrodkowany w pionie na starcie; po otwarciu zajmuje górną część, treść stoi na zieleni pod nim. */
		.inb-js:not(.inb-v3-fallback) .inb-v3-portal {
			--inb-v3-arch: 26vw;
			inset: 20% 0 auto;
			/* Niskie telefony (np. 360 × 740): kadr niższy, żeby hasło, podtytuł i CTA mieściły się pod nim. */
			height: min(42%, 76vw, calc(100% - 20% - 20rem));
			clip-path: inset(calc(var(--inb-v3-inv) * 6%) calc(var(--inb-v3-inv) * 22%) 0 calc(var(--inb-v3-inv) * 22%) round var(--inb-v3-r) var(--inb-v3-r) 0 0);
		}
		.inb-js:not(.inb-v3-fallback) .inb-v3-portal__media {
			transform-origin: 50% 50%;
			transform: scale(calc(0.84 + 0.16 * var(--inb-v3-open)));
		}

		.inb-js:not(.inb-v3-fallback) .inb-v3-media img {
			object-position: 47% 30%;
		}

		.inb-js:not(.inb-v3-fallback) .inb-v3-portal::after {
			display: none;
		}

		.inb-js:not(.inb-v3-fallback) .inb-v3-hero__content {
			inset: auto 0 0;
			padding: 0 var(--wp--preset--spacing--40) clamp(1.5rem, 4svh, 2.5rem);
		}

		.inb-js:not(.inb-v3-fallback) .inb-v3-title {
			font-size: clamp(2rem, 1.2rem + 3.6vw, 2.75rem);
		}

		.inb-js:not(.inb-v3-fallback) .inb-v3-lead {
			font-size: var(--wp--preset--font-size--small);
		}
	}
}

/* Wydruk: zawsze kompozycja statyczna. */
@media print {
	.inb-v3-scene {
		height: auto !important;
	}

	.inb-v3-stage {
		position: static !important;
		height: auto !important;
	}

	.inb-v3-hero__content > * {
		opacity: 1 !important;
		transform: none !important;
	}
}