/**
 * Lukuro Animated Logo - stan bazowy + sekwencja intro.
 *
 * Uogolnienie animacji logo lulumi (docs/oferta/grafika.html) do elementu
 * frameworka. Paradygmat CSS-first: zero bibliotek runtime.
 *
 * Kontrakt:
 *  - Stan bazowy = gotowe, pelne logo (brak JS / reduced-motion / playMode off).
 *  - Animacja gra tylko gdy: prefers-reduced-motion: no-preference ORAZ wrapper
 *    ma klase-trigger .lukuro-logo--play (dodawana gate-scriptem w render()).
 *  - Cala sekwencja skaluje sie proporcjonalnie jedna zmienna --lukuro-logo-dur
 *    (ustawiana per instancja z kontrolki animDuration). Proporcje krokow stale,
 *    wyrazone jako ulamki tej zmiennej przez calc().
 *  - Mapowanie id -> preset jest stale (element robi to "z pudelka" na
 *    standardowym logo). Kolory czesci ustawia sie recznie CSS-em poza elementem,
 *    lapiac te same nazwane id (np. .brxe-lukuro-animated-logo svg #wordmark).
 *
 * lukuro
 */

.brxe-lukuro-animated-logo {
	display: inline-block;
	line-height: 0;
}

.brxe-lukuro-animated-logo svg {
	display: block;
	width: 100%;
	height: auto;
	max-width: 100%;
}

/* ---- STAN BAZOWY = gotowe, pelne logo (brak JS / reduced-motion / off) ---- */
.brxe-lukuro-animated-logo svg #wordmark,
.brxe-lukuro-animated-logo svg #underline {
	clip-path: inset(0 0 0 0);
}
.brxe-lukuro-animated-logo svg #star-pop {
	opacity: 1;
	transform-box: fill-box;
	transform-origin: center;
}
.brxe-lukuro-animated-logo svg #circle-arc-top,
.brxe-lukuro-animated-logo svg #circle-arc-bottom {
	opacity: 1;
}

/* ---- ANIMACJA: tylko bez prosby o redukcje ruchu + klasa-trigger ---- */
@media (prefers-reduced-motion: no-preference) {
	/* Wejscie okregu wydluzone (0.42 calosci) - reszta sekwencji przesunieta,
	   gwiazdka nadal konczy na 1.0 * dur. Proporcje: 0.42 / 0.33 / 0.24 / 0.20. */
	.brxe-lukuro-animated-logo.lukuro-logo--play svg #circle-arc-top,
	.brxe-lukuro-animated-logo.lukuro-logo--play svg #circle-arc-bottom {
		animation: lukuro-logo-fade
			calc(var(--lukuro-logo-dur, 1500ms) * 0.42) 0s both ease-out;
	}
	.brxe-lukuro-animated-logo.lukuro-logo--play svg #wordmark {
		animation: lukuro-logo-wipe
			calc(var(--lukuro-logo-dur, 1500ms) * 0.33)
			calc(var(--lukuro-logo-dur, 1500ms) * 0.42)
			both var(--lukuro-logo-ease, cubic-bezier(0.77, 0, 0.175, 1));
	}
	.brxe-lukuro-animated-logo.lukuro-logo--play svg #underline {
		animation: lukuro-logo-wipe
			calc(var(--lukuro-logo-dur, 1500ms) * 0.24)
			calc(var(--lukuro-logo-dur, 1500ms) * 0.72)
			both var(--lukuro-logo-ease, cubic-bezier(0.77, 0, 0.175, 1));
	}
	.brxe-lukuro-animated-logo.lukuro-logo--play svg #star-pop {
		animation: lukuro-logo-pop
			calc(var(--lukuro-logo-dur, 1500ms) * 0.20)
			calc(var(--lukuro-logo-dur, 1500ms) * 0.80) both;
	}
}

@keyframes lukuro-logo-wipe {
	from { clip-path: inset(0 100% 0 0); }
	to   { clip-path: inset(0 0 0 0); }
}
@keyframes lukuro-logo-wipe-rl {
	from { clip-path: inset(0 0 0 100%); }
	to   { clip-path: inset(0 0 0 0); }
}
@keyframes lukuro-logo-fade {
	from { opacity: 0; }
	to   { opacity: 1; }
}
@keyframes lukuro-logo-pop {
	0%   { opacity: 0; transform: scale(0.2); }
	70%  { opacity: 1; transform: scale(1.12); }
	100% { opacity: 1; transform: scale(1); }
}

/* ---- Przycisk replay (opcjonalny, stylowany przez autora w Bricks) ---- */
.brxe-lukuro-animated-logo .lukuro-logo-replay {
	margin-top: 1rem;
	font: inherit;
	cursor: pointer;
}