/* Винил — сквозной образ бренда. Логотип приложения уже пластинка (#i-home);
   здесь она оживает: крутится значком активного таба, эхом стоит в гейте и
   разворачивается крупной пластинкой в «театре» текста. Один @keyframes, три
   размера. Правила движения — по apple-design: спин linear и медленный (мелкий
   шаг на кадр, §11); блик ФИКСИРОВАН у крупной пластинки — источник света не
   крутится вместе с диском (§12); спин гаснет на паузе музыки (причинность §13)
   и при reduced-motion. Файл подключён ДО responsive.css. */

@keyframes vinyl-rev { to { transform: rotate(1turn); } }

/* ---------- значок-винил (наклонён, монохром по currentColor) ---------- */
/* Наклон и «прижатость к столу» даёт .tab-vinyl__plate (rotate + вертикальный
   сплюск). Спин крутит .tab-vinyl__face ВНУТРИ этой сплюснутой системы координат:
   яркий сектор-блик обегает диск правильной наклонной эллиптической орбитой, а
   силуэт-эллипс стоит на месте. Центральная дырочка не крутится и всегда видна —
   именно её съедал stroke у старого залитого глифа. */
.tab-vinyl { position: relative; display: inline-block; width: 27px; height: 27px; color: currentColor; }
.tab-vinyl__plate {
  position: absolute; inset: 0; border-radius: 50%; overflow: hidden;
  transform: rotate(-26deg) scaleY(0.6);
  box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.28);
}
.tab-vinyl__face {
  position: absolute; inset: 0; border-radius: 50%;
  background-color: currentColor;
  background-image:
    conic-gradient(from -18deg, rgba(255, 255, 255, 0.55), rgba(255, 255, 255, 0) 62deg 300deg, rgba(255, 255, 255, 0.32)),
    repeating-radial-gradient(circle at 50% 50%, rgba(0, 0, 0, 0.30) 0 1.3px, rgba(0, 0, 0, 0) 1.3px 2.7px);
  animation: vinyl-rev 4.6s linear infinite;
}
/* Дырочка: пятно цвета панели с тёмной кромкой — читается как отверстие шпинделя. */
.tab-vinyl__hole {
  position: absolute; left: 50%; top: 50%; width: 22%; height: 22%;
  transform: translate(-50%, -50%); border-radius: 50%;
  background: var(--surface-1); box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.45);
}

/* Значок живёт в табе только когда таб выбран (иначе — контур #i-home). */
.tab .tab-vinyl { display: none; }
.tab--on .tab-vinyl { display: inline-block; }

/* Эхо бренда в гейте: маленький винил акцентом после вордмарка «BEATLY». */
.gate__brand { display: flex; align-items: center; justify-content: center; gap: 0.34em; }
.gate__brand .brand-vinyl { width: 0.92em; height: 0.92em; color: var(--accent); }

/* ---------- крупная пластинка «театра» текста ---------- */
/* Классический винил: чёрное тело с бороздами, по центру этикетка-обложка трека
   и отверстие шпинделя. Крутится .disc__spin (борозды + обложка вместе), блик
   .disc__gloss фиксирован сверху, дырочка неподвижна. */
.lyrics-disc { display: none; }
.disc { position: relative; width: 100%; aspect-ratio: 1 / 1; border-radius: 50%; }
.disc__spin {
  position: absolute; inset: 0; border-radius: 50%;
  background:
    repeating-radial-gradient(circle at 50% 50%, rgba(255, 255, 255, 0.05) 0 1px, rgba(0, 0, 0, 0) 1px 3px),
    radial-gradient(circle at 50% 50%, #26262b 0 29%, #101012 29% 60%, #17171b 60% 100%);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.06), inset 0 0 40px rgba(0, 0, 0, 0.6), 0 26px 64px -16px rgba(0, 0, 0, 0.85);
  animation: vinyl-rev var(--disc-rev, 5.6s) linear infinite;
}
.disc__label {
  position: absolute; left: 50%; top: 50%; width: 56%; height: 56%;
  transform: translate(-50%, -50%); border-radius: 50%; overflow: hidden;
  background: linear-gradient(160deg, #23345e 0%, #18233f 100%);
  box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.5), inset 0 0 0 1px rgba(255, 255, 255, 0.08);
}
.disc__img { display: block; width: 100%; height: 100%; object-fit: cover; }
/* Блик: диагональный отблеск света на глянце винила — фиксирован, диск крутится под ним. */
.disc__gloss {
  position: absolute; inset: 0; border-radius: 50%; pointer-events: none;
  background: linear-gradient(120deg, rgba(255, 255, 255, 0.22) 0%, rgba(255, 255, 255, 0.05) 26%, rgba(255, 255, 255, 0) 44%, rgba(255, 255, 255, 0) 58%, rgba(255, 255, 255, 0.03) 80%, rgba(255, 255, 255, 0.12) 100%);
}
.disc__hole {
  position: absolute; left: 50%; top: 50%; width: 3.6%; height: 3.6%;
  transform: translate(-50%, -50%); border-radius: 50%;
  background: #050505; box-shadow: 0 0 0 1.5px rgba(255, 255, 255, 0.12);
}
/* Спин пластинки — только пока играет музыка (lyrics.js метит .is-playing). */
#sheet-lyrics:not(.is-playing) .disc__spin { animation-play-state: paused; }

/* ---------- режим «театр»: тап по тексту гасит всё до чёрного ---------- */
.sheet--lyrics.theater { background: #000; }
.sheet--lyrics.theater .sheet__bg,
.sheet--lyrics.theater .sheet__scrim,
.sheet--lyrics.theater .sheet__head,
.sheet--lyrics.theater .lyrics-modes,
.sheet--lyrics.theater .lyrics__note,
.sheet--lyrics.theater .minibar { display: none; }
.sheet--lyrics.theater .sheet__body {
  flex-direction: row; align-items: center; gap: clamp(14px, 4vw, 56px);
  padding: var(--pad-t) clamp(14px, 5vw, 60px) max(22px, calc(var(--safe-b) + 12px));
}
.sheet--lyrics.theater .lyrics-disc {
  display: block; flex: none; width: clamp(118px, 34vw, 320px);
  animation: disc-in 0.55s var(--ease) both;
}
.sheet--lyrics.theater .lyrics {
  align-self: stretch; height: auto; flex: 1; min-width: 0;
  padding: 40vh clamp(6px, 2vw, 22px);
  animation: theater-text-in 0.55s var(--ease) both;
}
.sheet--lyrics.theater .lyrics__line { font-size: clamp(18px, 2.4vw, 30px); }
@keyframes disc-in { from { opacity: 0; transform: scale(0.86); filter: blur(9px); } }
@keyframes theater-text-in { from { opacity: 0; transform: translateX(10px); } }

/* Мобила: «театр» открывается ПОВЁРНУТЫМ на бок (как держать телефон
   горизонтально, но крутим мы, не датчик — screen.orientation.lock на iOS нет).
   Сам оверлей .sheet__body превращаем в ландшафтный кадр (ширина = высота экрана
   100dvh, высота = ширина экрана 100vw) и поворачиваем на 90°. Клики/тач браузер
   трансформирует сам — попадание по строкам остаётся верным. Остальной интерфейс
   НЕ трогаем (Артём: поворачивается только этот момент). Только в портрете: если
   телефон и так горизонтально, второй поворот не нужен. */
@media (max-width: 767px) and (orientation: portrait) {
  .sheet--lyrics.theater .sheet__body {
    position: fixed; top: 50%; left: 50%;
    width: 100dvh; height: 100vw;
    /* -90° (против часовой у кадра) = винил слева, текст справа при повороте
       телефона ВПРАВО (по часовой) — самый привычный жест «поверни на бок». */
    transform: translate(-50%, -50%) rotate(-90deg);
    transform-origin: center center;
    padding: clamp(16px, 5vh, 40px) clamp(22px, 6vw, 56px);
    gap: clamp(14px, 4vh, 44px);
  }
  @supports not (width: 100dvh) {
    .sheet--lyrics.theater .sheet__body { width: 100vh; }
  }
  /* В повёрнутом кадре высота = ширина экрана (100vw), поэтому запас для
     центровки первой/последней строки считаем в vw, а не vh. */
  .sheet--lyrics.theater .lyrics { padding: 40vw clamp(6px, 2vh, 20px); }
  .sheet--lyrics.theater .lyrics-disc { width: clamp(110px, 30vh, 260px); }
}

/* Десктоп: шторка-модалка расширяется под две колонки (специфичность
   #sheet-lyrics.theater перебивает адаптивный #sheet-lyrics в responsive.css). */
@media (min-width: 768px) {
  #sheet-lyrics.theater .sheet__body {
    max-width: 900px; height: 88vh; flex-direction: row;
    padding: 32px clamp(28px, 4vw, 52px);
    background: #000; /* «весь экран гаснет» — модалка тоже чисто чёрная, а не серая */
    box-shadow: none; /* на чистом чёрном грань окошка не нужна — карточка тонет в фоне */
  }
  #sheet-lyrics.theater .lyrics { padding-top: 40vh; padding-bottom: 40vh; }
}

/* Меньше движения — без спина и без «материализации», статичная пластинка. */
@media (prefers-reduced-motion: reduce) {
  .tab-vinyl__face, .disc__spin { animation: none !important; }
  .sheet--lyrics.theater .lyrics-disc,
  .sheet--lyrics.theater .lyrics { animation: none !important; }
}