/* ============================================================
   EFFECTS — subtelne efekty/interakcje (klasy opt-in, używaj świadomie).
   Wszystkie respektują prefers-reduced-motion.
   ============================================================ */

/* ── Gradient text (akcent w nagłówku/eyebrow) ── */
.xelox-gradient-text {
	/* Akcent w nagłówku: ink→amber (czytelny na białym, spójny z marką — bez obcego błękitu). */
	background: linear-gradient(90deg, var(--c-ink), var(--c-brand-ink) 70%);
	-webkit-background-clip: text; background-clip: text;
	-webkit-text-fill-color: transparent; color: transparent;
}

/* ── Tła dekoracyjne ── */
.xelox-dots { background-image: radial-gradient(var(--c-line) 1px, transparent 1px); background-size: 22px 22px; }
.xelox-mesh {
	background:
		radial-gradient(600px 300px at 85% -10%, var(--c-brand-soft), transparent 60%),
		radial-gradient(500px 260px at 0% 110%, var(--c-brand-soft), transparent 60%);
}

/* ── Tilt (delikatne przechylenie karty — JS dolicza zmienne) ── */
.xelox-tilt { transform: perspective(800px) rotateX(var(--tiltX, 0)) rotateY(var(--tiltY, 0)); transition: transform var(--dur-base) var(--ease); transform-style: preserve-3d; }

/* ── Parallax (JS przesuwa --py) ── */
.xelox-parallax { transform: translate3d(0, var(--py, 0), 0); will-change: transform; }

/* ── Word-by-word reveal nagłówka (.xelox-words) ── */
.xelox-js .xelox-words .xelox-word { display: inline-block; opacity: 0; transform: translateY(.5em); transition: opacity var(--dur-base) var(--ease-out), transform var(--dur-base) var(--ease-out); }
.xelox-js .xelox-words.is-visible .xelox-word { opacity: 1; transform: none; }

/* ── Shine na CTA (subtelny przesuw światła przy hover) ── */
.xelox-btn--primary { position: relative; overflow: hidden; }
.xelox-btn--primary::after {
	content: ""; position: absolute; inset: 0; background: linear-gradient(120deg, transparent 30%, rgba(255,255,255,.25) 50%, transparent 70%);
	transform: translateX(-120%); transition: transform var(--dur-slow) var(--ease);
}
.xelox-btn--primary:hover::after { transform: translateX(120%); }

@media (prefers-reduced-motion: reduce) {
	.xelox-marquee__track { animation: none; }
	.xelox-tilt { transform: none; }
	.xelox-parallax { transform: none; }
	.xelox-btn--primary::after { display: none; }
	.xelox-js .xelox-words .xelox-word { opacity: 1; transform: none; }
}