/* ── Музыка лендинга: пластинка справа внизу ─────────────────────────────
   Крутится, пока играет песня; нажатие — выключить / включить звук.
   Пока браузер не разрешил звук (до первого нажатия на страницу) — пульсирует */
:root{
  --vinyl-size:60px;
  --vinyl-black:#141414;
  --vinyl-groove:#2A2A2A;
  --vinyl-shadow:0 6px 18px rgba(0,0,0,.28);
  --vinyl-on-label:#FFFFFF;
}

.sl-music{
  position:fixed;
  right:calc(20px + env(safe-area-inset-right));
  bottom:calc(20px + env(safe-area-inset-bottom));
  z-index:60;                     /* над шапкой (50), под модалкой (1000) */
  display:block;border:none;background:none;padding:0;cursor:pointer;
  font-family:inherit;
  -webkit-tap-highlight-color:transparent;
}

/* Подсказка слева от пластинки — видна (и нажимается), пока звук не включён;
   вынесена из потока, чтобы невидимая не перехватывала нажатия */
.sl-music-hint{
  position:absolute;right:calc(100% + 10px);top:50%;margin-top:-16px;
  background:var(--color-bg-card);color:var(--color-text-primary);
  font-size:13px;font-weight:500;line-height:1;white-space:nowrap;
  padding:9px 12px;border-radius:var(--radius-pill);
  box-shadow:var(--vinyl-shadow);
  opacity:0;transform:translateX(6px);pointer-events:none;
  transition:opacity .3s var(--ease),transform .3s var(--ease);
}
.sl-music.is-waiting .sl-music-hint{opacity:1;transform:none;pointer-events:auto}

/* Пластинка: бороздки + зелёная «яблочко»-наклейка с иконкой звука */
.sl-music-disc{
  position:relative;
  width:var(--vinyl-size);height:var(--vinyl-size);border-radius:50%;
  background:repeating-radial-gradient(circle at 50% 50%,
      var(--vinyl-black) 0 2px, var(--vinyl-groove) 2px 3px);
  box-shadow:var(--vinyl-shadow);
  display:flex;align-items:center;justify-content:center;
  transition:transform .2s var(--ease);
}
.sl-music:hover .sl-music-disc{transform:scale(1.06)}
.sl-music:active .sl-music-disc{transform:scale(.96)}

/* Блик — чтобы было видно вращение */
.sl-music-disc::before{
  content:"";position:absolute;inset:0;border-radius:50%;
  background:conic-gradient(from 20deg,
    rgba(255,255,255,0) 0deg, rgba(255,255,255,.16) 30deg,
    rgba(255,255,255,0) 70deg, rgba(255,255,255,0) 200deg,
    rgba(255,255,255,.10) 230deg, rgba(255,255,255,0) 270deg);
}
.sl-music.is-playing .sl-music-disc::before{animation:sl-vinyl-spin 2.4s linear infinite}

.sl-music-label{
  position:relative;width:46%;height:46%;border-radius:50%;
  background:var(--color-primary);color:var(--vinyl-on-label);
  display:flex;align-items:center;justify-content:center;
}
.sl-music-label svg{width:58%;height:58%;display:block}
.sl-music-label .ic-off{display:none}
.sl-music:not(.is-playing) .sl-music-label .ic-on{display:none}
.sl-music:not(.is-playing) .sl-music-label .ic-off{display:block}
.sl-music:not(.is-playing) .sl-music-label{background:var(--color-text-secondary)}

/* Ждём первого нажатия — мягкая пульсация зелёным кольцом */
.sl-music.is-waiting .sl-music-disc{animation:sl-vinyl-pulse 1.8s var(--ease) infinite}
.sl-music.is-waiting .sl-music-label{background:var(--color-primary)}

@keyframes sl-vinyl-spin{to{transform:rotate(360deg)}}
@keyframes sl-vinyl-pulse{
  0%{box-shadow:var(--vinyl-shadow),0 0 0 0 color-mix(in srgb, var(--color-primary) 55%, transparent)}
  70%{box-shadow:var(--vinyl-shadow),0 0 0 14px color-mix(in srgb, var(--color-primary) 0%, transparent)}
  100%{box-shadow:var(--vinyl-shadow),0 0 0 0 color-mix(in srgb, var(--color-primary) 0%, transparent)}
}

@media (max-width:640px){
  :root{--vinyl-size:52px}
  .sl-music{right:calc(14px + env(safe-area-inset-right));bottom:calc(14px + env(safe-area-inset-bottom))}
}
@media (prefers-reduced-motion:reduce){
  .sl-music.is-playing .sl-music-disc::before,
  .sl-music.is-waiting .sl-music-disc{animation:none}
}