/* ==========================================================================
   WroobelDJ 2026 — efekty („pokaz świateł”)
   Wszystko wyłącza się przy systemowym „ogranicz ruch”.
   Bez JavaScriptu treść jest widoczna — ukrywanie działa tylko pod klasą .js.
   ========================================================================== */

/* 1. Wejście pierwszego ekranu: scena „zapala się”, hasło wchodzi słowo po słowie */
.hero__title .word { display: inline-block; animation: word-in .9s var(--ease) both; animation-delay: calc(.3s + var(--i) * 70ms); }
@keyframes word-in {
	from { opacity: 0; translate: 0 .45em; filter: blur(10px); }
	to { opacity: 1; translate: 0 0; filter: blur(0); }
}
.hero__typed { animation: fade-up .9s var(--ease) .9s both; }
.hero__lead { animation: fade-up .9s var(--ease) 1.05s both; }
.hero__actions { animation: fade-up .9s var(--ease) 1.2s both; }
.slider-ui { animation: fade-up .9s var(--ease) 1.5s both; }
@keyframes fade-up {
	from { opacity: 0; translate: 0 22px; }
	to { opacity: 1; translate: 0 0; }
}
.hero__photos { animation: lights-on 2.6s var(--ease) .1s both; }
@keyframes lights-on {
	0% { filter: brightness(.08) saturate(.2); }
	45% { filter: brightness(1.25) saturate(1.15); }
	100% { filter: none; }
}

/* Pokaz zdjęć w tle: każde powoli odjeżdża (Ken Burns, na przemian w lewo i w prawo),
   kolejne wyłania się z parkietu w kształcie łuku z magentową poświatą na krawędzi,
   poprzednie w tym czasie przygasa. Pasek pod zdjęciem odmierza czas i sam przełącza slajd. */
.slide img { --kb-x: 1.6%; }
.slide:nth-child(even) img { --kb-x: -1.6%; }
.slide.is-active img, .slide.was-active img { animation: kenburns calc(var(--interval, 6s) + 1.8s) linear both; }
@keyframes kenburns {
	from { scale: 1.16; transform: translateX(var(--kb-x)); }
	to { scale: 1.06; transform: none; }
}
.slide.is-active:not(.is-first) { animation: arch-glow 1.8s ease-out; }
.slide.is-active:not(.is-first) img { animation: arch-in 1.8s cubic-bezier(.65, 0, .25, 1) both, kenburns calc(var(--interval, 6s) + 1.8s) linear both; }
.slide.was-active img { animation: kenburns calc(var(--interval, 6s) + 1.8s) linear both, slide-dim 1.8s ease both; }
/* łuk rośnie od parkietu pod Danielem (--fx); proporcje 130 : 180 trzymają kształt łuku, a końcowy rozmiar zakrywa całą scenę */
@keyframes arch-in {
	from { clip-path: ellipse(0% 0% at var(--fx, 50%) 100%); filter: brightness(2) saturate(1.3); }
	to { clip-path: ellipse(130% 180% at var(--fx, 50%) 100%); filter: none; }
}
/* poświata krawędzi łuku: drop-shadow rodzica idzie za przyciętym (clip-path) zdjęciem */
@keyframes arch-glow {
	0% { filter: drop-shadow(0 0 0 rgba(244, 138, 238, 0)); }
	25% { filter: drop-shadow(0 0 26px rgba(244, 138, 238, .95)); }
	75% { filter: drop-shadow(0 0 34px rgba(178, 0, 168, .55)); }
	100% { filter: drop-shadow(0 0 0 rgba(178, 0, 168, 0)); }
}
@keyframes slide-dim {
	to { filter: brightness(.4) saturate(.75); }
}
.slider-dot[aria-current="true"] span::after { animation: slide-progress var(--interval, 6s) linear both; }
@keyframes slide-progress {
	from { transform: scaleX(0); }
	to { transform: scaleX(1); }
}
/* pauza (przycisk, myszka nad sterowaniem, ekran przewinięty): stoi pasek i dryf zdjęcia, rozpoczęte odsłanianie łuku kończy się normalnie */
.hero-slider:is(.is-paused, .is-hover, .is-offscreen) .slider-dot span::after,
.hero-slider:is(.is-paused, .is-hover, .is-offscreen) .slide img { animation-play-state: paused; }
.hero-slider:is(.is-paused, .is-hover, .is-offscreen) .slide.is-active:not(.is-first) img { animation-play-state: running, paused; }
.hero-slider:is(.is-paused, .is-hover, .is-offscreen) .slide.was-active img { animation-play-state: paused, running; }

/* „Przewiń”: kropla światła spływa w dół */
.hero__scroll i::after { animation: scroll-cue 2.2s cubic-bezier(.6, 0, .3, 1) 2s infinite both; }
@keyframes scroll-cue {
	0% { translate: 0 -14px; }
	100% { translate: 0 42px; }
}

/* 2. Pisany tekst: „Zagram na …” z migającym kursorem (wygląd linijki: main.css) */
.typed::after {
	content: ""; display: inline-block; width: 2px; height: 1.05em; margin-left: 4px; vertical-align: -.15em;
	background: var(--roz); box-shadow: 0 0 10px rgba(244, 138, 238, .9);
	animation: caret 1s steps(1) infinite;
}
.typed.is-typing::after { animation: none; }
@keyframes caret { 50% { opacity: 0; } }

/* 3. Reflektor za kursorem + snopy lekko podążają za myszką */
.hero__spot {
	position: absolute; inset: 0; z-index: 0; pointer-events: none; opacity: 0; transition: opacity .6s;
	background: radial-gradient(460px circle at var(--mx, 70%) var(--my, 40%), rgba(244, 138, 238, .17), rgba(178, 0, 168, .08) 42%, transparent 70%);
	mix-blend-mode: screen;
}
.hero.is-spot .hero__spot { opacity: 1; }
.hero__beams { translate: calc(var(--mxn, 0) * 28px) 0; transition: translate 1.2s var(--ease); }

/* 4. Pasek postępu w nagłówku — jak postęp odtwarzanego utworu */
.site-header::after {
	content: ""; position: absolute; left: 0; right: 0; bottom: -1px; height: 2px;
	background: linear-gradient(90deg, var(--magenta), var(--roz));
	box-shadow: 0 0 12px rgba(244, 138, 238, .75);
	transform: scaleX(var(--progress, 0)); transform-origin: left;
	opacity: 0; transition: opacity .3s;
}
.site-header.is-scrolled::after { opacity: 1; }

/* 5. Odsłanianie przy przewijaniu */
.js [data-reveal] { opacity: 0; translate: 0 34px; transition: opacity 1s var(--ease), translate 1s var(--ease); }
.js [data-reveal].is-in { opacity: 1; translate: 0 0; }

/* zdjęcie w łuku: kurtyna idzie w górę */
.js [data-reveal="arch"] { opacity: 1; translate: none; }
.js [data-reveal="arch"] > .arch { clip-path: inset(100% 0 0 0); transition: clip-path 1.4s cubic-bezier(.7, 0, .2, 1); }
.js [data-reveal="arch"].is-in > .arch { clip-path: inset(0 0 0 0); }
.js [data-reveal="arch"] img { scale: 1.3; transition: scale 1.8s var(--ease); }
.js [data-reveal="arch"].is-in img { scale: 1.1; }

/* grupy (galeria, opinie, certyfikaty, filmy, wpisy): kaskada */
.js [data-reveal-group] > * {
	opacity: 0; translate: 0 28px;
	transition: opacity .8s var(--ease), translate .8s var(--ease), scale .9s var(--ease);
	transition-delay: calc(var(--i, 0) * 90ms);
}
.js [data-reveal-group].is-in > * { opacity: 1; translate: 0 0; }
.js .justified[data-reveal-group] > li { translate: none; scale: .92; }
.js .justified[data-reveal-group].is-in > li { scale: 1; }
.js .justified[data-reveal-group].is-in > li.is-entering { opacity: 0; scale: .92; } /* kolejna porcja po „Pokaż więcej” */

/* współpraca: linia się rysuje, kroki zapalają się po kolei */
.js [data-reveal="steps"] { opacity: 1; translate: none; }
.js [data-reveal="steps"]::before { transform: scaleX(0); transform-origin: left; transition: transform 1.8s var(--ease) .2s; }
.js [data-reveal="steps"].is-in::before { transform: scaleX(1); }
.js [data-reveal="steps"] .step { opacity: 0; translate: 0 22px; transition: opacity .7s var(--ease), translate .7s var(--ease); transition-delay: calc(.2s + var(--i, 0) * .38s); }
.js [data-reveal="steps"].is-in .step { opacity: 1; translate: 0 0; }
.js [data-reveal="steps"].is-in .step__num { animation: step-ping 1.2s var(--ease) both; animation-delay: calc(.4s + var(--i, 0) * .38s); }
@keyframes step-ping {
	0% { box-shadow: 0 0 0 0 rgba(178, 0, 168, .6); }
	100% { box-shadow: 0 0 0 20px rgba(178, 0, 168, 0); }
}

/* voucher: wpada z obrotem i unosi się w powietrzu */
.js [data-reveal="voucher"] {
	translate: 0 40px; rotate: -12deg; scale: .9;
	transition: opacity 1s var(--ease), translate 1.2s var(--ease), rotate 1.4s var(--ease), scale 1.2s var(--ease);
}
.js [data-reveal="voucher"].is-in { rotate: 0deg; scale: 1; }
.voucher__media img.voucher__cards { animation: float 7s ease-in-out infinite; }
/* płyta kręci się powoli (jak na gramofonie, tylko spokojniej), ikonki delikatnie się unoszą */
.voucher__vinyl svg { animation: spin-vinyl 16s linear infinite; }
@keyframes spin-vinyl { to { rotate: 360deg; } }
.voucher__ic { animation: drift 9s ease-in-out infinite alternate; }
.voucher__ic--2, .voucher__ic--5, .voucher__ic--8 { animation-duration: 11s; animation-delay: -3s; }
.voucher__ic--3, .voucher__ic--6 { animation-duration: 13s; animation-delay: -6s; }
@keyframes drift { from { translate: 0 0; } to { translate: 0 -18px; } }
.voucher__spot { animation: spot-pulse 6s ease-in-out infinite alternate; }
@keyframes spot-pulse { from { opacity: .55; } to { opacity: .85; } }
@keyframes float {
	0%, 100% { translate: 0 0; rotate: 0deg; }
	50% { translate: 0 -16px; rotate: -1.8deg; }
}

/* 6. Paralaksa zdjęć w łukach (przesunięcie liczone w JS) */
[data-parallax] img { scale: 1.1; translate: 0 var(--py, 0px); }

/* 7. Drobiazgi: deck ze Spotify, filmy, połysk przycisków, poświaty */
/* korektor przy playliście: stoi nisko, rusza dopiero po włączeniu odtwarzacza (talerz rozpędza JS) */
.eq { display: inline-flex; align-items: flex-end; gap: 2px; height: 12px; margin-left: 8px; vertical-align: -1px; }
.eq i { width: 3px; height: 100%; border-radius: 1px; background: linear-gradient(0deg, var(--magenta), var(--roz)); transform-origin: bottom; scale: 1 .3; transition: scale .5s var(--ease); }
.eq i:nth-child(2) { scale: 1 .55; }
.eq i:nth-child(3) { scale: 1 .4; }
.eq i:nth-child(4) { scale: 1 .25; }
.spotify.is-on .eq i { animation: eq 1s ease-in-out infinite; }
.spotify.is-on .eq i:nth-child(2) { animation-duration: .8s; animation-delay: -.3s; }
.spotify.is-on .eq i:nth-child(3) { animation-duration: 1.2s; animation-delay: -.6s; }
.spotify.is-on .eq i:nth-child(4) { animation-duration: .9s; animation-delay: -.15s; }
@keyframes eq {
	0%, 100% { scale: 1 .25; }
	50% { scale: 1 1; }
}

/* filmy: ekrany wchodzą z wychyleniem jak karty rzucone na stół, potem stoją lekko przekrzywione */
.js .media__videos[data-reveal-group] > .reel {
	--swing: -7deg;
	translate: 0 70px; rotate: var(--swing);
	transition: opacity .9s var(--ease), translate 1.2s var(--ease), rotate 1.4s var(--ease);
	transition-delay: calc(var(--i, 0) * 160ms);
}
.js .media__videos[data-reveal-group] > .reel:nth-child(2) { --swing: 8deg; }
.js .media__videos[data-reveal-group].is-in > .reel { translate: 0 0; rotate: 0deg; }
/* przycisk „odtwórz”: fala światła po najechaniu */
.reel__play-ico::after { content: ""; position: absolute; inset: -1px; border-radius: 50%; border: 1px solid var(--roz); opacity: 0; pointer-events: none; }
.reel__play:hover .reel__play-ico::after, .reel__play:focus-visible .reel__play-ico::after { animation: reel-ping 1.6s var(--ease) infinite; }
@keyframes reel-ping {
	from { opacity: .9; scale: 1; }
	to { opacity: 0; scale: 1.7; }
}
/* ładowanie filmu: pierścień kręci się wokół przycisku */
.reel.is-loading .reel__play { opacity: 1; }
.reel.is-loading .reel__play-ico { border-color: rgba(251, 242, 248, .2); }
.reel.is-loading .reel__play-ico::before {
	content: ""; position: absolute; inset: -1px; border-radius: 50%;
	border: 2px solid transparent; border-top-color: var(--roz); border-right-color: rgba(244, 138, 238, .4);
	animation: reel-spin .8s linear infinite;
}
@keyframes reel-spin { to { rotate: 360deg; } }
/* tło sekcji: kula dyskotekowa kręci się (odblaski suną po ścianie), korektor oddycha.
   Gdy gra Spotify albo film (.is-live z JS): bliższe odblaski się zapalają, słupki skaczą, wszystko jaśniej.
   Poza ekranem (.is-away) animacje stoją. */
.media__ball i { animation: ball-drift 70s linear infinite, ball-twinkle 5s ease-in-out infinite alternate; }
.media__ball i:nth-child(2) { opacity: .4; animation: ball-drift 24s linear infinite; transition: opacity 1.4s; }
@keyframes ball-drift { to { translate: calc(-1 * var(--tile)) 0; } }
@keyframes ball-twinkle { from { opacity: .65; } to { opacity: 1; } }
.media__bars i { animation: spec-idle calc(var(--d) * 4.5) ease-in-out calc(var(--d) * -3) infinite alternate; }
@keyframes spec-idle {
	from { scale: 1 var(--lo); }
	to { scale: 1 calc(var(--lo) + (var(--hi) - var(--lo)) * .55); }
}
.media.is-live .media__ball { opacity: 1; }
.media.is-live .media__ball i:nth-child(2) { opacity: 1; }
.media.is-live .media__spectrum { opacity: .9; }
.media.is-live .media__bars i { animation: spec-live var(--d) ease-in-out calc(var(--d) * -.6) infinite; }
@keyframes spec-live {
	0%, 100% { scale: 1 var(--lo); }
	30% { scale: 1 var(--hi); }
	62% { scale: 1 calc(var(--hi) * .55); }
}
.media.is-away .media__ball i, .media.is-away .media__bars i { animation-play-state: paused; }

.btn--primary { position: relative; overflow: hidden; isolation: isolate; transition: background-color .2s, color .2s, border-color .2s, box-shadow .3s, translate .2s; }
.btn--primary::after {
	content: ""; position: absolute; inset: 0; z-index: -1;
	background: linear-gradient(110deg, transparent 30%, rgba(255, 255, 255, .42) 50%, transparent 70%);
	translate: -130% 0; transition: translate .8s var(--ease);
}
.btn--primary:hover::after { translate: 130% 0; }
.btn--primary:hover { box-shadow: 0 12px 32px -10px rgba(178, 0, 168, .95), 0 0 0 1px rgba(244, 138, 238, .35); translate: 0 -1px; }
.btn--white, .btn--ghost { transition: background-color .2s, color .2s, border-color .2s, translate .2s; }
.btn--white:hover, .btn--ghost:hover { translate: 0 -1px; }

.justified a::after { content: ""; position: absolute; inset: 0; border-radius: inherit; box-shadow: inset 0 0 0 0 var(--roz); transition: box-shadow .3s; pointer-events: none; }
.justified a:hover::after { box-shadow: inset 0 0 0 2px var(--roz); }
.justified a:hover img { filter: brightness(1.08) saturate(1.1); }

.contact__phone:hover { text-shadow: 0 0 28px rgba(244, 138, 238, .65); }

/* słuchawka „dzwoni” po najechaniu */
.btn:hover .icon--phone, .callbar__btn:hover .icon--phone { animation: ring .7s ease; }
@keyframes ring {
	0%, 100% { rotate: 0deg; }
	20% { rotate: -16deg; }
	40% { rotate: 13deg; }
	60% { rotate: -8deg; }
	80% { rotate: 5deg; }
}

/* światło podążające za kursorem na kartach (formularz, Spotify, wpisy) */
[data-glow] { position: relative; isolation: isolate; }
[data-glow]::before {
	content: ""; position: absolute; inset: 0; z-index: -1; border-radius: inherit; pointer-events: none;
	background: radial-gradient(420px circle at var(--gx, 50%) var(--gy, 50%), rgba(244, 138, 238, .13), transparent 62%);
	opacity: 0; transition: opacity .4s;
}
[data-glow]:hover::before { opacity: 1; }

/* menu na telefonie: pozycje wjeżdżają po kolei */
.nav.is-open .nav__list li, .nav.is-open .nav__contact { animation: fade-up .55s var(--ease) both; }
.nav.is-open .nav__list li:nth-child(2) { animation-delay: .05s; }
.nav.is-open .nav__list li:nth-child(3) { animation-delay: .1s; }
.nav.is-open .nav__list li:nth-child(4) { animation-delay: .15s; }
.nav.is-open .nav__list li:nth-child(5) { animation-delay: .2s; }
.nav.is-open .nav__list li:nth-child(6) { animation-delay: .25s; }
.nav.is-open .nav__list li:nth-child(7) { animation-delay: .3s; }
.nav.is-open .nav__list li:nth-child(8) { animation-delay: .35s; }
.nav.is-open .nav__contact { animation-delay: .4s; }

/* lightbox: miękkie otwarcie i zmiana zdjęć */
.lightbox[open] { animation: lb-fade .3s ease both; }
@keyframes lb-fade { from { opacity: 0; } }
.lightbox__figure img.is-anim { animation: lb-img .5s var(--ease) both; }
@keyframes lb-img { from { opacity: 0; scale: .95; } }

/* płynne przejścia między podstronami (Chrome, Edge, Safari 18+); nagłówek zostaje na miejscu */
@view-transition { navigation: auto; }
.site-header { view-transition-name: naglowek; }
::view-transition-old(root) { animation: vt-out .25s ease both; }
::view-transition-new(root) { animation: vt-in .45s var(--ease) both; }
@keyframes vt-out { to { opacity: 0; } }
@keyframes vt-in { from { opacity: 0; translate: 0 14px; } }
.socials a:hover { box-shadow: 0 0 18px rgba(244, 138, 238, .35); }
.cert:hover .cert__frame { box-shadow: 0 0 24px rgba(244, 138, 238, .25); }

/* ---------- „ogranicz ruch”: bez animacji, wszystko od razu widoczne ---------- */
@media (prefers-reduced-motion: reduce) {
	.hero__title .word, .hero__typed, .hero__lead, .hero__actions, .slider-ui, .hero__photos, .slide, .slide img,
	.slider-dot span::after, .hero__scroll i::after, .icon--phone, .nav__list li, .nav__contact, .lightbox, .lightbox__figure img,
	.voucher__media img, .voucher__vinyl svg, .voucher__ic, .voucher__spot, .eq i, .step__num, .typed::after,
	.reel__play-ico::after, .reel__play-ico::before, .media__ball i, .media__bars i { animation: none !important; }
	.media__bars i { scale: 1 calc((var(--lo) + var(--hi)) / 2); }
	/* deck i filmy bez ruchu: talerz się nie kręci (JS), ekrany stoją prosto, poświata nie śledzi filmu (JS) */
	.spotify:hover .jog__platter { transform: none; }
	.reel__screen, .reel:nth-child(2) .reel__screen { rotate: none; }
	.slider-toggle { display: none; }
	[data-glow]::before { display: none; }
	@view-transition { navigation: none; }
	.js [data-reveal], .js [data-reveal-group] > *, .js [data-reveal="steps"] .step, .js [data-reveal="arch"] > .arch {
		opacity: 1 !important; translate: none !important; rotate: none !important; scale: none !important; clip-path: none !important;
	}
	.js [data-reveal="steps"]::before { transform: none; }
	[data-parallax] img, .js [data-reveal="arch"] img { scale: none; translate: none; }
	.hero__spot, .btn--primary::after { display: none; }
	.hero__beams { translate: none; }
	.events { -webkit-mask-image: none; mask-image: none; }
	.events__track { width: auto; animation: none; justify-content: center; }
	.events__list { flex-wrap: wrap; justify-content: center; row-gap: 8px; }
	.events__list[aria-hidden] { display: none; }
}

@media print {
	.hero__spot { display: none !important; }
	.js [data-reveal], .js [data-reveal-group] > *, .js [data-reveal="arch"] > .arch { opacity: 1 !important; translate: none !important; clip-path: none !important; }
}