/**
 * SpecularButton - wedrujacy blask na obrysie przycisku.
 * Wg design-references/SpecularButton-reactbits.md.
 *
 * DLACZEGO CZYSTY CSS, A NIE WebGL (ogl)
 * ------------------------------------------------------------------
 * Referencja daje wybor i wprost dopuszcza wersje CSS. Wybor padl na CSS
 * z czterech powodow:
 *  1. Projekt nie ma zadnego kroku builda JS. Dodanie esbuilda i paczki npm
 *     dla DWOCH przyciskow w hero to nowa zaleznosc i nowy proces wydawniczy
 *     do utrzymania - nieproporcjonalnie do efektu.
 *  2. Ten prompt stawia mobile-first jako wymog nadrzedny. Sercem wersji
 *     WebGL jest followMouse, a na dotyku kursora nie ma. Zostaje autoAnimate,
 *     ktore CSS robi natywnie.
 *  3. Dwa konteksty WebGL na ekranie to realny koszt baterii na telefonie.
 *  4. Efekt da sie odtworzyc wiernie: conic-gradient przyciety maska do
 *     samego obrysu wyglada jak odbicie swiatla na krawedzi, a --sb-angle
 *     zarejestrowany przez @property interpoluje sie plynnie.
 *
 * Z referencji przeniesione 1:1 (logika, nie technologia):
 *  - waski blask wedrujacy PO OBRYSIE, nie wypelnienie,
 *  - ciemniejszy staly obrys pod spodem (baseColor) dajacy wrazenie grubosci,
 *  - zanikanie w miare oddalania kursora (proximity),
 *  - autoAnimate jako ciagla rotacja niezalezna od kursora,
 *  - wykladnicze wygladzanie kata i jasnosci (w specular-button.js).
 */

/*
 * Rejestracja typu pozwala przegladarce INTERPOLOWAC kat. Bez @property
 * zmienna jest zwyklym tekstem i animacja skakalaby miedzy wartosciami.
 *
 * inherits MUSI byc true. Blask rysuje pseudoelement ::after, a wartosci
 * (kat, jasnosc) sa ustawiane na SAMYM przycisku - przez klase .--auto,
 * przez animacje albo przez JS. Przy inherits:false pseudoelement nie
 * widzi zadnej z nich i bierze initial-value, czyli 0: obrys pozostawal
 * calkowicie niewidoczny mimo poprawnie ustawionych zmiennych.
 */
@property --sb-angle {
	syntax: "<angle>";
	inherits: true;
	initial-value: 0deg;
}

@property --sb-bright {
	syntax: "<number>";
	inherits: true;
	initial-value: 0;
}

.specular-button {
	position: relative;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: var(--space-3);
	padding: 15px 32px;
	border: none;
	border-radius: var(--sb-radius, 18px);
	font-family: var(--font-heading);
	font-size: 1rem;
	font-weight: 600;
	line-height: 1;
	text-decoration: none;
	cursor: pointer;
	isolation: isolate;
	background: var(--sb-fill, rgba(20, 20, 24, 0.55));
	color: var(--sb-text, #f5f5f4);
	-webkit-backdrop-filter: blur(10px);
	backdrop-filter: blur(10px);
	box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.06), 0 8px 24px rgba(0, 0, 0, 0.28);
	transition: transform 0.15s ease, background-color 0.25s ease;
	--sb-angle: 0deg;
	--sb-bright: 0;
}

.specular-button:active {
	transform: scale(0.97);
}

/*
 * Obie warstwy obrysu uzywaja tej samej sztuczki: element wypelniony kolorem,
 * przyciety maska tak, ze zostaje z niego tylko ramka o szerokosci 1px.
 * (Wypelnienie minus wnetrze = obrys.)
 */
.specular-button::before,
.specular-button::after {
	content: "";
	position: absolute;
	inset: 0;
	border-radius: inherit;
	padding: 1px;
	pointer-events: none;
	-webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
	mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
	-webkit-mask-composite: xor;
	mask-composite: exclude;
}

/* Staly, ciemniejszy obrys - "grubosc" krawedzi. */
.specular-button::before {
	background: var(--sb-base, rgba(255, 255, 255, 0.16));
	z-index: -1;
}

/* Wedrujacy blask. Waski wycinek stozkowego gradientu = jasny odcinek
   krawedzi, ktory obiega przycisk. */
.specular-button::after {
	background: conic-gradient(
		from var(--sb-angle),
		transparent 0deg,
		var(--sb-line, #fff) 26deg,
		transparent 62deg
	);
	opacity: var(--sb-bright);
	z-index: -1;
}

/* Wariant autoAnimate - blask kreci sie sam, bez udzialu kursora.
   Uzywany dla "Aukcje na zywo", zeby przyciagal wzrok od pierwszej chwili. */
.specular-button--auto {
	animation: sb-spin 3.4s linear infinite;
	--sb-bright: 1;
}

@keyframes sb-spin {
	to {
		--sb-angle: 360deg;
	}
}

/* ---------- Warianty kolorystyczne ---------- */
.specular-button--live {
	--sb-line: #ff3b30;
	--sb-base: rgba(255, 59, 48, 0.28);
}

.specular-button--accent {
	--sb-line: var(--color-accent);
	--sb-base: color-mix(in srgb, var(--color-accent) 30%, transparent);
}

/* Kropka "na zywo" - ta sama implementacja co przy poprzednim CTA
   (components.css: .btn--live__dot), tylko w czerwieni zamiast koloru tekstu. */
.specular-button__dot {
	position: relative;
	width: 8px;
	height: 8px;
	border-radius: 50%;
	background: #ff3b30;
	flex-shrink: 0;
	animation: libracars-live-dot 1.6s ease-in-out infinite;
}

.specular-button__dot::after {
	content: "";
	position: absolute;
	inset: 0;
	border-radius: 50%;
	border: 2px solid #ff3b30;
	animation: libracars-live-ring 1.6s ease-out infinite;
}

/* Na jasnym motywie przyciski leza nadal na ciemnym zdjeciu hero,
   wiec tekst zostaje jasny - to celowe, nie przeoczenie. */
[data-theme="light"] .specular-button {
	--sb-fill: rgba(20, 20, 24, 0.45);
}

@media (max-width: 480px) {
	.specular-button {
		/* Na telefonie oba CTA ida na pelna szerokosc jedno pod drugim -
		   kciuk trafia bez celowania. */
		width: 100%;
		padding: 16px 24px;
		font-size: 0.9375rem;
	}
}

@media (prefers-reduced-motion: reduce) {
	.specular-button--auto {
		animation: none;
	}
	.specular-button::after {
		/* Zamiast wedrujacego blasku - staly, subtelny obrys w kolorze wariantu. */
		background: var(--sb-line, #fff);
		opacity: 0.45;
	}
	.specular-button__dot,
	.specular-button__dot::after {
		animation: none;
	}
	.specular-button {
		transition: none;
	}
}

/* Rozblysk po tapnieciu na dotyku - odpowiednik "najechania" tam,
   gdzie kursora nie ma (specular-button.js). */
.specular-button.is-lit {
	--sb-bright: 1;
	animation: sb-spin 0.9s linear;
}