/* SEMAI — animacje pojawiania się treści (assets/js/fx.js).
   Aktywne tylko z .semai-fx na <html>; .fx-off (zabezpieczenie) i brak klasy = treść zawsze widoczna. */

:root {
	--fx-ease: cubic-bezier(0.16, 1, 0.3, 1);
	--fx-glow: rgba(209, 166, 255, 0.55);
	--fx-blur: 8px;
	--fx-rise: 22px;
}
@media (max-width: 767px) {
	:root { --fx-blur: 4px; --fx-rise: 16px; }
}

/* Ukrycie przed uruchomieniem skryptu — bez mignięcia treści przy pierwszym renderze. */
html.semai-fx:not(.fx-ready):not(.fx-off) #main :is(h1, h2, .s-service__title, .s-contact__title, .s-card-post, .s-step, .s-toc, .s-post__cta, .s-tldr, .s-form, .s-chat, .s-lead, .s-label, .s-crumbs, .s-post__lead, .s-svc__lead, .s-service__lead, .s-content > *):not(.s-hero *):not(.s-ph *) {
	opacity: 0;
}
html.fx-off .fx, html.fx-off .fx-w, html.fx-off .fx-seq { opacity: 1 !important; transform: none !important; filter: none !important; clip-path: none !important; }

/* ---------- Nagłówki: słowa z rozmycia ---------- */
.fx-text .fx-w {
	display: inline-block;
	transition:
		opacity .7s var(--fx-ease) calc(var(--fx-d, 0ms) + var(--i, 0) * 42ms),
		transform .9s var(--fx-ease) calc(var(--fx-d, 0ms) + var(--i, 0) * 42ms),
		filter .8s var(--fx-ease) calc(var(--fx-d, 0ms) + var(--i, 0) * 42ms);
}
html.semai-fx .fx-text:not(.fx-in) .fx-w {
	opacity: 0;
	transform: translate3d(0, .5em, 0) scale(.96);
	filter: blur(var(--fx-blur));
}
/* Krótki błysk po złożeniu nagłówka. */
.fx-text.fx-in:not(.fx-done) { animation: fx-flash 1.6s var(--fx-ease) calc(var(--fx-d, 0ms) + 200ms) both; }
@keyframes fx-flash {
	0%   { text-shadow: 0 0 0 transparent; }
	35%  { text-shadow: 0 0 22px var(--fx-glow); }
	100% { text-shadow: 0 0 0 transparent; }
}

/* ---------- Tekst i elementy: wjazd z rozmyciem ---------- */
.fx-up {
	transition:
		opacity .8s var(--fx-ease) var(--fx-d, 0ms),
		transform 1s var(--fx-ease) var(--fx-d, 0ms),
		filter .9s var(--fx-ease) var(--fx-d, 0ms);
}
html.semai-fx .fx-up:not(.fx-in) {
	opacity: 0;
	transform: translate3d(0, var(--fx-rise), 0);
	filter: blur(calc(var(--fx-blur) * .75));
}

/* ---------- Karty: maska + pasmo światła ---------- */
.fx-card {
	transition:
		opacity .6s var(--fx-ease) var(--fx-d, 0ms),
		transform 1.1s var(--fx-ease) var(--fx-d, 0ms),
		clip-path 1.1s var(--fx-ease) var(--fx-d, 0ms),
		filter .9s var(--fx-ease) var(--fx-d, 0ms);
}
html.semai-fx .fx-card:not(.fx-in) {
	opacity: 0;
	transform: translate3d(0, calc(var(--fx-rise) * 1.4), 0) scale(.985);
	clip-path: inset(0 0 100% 0 round 20px);
	filter: blur(calc(var(--fx-blur) * .5));
}
html.semai-fx .fx-card.fx-in:not(.fx-done) { clip-path: inset(0 0 0 0 round 20px); }

.fx-scan {
	position: absolute; inset: 0; z-index: 2;
	border-radius: inherit; overflow: hidden; pointer-events: none;
}
.fx-scan > i {
	position: absolute; top: 0; bottom: 0; left: 0; width: 55%;
	background: linear-gradient(100deg, transparent 0%, rgba(171, 101, 214, 0.06) 30%, rgba(209, 166, 255, 0.22) 50%, rgba(171, 101, 214, 0.06) 70%, transparent 100%);
	transform: translate3d(-120%, 0, 0) skewX(-12deg);
	opacity: 0;
}
html.semai-fx .fx-card.fx-in .fx-scan > i { animation: fx-sweep 1.3s var(--fx-ease) calc(var(--fx-d, 0ms) + 350ms) forwards; }
@keyframes fx-sweep {
	0%   { transform: translate3d(-120%, 0, 0) skewX(-12deg); opacity: 0; }
	15%  { opacity: 1; }
	100% { transform: translate3d(260%, 0, 0) skewX(-12deg); opacity: 0; }
}
/* Obrys rozświetla się raz po pojawieniu. */
html.semai-fx .fx-card.fx-in:not(.fx-done) { animation: fx-edge 1.6s var(--fx-ease) calc(var(--fx-d, 0ms) + 250ms) both; }
@keyframes fx-edge {
	0%   { box-shadow: 0 0 0 0 rgba(209, 166, 255, 0); }
	40%  { box-shadow: 0 0 0 1px rgba(209, 166, 255, 0.35), 0 0 36px -8px rgba(171, 101, 214, 0.55); }
	100% { box-shadow: 0 0 0 0 rgba(209, 166, 255, 0); }
}
.fx-done .fx-scan { display: none; }

/* ---------- Przykłady AI: kolejne linijki ---------- */
.fx-chat {
	transition: opacity .7s var(--fx-ease), transform 1.1s var(--fx-ease), filter .9s var(--fx-ease);
}
html.semai-fx .fx-chat:not(.fx-in) {
	opacity: 0;
	transform: translate3d(0, calc(var(--fx-rise) * 1.2), 0) scale(.97);
	filter: blur(calc(var(--fx-blur) * .6));
}
.fx-chat .fx-seq {
	transition:
		opacity .55s var(--fx-ease) calc(250ms + var(--s, 0) * 130ms),
		transform .75s var(--fx-ease) calc(250ms + var(--s, 0) * 130ms),
		filter .6s var(--fx-ease) calc(250ms + var(--s, 0) * 130ms);
}
html.semai-fx .fx-chat:not(.fx-in) .fx-seq {
	opacity: 0;
	transform: translate3d(0, 10px, 0);
	filter: blur(4px);
}
/* Wyróżnienie marki „zapala się” po pojawieniu odpowiedzi. */
html.semai-fx .fx-chat.fx-in .s-chat__firm--brand,
html.semai-fx .fx-chat.fx-in .s-adcard {
	animation: fx-edge 1.8s var(--fx-ease) 1.3s;
}

/* ---------- Nawigacja przy wejściu ---------- */
html.semai-fx .s-nav { animation: fx-nav .9s var(--fx-ease) .05s both; }
@keyframes fx-nav {
	from { opacity: 0; transform: translate3d(0, -14px, 0); filter: blur(6px); }
	to   { opacity: 1; transform: none; filter: none; }
}

/* ---------- Pasek postępu przewijania ---------- */
.fx-progress {
	position: fixed; top: var(--ab, 0px); left: 0; right: 0; z-index: 101;
	height: 2px; pointer-events: none;
	transform-origin: 0 50%; transform: scaleX(0);
	background: linear-gradient(90deg, #6B2DD9 0%, #AB65D6 55%, #EEE0FF 100%);
	box-shadow: 0 0 12px rgba(171, 101, 214, 0.7);
}

/* ---------- Skan ekranu przy pierwszym wejściu ---------- */
.fx-boot {
	position: fixed; inset: 0; z-index: 9999; pointer-events: none; overflow: hidden;
}
.fx-boot::before {
	content: ""; position: absolute; left: 0; right: 0; top: 0; height: 2px;
	background: linear-gradient(90deg, transparent, #D1A6FF 20%, #fff 50%, #D1A6FF 80%, transparent);
	box-shadow: 0 0 18px 4px rgba(171, 101, 214, 0.55), 0 0 60px 10px rgba(107, 45, 217, 0.25);
	animation: fx-boot-line 1.2s var(--fx-ease) forwards;
}
.fx-boot::after {
	content: ""; position: absolute; left: 0; right: 0; top: 0; height: 30vh;
	background: linear-gradient(180deg, rgba(171, 101, 214, 0.10), transparent);
	transform-origin: top; animation: fx-boot-glow 1.2s var(--fx-ease) forwards;
}
@keyframes fx-boot-line {
	0%   { transform: translate3d(0, 0, 0); opacity: 1; }
	85%  { opacity: 1; }
	100% { transform: translate3d(0, 100vh, 0); opacity: 0; }
}
@keyframes fx-boot-glow {
	0%   { transform: translate3d(0, -30vh, 0); opacity: 0; }
	30%  { opacity: 1; }
	100% { transform: translate3d(0, 100vh, 0); opacity: 0; }
}

/* Ograniczenie ruchu — wszystko widoczne, bez efektów (zabezpieczenie niezależne od JS). */
@media (prefers-reduced-motion: reduce) {
	.fx, .fx-w, .fx-seq { opacity: 1 !important; transform: none !important; filter: none !important; clip-path: none !important; animation: none !important; }
	.fx-boot, .fx-scan, .fx-progress { display: none !important; }
	html.semai-fx .s-nav { animation: none !important; }
}