/*
 * Świat AIUmbrella (/ai/ i podstrony, body.su-world-ai): ciemno, chłodne światło, siatki, monospace,
 * czerwone oko jako jedyny ciepły akcent (Marek, 2026-11-02: Neuromancer / Odyseja kosmiczna zamiast komiksu).
 * Ładowany tylko na stronach świata AI (functions.php), po theme.css: nadpisuje style huba.
 * Kontrast (WCAG AA) liczony do tła --ai-bg: tekst 15:1, przygaszony 7,9:1, lód 13:1, czerwony 5,6:1.
 */

.su-world-ai {
	--ai-bg: #05070b;
	--ai-panel: #0a0f17;
	--ai-panel-2: #0e1520;
	--ai-line: rgba(159, 216, 255, 0.14);
	--ai-line-strong: rgba(159, 216, 255, 0.32);
	--ai-text: #d9e4ee;
	--ai-muted: #93a6b8;
	--ai-ice: #9fd8ff;
	/* Kolory Software Umbrella (logo: fiolet, seledyn, niebieski), rozjaśnione pod ciemne tło
	   (kontrast do --ai-bg: fiolet 7,4:1, seledyn 10,8:1, niebieski 7,5:1). */
	--su-fiolet: #a78bfa;
	--su-seledyn: #2dd4bf;
	--su-niebieski: #6f9bff;
	--su-gradient: linear-gradient(90deg, var(--su-fiolet), var(--su-seledyn), var(--su-niebieski));
	--su-accent: var(--ai-ice);
	--su-line: var(--ai-line);
	--su-muted: var(--ai-muted);

	background: var(--ai-bg);
	color: var(--ai-text);
}

.su-world-ai :focus-visible {
	outline-color: var(--ai-ice);
}

/* ---------- Pas z tytułem: siatka w perspektywie, chłodna poświata ---------- */

.su-world-ai .su-band--ai {
	position: relative;
	overflow: hidden;
	padding-block: clamp(2.5rem, 7vw, 5.5rem);
	border-bottom: 1px solid var(--ai-line);
	background-color: var(--ai-bg);
	background-image:
		radial-gradient(ellipse 60% 80% at 78% 40%, rgba(159, 216, 255, 0.1), transparent 70%),
		linear-gradient(var(--ai-line) 1px, transparent 1px),
		linear-gradient(90deg, var(--ai-line) 1px, transparent 1px);
	background-size: auto, 48px 48px, 48px 48px;
	background-position: center, -1px -1px, -1px -1px;
}

/* Linia skanowania wzdłuż dolnej krawędzi pasa. */
.su-world-ai .su-band--ai::after {
	content: "";
	position: absolute;
	inset: auto 0 0;
	height: 1px;
	background: var(--su-gradient);
	opacity: 0.6;
}

.su-world-ai .su-band--ai .su-band__tag {
	padding: 0;
	background: none;
	color: var(--ai-muted);
	letter-spacing: 0.16em;
}

.su-world-ai .su-band--ai .su-band__tag::before {
	content: "";
	display: inline-block;
	width: 7px;
	height: 7px;
	margin-right: 10px;
	border-radius: 50%;
	background: var(--su-seledyn);
	box-shadow: 0 0 8px var(--su-seledyn);
	vertical-align: 1px;
}

.su-world-ai .su-band--ai .su-band__tag .su-mk-a {
	color: var(--ai-ice);
}

.su-world-ai .su-band--ai .su-band__title {
	max-width: 20ch;
	font-weight: 300;
	letter-spacing: -0.01em;
	color: #f2f7fb;
}

/* Scena 3D gotowa (assets/js/ai.js): canvas w miejscu obrazu, ten sam rozmiar. */
.su-world-ai .su-mozg > canvas {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
}

/* ---------- Wskaźnik przewijania na dole hero (Marek, 2026-11-02) ----------
   Tylko na desktopie, gdzie hero zajmuje cały ekran. Znika po przewinięciu (body.su-ai-scrolled z ai.js),
   bez JS zostaje widoczny. Kontrast seledynu do tła 10,8:1. */
.su-world-ai .su-scroll {
	display: none;
}

.su-world-ai .su-kotwica {
	height: 0;
	scroll-margin-top: calc(var(--su-nav-h) + 16px);
}

.su-world-ai .su-kotwica:focus {
	outline: none;
}

.su-world-ai .su-scroll__sr {
	position: absolute;
	width: 1px;
	height: 1px;
	overflow: hidden;
	clip-path: inset(50%);
	white-space: nowrap;
}

@media (min-width: 900px) {
	/* Selektor z „main a” i .su-band--ai: wygrywa z ogólnym kolorem linków i z width: 100% dzieci pasa. */
	.su-world-ai main .su-band--ai > a.su-scroll {
		position: absolute;
		width: auto;
		z-index: 4;
		bottom: clamp(12px, 2.5vh, 28px);
		left: 50%;
		display: flex;
		flex-direction: column;
		align-items: center;
		gap: 4px;
		padding: 8px 14px;
		color: var(--su-seledyn);
		font-family: var(--wp--preset--font-family--mono);
		font-size: 12px;
		letter-spacing: 0.16em;
		text-transform: uppercase;
		text-decoration: none;
		transform: translateX(-50%);
		transition: opacity 0.3s ease, visibility 0.3s;
	}

	.su-world-ai main .su-band--ai > a.su-scroll:hover {
		color: #fff;
	}

	.su-world-ai main .su-band--ai > a.su-scroll:focus-visible {
		outline: 2px solid var(--su-seledyn);
		outline-offset: 2px;
	}

	.su-world-ai .su-scroll__ikona {
		filter: drop-shadow(0 0 6px rgba(45, 212, 191, 0.6));
		animation: su-ai-scroll 2s ease-in-out infinite;
	}

	.su-ai-scrolled.su-world-ai main .su-band--ai > a.su-scroll {
		opacity: 0;
		visibility: hidden;
	}
}

@keyframes su-ai-scroll {
	50% {
		opacity: 0.55;
		transform: translateY(5px);
	}
}

@media (prefers-reduced-motion: reduce) {
	.su-world-ai .su-scroll__ikona {
		animation: none;
	}
}

/* ---------- Treść ---------- */

.su-world-ai main .wp-block-post-content {
	color: var(--ai-text);
}

/* Wstęp procesu pod nagłówkiem sekcji: większy, na szerokość obu kolumn osi pod nim (Marek, 2026-11-02). */
.su-world-ai main .wp-block-post-content > p.su-proces__lead {
	margin-top: 1rem;
	font-size: 1.25rem;
	line-height: 1.55;
}

.su-world-ai main a:not(.wp-element-button) {
	color: var(--ai-ice);
	text-decoration-color: var(--ai-line-strong);
	text-underline-offset: 3px;
}

.su-world-ai main a:not(.wp-element-button):hover {
	text-decoration-color: currentColor;
}

/* Nagłówki sekcji: bez podkreślenia z jasnego motywu i bez numerów (Marek, 2026-11-02). */
.su-world-ai main .wp-block-post-content > h2.wp-block-heading {
	margin-top: clamp(3rem, 7vw, 5rem);
	color: #f2f7fb;
	font-weight: 400;
	text-decoration: none;
}

.su-world-ai main :is(h3, strong) {
	color: #f2f7fb;
}

/* Karty: panele z cienką ramką, bez zaokrągleń komiksu. */
.su-world-ai main .is-style-card {
	border: 1px solid var(--ai-line);
	border-radius: 2px;
	background: linear-gradient(180deg, var(--ai-panel-2), var(--ai-panel));
	color: var(--ai-text);
}

.su-world-ai .su-zakres .is-style-card {
	position: relative;
}

.su-world-ai .su-zakres .is-style-card::before {
	content: "";
	position: absolute;
	top: -1px;
	left: -1px;
	width: 24px;
	height: 24px;
	border-top: 1px solid var(--ai-ice);
	border-left: 1px solid var(--ai-ice);
}

.su-world-ai .su-zakres h3 {
	font-weight: 500;
}

.su-world-ai .su-faq > summary {
	color: #f2f7fb;
}

.su-world-ai .su-faq > summary::after {
	color: var(--ai-ice);
}

.su-world-ai .su-faq > p {
	color: var(--ai-muted);
}

/* ---------- Mózg z kropek w hero ---------- */

.su-world-ai .su-mozg {
	position: relative;
	margin-block: 1rem 2rem;
	aspect-ratio: 2 / 1;
	overflow: hidden;
	background: radial-gradient(ellipse 45% 55% at 50% 50%, rgba(159, 216, 255, 0.07), transparent 75%);
}

.su-world-ai .su-mozg img {
	/* Obraz z renderu sceny w kadrze 3:1, dopasowany do wysokości pola i wyśrodkowany, tak jak
	   kamera sceny (skala z wysokości): po starcie sceny mózg nie zmienia rozmiaru ani miejsca. */
	position: absolute;
	top: 0;
	left: 50%;
	width: auto;
	max-width: none;
	height: 100%;
	transform: translateX(-50%);
	/* Obraz na czarnym tle: tryb screen chowa czerń, widać siatkę hero (lżej niż WebP z alfą). */
	mix-blend-mode: screen;
}

.su-world-ai .su-mozg.is-3d img {
	/* Scena ma te same kropki co obraz (stałe ziarno): zamiana bez przenikania, w jednej klatce. */
	opacity: 0;
}

@media (max-width: 700px) {
	.su-world-ai .su-mozg {
		aspect-ratio: 4 / 3;
	}
}

/* Mózg w hero (templates/page-ai.html), pod tytułem, na całą szerokość pasa. */
.su-world-ai .su-band--ai .su-mozg {
	margin: clamp(1rem, 3vw, 2rem) 0 0;
	background: none;
}

/* Desktop: cały mózg na pierwszym ekranie (Marek, 2026-11-02; sprawdzone na 1460 x 840 i 1280 x 720):
   tytuł w jednym wierszu, ciaśniejszy pas, niższe pole sceny. */
@media (min-width: 900px) {
	.su-world-ai .su-band--ai {
		padding-block: clamp(1.5rem, 3vw, 2.5rem) 0.5rem;
	}

	.su-world-ai .su-band--ai .su-band__title {
		max-width: none;
		font-size: clamp(2rem, 3.4vw, 3rem);
	}

	/* Hero na cały pierwszy ekran (Marek, 2026-11-02): pas ma wysokość okna pod nagłówkiem, mózg
	   wypełnia miejsce pod tytułem. Kolejne sekcje dopiero po przewinięciu. */
	.su-world-ai .su-band--ai {
		display: flex;
		flex-direction: column;
		min-height: calc(100svh - var(--su-nav-h));
		box-sizing: border-box;
	}

	.admin-bar.su-world-ai .su-band--ai {
		min-height: calc(100svh - var(--su-nav-h) - var(--wp-admin--admin-bar--height, 32px));
	}

	.su-world-ai .su-band--ai > * {
		width: 100%;
	}

	/* Pole mózgu nie wyższe niż szerokość / 2,15: mózg skaluje się z wysokości pola, więc na wysokich
	   ekranach (2560 x 1440, monitory z DPR 2) wychodził poza szerokość kolumny i był ucięty po lewej.
	   Nadmiar wysokości ekranu idzie w równy odstęp nad i pod mózgiem. */
	.su-world-ai .su-band--ai .su-mozg {
		flex: 1 1 auto;
		margin-block: auto;
		aspect-ratio: auto;
		height: auto;
		min-height: 360px;
		max-height: calc(min(100vw - 2 * var(--wp--style--root--padding-left, 16px), 1200px) / 2.15);
	}

	.su-world-ai .su-band--ai .su-band__inner {
		margin-bottom: 0.5rem;
	}
}

/* Desktop ze sceną 3D (body.su-ai-3d, od 900 px): karty powtarzałyby podpisy z dymkami w hero, więc
   znikają z ekranu (zostają w HTML dla wyszukiwarek). Węższe okno, nawet po zmianie rozmiaru już
   po starcie sceny (obrót tabletu, DevTools): obraz zamiast sceny i karty w treści (WCAG 1.4.10). */
@media (min-width: 900px) {
	.su-ai-3d.su-world-ai .su-zakres {
		position: absolute !important;
		width: 1px;
		height: 1px;
		margin: 0;
		overflow: hidden;
		clip-path: inset(50%);
		white-space: nowrap;
	}
}

@media (max-width: 899.98px) {
	.su-world-ai .su-mozg > :is(canvas, .su-mozg__label, .su-mozg__lines) {
		display: none;
	}

	.su-world-ai .su-mozg.is-3d img {
		opacity: 1;
	}
}

/* Podpisy w kolumnach po bokach mózgu (assets/js/src/ai-scene.js, SLOTS), linia do węzła w SVG.
   Po najechaniu albo fokusie ramka podpisu rozwija się i pokazuje opis karty w środku (Marek,
   2026-11-02). Wiersz z nazwą zostaje w miejscu: górne podpisy rosną w dół, dolne (is-up) w górę. */
.su-world-ai .su-mozg__label {
	position: absolute;
	z-index: 2;
	display: flex;
	flex-direction: column;
	gap: 0;
	box-sizing: border-box;
	max-width: 18rem;
	padding: 9px 14px;
	border: 1px solid var(--ai-line-strong);
	/* Kolor podpisu (--su-hue z ai-scene.js): pasek przy krawędzi od strony mózgu. */
	box-shadow: inset 3px 0 0 var(--su-hue, var(--ai-ice));
	background: rgba(5, 7, 11, 0.85);
	cursor: default;
	/* Środek wiersza z nazwą na wysokości slotu (ok. 1,3 em od górnej krawędzi). */
	transform: translateY(-21px);
	transition: max-width 0.25s ease, opacity 0.25s ease, border-color 0.6s ease, box-shadow 0.8s ease, background-color 0.25s ease;
}

.su-world-ai .su-mozg__label.is-up {
	flex-direction: column-reverse;
	transform: translateY(21px);
}

.su-world-ai .su-mozg__name {
	font-family: var(--wp--preset--font-family--mono);
	font-size: 15px;
	line-height: 1.4;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	color: #f2f7fb;
}

.su-world-ai .su-mozg__label.is-l {
	left: 0;
}

.su-world-ai .su-mozg__label.is-r {
	right: 0;
	text-align: right;
	box-shadow: inset -3px 0 0 var(--su-hue, var(--ai-ice));
}

.su-world-ai .su-mozg__label:focus-visible {
	outline: 2px solid var(--su-hue, var(--ai-ice));
	outline-offset: 3px;
}

.su-world-ai .su-mozg__label.is-hot {
	z-index: 3;
	/* Rośnie głównie w pionie: szersza ramka zasłaniała krawędź mózgu, gdzie biegną impulsy. */
	max-width: 19rem;
	border-color: var(--su-hue, var(--su-seledyn));
	background-color: rgba(14, 21, 32, 0.95);
}

/* Gdy jedna ramka jest rozwinięta, pozostałe przygasają (rozwinięta może zasłonić sąsiednią). */
.su-world-ai .su-mozg:has(.su-mozg__label.is-hot) .su-mozg__label:not(.is-hot) {
	opacity: 0.3;
}

/* Błysk podpisu, gdy dobiegnie do niego impuls z mózgu. */
.su-world-ai .su-mozg__label.is-fire {
	border-color: var(--su-hue, var(--su-seledyn));
	box-shadow: 0 0 16px -4px var(--su-hue, var(--su-seledyn));
	transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

.su-world-ai .su-mozg__lines .su-mozg__fire {
	fill: none;
	stroke: var(--su-hue, var(--su-seledyn));
	stroke-width: 5;
	stroke-linecap: round;
	stroke-linejoin: round;
	stroke-opacity: 1;
	opacity: 0;
	filter: drop-shadow(0 0 9px var(--su-hue, var(--su-seledyn)));
}

/* Opis karty w tej samej ramce, pokazywany po najechaniu albo fokusie. */
.su-world-ai .su-mozg__tip {
	display: none;
	font-family: var(--wp--preset--font-family--body);
	font-size: 16px;
	line-height: 1.55;
	text-align: left;
	color: var(--ai-text);
}

.su-world-ai .su-mozg__label.is-hot .su-mozg__tip {
	display: block;
	margin-top: 10px;
	padding-top: 10px;
	border-top: 1px solid var(--ai-line);
	animation: su-ai-tip 0.25s ease;
}

.su-world-ai .su-mozg__label.is-up.is-hot .su-mozg__tip {
	margin: 0 0 10px;
	padding: 0 0 10px;
	border-top: 0;
	border-bottom: 1px solid var(--ai-line);
}

@keyframes su-ai-tip {
	from {
		opacity: 0;
		transform: translateY(-6px);
	}
}

@media (prefers-reduced-motion: reduce) {
	.su-world-ai .su-mozg__label {
		transition: none;
	}

	.su-world-ai .su-mozg__label.is-hot .su-mozg__tip {
		animation: none;
	}
}

.su-world-ai .su-mozg__lines {
	position: absolute;
	inset: 0;
	z-index: 1;
	width: 100%;
	height: 100%;
	overflow: visible;
	pointer-events: none;
}

.su-world-ai .su-mozg__lines polyline {
	fill: none;
	stroke: var(--ai-ice);
	stroke-width: 1;
	stroke-opacity: 0.45;
}

.su-world-ai .su-mozg__lines circle {
	fill: var(--ai-bg);
	stroke: var(--su-hue, var(--ai-ice));
	stroke-width: 2;
}

.su-world-ai .su-mozg__lines .is-hot {
	stroke: var(--su-hue, var(--su-seledyn));
	stroke-opacity: 1;
}

/* ---------- Proces: pionowa oś kroków (Marek, 2026-11-02, wzór: infografika procesu) ----------
   Na desktopie kroki na przemian po lewej i prawej stronie osi, numer na osi. Na telefonie oś po lewej.
   Linia osi zapala się w miarę przewijania (--su-proces, 0..1 z assets/js/ai.js), kroki pojawiają się
   przy wejściu w widok (.is-anim / .is-in z ai.js). Bez JS i przy reduced motion: wszystko widoczne. */

.su-world-ai .su-proces {
	--su-proces: 0;
	position: relative;
	margin: 2.5rem 0 0;
	padding: 0;
	list-style: none;
	counter-reset: su-krok;
}

.su-world-ai .su-proces::before,
.su-world-ai .su-proces::after {
	content: "";
	position: absolute;
	top: 0;
	bottom: 0;
	left: 22px;
	width: 2px;
	background: var(--ai-line);
}

.su-world-ai .su-proces::after {
	bottom: auto;
	height: calc(var(--su-proces) * 100%);
	background: linear-gradient(var(--su-fiolet), var(--su-seledyn), var(--su-niebieski));
	box-shadow: 0 0 12px rgba(159, 216, 255, 0.5);
}

.su-world-ai .su-proces__krok {
	counter-increment: su-krok;
	position: relative;
	margin: 0 0 clamp(2.5rem, 6vw, 4.5rem);
	padding-left: 72px;
}

.su-world-ai .su-proces__krok:last-child {
	margin-bottom: 0;
}

.su-world-ai .su-proces__krok::before {
	content: counter(su-krok, decimal-leading-zero);
	position: absolute;
	z-index: 1;
	top: -4px;
	left: 0;
	display: grid;
	place-items: center;
	width: 46px;
	height: 46px;
	border: 1px solid var(--ai-ice);
	border-radius: 50%;
	background: var(--ai-bg);
	color: var(--ai-ice);
	font-family: var(--wp--preset--font-family--mono);
	font-size: 14px;
	box-shadow: 0 0 0 6px var(--ai-bg), 0 0 18px rgba(159, 216, 255, 0.35);
}

.su-world-ai .su-proces__krok h3 {
	margin: 0 0 0.75rem;
	font-size: clamp(1.4rem, 2.6vw, 2rem);
	font-weight: 500;
	line-height: 1.15;
}

.su-world-ai .su-proces__krok p {
	max-width: 56ch;
}

.su-world-ai .su-proces__krok ul {
	display: grid;
	gap: 1px;
	margin: 1.25rem 0;
	padding: 0;
	list-style: none;
	border: 1px solid var(--ai-line);
	background: var(--ai-line);
}

.su-world-ai .su-proces__krok ul li {
	padding: 12px 16px;
	background: var(--ai-panel);
	font-family: var(--wp--preset--font-family--mono);
	font-size: 14px;
	line-height: 1.5;
}

.su-world-ai .su-proces__krok ul li::before {
	content: "? ";
	color: var(--su-seledyn);
}

@media (min-width: 900px) {
	.su-world-ai .su-proces::before,
	.su-world-ai .su-proces::after {
		left: calc(50% - 1px);
	}

	.su-world-ai .su-proces__krok {
		width: calc(50% - 56px);
		padding-left: 0;
	}

	.su-world-ai .su-proces__krok:nth-child(odd) {
		text-align: right;
	}

	.su-world-ai .su-proces__krok:nth-child(odd) :is(p, ul) {
		margin-left: auto;
		text-align: left;
	}

	.su-world-ai .su-proces__krok:nth-child(even) {
		margin-left: calc(50% + 56px);
	}

	.su-world-ai .su-proces__krok::before {
		left: auto;
		right: -79px;
	}

	.su-world-ai .su-proces__krok:nth-child(even)::before {
		right: auto;
		left: -79px;
	}
}

/* Pojawianie się kroków (tylko gdy ai.js włączył animację). */
.su-world-ai .su-proces.is-anim .su-proces__krok {
	opacity: 0;
	transform: translateY(32px);
	transition: opacity 0.7s ease, transform 0.7s ease;
}

.su-world-ai .su-proces.is-anim .su-proces__krok.is-in {
	opacity: 1;
	transform: none;
}

.su-world-ai .su-proces.is-anim .su-proces__krok.is-in::before {
	border-color: var(--su-seledyn);
	color: #fff;
	box-shadow: 0 0 0 6px var(--ai-bg), 0 0 22px rgba(45, 212, 191, 0.45);
	transition: border-color 0.4s ease 0.3s, box-shadow 0.4s ease 0.3s;
}

/* ---------- Przyciski i pas wezwania ---------- */

.su-world-ai main .wp-element-button {
	border: 1px solid var(--ai-ice);
	border-radius: 2px;
	background: var(--ai-ice);
	color: var(--ai-bg);
	font-family: var(--wp--preset--font-family--mono);
	font-weight: 500;
	letter-spacing: 0.04em;
}

.su-world-ai main .wp-element-button:hover {
	background: transparent;
	color: var(--ai-ice);
}

.su-world-ai .su-cta {
	border: 1px solid var(--ai-line);
	border-radius: 2px;
	background-color: var(--ai-panel);
	/* Zamiast siatki linie EEG rysowane w canvasie (ai.js); bez JS zostaje gładkie tło. */
	background-image: none;
	color: var(--ai-muted);
}

/* Canvas EEG pod treścią pasa (isolation w theme.css). Linie świecą jak neon (ai.js: rdzeń 45–65% krycia,
   poświata, mieszanie addytywne); maska przygasza je do 13% tam, gdzie stoi tekst (lewa strona, na węższych
   ekranach cały pas), więc tekst zachowuje kontrast AA także pod dwiema nałożonymi liniami. Po prawej, bez
   tekstu, świecą w pełni. */
.su-world-ai .su-cta .su-eeg {
	position: absolute;
	z-index: -1;
	inset: 0;
	width: 100%;
	height: 100%;
	pointer-events: none;
	-webkit-mask-image: linear-gradient(90deg, rgba(0, 0, 0, 0.13) 55%, #000 78%);
	mask-image: linear-gradient(90deg, rgba(0, 0, 0, 0.13) 55%, #000 78%);
}

/* Węższe ekrany: tekst sięga dalej w prawo, więc przygaszenie równe na całym pasie. */
@media (max-width: 1099px) {
	.su-world-ai .su-cta .su-eeg {
		-webkit-mask-image: none;
		mask-image: none;
		opacity: 0.13;
	}
}

.su-world-ai .su-cta .wp-element-button {
	background: var(--ai-ice);
	color: var(--ai-bg);
}