/* ============ КОМПАКТ-КАССЕТА В ПЛЕЕРЕ (05.09.2026) ============
   Разметку рисует la_cassette.php. Здесь только размеры, тень и вращение катушек.
   Файл общий для дока и радио: ключевые кадры нельзя держать в двух местах. */

.lac{position:relative;flex:none;line-height:0;
  /* Тень как у настоящей кассеты, лежащей на панели: короткая и мягкая, без ореола */
  filter:drop-shadow(0 2px 3px rgba(0,0,0,.30)) drop-shadow(0 6px 12px rgba(0,0,0,.22))}
.lac svg{display:block;width:100%;height:auto}

/* Корпус кассеты чёрный, и на тёмной панели он сливался с фоном.
   Тонкий светлый ободок отделяет её от подложки, не осветляя саму кассету. */
html[data-theme="dark"] .lac{filter:drop-shadow(0 0 .6px rgba(255,255,255,.42)) drop-shadow(0 3px 9px rgba(0,0,0,.5))}

/* Обложка книги приклеена к этикетке наклейкой, а не растянута во всю ширину: полоса
   272 на 54 из вертикальной обложки показывает пустое место, а квадратная наклейка
   показывает саму картинку. Координаты в процентах от холста SVG (18..80 по ширине из
   300, 13..69 по высоте из 192), поэтому слой ложится ровно на разлинованное поле. */
.lac-cov{position:absolute;left:6%;top:6.77%;width:20.67%;height:29.17%;
  background:#e8e0cc center/cover no-repeat;
  box-shadow:0 0 0 1.5px rgba(255,255,255,.9),0 1px 2px rgba(0,0,0,.35);
  transform:rotate(-1.4deg)}

/* ── вращение ──
   Крутится ТОЛЬКО когда идёт звук. На паузе анимация не снимается, а встаёт на месте
   (animation-play-state), иначе катушка при каждой паузе прыгала бы в исходный угол.
   transform-box:fill-box даёт центр вращения по самой катушке: transform-origin в
   пикселях на SVG-группе считается от начала координат холста и уводит её вбок. */
.lac-reel{transform-box:fill-box;transform-origin:50% 50%;
  animation:lacSpin 3.6s linear infinite;animation-play-state:paused}
/* Справа намотано меньше, значит на том же метраже ленты катушка успевает больше
   оборотов. Разная скорость это не украшение, а то, как кассета крутится вживую. */
.lac .lac-r{animation-duration:2.35s}

/* Витки намотки ужимаются вместе с лентой. Центр берём по самой группе: transform-origin
   в пикселях считался бы от угла холста и уводил бы намотку вбок при каждом пересчёте. */
.lac-wind{transform-box:fill-box;transform-origin:50% 50%}
/* Плавность на случай рывка при перемотке: без неё лента прыгает скачком. */
.lac-pack{transition:r .28s linear}
.lac-wind{transition:transform .28s linear}
body.la-cass-play .lac-reel{animation-play-state:running}
@keyframes lacSpin{from{transform:rotate(0)}to{transform:rotate(360deg)}}

/* ── КАССЕТУ ВЫКЛЮЧИЛИ В НАСТРОЙКАХ ──
   Прячем рисунок, но не оставляем дыру. В нижнем плеере наклейка с обложкой
   возвращается на её прежнее место квадратом 44 на 44, ровно как было до кассеты:
   человек, который её выключил, должен получить прежний плеер, а не пустоту. */
.la-nocass .lac svg{display:none}
.la-nocass .lac{animation:none;filter:none}
.la-nocass .ld-cass{width:44px;height:44px}
.la-nocass .ld-cass .lac-cov{position:static;width:100%;height:100%;border-radius:8px;
  transform:none;box-shadow:none;border:1px solid var(--border);background-color:var(--bg)}
/* В окне плеера книги и на радио на месте кассеты и так есть что показать:
   объёмная обложка и постер эфира. Там кассета просто исчезает. */
.la-nocass .lap-cass,.la-nocass .rd-cass{display:none}

/* Появление: кассету как будто вставили в деку. Док при показе выходит из display:none,
   и анимация запускается сама на каждом появлении плеера, без единой строки на JS. */
.lac{animation:lacIn .44s cubic-bezier(.22,.9,.3,1) both}
@keyframes lacIn{
  from{opacity:0;transform:translateY(10px) scale(.92)}
  60%{opacity:1}
  to{opacity:1;transform:none}
}

@media(prefers-reduced-motion:reduce){
  .lac{animation:none}
  .lac-reel{animation:none}
}