/* ============================================================================ discography.css — DYSKOGRAFIA: ekran ładowania + karuzela coverflow (js/disco-loader.js, js/clip-stage.js) Część rozbitego css/style.css — kolejność wczytywania (ta sama na każdej podstronie) trzyma kaskadę identyczną jak w jednym pliku. ========================================================================== */ /* ============================================================================ EKRAN ŁADOWANIA — DYSKOGRAFIA Sekcja ciąga okładki ze Spotify i tła wideo z R2; do czasu, aż dojadą, cała scena stoi wygaszona, a na środku żyje ten ekran (sterowanie: DiscoLoader w js/discography.js). Bez JS (brak .js na ) ekran się NIE pokazuje, a scena jest normalnie widoczna — strona zostaje użyteczna. ========================================================================== */ .disco-loader{display:none} html.js .disco-loader{ display:flex;align-items:center;justify-content:center; position:fixed;inset:0;z-index:9998;background:#000; opacity:1;transition:opacity .52s ease; } html.js .disco-loader.is-hidden{opacity:0;pointer-events:none} /* Jedyny element ekranu ładowania: cienki pasek postępu na środku. Bez napisów i bez animowanych ozdobników — ma być niewidoczny, kiedy sieć jest szybka. */ .disco-loader-bar{ width:min(184px,46vw);height:2px;border-radius:2px;overflow:hidden; background:rgba(255,255,255,0.13); } .disco-loader-bar i{ display:block;width:100%;height:100%;background:#fff; transform:scaleX(0);transform-origin:0 50%;transition:transform .35s ease-out; } /* Scena czeka wygaszona i wjeżdża dopiero z .disco-ready — użytkownik nie ogląda już doskakujących okładek, tylko gotowy kadr. */ html.js[data-page="discography"] .clip-stage{opacity:0} html.js[data-page="discography"].disco-ready .clip-stage{opacity:1;transition:opacity .75s ease} html.js[data-page="discography"].disco-ready .clip-stage-track{ animation:disco-rise .85s cubic-bezier(.22,1,.36,1) both; } /* OSOBNE keyframes dla tytułu i etykiety: oba stoją na left:50% + transform:translateX(-50%), więc animacja MUSI nieść to przesunięcie w każdej klatce — inaczej (transform:none na końcu) napisy zjeżdżają w prawo o połowę własnej szerokości i przestają być wyśrodkowane. */ html.js[data-page="discography"].disco-ready .stage-title, html.js[data-page="discography"].disco-ready .stage-kind{ animation:disco-rise-center .85s cubic-bezier(.22,1,.36,1) both; } html.js[data-page="discography"].disco-ready .stage-title{animation-delay:.12s} html.js[data-page="discography"].disco-ready .stage-kind{animation-delay:.18s} @keyframes disco-rise{from{opacity:0;transform:translateY(18px)}to{opacity:1;transform:none}} @keyframes disco-rise-center{ from{opacity:0;transform:translate(-50%,18px)} to{opacity:1;transform:translateX(-50%)} } @media (prefers-reduced-motion: reduce){ html.js .disco-loader{transition:none} html.js[data-page="discography"].disco-ready .clip-stage{transition:none} html.js[data-page="discography"].disco-ready .clip-stage-track, html.js[data-page="discography"].disco-ready .stage-title, html.js[data-page="discography"].disco-ready .stage-kind{animation:none} } /* TELEDYSKI — teledysk aktywnego utworu jako PEŁNE tło całego slajdu (nie mała karta), przyciemnione 50% czernią + ziarno. .clip-stage to bezpośrednie dziecko .slide (position:absolute;inset:0, bez .main-wrap) — dzięki temu wideo faktycznie wypełnia cały ekran zamiast siedzieć w wąskiej ramce na tle reszty strony. Karuzela okładek: każdy utwór to jeden .clip-item, wszystkie leżą na sobie (position:absolute) i JS przesuwa je poziomo przez custom property --d (offset = index - aktywny), --s (skala) i --o (przezroczystość) — patrz setupClipStage w whyme.js. Aktywna okładka linkuje do Spotify; pod nią nazwa utworu, która na hover zamienia się (crossfade) na "Słuchaj". Nawigacja to dwie niewidoczne strefy kliknięcia na lewą/prawą połowę ekranu (.clip-click-zone-*), wyłączone (disabled) na granicy listy zamiast zawijać karuzelę w kółko. */ /* --stage-title-bottom: wspólny punkt odniesienia dla tytułu (na tej wysokości) i etykiety rodzaju TUŻ pod nim (ta sama wartość minus offset) — patrz .stage-title / .stage-kind niżej. Trzymanie tego w jednej zmiennej gwarantuje, że oba napisy przesuwają się razem i zawsze zachowują stały odstęp. */ /* touch-action:none (dawniej pan-y) — pan-y pozwalał przeglądarce przejmować pionowe gesty nad sceną (pointercancel w środku), a pionowy swipe ma teraz przewijać SEKCJE (patrz swipe na viewport w main.js), więc wszystkie gesty nad karuzelą zostają w Pointer Events. */ .clip-stage{position:absolute;inset:0;overflow:hidden;cursor:grab;touch-action:none;--stage-title-bottom:clamp(112px,16vh,188px)} .clip-stage.is-dragging{cursor:grabbing;user-select:none} /* isolation:isolate — trzyma