/* Kalendarz terminów „pisze się” (klasy dokłada assets/js/kalendarz-ruch.js: djk-czeka → djk-gra).
   Miesiąc wjeżdża, nazwa pisze się ze złotym kursorem, dni wpadają falą po przekątnej (--i = wiersz + kolumna),
   przekreślenia zajętych dni się rysują, wolne soboty błyskają złotem, dziś pulsuje, licznik sobót kręci się od 0.
   Tylko transform i opacity (plus krótkie świecenie) — układ nie drgnie. Bez JS / „Ogranicz ruch” / wydruk — statycznie. */

/* Elementy tworzone przez JS na czas animacji (potem wraca zwykły tekst) — układ niezależny od @media,
   więc przełączenie „Ogranicz ruch” w trakcie albo wydruk nie rozsypie licznika. */
.djk__slowo { white-space: nowrap; }
.djk__licz { display: inline-block; position: relative; color: transparent; clip-path: inset(0 -1em); }
.djk__rolka {
	position: absolute; top: 0; left: -1em; right: -1em; text-align: center; color: var(--dj-popiol);
	transform: translateY(var(--djk-rolka, 0));
}
.djk__rolka > span { display: block; }

@media screen and (prefers-reduced-motion: no-preference) {

	/* ---------- czeka na wjazd w widok ---------- */
	html.dj-ruch .djk__miesiac.djk-czeka { opacity: 0; transform: translateY(26px) scale(.98); }
	html.dj-ruch .djk__legenda.djk-czeka > * { opacity: 0; }

	/* ---------- miesiąc wjeżdża ---------- */
	html.dj-ruch .djk__miesiac.djk-gra { animation: djk-karta .55s cubic-bezier(.2, .8, .2, 1) var(--djk-start, 0ms) backwards; }

	/* ---------- nazwa: litery „gorące” (żar + poświata) stygną do bieli, kursor idzie za tekstem ---------- */
	html.dj-ruch .djk-gra .djk__z {
		position: relative;
		--djk-z: calc(var(--djk-start, 0ms) + 80ms + var(--z, 0) * var(--djk-t, 40ms));
		animation: djk-litera .5s ease-out var(--djk-z) backwards;
	}
	html.dj-ruch .djk-gra .djk__z::after {
		content: ""; position: absolute; right: -.09em; top: .12em; bottom: .06em; width: .07em; min-width: 2px;
		background: var(--dj-bursztyn); box-shadow: 0 0 10px rgba(240, 185, 85, .8);
		opacity: 0; pointer-events: none;
		animation: djk-kursor var(--djk-t, 40ms) steps(1) var(--djk-z);
	}
	html.dj-ruch .djk-gra .djk__z.is-ostatnia::after { animation: djk-mrug .5s steps(1) var(--djk-z) 2; }

	/* ---------- licznik wolnych sobót ---------- */
	html.dj-ruch .djk-gra .djk__soboty { animation: djk-wejdz .4s ease-out calc(var(--djk-start, 0ms) + 180ms) backwards; }
	.djk__rolka { animation: djk-rolka .8s cubic-bezier(.3, .9, .3, 1) calc(var(--djk-start, 0ms) + 220ms) backwards; }

	/* ---------- dni: fala po przekątnej ---------- */
	html.dj-ruch .djk-gra .djk__siatka > li { --djk-fala: calc(var(--djk-start, 0ms) + 120ms + var(--i, 0) * 32ms); }
	html.dj-ruch .djk-gra .djk__dzien { animation: djk-dzien .4s cubic-bezier(.34, 1.5, .64, 1) var(--djk-fala) backwards; }
	html.dj-ruch .djk-gra .djk__tyg { animation: djk-tydzien .35s ease-out var(--djk-fala) backwards; }

	/* Zajęty: przekreślenie rysowane od lewego dolnego rogu (zamiast tła z gradientem, ta sama grubość i kolor). */
	html.dj-ruch .djk-gra .djk__dzien.is-zajety > span { position: relative; isolation: isolate; overflow: hidden; background-image: none; }
	html.dj-ruch .djk-gra .djk__dzien.is-zajety > span::before {
		content: ""; position: absolute; left: 0; bottom: -4.6%; z-index: -1; width: 141.42%; height: 9.2%;
		background: rgba(255, 139, 122, .55); transform-origin: 0 50%; transform: rotate(-45deg);
		animation: djk-kreska .3s cubic-bezier(.6, 0, .2, 1) calc(var(--djk-fala) + 180ms) backwards;
	}

	/* Wolna sobota: krótki złoty błysk. */
	html.dj-ruch .djk-gra .djk__dzien.is-wolny.is-sobota > a::after {
		content: ""; position: absolute; inset: -1px; z-index: -1; border-radius: inherit; pointer-events: none;
		background: rgba(240, 185, 85, .22); box-shadow: 0 0 0 1px var(--dj-zar), 0 0 22px 3px rgba(240, 185, 85, .6);
		opacity: 0; animation: djk-blysk .65s ease-out calc(var(--djk-fala) + 180ms);
	}

	/* Dziś: jeden puls pierścienia (na li — działa też dla zajętego dnia). */
	html.dj-ruch .djk-gra .djk__dzien.is-dzis { position: relative; }
	html.dj-ruch .djk-gra .djk__dzien.is-dzis::after {
		content: ""; position: absolute; inset: 0; border-radius: 8px; pointer-events: none;
		box-shadow: 0 0 0 2px var(--dj-dym), 0 0 16px rgba(243, 244, 246, .55);
		opacity: 0; animation: djk-puls .8s cubic-bezier(.2, .6, .3, 1) calc(var(--djk-fala) + 220ms);
	}

	/* ---------- legenda ---------- */
	html.dj-ruch .djk__legenda.djk-gra > * { animation: djk-legenda .5s cubic-bezier(.2, .8, .2, 1) backwards; }
	html.dj-ruch .djk__legenda.djk-gra > :nth-child(2) { animation-delay: 110ms; }
	html.dj-ruch .djk__legenda.djk-gra > :nth-child(3) { animation-delay: 220ms; }
	html.dj-ruch .djk__legenda.djk-gra .djk__znak--zajety::after { animation: djk-znak-kreska .35s ease-out 330ms backwards; }
	html.dj-ruch .djk__legenda.djk-gra .djk__znak--swieto { animation: djk-znak-obrot .5s cubic-bezier(.34, 1.5, .64, 1) 400ms backwards; }

	/* ---------- wolny dzień pod kursorem / fokusem: uniesienie + złota poświata ---------- */
	.djk__dzien.is-wolny > a { position: relative; isolation: isolate; transition: transform .2s cubic-bezier(.3, 1.4, .6, 1), background-color .15s ease, color .15s ease; }
	.djk__dzien.is-wolny > a::before {
		content: ""; position: absolute; inset: 0; z-index: -1; border-radius: inherit; pointer-events: none;
		box-shadow: 0 8px 22px -4px rgba(240, 185, 85, .65), 0 0 0 1px rgba(255, 210, 125, .7);
		opacity: 0; transition: opacity .2s ease;
	}
	.djk__dzien.is-wolny > a:focus-visible { transform: translateY(-3px); z-index: 1; }
	.djk__dzien.is-wolny > a:focus-visible::before { opacity: 1; }

	@keyframes djk-karta { from { opacity: 0; transform: translateY(26px) scale(.98); } }
	@keyframes djk-litera {
		0% { opacity: 0; color: var(--dj-zar); text-shadow: 0 0 .45em rgba(240, 185, 85, .95); }
		12% { opacity: 1; }
	}
	@keyframes djk-kursor { from, to { opacity: 1; } }
	@keyframes djk-mrug { 0% { opacity: 1; } 50% { opacity: 0; } }
	@keyframes djk-wejdz { from { opacity: 0; transform: translateY(5px); } }
	@keyframes djk-rolka { 0%, 20% { transform: none; color: var(--dj-bursztyn); } 75% { color: var(--dj-bursztyn); } }
	@keyframes djk-dzien { from { opacity: 0; transform: translateY(10px) scale(.5); } }
	@keyframes djk-tydzien { from { opacity: 0; transform: translateY(-8px); } }
	@keyframes djk-kreska { from { transform: rotate(-45deg) scaleX(0); background-color: #ffc2b8; } }
	@keyframes djk-blysk { 0% { opacity: 0; } 30% { opacity: 1; } }
	@keyframes djk-puls { 0% { opacity: 1; transform: scale(1); } 100% { opacity: 0; transform: scale(1.45); } }
	@keyframes djk-legenda { from { opacity: 0; transform: translateX(-14px); } }
	@keyframes djk-znak-kreska { from { clip-path: inset(0 100% 0 0); } }
	@keyframes djk-znak-obrot { from { opacity: 0; transform: rotate(-90deg) scale(.3); } }
}

@media screen and (prefers-reduced-motion: no-preference) and (hover: hover) {
	.djk__dzien.is-wolny > a:hover { transform: translateY(-3px); z-index: 1; }
	.djk__dzien.is-wolny > a:hover::before { opacity: 1; }
}