/* ==========================================================================
   Ukochana Melodia — landing-player.css
   Sekcja "Posłuchaj przykładów" (#przyklady) — PRZEBUDOWA 2026-08-04.

   Kompozycja: full-bleed jasna scena, CZTERY pełne kafelki-playery w
   narożnikach, gramofon fotorealistyczny w środku (spina oba wiersze).
   Ciemna wyspa `.tp-island` z poprzedniej wersji USUNIĘTA CAŁKOWICIE —
   sekcja żyje w jasnej palecie marki (tokeny z :root w main.css: róż
   --accent, fiolet --accent-2, biel --surface, DM Serif Display /
   DM Sans). ZERO lokalnych tokenów ciemnego motywu, zero wartości
   kolorów spoza :root poza jawnie opisanymi wyjątkami (baza waveformu
   #e5e5e5 = decyzja właściciela, kanał alfa akcentów w mgiełkach tła).

   Ładowany PO main.css, wyłącznie na landingu. Logika w
   app/static/js/tp-player.js.
   ========================================================================== */

/* --------------------------------------------------------------------- *
 * 1. SCENA — tło sekcji
 * Gradient bazowy biel → pudrowy róż (--accent-soft) → delikatny fiolet
 * (--accent-2-soft) + dwie bardzo miękkie plamy radialne w akcentach
 * (róż z góry-lewej, fiolet z dołu-prawej). Alfa celowo bardzo niska —
 * dekoracja ma być odczuwalna, nie widoczna.
 * --------------------------------------------------------------------- */
.tp-examples {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  background:
    radial-gradient(62% 48% at 6% 4%, rgba(235, 7, 116, .075) 0%, rgba(235, 7, 116, 0) 62%),
    radial-gradient(56% 46% at 96% 96%, rgba(122, 0, 198, .085) 0%, rgba(122, 0, 198, 0) 62%),
    /* ostatni przystanek = --bg, czyli tło sekcji NASTĘPNEJ (FAQ): dolna
       krawędź rozpływa się zamiast ciąć twardą linią; górną krawędź
       otwiera świadoma linia-włos niżej */
    linear-gradient(178deg, var(--surface) 0%, var(--accent-soft) 42%, var(--accent-2-soft) 84%, var(--bg) 100%);
}

/* Włosowa linia w gradiencie marki na górnej krawędzi — spina sekcję z
   resztą strony bez rysowania pełnej ramki. */
.tp-examples::before {
  content: "";
  position: absolute;
  inset-inline: 0;
  top: 0;
  height: 1px;
  background: var(--grad-accent);
  opacity: .28;
}

.tp-examples__inner {
  position: relative;
  z-index: 1;
  width: 100%;
  max-width: 1680px;
  margin-inline: auto;
  padding-inline: clamp(20px, 4vw, 64px);
}

/* --------------------------------------------------------------------- *
 * 2. UKŁAD SCENY
 * Mobile-first: pierwszy odsłuch przed gramofonem, kafelki w jednej kolumnie.
 * ≥768px: pierwsza para odsłuchów przed gramofonem (na całą szerokość).
 * ≥1200px: 3 kolumny × 2 wiersze — kafelki w narożnikach, gramofon w
 * środkowej kolumnie spinający oba wiersze (align-self: center).
 * `grid-template-rows: 1fr 1fr` wyrównuje WSZYSTKIE cztery kafelki do
 * jednej wysokości (geometria narożników musi się spinać co do piksela).
 * --------------------------------------------------------------------- */
.tp-stage {
  --tt-col: clamp(320px, 28.5vw, 540px);
  display: grid;
  gap: clamp(20px, 2.4vw, 34px);
  grid-template-areas:
    "a"
    "tt"
    "b"
    "c"
    "d";
}

.tp-card--1 { grid-area: a; }
.tp-card--2 { grid-area: b; }
.tp-card--3 { grid-area: c; }
.tp-card--4 { grid-area: d; }
.tp-tt-stage { grid-area: tt; }

@media (min-width: 768px) {
  .tp-stage {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    grid-template-areas:
      "a  b"
      "tt tt"
      "c  d";
    column-gap: clamp(20px, 2.6vw, 34px);
    row-gap: clamp(20px, 2.6vw, 34px);
  }
}

@media (min-width: 1200px) {
  .tp-stage {
    grid-template-columns: minmax(0, 1fr) var(--tt-col) minmax(0, 1fr);
    grid-template-rows: 1fr 1fr;
    grid-template-areas:
      "a tt b"
      "c tt d";
    column-gap: clamp(26px, 3.2vw, 60px);
    row-gap: clamp(22px, 2.4vw, 40px);
    align-items: stretch;
  }
}

/* --------------------------------------------------------------------- *
 * 3. KAFELEK-PLAYER
 * --------------------------------------------------------------------- */
.tp-card {
  position: relative;
  display: flex;
  flex-direction: column;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 20px;
  padding: clamp(18px, 1.6vw, 26px);
  box-shadow:
    0 1px 2px rgba(10, 10, 10, .04),
    0 18px 40px -22px rgba(10, 10, 10, .18);
  transition:
    transform var(--dur-3) var(--ease-out),
    box-shadow var(--dur-3) var(--ease-out),
    border-color var(--dur-2) var(--ease-out);
}
.tp-card:hover {
  transform: translateY(-3px);
  border-color: var(--border-strong);
  box-shadow:
    0 1px 2px rgba(10, 10, 10, .04),
    0 26px 56px -24px rgba(10, 10, 10, .24);
}
/* Grający kafelek: różowa krawędź + delikatna aureola w akcencie. */
.tp-card.is-playing {
  border-color: var(--accent);
  box-shadow:
    0 0 0 2px var(--accent-ring),
    0 26px 56px -24px rgba(235, 7, 116, .30);
}
.tp-card.is-playing:hover {
  box-shadow:
    0 0 0 2px var(--accent-ring),
    0 30px 62px -24px rgba(235, 7, 116, .36);
}
/* Pauza — kafelek zostaje "wybrany", ale bez pełnej aureoli. */
.tp-card.is-paused {
  border-color: var(--accent-ring);
}
/* Wygaszamy tylko nieaktywne kontrolki; opis i komunikat awarii
   pozostają tekstem informacyjnym z pełnym kontrastem. */
.tp-card.is-soon .tp-card__play,
.tp-card.is-soon .tp-card__wave {
  opacity: .6;
  cursor: not-allowed;
}
.tp-card:focus-within {
  border-color: var(--border-strong);
}

/* --- wiersz nagłówkowy: okładka | (tag, tytuł, play + czas) --- */
.tp-card__head {
  display: flex;
  align-items: flex-start;
  gap: clamp(14px, 1.2vw, 20px);
}

.tp-card__art {
  position: relative;
  flex: none;
  width: clamp(80px, 6.4vw, 100px);
  aspect-ratio: 1;
  border-radius: 14px;
  overflow: hidden;
  background: var(--bg-alt);
  box-shadow:
    inset 0 0 0 1px var(--border),
    0 8px 20px -10px rgba(10, 10, 10, .35);
}
.tp-card__art img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.tp-card__meta {
  flex: 1;
  min-width: 0;
}

.tp-card__tag {
  font-family: var(--font-mono);
  font-size: 10.5px;
  line-height: 1.4;
  letter-spacing: .13em;
  text-transform: uppercase;
  color: var(--ink-soft);
}

.tp-card__title {
  margin-top: 6px;
  font-family: var(--font-display);
  font-weight: 400;
  font-size: clamp(19px, 1.45vw, 25px);
  line-height: 1.2;
  color: var(--ink);
}

.tp-card__controls {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-top: clamp(12px, 1vw, 16px);
}

.tp-card__play {
  flex: none;
  width: 46px;
  height: 46px;
  border-radius: var(--radius-full);
  display: grid;
  place-items: center;
  background: var(--accent);
  color: var(--on-accent);
  box-shadow: 0 8px 18px -8px var(--accent-ring);
  transition:
    background var(--dur-2) var(--ease-out),
    transform var(--dur-2) var(--ease-out),
    box-shadow var(--dur-2) var(--ease-out);
}
.tp-card__play:hover {
  background: var(--accent-hover);
  transform: scale(1.06);
  box-shadow: 0 12px 24px -8px var(--accent-ring);
}
.tp-card__play:active {
  background: var(--accent-active);
  transform: scale(.98);
}
.tp-card__play:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 3px;
}
.tp-card.is-soon .tp-card__play {
  background: var(--border-strong);
  color: var(--surface);
  box-shadow: none;
  transform: none;
}
.tp-card__play svg {
  grid-area: 1 / 1;
  transition: opacity var(--dur-1) var(--ease-out), visibility var(--dur-1) var(--ease-out);
}
.tp-card__play svg.is-off {
  opacity: 0;
  visibility: hidden;
}

/* Czas dosunięty do prawej krawędzi kolumny meta — licznik ląduje w jednej
   pionowej linii z prawym końcem waveformu pod spodem (kafelek dostaje
   czytelną ramę kompozycyjną zamiast luźnego ogona po tytule). */
.tp-card__time {
  margin-left: auto;
  font-family: var(--font-mono);
  font-size: 12px;
  letter-spacing: .06em;
  font-variant-numeric: tabular-nums;
  color: var(--ink-soft);
}

/* --- waveform: 72 słupków, baza szara, wypełnienie w gradiencie marki --- */
/* Szerokość waveformu MUSI pomieścić 72 słupki: 72×min-width + 71×gap.
   Przy gap 3px i min-width 2px daje to 357px, a najwęższy kafelek (1200px
   viewport oraz 768px) ma ~305px treści — słupki wychodziły poza kartę.
   gap 2px + min-width 1px => minimum 214px, czyli zapas na KAŻDEJ
   szerokości (najwęższy przypadek 320px viewportu to ~244px treści).
   `overflow: hidden` zostaje jako bezpiecznik (zoom / inny font). */
.tp-card__wave {
  position: relative;
  height: clamp(44px, 3.4vw, 58px);
  margin-top: clamp(16px, 1.4vw, 22px);
  border-radius: 4px;
  overflow: hidden;
  cursor: pointer;
}
.tp-card__wave:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 4px;
}

.tp-wave__base,
.tp-wave__fill {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: flex-end;
  gap: 2px;
}
.tp-wave__fill {
  clip-path: inset(0 100% 0 0);
}
.tp-wave__base i,
.tp-wave__fill i {
  flex: 1;
  min-width: 1px;
  max-width: 5px;
  border-radius: 2px;
  transform-origin: bottom;
  transform: scaleY(calc(1 + .06 * var(--tp-amp, 0) * var(--tp-osc, 0)));
}
/* Wyjątek świadomy: neutralna baza waveformu poza paletą semantyczną —
   #e5e5e5 (decyzja właściciela; --border #ededed byłoby zbyt blade na
   białej karcie, --border-strong #d4d4d4 zbyt ciężkie). */
.tp-wave__base i {
  background: #e5e5e5;
}
/* Wypełnienie: róż → fiolet PRZEZ 72 słupki. `--p` (0..1, indeks słupka
   znormalizowany) ustawia JS przy budowie; deklaracja z var(--accent) stoi
   PIERWSZA jako fallback dla przeglądarek bez color-mix(). */
.tp-wave__fill i {
  background: var(--accent);
  background: color-mix(in oklab, var(--accent-2) calc(var(--p, 0) * 100%), var(--accent));
}

/* "Oddech" waveformu — TYLKO gdy kafelek gra (is-live); pauza wygasza go
   płynnie (is-settling ~.7s) zamiast zamrażać klatkę. --tp-osc/--tp-amp
   muszą być ZAREJESTROWANE (@property), żeby transition/animation
   interpolowały liczbę zamiast przeskakiwać. */
@property --tp-osc {
  syntax: "<number>";
  inherits: false;
  initial-value: 0;
}
@property --tp-amp {
  syntax: "<number>";
  inherits: true;
  initial-value: 0;
}
.tp-card__wave {
  --tp-amp: 0;
  transition: --tp-amp .65s var(--ease-out);
}
.tp-card__wave.is-live {
  --tp-amp: 1;
}
@keyframes tpBreathe {
  0%, 100% { --tp-osc: -1; }
  50%      { --tp-osc: 1; }
}
.tp-card__wave.is-live i,
.tp-card__wave.is-settling i {
  animation: tpBreathe var(--tp-breathe-dur, 4.2s) ease-in-out infinite;
  animation-delay: var(--tp-breathe-delay, 0s);
  will-change: transform;
}

/* --- okno karaoke: DOKŁADNIE 2 linie, stała wysokość, wyśrodkowane ---
   Wysokość = 3 wiersze renderowane (2 linie tekstu + zapas na jedno
   zawinięcie długiego wersu) — para jest w oknie wyśrodkowana pionowo,
   więc bez zawinięcia nie ma "opadania" tekstu do góry, a z zawinięciem
   nic nie zostaje przycięte. `margin-top:auto` przykleja blok do dołu
   karty (kafelki są wyrównywane do wspólnej wysokości gridem). */
.tp-card__lyrics {
  --kara-fs: clamp(14px, 1.05vw, 16.5px);
  margin-top: auto;
  padding-top: clamp(14px, 1.2vw, 20px);
  border-top: 1px solid var(--border);
}
.tp-card__kara {
  position: relative;
  height: calc(var(--kara-fs) * 4.65 + 8px);
  overflow: hidden;
}

.tp-kara {
  position: absolute;
  inset: 0;
}
.tp-kara__pair {
  position: absolute;
  top: 50%;
  left: 0;
  right: 0;
  transform: translateY(-50%);
  opacity: 1;
  transition: opacity .5s var(--ease-out);
}
.tp-kara__pair.is-entering,
.tp-kara__pair.is-leaving {
  opacity: 0;
}

.tp-lyrics__line {
  margin: 0;
  font-family: var(--font-display);
  font-style: italic;
  font-size: var(--kara-fs);
  line-height: 1.55;
  color: var(--ink-faint);
}
.tp-lyrics__line span {
  transition: color var(--dur-2) var(--ease-out), opacity var(--dur-2) var(--ease-out);
}
.tp-lyrics__line span.is-done {
  color: var(--ink-soft);
}
.tp-lyrics__line span.is-active {
  color: var(--accent-hover);
}

.tp-lyrics__desc {
  position: absolute;
  top: 50%;
  left: 0;
  right: 0;
  transform: translateY(-50%);
  font-family: var(--font-display);
  font-style: italic;
  font-size: var(--kara-fs);
  line-height: 1.55;
  color: var(--ink-soft);
}

.tp-card__fallback {
  margin-top: var(--sp-3);
  font-size: var(--fs-xs);
  line-height: var(--lh-normal);
  color: var(--ink-soft);
}
.tp-card__fallback a {
  color: var(--accent-hover);
  font-weight: 500;
  text-decoration: underline;
  text-underline-offset: 2px;
}
.tp-card__fallback a:hover,
.tp-card__fallback a:focus-visible {
  color: var(--accent-hover);
}

.tp-card audio {
  display: none;
}

/* --------------------------------------------------------------------- *
 * 4. GRAMOFON
 * Trzy warstwy WebP w inline SVG (markup + komentarz o geometrii w
 * templates/public/index.html). Obrót płyty nadaje rAF przez ATRYBUT
 * transform (user-space), więc żadna reguła niżej nie może ustawiać
 * `transform` na #tpTtDisc — wjazd płyty siedzi na WRAPPERZE.
 * --------------------------------------------------------------------- */
.tp-tt-stage {
  /* Wyjątek nazwany: opadanie płyty NIE używa globalnego --ease-out
     (cubic-bezier(.16,1,.3,1) — prawie ekspozycyjne wyhamowanie: 98% drogi
     w pierwszych 300 ms, ruch nieczytelny). Ten easing rozkłada 0.72 s na
     całą drogę, żeby było widać, że płyta OPADA na talerz. */
  --tt-drop-ease: cubic-bezier(.25, .78, .35, 1);
  position: relative;
  justify-self: center;
  align-self: center;
  width: min(100%, 260px);
}

@media (min-width: 768px) {
  .tp-tt-stage {
    width: min(100%, 400px);
    margin-bottom: clamp(12px, 2vw, 26px);
  }
}
@media (min-width: 1200px) {
  .tp-tt-stage {
    width: 100%;
    max-width: var(--tt-col);
    margin-bottom: 0;
  }
}

/* Aureola: miękki różowy poblask + koncentryczne włoski (echo rowków
   płyty), wygaszane maską do zera przy krawędzi — dekoracja klasy
   premium, zero kiczu. */
.tp-tt-halo {
  position: absolute;
  left: 50%;
  top: 50%;
  z-index: 0;
  width: 138%;
  aspect-ratio: 1;
  transform: translate(-50%, -50%);
  border-radius: 50%;
  pointer-events: none;
  background:
    radial-gradient(closest-side, rgba(235, 7, 116, .10) 0%, rgba(235, 7, 116, 0) 72%),
    repeating-radial-gradient(circle at 50% 50%, rgba(122, 0, 198, .05) 0 1px, rgba(122, 0, 198, 0) 1px 14px);
  -webkit-mask-image: radial-gradient(closest-side, #000 26%, transparent 74%);
          mask-image: radial-gradient(closest-side, #000 26%, transparent 74%);
}

/* Cień kontaktowy decku — STATYCZNY pseudo-element dokładnie w obrysie
   plinty. Inset = margines kadru / rozmiar kadru: 9/282.35 = 3.188% w
   poziomie, 8.5/265.85 = 3.197% w pionie (patrz viewBox w index.html).
   Świadomie NIE `filter: drop-shadow()` na <svg>: filtr na rodzicu
   wirującej płyty wymusza re-rasteryzację całej warstwy w KAŻDEJ klatce
   obrotu (ta sama pułapka, którą v2 opisuje przy grupach wirujących).
   Tutaj cień jest malowany raz i nigdy nie animowany. */
.tp-tt-stage::after {
  content: "";
  position: absolute;
  left: 3.188%;
  right: 3.188%;
  top: 3.197%;
  bottom: 3.197%;
  z-index: 0;
  border-radius: 6px;
  pointer-events: none;
  box-shadow:
    0 28px 44px -20px rgba(10, 10, 10, .42),
    0 8px 16px -8px rgba(10, 10, 10, .22);
}

.tp-tt {
  position: relative;
  z-index: 1;
  width: 100%;
  height: auto;
  /* overflow widoczny: płyta wjeżdża spoza górnej krawędzi kadru */
  overflow: visible;
  pointer-events: none;
}

/* Płyta w spoczynku: NIEWIDOCZNA i poza talerzem (nad kadrem). Klasę
   `is-disc-on` dokłada JS przy pierwszym odtworzeniu — płyta zjeżdża na
   talerz i zostaje tam już na stałe (pauza jej nie zdejmuje).
   visibility w transition z opóźnieniem, żeby zejście (gdyby kiedyś było
   potrzebne) nie ucinało animacji. */
#tpTtDiscWrap {
  opacity: 0;
  visibility: hidden;
  transform: translateY(-72px);
  transition:
    opacity .3s var(--ease-out),
    transform .72s var(--tt-drop-ease),
    visibility 0s linear .72s;
}
.tp-tt.is-disc-on #tpTtDiscWrap {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
  transition:
    opacity .3s var(--ease-out),
    transform .72s var(--tt-drop-ease),
    visibility 0s;
}

/* Igła — złoty punkt marki na końcu ramienia; pulsuje tylko gdy gra. */
.tp-tt__needle {
  fill: var(--accent);
  opacity: .55;
}
.tp-tt.is-playing .tp-tt__needle {
  animation: tpNeedlePulse 2s ease-in-out infinite;
}
@keyframes tpNeedlePulse {
  0%, 100% { opacity: .45; r: 1.6; }
  50%      { opacity: 1;   r: 2.4; }
}

/* --------------------------------------------------------------------- *
 * 5. RUCH OGRANICZONY
 * Płyta widoczna statycznie od pierwszej klatki (rotacji i wjazdu nie ma
 * — JS niezależnie sprawdza prefers-reduced-motion i nie odpala rAF).
 * --------------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  #tpTtDiscWrap {
    opacity: 1;
    visibility: visible;
    transform: none;
    transition: none;
  }
  .tp-tt.is-playing .tp-tt__needle { animation: none; }
  .tp-card__wave.is-live i,
  .tp-card__wave.is-settling i { animation: none; }
  .tp-kara__pair { transition: none; }
  .tp-card,
  .tp-card__play { transition: none; }
  .tp-card:hover { transform: none; }
  .tp-card__play:hover,
  .tp-card__play:active { transform: none; }
}

/* --------------------------------------------------------------------- *
 * 6. ŻYWY TELEFON — sekcja „Wszystko, co dostajesz" (live-phone.js)
 * Zdjęcie = tło (object-fit: cover). `.live-phone__glass` leży na nim
 * w tym samym kadrze i jest przycięte maską PNG do kształtu szkła (maska
 * ma TEN SAM kadr co zdjęcie, więc `cover` + `center` wyrównuje je 1:1).
 * `.lp-screen` to ekran strony-prezentu w projektowych 300×720 px —
 * JS nakłada go matrix3d na narożniki szkła. Paleta = strona-prezent
 * (.gift-page w main.css): ciemne tło, róż akcentu, DM Serif w tytułach.
 * --------------------------------------------------------------------- */
.package-card--media { position: relative; background: #e9dfd6; }
.live-phone {
  position: relative;
  height: 100%;
  overflow: hidden;
  isolation: isolate;
}
@media (max-width: 1139px) {
  .live-phone { aspect-ratio: 1; height: auto; }
}
.live-phone picture,
.live-phone img { display: block; width: 100%; height: 100%; object-fit: cover; object-position: center; }
.live-phone__glass {
  position: absolute;
  inset: 0;
  -webkit-mask: url("../img/telefon_live_mask.png") center / cover no-repeat;
          mask: url("../img/telefon_live_mask.png") center / cover no-repeat;
}
.lp-screen {
  position: absolute;
  top: 0;
  left: 0;
  width: 300px;
  height: 720px;
  transform-origin: 0 0;
  padding: 0 22px;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  color: #faf7f5;
  background:
    radial-gradient(120% 60% at 50% 0%, rgba(235, 7, 116, .16), transparent 60%),
    linear-gradient(180deg, #17121a 0%, #0d0b0e 55%, #0b0a0c 100%);
  font-family: var(--font-sans);
  opacity: 0;
  transition: opacity .5s var(--ease-out);
  -webkit-font-smoothing: antialiased;
}
.live-phone.is-ready .lp-screen { opacity: 1; }
/* Odblask szkła: ekran nie może wyglądać jak naklejka — delikatny ukośny
   refleks i lekkie przyciemnienie krawędzi wtapiają go w światło zdjęcia. */
.lp-screen::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background:
    linear-gradient(115deg, rgba(255, 255, 255, .10) 0%, rgba(255, 255, 255, .03) 28%, transparent 42%),
    radial-gradient(140% 90% at 50% 50%, transparent 70%, rgba(0, 0, 0, .35) 100%);
}
.lp-status {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 16px 6px 0;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: .01em;
}
.lp-status__island { width: 84px; height: 24px; border-radius: 14px; background: #000; }
.lp-status__icons { display: inline-flex; gap: 5px; align-items: center; }
.lp-eyebrow {
  margin-top: 30px;
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: .22em;
  text-transform: uppercase;
  color: rgba(250, 247, 245, .55);
}
.lp-heading {
  margin-top: 8px;
  font-family: var(--font-display);
  font-size: 22px;
  line-height: 1.18;
}
.lp-heading__who { color: var(--accent); }
.lp-art {
  position: relative;
  width: 192px;
  height: 192px;
  margin-top: 24px;
}
.lp-art__cover {
  position: relative;
  z-index: 1;
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 14px;
  box-shadow: 0 14px 30px rgba(0, 0, 0, .55);
}
/* Winyl wysuwa się spod okładki i kręci, gdy gra — nawiązanie do znaku
   „serce-winyl". Rowki = powtarzany gradient, etykieta w kolorze akcentu. */
.lp-art__vinyl {
  position: absolute;
  top: 6%;
  left: 6%;
  width: 88%;
  height: 88%;
  border-radius: 50%;
  background:
    radial-gradient(circle, var(--accent) 0 13%, #1a1a1a 13.5% 15%, transparent 15.5%),
    repeating-radial-gradient(circle, #151515 0 1.4px, #262626 1.6px 2.8px);
  box-shadow: 0 8px 18px rgba(0, 0, 0, .5);
  transition: transform .9s var(--ease-out);
}
.live-phone.is-playing .lp-art__vinyl {
  transform: translateX(34%);
  animation: lpSpin 2.4s linear infinite;
}
@keyframes lpSpin {
  from { transform: translateX(34%) rotate(0deg); }
  to   { transform: translateX(34%) rotate(360deg); }
}
.lp-title { margin-top: 22px; font-family: var(--font-display); font-size: 21px; line-height: 1.15; }
.lp-sub { margin-top: 3px; font-size: 11.5px; color: rgba(250, 247, 245, .55); }
.lp-bar {
  position: relative;
  width: 100%;
  height: 16px;
  margin-top: 18px;
  cursor: pointer;
}
.lp-bar::before,
.lp-bar__fill {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  top: 6px;
  height: 4px;
  border-radius: 4px;
  background: rgba(250, 247, 245, .18);
}
.lp-bar__fill {
  background: var(--grad-accent);
  transform: scaleX(0);
  transform-origin: 0 50%;
  transition: transform .25s linear;
}
.lp-times {
  width: 100%;
  display: flex;
  justify-content: space-between;
  font-size: 10.5px;
  color: rgba(250, 247, 245, .5);
  font-variant-numeric: tabular-nums;
}
.lp-play {
  position: relative;
  display: grid;
  place-items: center;
  width: 64px;
  height: 64px;
  margin-top: 8px;
  border-radius: 50%;
  color: #fff;
  background: var(--accent);
  box-shadow: 0 10px 24px rgba(235, 7, 116, .45);
  transition: transform var(--dur-2) var(--ease-out), background-color var(--dur-2);
}
.lp-play:hover { background: var(--accent-hover); transform: scale(1.06); }
.lp-play:active { transform: scale(.96); }
.lp-play:focus-visible { outline: 3px solid #fff; outline-offset: 3px; }
/* Zaproszenie do kliknięcia: pierścień „oddycha" tylko, dopóki nikt nie
   włączył odtwarzania, i tylko gdy kursor jest nad zdjęciem (ruch na hover). */
.lp-play::before {
  content: "";
  position: absolute;
  inset: -6px;
  border-radius: 50%;
  border: 2px solid rgba(235, 7, 116, .7);
  opacity: 0;
}
.live-phone:not(.was-played):hover .lp-play::before { animation: lpRing 1.6s var(--ease-out) infinite; }
@keyframes lpRing {
  0%   { opacity: .9; transform: scale(.92); }
  100% { opacity: 0;  transform: scale(1.35); }
}
.lp-play__i--pause,
.live-phone.is-playing .lp-play__i--play { display: none; }
.live-phone.is-playing .lp-play__i--pause { display: block; }
.lp-play__i--play { margin-left: 3px; }
.lp-lyrics {
  width: 100%;
  min-height: 92px;
  margin-top: 18px;
  padding: 12px 8px;
  border-radius: 14px;
  background: rgba(255, 255, 255, .06);
  display: grid;
  place-items: center;
}
.lp-lyrics__hint { font-size: 12px; line-height: 1.4; color: rgba(250, 247, 245, .6); }
.lp-kara { animation: lpKaraIn .45s var(--ease-out); }
.lp-kara p {
  font-family: var(--font-display);
  font-size: 14px;
  line-height: 1.4;
  color: rgba(250, 247, 245, .38);
}
.lp-kara span { transition: color .2s linear; }
.lp-kara span.is-sung { color: #faf7f5; }
.lp-kara span.is-now { color: #ff4fa0; }
@keyframes lpKaraIn {
  from { opacity: 0; transform: translateY(6px); }
  to   { opacity: 1; transform: none; }
}
.lp-home {
  position: absolute;
  bottom: 10px;
  left: 50%;
  width: 110px;
  height: 4px;
  margin-left: -55px;
  border-radius: 4px;
  background: rgba(250, 247, 245, .55);
}
.live-phone.is-error .lp-lyrics__hint::after { content: " (odsłuch chwilowo niedostępny)"; }
/* Makieta przycisku „Pobierz MP3” (jak pod odtwarzaczem na stronie-prezencie). */
.lp-download {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  margin-top: 22px;
  padding: 11px 26px;
  border: 1.5px solid rgba(250, 247, 245, .32);
  border-radius: 999px;
  font-size: 14px;
  font-weight: 700;
  color: #faf7f5;
}

/* Podpowiedź pod zdjęciem — znika po pierwszym odtworzeniu. */
.live-phone__chip {
  position: absolute;
  left: 50%;
  bottom: var(--sp-5);
  z-index: 2;
  transform: translateX(-50%);
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin: 0;
  padding: 8px 14px;
  border-radius: var(--radius-full);
  background: rgba(255, 255, 255, .88);
  -webkit-backdrop-filter: blur(8px);
          backdrop-filter: blur(8px);
  box-shadow: var(--shadow-md);
  color: var(--ink);
  font-size: var(--fs-xs);
  font-weight: 700;
  white-space: nowrap;
  pointer-events: none;
  transition: opacity var(--dur-3), transform var(--dur-3) var(--ease-out);
}
.live-phone__chip-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--accent);
  box-shadow: 0 0 0 3px var(--accent-soft);
}
.live-phone.was-played .live-phone__chip { opacity: 0; transform: translate(-50%, 8px); }
.live-phone:not(.is-ready) .live-phone__chip { display: none; }

@media (prefers-reduced-motion: reduce) {
  .live-phone.is-playing .lp-art__vinyl { animation: none; }
  .lp-art__vinyl,
  .lp-bar__fill,
  .lp-kara { transition: none; animation: none; }
  .live-phone:not(.was-played):hover .lp-play::before { animation: none; }
}

/* --------------------------------------------------------------------- *
 * 7. KLIMAT VINTAGE 2026-09-24 — scena przykładów i „koperty płyt”
 * Scena: kość słoniowa → pudrowy róż (fotel ze zdjęcia) → kość, z ziarnem
 * papieru; zamiast chłodnego różu→fioletu. Kafelek: papier koperty
 * (--surface na ciepłym konturze). Znak rozpoznawczy sekcji: spod okładki
 * wysuwa się winyl (po najechaniu), a gdy utwór gra — kręci się. Ten sam
 * motyw co winyl w „żywym telefonie” i znak marki serce-winyl.
 * --------------------------------------------------------------------- */
.tp-examples {
  background:
    var(--grain),
    radial-gradient(60% 46% at 8% 6%, rgba(235, 7, 116, .05) 0%, rgba(235, 7, 116, 0) 62%),
    radial-gradient(54% 44% at 94% 94%, rgba(176, 141, 87, .10) 0%, rgba(176, 141, 87, 0) 62%),
    linear-gradient(178deg, var(--bg) 0%, #f6e7e5 38%, #f2e2e0 70%, var(--bg) 100%);
}
.tp-examples::before { background: var(--brass); opacity: .35; }

.tp-card {
  border-color: rgba(176, 141, 87, .22);
  box-shadow:
    0 1px 2px rgba(60, 35, 30, .05),
    0 18px 40px -24px rgba(60, 35, 30, .30);
}
.tp-card:hover {
  border-color: rgba(176, 141, 87, .45);
  box-shadow:
    0 1px 2px rgba(60, 35, 30, .05),
    0 26px 56px -26px rgba(60, 35, 30, .38);
}

.tp-card__sleeve {
  position: relative;
  flex: none;
  display: block;
}
.tp-card__sleeve .tp-card__art { z-index: 1; display: block; }
.tp-card__disc {
  position: absolute;
  top: 5%;
  left: 5%;
  width: 90%;
  height: 90%;
  border-radius: 50%;
  background:
    radial-gradient(circle, #fff 0 3%, var(--accent) 3.5% 17%, #1b1b1b 17.5% 19%, transparent 19.5%),
    repeating-radial-gradient(circle, #141414 0 1.2px, #2a2a2a 1.4px 2.6px);
  box-shadow: 0 6px 14px -4px rgba(0, 0, 0, .45);
  transition: transform .7s var(--ease-out);
}
/* Wysuw w górę-lewo: po prawej stronie okładki stoi tytuł, a nad nią i po
   lewej jest padding karty — winyl nie zasłania żadnego tekstu. */
.tp-card:hover .tp-card__disc,
.tp-card:focus-within .tp-card__disc { transform: translate(-22%, -22%) rotate(40deg); }
.tp-card.is-playing .tp-card__disc {
  transform: translate(-22%, -22%);
  animation: tpDiscSpin 1.8s linear infinite;
}
@keyframes tpDiscSpin {
  from { transform: translate(-22%, -22%) rotate(0deg); }
  to   { transform: translate(-22%, -22%) rotate(360deg); }
}

@media (prefers-reduced-motion: reduce) {
  .tp-card__disc { transition: none; }
  .tp-card.is-playing .tp-card__disc { animation: none; }
}