/* ==========================================================================
   Efekty wjazdu.
   Stan „przed wjazdem” (.w-czeka) nadaje JavaScript tylko wtedy, gdy wie, że zaraz
   go zdejmie — bez JS i przy „ogranicz ruch” wszystko jest widoczne od razu.
   Ukrywanie wyłącznie przez opacity: test kontrastu pomija niewidoczne elementy.
   ========================================================================== */

/* ---------- nagłówki: litery wjeżdżają w złotym świetle i stygną do bieli ---------- */

.litery__slowo { display: inline-block; white-space: nowrap; }
.litery__znak { display: inline-block; }

.szyld.w-czeka .litery__znak { opacity: 0; }
.szyld.w-wjazd .litery__znak {
	animation: litera .75s cubic-bezier(.2, .8, .25, 1.15) calc(var(--i, 0) * 26ms) both;
}
@keyframes litera {
	0% { opacity: 0; transform: translateY(.55em) rotate(7deg); color: var(--zloto-jasne); text-shadow: 0 0 .35em var(--zar); }
	55% { opacity: 1; transform: none; color: var(--zloto-jasne); text-shadow: 0 0 .3em var(--zar); }
	100% { opacity: 1; transform: none; }
}

/* Tytuł setlisty pisze się jak na maszynie. */
.setlista__tytul.w-czeka .litery__znak { opacity: 0; }
.setlista__tytul.w-wjazd .litery__znak {
	animation: maszyna .01s steps(1, end) calc(.75s + var(--i, 0) * 55ms) both;
}
@keyframes maszyna { from { opacity: 0; } to { opacity: 1; } }

/* ---------- Imprezy: wiersz wjeżdża z boku, przez litery przelatuje snop ---------- */

.okazje__pozycja.w-czeka { opacity: 0; }
.okazje__pozycja.w-wjazd {
	animation: wjazdBok .7s cubic-bezier(.2, .8, .2, 1) calc(var(--i, 0) * 90ms) both;
}
@keyframes wjazdBok { from { opacity: 0; transform: translateX(-40px); } }

.okazje__pozycja.w-wjazd .okazje__nazwa {
	background: linear-gradient(100deg, transparent 38%, var(--neon) 48%, var(--zloto-jasne) 52%, transparent 62%) no-repeat;
	background-size: 260% 100%;
	-webkit-background-clip: text;
	background-clip: text;
	animation: snop 1.4s ease-in-out calc(var(--i, 0) * 90ms + .3s) both;
}
@keyframes snop {
	from { background-position: 100% 0; }
	to { background-position: 0% 0; }
}

/* ---------- O mnie: podpis pisze się jak długopisem ---------- */

.podpis-neon.w-czeka { opacity: 0; }
.podpis-neon.w-wjazd { animation: podpis 1.7s cubic-bezier(.55, .1, .35, 1) .25s both; }
@keyframes podpis {
	from { opacity: 1; clip-path: inset(-80% 100% -80% -40%); }
	to { opacity: 1; clip-path: inset(-80% -40% -80% -40%); }
}

/* ---------- LOVE: pokaz żarówek przy pierwszym pojawieniu ---------- */

.love__litera.pokaz::after {
	--zarowka: #fff6e2;
	filter: drop-shadow(0 0 3px #ffd28a) drop-shadow(0 0 12px rgba(255, 150, 54, .9));
}

/* ---------- KAWA: karty wpadają jak rzucone na parkiet ---------- */

.kawa.w-czeka .kawa__karta { opacity: 0; }
.kawa.w-wjazd .kawa__karta {
	animation: rzut .8s cubic-bezier(.2, .9, .3, 1.25) calc(var(--i, 0) * 110ms) both;
}
@keyframes rzut {
	from { opacity: 0; transform: translateY(-150px) rotate(-28deg); }
	55% { opacity: 1; }
}

/* ---------- Galeria: zdjęcia wywołują się jak z fotobudki ---------- */

.kadry__kadr.w-czeka img { opacity: 0; }
.kadry__kadr.w-wjazd img {
	animation: wywolanie 1.6s ease-out calc(var(--i, 0) * 90ms) both;
}
@keyframes wywolanie {
	0% { opacity: 0; filter: brightness(2.4) saturate(0) contrast(.6) blur(8px); }
	25% { opacity: 1; }
	65% { filter: brightness(1.25) saturate(.55) contrast(.9) blur(1px); }
	100% { opacity: 1; filter: none; }
}

/* ---------- Setlista: kartka ląduje, kroki dostają ptaszki ---------- */

.setlista.w-czeka { opacity: 0; }
.setlista.w-wjazd { animation: ladowanie .9s cubic-bezier(.2, .9, .3, 1.1) both; }
@keyframes ladowanie { from { opacity: 0; transform: translateY(90px) rotate(5deg); } }

.setlista.w-czeka .setlista__ptaszek path { stroke-dashoffset: 60; }
.setlista.w-wjazd .setlista__ptaszek path {
	animation: kreska .45s ease-out calc(2.2s + var(--i, 0) * 380ms) both;
}
@keyframes kreska { from { stroke-dashoffset: 60; } to { stroke-dashoffset: 0; } }

/* ---------- Kontakt: numer zapala się jak neon ---------- */

.telefon-neon.w-czeka { opacity: 0; }
.telefon-neon.w-wjazd { animation: telZaplon 1.3s steps(1, end) .2s both; }
@keyframes telZaplon {
	0% { opacity: 0; } 10% { opacity: 1; } 14% { opacity: .15; } 30% { opacity: 1; }
	34% { opacity: .25; } 55%, 100% { opacity: 1; }
}

/* ---------- Certyfikaty: dyplom wjeżdża, ramka zapala się jak neon ---------- */

.dyplom.w-czeka { opacity: 0; }
.dyplom.w-wjazd { animation: dyplomWjazd .8s cubic-bezier(.2, .8, .2, 1) calc(var(--i, 0) * 120ms) both; }
.dyplom.w-wjazd .dyplom__ramka::before,
.dyplom.w-wjazd .dyplom__ramka::after { animation: telZaplon 1.3s steps(1, end) calc(.3s + var(--i, 0) * 120ms) both; }
@keyframes dyplomWjazd { from { opacity: 0; transform: translateY(36px) scale(.97); } }

@media (prefers-reduced-motion: reduce) {
	.w-czeka,
	.w-czeka * { opacity: 1 !important; clip-path: none !important; }
}