/* ============================================================================
   cd.css — sekcja PŁYTA/CD (dawna WHY): pudełko, płyty TAPE, karta tracklisty, finał (js/cd.js)
   Część rozbitego css/style.css — kolejność wczytywania (ta sama na każdej
   podstronie) trzyma kaskadę identyczną jak w jednym pliku.
   ========================================================================== */

/* FINAŁ WHY — czarny ekran DOKŁADNIE na wysokość okna (100svh): to OSTATNIA treść
   w #hero-scroll, więc gdy trzy tracklisty wypełnią ekran, scroll jest na samym
   dole — twardy koniec sekcji, dalej w dół nie ma czego przewijać. Trzy karty
   TAPE'1/2/3 wyświetlone JEDNOCZEŚNIE: desktop obok siebie (flex-row), telefon
   od góry do dołu (flex-col). Wyłaniają się kaskadą przy scrollu (.hero-reveal +
   IntersectionObserver w main.js; opóźnienie per karta przez --i). */
/* FINAŁ leży WEWNĄTRZ .why-stage (strefa pinowana) — nakładka na całą scenę,
   wyśrodkowana na tym samym czarnym tle co pudełko. Startuje NIEWIDOCZNA
   (opacity:0) i podniesiona; GSAP na końcu osi czasu robi jej fade-in + wjazd
   z dołu (y:50→0), gdy pudełko zniknie w czerni — dopiero potem pin puszcza.
   Bez osobnej sekcji pod spodem = zero czarnego skoku i doskrolu w dół. */
.finale-tapes{
  position:absolute;inset:0;z-index:3;
  display:flex;flex-direction:row;flex-wrap:nowrap;
  align-items:center;justify-content:center;
  gap:clamp(14px,2vw,30px);
  padding:clamp(28px,6vh,64px) clamp(16px,4vw,48px);
  opacity:0;pointer-events:none;
}
/* Pojedyncza tapa = DOKŁADNIE TO SAMO OKNO co karta tracklisty przy pudełku:
   kwadratowa szklana ramka z ciemną wkładką (.inlay-paper) w środku. Dawny
   "dark liquid glass" z zaokrąglonymi rogami — USUNIĘTY na życzenie, żeby
   finał był wizualnie spójny ze sceną. Trzy kwadraty w rzędzie: stały,
   ograniczony bok (nie flex:1), żeby aspect-ratio nie biło się z rozciąganiem
   flexa i nie wypychało ich poza ekran. */
.finale-tape{
  flex:0 0 auto;
  width:min(320px,26vw,58svh);
  aspect-ratio:142 / 125;   /* ten sam stosunek boków co pudełko i karta */
  /* ZERO WŁASNEJ OPRAWY — jak przy .tracklist-card: dawna ramka (padding +
     border + gradient) dawała podwójną obwódkę wokół tafli. Skorupa jest
     czysto układowa, wygląd niesie .inlay-paper. */
  display:flex;
}
/* Kaskada wejścia — każda kolejna karta odsłania się odrobinę później. */
.finale-tape.hero-reveal{transition-delay:calc(var(--i, 0) * .12s)}
/* Numery w finale są od razu widoczne (bazowe .track ma opacity:0 pod stagger
   GSAP w pudełku — tu nadpisujemy, bo to statyczna, odsłaniana lista). */
.finale-tracklist .track{opacity:1;will-change:auto}


/* ===========================================================================
   SEKCJA WHY — pudełko CD otwierane scrollem, 3 płyty (TAPE'1/2/3)
   ===========================================================================
   Pierwsza rzecz na stronie: pinowany ekran (.why-pin, GSAP ScrollTrigger w
   js/why.js ze scrollerem #hero-scroll, pinType:"transform"). INTRO jedzie
   AUTOMATYCZNIE (bez scrolla): 0.5 s czerni po kurtynie → pudełko wylatuje
   z otchłani i staje na środku → napis "SKROLUJ DALEJ ABY OTWORZYĆ" (dawna
   strzałka na dole — USUNIĘTA). Dalej scrub: otwarcie 3D → zjazd w prawo +
   błyszcząca karta z tracklistą z lewej → trzy wymiany płyty (TAPE'1→2→3;
   płyta wiruje wokół osi przez cały przejazd, perłowe powierzchnie per tapa
   niżej) → zamknięcie i odjazd w czerń; pin puszcza na czarnej scenie, więc
   scroll wchodzi w marquee bez pustki. Wszystko transform/opacity (GPU). */
.why-pin{
  position:relative;
  height:100svh;
  overflow:hidden;
  background:radial-gradient(120% 90% at 50% 42%, rgba(30,30,34,0.55) 0%, rgba(0,0,0,0) 55%);
}
/* Winieta — czerń domyka się przy krawędziach. */
.why-pin::after{
  content:'';position:absolute;inset:0;pointer-events:none;
  background:radial-gradient(140% 110% at 50% 50%, rgba(0,0,0,0) 55%, rgba(0,0,0,0.75) 100%);
}
/* Wielki outline'owy WHY w tle — to jest to "why na start"; sunie
   minimalnie ze scrollem (tween w timeline). */
.why-watermark{
  position:absolute;inset:0;
  display:flex;align-items:center;justify-content:center;
  font-size:clamp(180px,34vw,520px);
  font-weight:800;letter-spacing:0.04em;
  color:transparent;
  -webkit-text-stroke:1px rgba(255,255,255,0.07);
  user-select:none;pointer-events:none;
}
/* ANTY-FOUC watermarku: gdy JS działa, "WHY" startuje niewidoczne i GSAP robi
   mu fade-in na początku osi czasu (why.js). Bez GSAP (.why-static) zostaje
   widoczne, żeby statyczny ekran nie był pusty. */
.js .why-watermark{opacity:0}
.why-static .why-watermark{opacity:1}
/* Poświata pod pudełkiem — rozjaśnia ją timeline przy dojeździe. */
.why-glow{
  position:absolute;left:50%;top:50%;
  width:min(72vw,900px);aspect-ratio:1;
  transform:translate(-50%,-50%);
  background:radial-gradient(circle, rgba(160,180,220,0.16) 0%, rgba(120,130,160,0.05) 38%, rgba(0,0,0,0) 68%);
  opacity:0;pointer-events:none;
}
.why-stage{position:absolute;inset:0;display:flex;align-items:center;justify-content:center}

/* --- PUDEŁKO CD (czysty CSS, szkło) ---------------------------------------
   Warstwy: .cd-scene (jazda po ekranie) > .cd-float (wieczny mikrodryf,
   NIEZALEŻNY od scrolla — osobny wrapper, żeby nie bił się ze scrubem)
   > .cd-case-wrap (przybliżanie) > .cd-case (obrót 3D) > .cd-back (tacka
   z TRZEMA płytami na zmianę) + .cd-lid (otwierane wieczko, zawias przy
   grzbiecie). Docelowe przezroczyste PNG można podpiąć jak w why.html
   (WARIANT A) — mechanika zostaje. */
.cd-scene{position:relative;perspective:1700px;perspective-origin:50% 42%}
.cd-case-wrap{will-change:transform,opacity}
/* ANTY-FOUC: gdy JS działa (klasa .js na <html> ustawiana inline w <head> PRZED
   pierwszym malowaniem), pudełko startuje NIEWIDOCZNE — intro/scrub GSAP samo je
   pokaże (gsap.set/tween). Bez tego, przy szybkim odświeżeniu, pudełko malowało
   się na moment w pełni, zanim deferred GSAP zdążył je schować (miganie).
   Gdyby GSAP nie doszedł z CDN, why.js dopina .why-static i pudełko wraca. */
.js .cd-case-wrap{opacity:0}
.why-static .cd-case-wrap{opacity:1}
/* ANTY-FOUC płyt: płyty 2 i 3 leżą na płycie 1 w tacce i normalnie chowa je
   dopiero gsap.set po DOMContentLoaded. Przy szybkim odświeżeniu przez ułamek
   sekundy przeświecały przez szkło jako zła płyta — dlatego chowamy je już od
   pierwszego malowania (klasa .js z <head>). Bez GSAP (.why-static) wracają
   do stanu bazowego, żeby statyczny ekran nie był pusty. */
.js .cd-disc:not(.cd-disc-1){opacity:0}
/* Bez GSAP (.why-static) statyczny ekran pokazuje WSZYSTKIE trzy płyty —
   nadpisujemy tu .js .cd-disc-2/-3{opacity:0}, żeby ekran nie był pusty
   (TAPE'1 jest już widoczna z bazowego .cd-disc). */
.why-static .cd-disc-1{opacity:1}
.why-static .cd-disc{opacity:1}
.cd-case{
  position:relative;
  /* POWIĘKSZONE na życzenie — pudełko ma dominować lewą stronę sceny.
     Limity (svh/vw/vmin + twardy max) trzymają je w ryzach na mniejszych
     ekranach, żeby nie wpadło na kwadratową kartę tracklisty po prawej;
     węższy breakpoint dostaje osobny rozmiar niżej (@media). */
  width:min(54svh,78vw,50vmin,520px);
  max-width:520px;
  aspect-ratio:142/125;
  transform-style:preserve-3d;
  will-change:transform;
}
.cd-back,.cd-lid{position:absolute;inset:0;border-radius:6px;transform-style:preserve-3d}
.cd-back{
  transform:translateZ(-9px);
  background:
    linear-gradient(155deg, rgba(255,255,255,0.10) 0%, rgba(255,255,255,0.03) 34%, rgba(255,255,255,0.07) 100%),
    rgba(10,10,12,0.9);
  border:1px solid rgba(255,255,255,0.16);
  box-shadow:inset 0 0 0 1px rgba(255,255,255,0.05), inset 0 0 34px rgba(255,255,255,0.05), 0 40px 90px rgba(0,0,0,0.8);
}
.cd-tray{
  position:absolute;inset:5.5% 4.5%;
  border-radius:4px;
  /* PRESERVE-3D — płyty (.cd-disc) leżą w tacce, a tacka w obróconym w 3D
     pudełku (.cd-back → .cd-case). Bez tego translateZ na płycie byłby
     SPŁASZCZANY do płaszczyzny tacki (z bez efektu), a płyta w trakcie wymiany
     — poruszając się tylko w Y — przenikała przez dno pudełka (.cd-back) i była
     w połowie ucięta oraz ciemna. Preserve-3d sprawia, że z:60 w swapTape
     (why.js) realnie unosi płytę NAD obrys tacki, przed panel tylny. */
  transform-style:preserve-3d;
  background:linear-gradient(135deg, rgba(255,255,255,0.05) 0%, rgba(255,255,255,0) 45%), #0b0b0d;
  border:1px solid rgba(255,255,255,0.09);
  box-shadow:inset 0 0 26px rgba(0,0,0,0.85);
  /* BEZ overflow:hidden — obcinał trójwymiarowe pudełko (płyta ucięta w
     połowie przy obrocie 3D). */
}
.cd-tray::before,.cd-tray::after{
  content:'';position:absolute;width:16%;height:7%;
  border:1px solid rgba(255,255,255,0.14);border-radius:999px;
}
.cd-tray::before{top:3.5%;left:8%}
.cd-tray::after{bottom:3.5%;right:8%}
/* PŁYTY — trzy sztuki jedna nad drugą (wymienia je timeline: stara wylatuje
   górą, nowa wjeżdża dołem z obrotem). BEZ żadnych nadruków (usunięte na
   życzenie). Sam .cd-disc to ciemny "spód" + obrys; POWIERZCHNIA mieszka na
   dziecku .cd-disc-face, które timeline OBRACA wokół osi przez cały scroll —
   osobna warstwa, żeby wirowanie nie biło się z transformami wymiany płyt
   na rodzicu (oba czyste transformy = kompozytor GPU). */
.cd-disc{
  position:absolute;left:50%;top:50%;
  width:78%;aspect-ratio:1;
  transform:translate(-50%,-50%);
  border-radius:50%;
  /* PŁYTA TAPE'1 WIDOCZNA OD STARTU — przezroczyste (szklane) pudełko nie może
     być na wejściu puste, płyta ma w nim leżeć od pierwszego malowania. Dawne
     opacity:0;visibility:hidden dawało "pop-in" płyty znikąd dopiero po
     otwarciu wieczka — USUNIĘTE. Płyty 2 i 3 chowa niżej .js .cd-disc-2/-3
     {opacity:0} (i gsap.set w why.js), a timeline podmienia je w locie. */
  background:radial-gradient(circle, #17181c 0%, #101114 55%, #0c0d10 100%);
  border:1px solid rgba(255,255,255,0.13);
  box-shadow:inset 0 0 22px rgba(255,255,255,0.06), 0 4px 22px rgba(0,0,0,0.6);
  will-change:transform,opacity;
}
/* PERŁOWA POWIERZCHNIA — subtelna "perła" zakodowana w czystym CSS: miękki
   rozbłysk przy 1/3 tarczy + pierścień odbicia + wachlarz conic-gradient
   (nierówne sektory jak refleksy na prawdziwym CD). Kolorystyka per tapa:
   TAPE'1 diament (srebrzysty/chłodny), TAPE'2 złoto (ciepłe), TAPE'3
   emerald (szmaragdowy). Alfy celowo niskie — połysk ma być subtelny. */
.cd-disc-face{
  position:absolute;inset:0;border-radius:50%;
  will-change:transform;
  pointer-events:none;
}
/* POWIERZCHNIA PŁYTY — barwa wchodzi zmienną --disc-ink, którą przy budowie
   ustawia js/cd-tapes.js z koloru zapisanego w bazie. Dawniej były tu trzy
   osobne bloki (.cd-disc-1/-2/-3) z wpisanymi na sztywno kolorami, przez co
   czwarta płyta nie miałaby żadnego. Domyślna wartość to dawny odcień TAPE'1,
   więc bez JS i bez danych płyta wygląda dokładnie jak wcześniej. */
.cd-disc{--disc-ink:219,228,242}
.cd-disc-face{
  background:
    radial-gradient(circle at 36% 30%, rgba(var(--disc-ink),0.10), rgba(var(--disc-ink),0) 46%),
    radial-gradient(circle at 50% 50%, rgba(0,0,0,0) 0 14%, rgba(var(--disc-ink),0.06) 15% 18%, rgba(0,0,0,0) 19%),
    conic-gradient(from 210deg,
      rgba(var(--disc-ink),0.20), rgba(var(--disc-ink),0.06) 12%,
      rgba(var(--disc-ink),0.25) 26%, rgba(var(--disc-ink),0.05) 40%,
      rgba(var(--disc-ink),0.18) 55%, rgba(var(--disc-ink),0.05) 70%,
      rgba(var(--disc-ink),0.27) 84%, rgba(var(--disc-ink),0.20));
}
.cd-hub{
  position:absolute;left:50%;top:50%;
  width:26%;aspect-ratio:1;
  transform:translate(-50%,-50%);
  border-radius:50%;
  border:1px solid rgba(255,255,255,0.35);
  background:
    repeating-conic-gradient(rgba(255,255,255,0.35) 0 7deg, rgba(255,255,255,0.04) 7deg 30deg),
    radial-gradient(circle, rgba(255,255,255,0.10) 0 40%, rgba(0,0,0,0) 41%);
  -webkit-mask:radial-gradient(circle, transparent 0 26%, #000 27%);
          mask:radial-gradient(circle, transparent 0 26%, #000 27%);
}
/* WIECZKO — szklany, PRZEZROCZYSTY front (zawias przy LEWEJ krawędzi,
   transform-origin). Wróciło szkło: gradienty z białą alfą + blik .cd-glare;
   ujemny rotateY otwiera je w stronę widza. (Tracklista NIE jest już na
   wieczku — wróciła jako osobny paragon, patrz .tracklist-card niżej.) */
.cd-lid{
  transform-origin:left center;
  transform:translateZ(9px);
  background:
    linear-gradient(120deg, rgba(255,255,255,0.16) 0%, rgba(255,255,255,0.04) 30%, rgba(255,255,255,0.02) 55%, rgba(255,255,255,0.10) 100%),
    rgba(16,17,20,0.42);
  border:1px solid rgba(255,255,255,0.22);
  box-shadow:inset 0 0 0 1px rgba(255,255,255,0.06), inset 0 0 44px rgba(255,255,255,0.05);
  will-change:transform;
  overflow:hidden;
}
.cd-lid::before{
  content:'';position:absolute;top:0;bottom:0;left:7%;width:1px;
  background:rgba(255,255,255,0.18);
  box-shadow:-8px 0 0 rgba(255,255,255,0.10);
}
/* Blik sunący po szkle — pozycją steruje timeline (why.js). */
.cd-glare{
  position:absolute;inset:-20% -40%;
  background:linear-gradient(105deg, rgba(255,255,255,0) 40%, rgba(255,255,255,0.16) 50%, rgba(255,255,255,0) 60%);
  will-change:transform;pointer-events:none;
}
/* Wewnętrzna strona wieczka — przyciemnia je, gdy patrzymy „od środka"
   (opacity steruje timeline po otwarciu). */
.cd-lid-inner{position:absolute;inset:0;border-radius:6px;background:rgba(6,6,8,0.55);opacity:0;pointer-events:none}
.cd-shadow{
  position:absolute;left:50%;bottom:-14%;
  width:84%;height:10%;
  transform:translateX(-50%);
  background:radial-gradient(50% 100% at 50% 50%, rgba(0,0,0,0.85) 0%, rgba(0,0,0,0) 70%);
  filter:blur(6px);
}

/* Napis "SKROLUJ DALEJ, ABY OTWORZYĆ" — puls na DZIECKU (span), żeby nie bił
   się z opacity sterowanym przez GSAP na rodzicu. */
/* CENTROWANIE PRZEZ text-align, NIE przez transform — dawniej napis stał na
   left:50% + translateX(-50%), a GSAP animujący oś Y nadpisywał transform i
   trzeba było ratować się xPercent:-50 w JS. To się dublowało z CSS-owym -50%
   (wychodziło translateX(-100%)) i napis uciekał w LEWO. Teraz .why-hint to
   pasek na całą szerokość sceny (left/right:0) z text-align:center, więc GSAP
   może ruszać tylko Y/opacity i nic nie rozjeżdża centrowania w poziomie. */
.why-hint{
  position:absolute;left:0;right:0;top:50%;
  margin-top:min(30svh,300px);
  text-align:center;
  opacity:0;will-change:transform,opacity;white-space:nowrap;
}
.why-hint span{
  display:inline-block;
  font-size:12px;letter-spacing:0.42em;text-indent:0.42em;text-transform:uppercase;
  color:rgba(255,255,255,0.66);
  /* PULS TYLKO NA OPACITY — dawny transform:scale na tekście z dużym
     letter-spacingiem powodował subpikselowe drganie/„rozjeżdżanie się" liter
     (tekst wibrował pod pudełkiem). Sama zmiana krycia daje ten sam oddech bez
     przeliczania geometrii, więc napis stoi jak wmurowany. */
  animation:whyHintPulse 2.1s ease-in-out infinite;
}
@keyframes whyHintPulse{0%,100%{opacity:.45}50%{opacity:1}}

/* --- TYŁ PŁYTY (.tracklist-card) = mroczny, KWADRATOWY back inlay ---------
   Lewa strona sceny to otwarte szklane pudełko z płytą, PRAWA to ta karta:
   proporcje 142/125 — DOKŁADNIE takie jak pudełko obok (.cd-case), ciemna
   wkładka (.inlay-paper) w cienkiej plastikowej ramce. Bez bliku, kodu
   kreskowego i logotypów — czysta tracklista wyśrodkowana w pionie.
   Panele TAPE (.tape-panels) podmienia swapTape — mechanika bez zmian. */
.tracklist-card{
  position:absolute;left:50%;top:50%;
  transform:translate(-50%,-50%);
  /* PROPORCJE 142/125 — te same co .cd-case obok. Dawny kwadrat (1/1) był
     przy pudełku wyraźnie ZA WYSOKI; ten sam stosunek boków sprawia, że oba
     obiekty czytają się jak komplet. Wysokość = szerokość × 125/142, więc
     przy tej samej szerokości okno jest o ~12% niższe niż wcześniej. */
  width:min(42svh,42vw,400px);
  aspect-ratio:142 / 125;
  /* ZERO WŁASNEJ OPRAWY — dawna „plastikowa ramka" (padding 6px + border +
     gradient + cień) robiła PODWÓJNĄ obwódkę wokół szklanej tafli i wyglądała
     jak doklejona. Skorupa jest teraz czysto układowa (pozycja + rozmiar),
     a CAŁY wygląd niesie .inlay-paper. */
  display:flex;
  opacity:0;will-change:transform,opacity;
}
/* WKŁADKA — szklana tafla wypełniająca całą skorupę (bez żadnej ramki wokół).
   Zawartość WYŚRODKOWANA W PIONIE (justify-content:center); poziomo wiersze
   rozciągają się na pełną szerokość, żeby numer był po lewej, a czas równo po
   prawej. Jednolity padding 24px zamiast dawnych, rozjeżdżających się clampów. */
/* DARK LIQUID GLASS — dawne płaskie #08080a + mocny szum dawały efekt
   „brudnej szarości": biały szum na opacity 0.15 BEZ trybu mieszania kładł się
   na czerni jak mgła. Teraz wkładka to głęboka, czarna tafla szkła:
   półprzezroczysta czerń + skośne pasmo światła + miękki rozbłysk w górnym
   rogu + rozmycie tła (backdrop-filter) i wewnętrzne światło na krawędzi.
   Szum ZOSTAJE, ale drobny i w trybie overlay — daje fakturę, nie szarość. */
.inlay-paper{
  position:relative;flex:1 1 auto;min-width:0;
  /* Zaokrąglenie i cień PRZEJĘTE po skasowanej ramce — tafla jest teraz
     jedynym widocznym elementem, więc to ona niesie kształt i głębię. */
  border-radius:4px;
  /* KOLORYSTYKA JAK PUDEŁKO — ale uwaga na pułapkę: pudełko jest jasne TYLKO
     NA KRAWĘDZI (rant .cd-back/.cd-lid), a jego POLE to ciemna tacka .cd-tray
     (#0b0b0d + głęboki inset). Wcześniej rozłożyłem tu recepturę samego rantu
     na całą powierzchnię i tafla wyszła dużo za jasna. Teraz jest tak jak w
     pudełku: ciemne pole + jasny rant + delikatny połysk szkła. */
  background:
    linear-gradient(120deg, rgba(255,255,255,0.055) 0%, rgba(255,255,255,0.012) 32%, rgba(255,255,255,0.008) 58%, rgba(255,255,255,0.035) 100%),
    rgba(11,11,13,0.94);
  backdrop-filter:blur(16px) saturate(130%);
  -webkit-backdrop-filter:blur(16px) saturate(130%);
  /* Rant w kolorze ramki pudełka + głęboki inset jak w tacce (.cd-tray). */
  box-shadow:
    0 40px 90px rgba(0,0,0,0.8),
    inset 0 0 0 1px rgba(255,255,255,0.13),
    inset 0 0 34px rgba(0,0,0,0.8);
  padding:20px;
  display:flex;flex-direction:column;justify-content:center;
  overflow:hidden;
  color:rgba(255,255,255,0.85);
  /* TEN SAM KRÓJ CO MENU w prawym górnym rogu (.section-nav-link) — dawny
     monospace wypadał obco na tle reszty strony. Liczby (numery i czasy)
     trzyma równo font-variant-numeric:tabular-nums w regułach wierszy niżej,
     więc kolumny nie rozjeżdżają się mimo proporcjonalnego kroju. */
  font-family:var(--font-family);
  text-transform:uppercase;
}
/* Faktura szkła — drobny szum w trybie overlay (nie rozjaśnia czerni). */
.inlay-paper::before{
  content:'';position:absolute;inset:0;pointer-events:none;z-index:0;
  opacity:0.10;mix-blend-mode:overlay;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='200'%3E%3Cfilter id='iv'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23iv)'/%3E%3C/svg%3E");
}
.inlay-paper > *{position:relative;z-index:1}
/* KOLOR NADRUKU PER TAPA — czcionka wkładki bierze barwę płyty leżącej obok:
   TAPE'1 diament (chłodne srebro), TAPE'2 złoto, TAPE'3 emerald. Wartość
   trzyma zmienna --tape-ink na .inlay-paper; przy karcie obok pudełka
   PRZENIKA ją GSAP w swapTape (tween CSS var = płynne przejście koloru
   razem z wymianą płyty), a trzy okna finału dostają ją statycznie z klas
   .tape-ink-1/-2/-3 w HTML. Domyślnie diament, żeby stan bazowy (i brak JS)
   wyglądał jak TAPE'1. */
.inlay-paper{--tape-ink:219,228,242}
/* Dawne .tape-ink-1/-2/-3 zniknęły: kolor wkładki ustawia teraz js/cd-tapes.js
   inline ze zmiennej --tape-ink zapisanej w bazie, więc każda nowa płyta ma
   swój odcień bez dopisywania klasy do arkusza. */
/* NAGŁÓWEK — "WHY? | TAPE'X" wyśrodkowany, nadruk w kolorze płyty. */
.tracklist-head{
  display:flex;align-items:baseline;justify-content:center;gap:10px;
  padding-bottom:0;margin-bottom:0;border-bottom:0;
}
.tracklist-head .t-title{font-size:24px;font-weight:700;letter-spacing:0.26em;text-indent:0.26em;color:rgba(var(--tape-ink),0.95)}
.t-sep{
  font-size:21px;font-weight:400;
  color:rgba(var(--tape-ink),0.45);
  transform:translateY(-1px);
}
/* TAPE'X w nagłówku obok WHY? — trzy cyfry leżą na sobie w okienku z
   overflow:hidden; timeline przełącza je razem z płytą (stara ucieka górą,
   nowa wjeżdża dołem). Cyfry 2 i 3 startują niewidoczne (stan bazowy ustawia
   też why.js, ale CSS trzyma go również bez GSAP). */
.t-tape{
  display:flex;align-items:baseline;gap:2px;
  font-size:24px;font-weight:700;letter-spacing:0.26em;
  color:rgba(var(--tape-ink),0.95);text-transform:uppercase;white-space:nowrap;
}
/* OKNA FINAŁU są WĘŻSZE niż karta przy pudełku (trzy w rzędzie), więc dostają
   własny, nieco mniejszy nagłówek — inaczej "WHY? | TAPE'X" z tym
   letter-spacingiem wychodziłoby poza krawędź tafli. */
.finale-tape .tracklist-head .t-title,
.finale-tape .t-tape{font-size:20px}
.finale-tape .t-sep{font-size:18px}
.tape-digit-box{
  position:relative;display:inline-block;
  /* 0.62em (dawne 0.85em) — szerokość okienka pod cyfrę była wymierzona pod
     MONOSPACE, gdzie glif zajmuje niemal całą kratkę. W proporcjonalnym
     Inter cyfra jest wyraźnie węższa, więc przy 0.85em robiła się dziura
     i "TAPE'1" czytało się jak "TAPE' 1". */
  width:0.62em;height:1em;overflow:hidden;
}
.tape-digit{
  /* top/bottom przesunięte w dół o różnicę między dolną krawędzią boxa
     (baseline inline-blocka) a baseline'em glifu przy line-height:1 —
     bez tego cyfra "lewitowała" nad linią tekstu TAPE'. */
  position:absolute;inset:0;top:0.14em;bottom:-0.14em;
  text-align:center;line-height:1;
  will-change:transform,opacity;
}
.tape-digit:not(.tape-digit-1){opacity:0}
/* CIENKA, PÓŁPRZEZROCZYSTA LINIA — techniczny separator (nie kropki). */
.inlay-line{border-bottom:1px solid rgba(var(--tape-ink),0.22);margin:9px 0 6px}
/* Panele TAPE leżą na sobie (inset:0), swapTape je podmienia; stała wysokość
   mieści 7 wierszy w każdej tapie. */
/* 164px = 7 wierszy × ~22.8px. MUSI nadążać za .inlay-paper .track (padding +
   line-height) — panele leżą na sobie jako absolute, więc kontener potrzebuje
   jawnej wysokości i przy większych wierszach 7. pozycja zostałaby ucięta. */
/* 164px = miejsce na 7 wierszy. Wysokość ZOSTAJE stała, bo kwadratowa wkładka
   ma stały rozmiar — dłuższą tracklistę mieścimy SKALOWANIEM listy (--row-scale
   niżej), a nie rozpychaniem karty, która wtedy przestałaby być kwadratem. */
.tape-panels{position:relative;height:164px}

/* DOWOLNA DŁUGOŚĆ TRACKLISTY.
   Wkładka jest stałej wielkości, a utworów może być teraz ile kto chce, więc
   przy dłuższej liście zmniejszamy ją proporcjonalnie: --row-scale ustawia
   js/cd-tapes.js jako 7/liczba_wierszy (nigdy powyżej 1, żeby krótkie listy
   nie były sztucznie napompowane). Bez tego dziesiąty utwór wychodził poza
   papier wkładki. */
.inlay-paper .tracklist{
  transform-origin:top center;
  transform:scale(var(--row-scale, 1));
}
.tape-panel{position:absolute;inset:0;padding-top:8px}
.tape-panel:not(.tape-panel-1){opacity:0}
.tracklist{list-style:none}
.track{
  display:flex;align-items:baseline;gap:16px;
  padding:6px 4px;
  border-bottom:1px solid rgba(255,255,255,0.05);
  opacity:0;                     /* wchodzą staggerem z GSAP */
  will-change:transform,opacity;
}
.track:last-child{border-bottom:0}
.track .no{
  flex:none;width:24px;
  font-size:11px;letter-spacing:0.08em;
  color:rgba(255,255,255,0.35);
  font-variant-numeric:tabular-nums;
}
.track .name{
  font-size:13px;font-weight:600;letter-spacing:0.12em;text-transform:uppercase;
  color:rgba(255,255,255,0.88);
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
}
.track.hidden-track .name{color:rgba(255,255,255,0.22);letter-spacing:0.3em;font-weight:400}

/* --- WIERSZE WKŁADKI — nadpisania SCOPE'OWANE do .inlay-paper --------------
   Scope na .inlay-paper (a nie .tracklist-card) jest CELOWY: tę samą wkładkę
   ma karta przy pudełku ORAZ trzy okna finału, więc obie sceny dostają
   identyczną typografię z jednego miejsca. Techniczny układ 01 NAZWA … 2:27,
   popielaty nadruk, wiersze rozdzielone cienką, półprzezroczystą linią. */
.inlay-paper .track{
  gap:12px;padding:3px 2px;line-height:1.4;
  border-bottom:1px solid rgba(255,255,255,0.07);
}
.inlay-paper .track:last-child{border-bottom:0}
.inlay-paper .track .no{
  flex:none;width:24px;font-size:11.5px;font-weight:600;letter-spacing:0.06em;color:rgba(var(--tape-ink),0.55);
  font-variant-numeric:tabular-nums;
}
.inlay-paper .track .name{
  flex:1;font-size:12px;font-weight:600;letter-spacing:0.1em;color:rgba(var(--tape-ink),0.9);
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
}
.inlay-paper .track .dur{
  flex:none;font-size:11.5px;font-weight:600;letter-spacing:0.06em;color:rgba(var(--tape-ink),0.55);
  font-variant-numeric:tabular-nums;
}
.inlay-paper .track.hidden-track .no,
.inlay-paper .track.hidden-track .dur{color:rgba(var(--tape-ink),0.26)}
.inlay-paper .track.hidden-track .name{color:rgba(255,255,255,0.22);letter-spacing:0.28em;font-weight:400}

/* (STOPKA WKŁADKI — kod kreskowy i napis MADE IN POLAND USUNIĘTE w całości
   na życzenie; wkładka pokazuje wyłącznie nagłówek i tracklistę.) */

/* (FINAŁ Z TRZEMA TABELKAMI — USUNIĘTY w całości na życzenie: po zamknięciu
   pudełka pin puszcza od razu i scroll przechodzi wprost do marquee.) */

/* WHY responsywnie — na węższych ekranach kolumna: pudełko ucieka w górę,
   karta wjeżdża z dołu (wartości jazdy siedzą w js/why.js, tu tylko
   rozmiary). Breakpoint PODNIESIONY 820 → 1024: przy powolnym zwężaniu okna
   na desktopie pudełko i karta zaczynały na siebie nachodzić i bugować się
   ZANIM wskoczył układ mobilny — teraz layout „zeskakuje" w bezpieczną
   kolumnę (jedno nad drugim) dużo wcześniej, nim braknie miejsca. MUSI
   zgadzać się z progiem mm.add (min-width:1025 / max-width:1024) w js/why.js. */
@media (max-width:1024px){
  /* Pudełko szklane w układzie kolumnowym (pudełko w górę, karta z dołu —
     wartości jazdy w why.js). */
  .cd-case{width:min(34svh,82vw)}
  .why-hint{margin-top:min(24svh,240px)}
  .why-hint span{font-size:10.5px;letter-spacing:0.34em}
  /* NA TELEFONIE BEZ SZTYWNYCH PROPORCJI — karta jest tu dużo mniejsza, więc
     narzucony stosunek 142/125 obcinałby nagłówek i ostatnie pozycje (wkładka
     ma overflow:hidden). Wysokość idzie za treścią; ratio nie ma tu znaczenia,
     bo karta i tak leży POD pudełkiem, a nie obok niego. */
  .tracklist-card{width:min(34svh,78vw,300px);aspect-ratio:auto}
  .inlay-paper{padding:16px}
  .tracklist-head .t-title{font-size:19px}
  .t-sep{font-size:17px}
  .t-tape{font-size:19px}
  .inlay-line{margin:9px 0 6px}
  .track{padding:4px 2px}
  .track .name{font-size:11.5px}
  .inlay-paper .track{padding:3px 2px;gap:10px}
  .inlay-paper .track .no{width:21px;font-size:11px}
  .inlay-paper .track .name{font-size:11px}
  .inlay-paper .track .dur{font-size:11px}
  /* 152px = 7 × ~21.4px (11px × 1.4 + padding 3×2) — musi zgadzać się
     z .inlay-paper .track wyżej, inaczej 7. pozycja zostaje ucięta. */
  .tape-panels{height:152px}
  .why-watermark{font-size:clamp(120px,44vw,300px)}
  /* FINAŁ na telefonie — trzy okna jedno pod drugim (flex-col) w nakładce na
     pinowaną scenę; aspect-ratio ZDJĘTE (trzy kwadraty nie zmieściłyby się
     w pionie), więc okna są kompaktowe, a nakładka i tak przewija się
     wewnętrznie, gdyby zabrakło miejsca. */
  /* FINAŁ NA TELEFONIE — trzy okna JEDNO POD DRUGIM i, co kluczowe, MUSZĄ SIĘ
     ZMIEŚCIĆ W EKRANIE. Dawniej stały na justify-content:flex-start z
     overflow-y:auto, ale kontener ma pointer-events:none (to nakładka na
     pinowanej scenie), więc tego scrolla NIE DAŁO SIĘ przewinąć — drugie
     i trzecie okno lądowały pod krawędzią i były po prostu niewidoczne.
     Teraz: wyśrodkowane w pionie, overflow:hidden, a każde okno bierze równą
     1/3 dostępnej wysokości (flex:1 + min-height:0) — nic nie ucieka. */
  .finale-tapes{flex-direction:column;align-items:center;
    justify-content:center;gap:8px;padding:14px 14px;overflow:hidden}
  .finale-tape{
    flex:1 1 0;min-height:0;
    width:min(360px,92vw);max-width:none;
    aspect-ratio:auto;
  }
  /* Druk w oknach finału ZAGĘSZCZONY — nagłówek + 7 pozycji muszą wejść
     w ~1/3 wysokości ekranu. Scope na .finale-tape, więc pojedyncza karta
     przy pudełku zachowuje swój większy rozmiar. */
  .finale-tape .inlay-paper{padding:10px 12px}
  .finale-tape .tracklist-head{padding-bottom:5px}
  .finale-tape .tracklist-head .t-title,
  .finale-tape .t-tape{font-size:15px}
  .finale-tape .t-sep{font-size:13.5px}
  .finale-tape .inlay-line{margin:6px 0 4px}
  .finale-tape .track{padding:2px 2px;gap:8px}
  .finale-tape .track .no{width:19px;font-size:9.5px}
  .finale-tape .track .name{font-size:9.5px}
  .finale-tape .track .dur{font-size:9.5px}
}