/* Hero na stronie głównej — efekty specjalne (warstwy dokłada assets/js/hero-ruch.js).
   Scena świateł leży nad zdjęciem i ciemnym gradientem, pod treścią (z-index 1 < 2), nic nie łapie kliknięć.
   Animowane są tylko transform/opacity. Bez JS nic z tego się nie pojawia; przy „Ogranicz ruch” — nieruchome światło. */

/* ---------- scena: snopy, omiot, błysk, dym, iskry ---------- */
.dj-hero__scena {
	position: absolute; inset: 0; z-index: 1; overflow: hidden; pointer-events: none;
	mix-blend-mode: screen;
}
.dj-hero__scena > *, .dj-hero__rig > * { position: absolute; pointer-events: none; }
.dj-hero__rig { inset: -6% -4% 0; transform-origin: 50% 0; }
@supports (width: 1cqh) { .dj-hero__rig { container-type: size; } }

/* Snop światła: stożek z conic-gradient, wygaszany maską ku dołowi. */
.dj-hero__snop {
	--k: 255, 214, 140; --a: .55;
	top: -12%; left: 50%; width: 50%; height: 120%; margin-left: -25%;
	transform-origin: 50% 0;
	background: conic-gradient(from 166deg at 50% 0,
		rgba(var(--k), 0) 0deg, rgba(var(--k), calc(var(--a) * .12)) 6deg, rgba(var(--k), calc(var(--a) * .45)) 11deg,
		rgba(var(--k), var(--a)) 14deg, rgba(var(--k), calc(var(--a) * .45)) 17deg, rgba(var(--k), calc(var(--a) * .12)) 22deg, rgba(var(--k), 0) 28deg);
	-webkit-mask: linear-gradient(#000 0 40%, transparent 96%); mask: linear-gradient(#000 0 40%, transparent 96%);
}
@supports (width: 1cqh) { .dj-hero__snop { width: 64cqh; margin-left: -32cqh; } }
.dj-hero__snop--1 { left: 52%; transform: rotate(10deg); }
.dj-hero__snop--2 { --k: 190, 145, 255; --a: .45; left: 68%; transform: rotate(-8deg); }
.dj-hero__snop--3 { --k: 255, 196, 105; --a: .55; left: 85%; transform: rotate(-4deg); }
.dj-hero__snop--4 { --k: 150, 200, 255; --a: .28; left: 26%; transform: rotate(6deg); }

/* Omiot: szeroka smuga przelatuje raz przez scenę przy wejściu. */
.dj-hero__omiot {
	top: -14%; left: 40%; width: 80%; height: 125%; margin-left: -40%;
	transform-origin: 50% 0; opacity: 0;
	background: conic-gradient(from 160deg at 50% 0, rgba(255, 228, 170, 0), rgba(255, 228, 170, .1) 10deg, rgba(255, 240, 205, .42) 20deg, rgba(255, 228, 170, .1) 30deg, rgba(255, 228, 170, 0) 40deg);
	-webkit-mask: linear-gradient(#000 10%, transparent 85%); mask: linear-gradient(#000 10%, transparent 85%);
}
@supports (width: 1cqh) { .dj-hero__omiot { width: 100cqh; margin-left: -50cqh; } }

/* Błysk po napisaniu hasła + ciepła poświata „z rampy” u góry. */
.dj-hero__blysk { inset: 0; opacity: 0; background: radial-gradient(60% 55% at 72% 0, rgba(255, 210, 125, .3), rgba(255, 210, 125, 0) 70%); }

/* Dym przy parkiecie. */
.dj-hero__dym {
	left: -15%; right: -15%; bottom: -4%; height: 62%;
	background:
		radial-gradient(30% 45% at 30% 78%, rgba(150, 115, 255, .1), rgba(150, 115, 255, 0) 70%),
		radial-gradient(28% 40% at 72% 82%, rgba(255, 190, 100, .1), rgba(255, 190, 100, 0) 70%),
		radial-gradient(40% 35% at 52% 96%, rgba(255, 255, 255, .05), rgba(255, 255, 255, 0) 70%);
}

/* Iskry i odblaski kuli disco (canvas, dokładany po załadowaniu strony). */
.dj-hero__iskry { inset: 0; width: 100%; height: 100%; opacity: 0; transition: opacity 2.5s ease; }
.dj-hero__iskry.is-on { opacity: 1; }

/* ---------- ruch (tylko gdy efekty.js włączył html.dj-ruch) ---------- */
html.dj-ruch .dj-hero__snop { opacity: 0; }
html.dj-ruch .dj-hero__snop--1 { animation: dj-hero-wlacz 1.2s .2s linear both, dj-hero-snop1 9s .2s ease-in-out infinite alternate both; }
html.dj-ruch .dj-hero__snop--2 { animation: dj-hero-wlacz 1.2s .4s linear both, dj-hero-snop2 11s .4s ease-in-out infinite alternate both; }
html.dj-ruch .dj-hero__snop--3 { animation: dj-hero-wlacz 1.2s .55s linear both, dj-hero-snop3 8s .55s ease-in-out infinite alternate both; }
html.dj-ruch .dj-hero__snop--4 { animation: dj-hero-wlacz 1.2s .75s linear both, dj-hero-snop4 13s .75s ease-in-out infinite alternate both; }
html.dj-ruch .dj-hero__omiot { animation: dj-hero-omiot 2.1s .3s cubic-bezier(.45, 0, .3, 1) both; }
html.dj-ruch .dj-hero__scena.is-hit .dj-hero__blysk { animation: dj-hero-hit 2.4s ease-out both; }
html.dj-ruch .dj-hero__dym { animation: dj-hero-dym 22s ease-in-out infinite alternate both; }

@keyframes dj-hero-wlacz { 0% { opacity: 0; } 10% { opacity: 1; } 18% { opacity: .1; } 28% { opacity: .85; } 36% { opacity: .25; } 55%, 100% { opacity: 1; } }
@keyframes dj-hero-snop1 { from { transform: rotate(24deg) scaleX(.85); } to { transform: rotate(-6deg) scaleX(1.15); } }
@keyframes dj-hero-snop2 { from { transform: rotate(-26deg) scaleX(1.1); } to { transform: rotate(10deg) scaleX(.9); } }
@keyframes dj-hero-snop3 { from { transform: rotate(14deg); } to { transform: rotate(-22deg) scaleX(1.2); } }
@keyframes dj-hero-snop4 { from { transform: rotate(-12deg) scaleX(.9); } to { transform: rotate(20deg) scaleX(1.1); } }
@keyframes dj-hero-omiot { 0% { opacity: 0; transform: rotate(60deg); } 22% { opacity: 1; } 72% { opacity: .75; } 100% { opacity: 0; transform: rotate(-62deg); } }
@keyframes dj-hero-hit { 0% { opacity: 0; } 12% { opacity: 1; } 100% { opacity: .35; } }
@keyframes dj-hero-dym { from { transform: translate3d(-6%, 0, 0); } to { transform: translate3d(6%, -3%, 0); } }

/* ---------- equalizer zamiast złotej kreski przy etykiecie ---------- */
.dj-hero .dj-etykieta.ma-eq::before { content: none; }
.dj-hero__eq { display: inline-flex; align-items: flex-end; gap: 3px; width: 1.4rem; height: .8rem; flex: none; }
.dj-hero__eq i { flex: 1; height: 100%; border-radius: 1px; background: currentColor; transform-origin: 50% 100%; transform: scaleY(.3); animation: dj-hero-eq .82s ease-in-out infinite alternate; }
.dj-hero__eq i:nth-child(2) { animation-duration: .54s; animation-delay: -.3s; }
.dj-hero__eq i:nth-child(3) { animation-duration: .68s; animation-delay: -.5s; }
.dj-hero__eq i:nth-child(4) { animation-duration: .46s; animation-delay: -.15s; }
@keyframes dj-hero-eq { from { transform: scaleY(.18); } to { transform: scaleY(1); } }

/* ---------- złoty połysk po „wesele i impreza” (po napisaniu, potem co kilka sekund) ---------- */
/* Złoto to tło przycięte do liter (background-clip: text) — opacity liter go nie chowa, więc
   nienapisane litery wyróżnienia ukrywamy przez visibility (miejsce zostaje, układ się nie rusza). */
html.dj-ruch .dj-hero h1 mark .dj-pisz__z:not(.is-on) { visibility: hidden; }
@property --dj-polysk { syntax: '<percentage>'; inherits: false; initial-value: 0%; }
.dj-hero h1 mark.is-zloto {
	background-image:
		linear-gradient(100deg, rgba(255, 247, 225, 0) 44.5%, rgba(255, 250, 235, 1) 50%, rgba(255, 247, 225, 0) 55.5%),
		linear-gradient(100deg, #f8d27a 0%, #efb24a 55%, #e59a2f 100%) !important;
	background-size: 260% 100%, 100% 100% !important;
	background-position: var(--dj-polysk) 0, 0 0 !important;
	background-repeat: no-repeat !important;
	filter: drop-shadow(0 0 .2em rgba(240, 185, 85, .4));
	transition: filter 1.2s ease;
}
.dj-hero h1 mark.is-polysk { animation: dj-hero-mark 1.6s cubic-bezier(.5, 0, .3, 1) both; }
@keyframes dj-hero-mark { from { --dj-polysk: 100%; } to { --dj-polysk: 0%; } }

/* ---------- „Zapytaj o termin”: połysk i złota fala co kilka sekund ---------- */
html.dj-ruch .dj-hero .wp-block-button:not(.is-style-outline) { position: relative; }
html.dj-ruch .dj-hero .wp-block-button:not(.is-style-outline) .wp-block-button__link { position: relative; overflow: hidden; isolation: isolate; }
html.dj-ruch .dj-hero .wp-block-button:not(.is-style-outline) .wp-block-button__link::after {
	content: ""; position: absolute; top: 0; bottom: 0; left: 0; width: 42%; z-index: -1; pointer-events: none;
	background: linear-gradient(100deg, rgba(255, 255, 255, 0), rgba(255, 255, 255, .6) 50%, rgba(255, 255, 255, 0));
	transform: translateX(-130%) skewX(-20deg);
	animation: dj-hero-przycisk 6s 2.2s ease-in-out infinite;
}
html.dj-ruch .dj-hero .wp-block-button:not(.is-style-outline)::after {
	content: ""; position: absolute; inset: 0; border-radius: 999px; pointer-events: none; opacity: 0;
	box-shadow: 0 0 0 2px rgba(255, 210, 125, .75), 0 0 24px 4px rgba(240, 185, 85, .45);
	animation: dj-hero-fala 6s 2.2s ease-out infinite;
}
@keyframes dj-hero-przycisk { 0% { transform: translateX(-130%) skewX(-20deg); } 24%, 100% { transform: translateX(340%) skewX(-20deg); } }
@keyframes dj-hero-fala { 0%, 10% { opacity: 0; transform: scale(1); } 14% { opacity: .9; } 30%, 100% { opacity: 0; transform: scale(1.1, 1.4); } }

/* ---------- paralaksa przy przewijaniu: zdjęcie zostaje lekko w tyle (bez JS, na wątku kompozytora) ---------- */
@supports (animation-timeline: scroll()) {
	html.dj-ruch .dj-hero .wp-block-cover__image-background { animation: dj-hero-przewin linear both; animation-timeline: scroll(root); animation-range: 0 100vh; }
}
@keyframes dj-hero-przewin { to { translate: 0 22vh; } }

/* Paralaksa za kursorem (JS): zdjęcie sterowane inline, bez przejścia z ruch.css. */
html.dj-ruch .dj-hero.is-mysz .wp-block-cover__image-background { transition: none; will-change: transform; }

/* Hero poza ekranem — animacje stoją. */
.dj-hero.is-poza .dj-hero__scena *, .dj-hero.is-poza .dj-hero__eq i,
.dj-hero.is-poza .wp-block-button::after, .dj-hero.is-poza .wp-block-button__link::after { animation-play-state: paused; }

/* Telefon: dwa snopy, bez dymu. */
@media (max-width: 781px) {
	.dj-hero__snop--2, .dj-hero__snop--4, .dj-hero__dym { display: none; }
	.dj-hero__snop--1 { left: 74%; --a: .45; }
	.dj-hero__snop--3 { left: 24%; --a: .32; }
	/* tekst zajmuje całą szerokość — omiot łagodniej */
	.dj-hero__omiot { background: conic-gradient(from 160deg at 50% 0, rgba(255, 228, 170, 0), rgba(255, 228, 170, .07) 10deg, rgba(255, 240, 205, .28) 20deg, rgba(255, 228, 170, .07) 30deg, rgba(255, 228, 170, 0) 40deg); }
}

@media (prefers-reduced-motion: reduce) {
	.dj-hero__scena *, .dj-hero__eq i, .dj-hero h1 mark,
	.dj-hero .wp-block-button::after, .dj-hero .wp-block-button__link::after, .dj-hero .wp-block-cover__image-background { animation: none !important; }
	html.dj-ruch .dj-hero__snop { opacity: 1; }
}