/* =========================================================
   Плеер: мини-проигрыватель. Слева обложка и название,
   в центре транспорт, справа служебные кнопки.
   ========================================================= */
.player{
  position:fixed;left:var(--gutter);bottom:var(--gutter);z-index:75;
  display:flex;flex-direction:column;align-items:stretch;gap:9px;padding:12px 14px;
  border-radius:24px;border:1px solid var(--line);
  background:color-mix(in srgb,var(--surface) 84%,transparent);
  backdrop-filter:blur(24px) saturate(180%);-webkit-backdrop-filter:blur(24px) saturate(180%);
  box-shadow:0 30px 70px -30px rgba(8,40,80,.45),
             inset 0 1px 0 rgba(255,255,255,.55);
  width:min(560px,calc(100vw - var(--gutter)*2));
  opacity:0;transform:translateY(26px) scale(.96);pointer-events:none;
  transition:gap .4s var(--ease),padding .4s var(--ease),border-radius .4s var(--ease),
             width .45s var(--ease),opacity .6s var(--ease),transform .7s var(--ease);
}
.player.is-shown,.player:focus-within{opacity:1;transform:none;pointer-events:auto}
.player[hidden]{display:none}
@media (prefers-reduced-transparency: reduce){
  .player{background:var(--surface);backdrop-filter:none}
}

/* Обложка с эквалайзером */
.player__art{
  position:relative;flex:0 0 auto;width:52px;height:52px;border-radius:14px;overflow:hidden;
  display:grid;place-items:center;
  background:linear-gradient(145deg,var(--azure),var(--azure-fill-2));
  box-shadow:inset 0 1px 0 rgba(255,255,255,.4),0 6px 16px -8px rgba(10,71,168,.9);
  transition:transform .35s var(--ease);
}
.player__art:hover{transform:scale(1.04)}
.player__art img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}

.eq{position:relative;z-index:1;display:flex;align-items:flex-end;gap:3px;height:18px}
.eq i{
  width:3px;height:100%;border-radius:2px;background:#fff;transform-origin:bottom;
  transform:scaleY(.35);animation:eq .85s var(--ease) infinite alternate;animation-play-state:paused;
}
.eq i:nth-child(2){animation-duration:.62s}
.eq i:nth-child(3){animation-duration:1.02s}
.eq i:nth-child(4){animation-duration:.74s}
.player.is-playing .eq i{animation-play-state:running}
@keyframes eq{from{transform:scaleY(.22)}to{transform:scaleY(1)}}

/* Верхняя строка и название */
.player__row{display:flex;align-items:center;gap:14px}
.player__meta{flex:1;display:flex;flex-direction:column;line-height:1.25;min-width:0}
.player__meta strong{
  font-size:14px;font-weight:600;letter-spacing:-.01em;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
}
.player__meta span{
  font-size:12px;color:var(--ink-2);
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
}

/* Перемотка отдельной строкой во всю ширину плашки */
.player__line{display:flex;align-items:center;gap:10px}
.player__t{
  font-family:'JetBrains Mono',ui-monospace,monospace;font-size:10px;color:var(--ink-2);
  flex:0 0 auto;min-width:26px;text-align:center;font-variant-numeric:tabular-nums;
}
.player__seek{
  position:relative;flex:1;height:4px;border-radius:4px;cursor:pointer;
  background:color-mix(in srgb,var(--ink) 14%,transparent);
  transition:height .2s var(--ease);
}
.player__seek::before{content:"";position:absolute;inset:-8px 0;cursor:pointer}
.player__seekFill{
  position:relative;display:block;height:100%;width:0;border-radius:4px;
  background:linear-gradient(90deg,var(--azure),var(--azure-fill));
}
.player__seekFill i{
  position:absolute;right:0;top:50%;width:11px;height:11px;border-radius:50%;
  background:#fff;box-shadow:0 1px 5px rgba(8,40,80,.5),0 0 0 1px color-mix(in srgb,var(--azure) 50%,transparent);
  transform:translate(50%,-50%) scale(0);transition:transform .2s var(--ease);
}
.player__seek:hover,.player__seek:focus-visible{height:6px}
.player__seek:hover .player__seekFill i,
.player__seek:focus-visible .player__seekFill i{transform:translate(50%,-50%) scale(1)}

/* Транспорт */
.player__controls{display:flex;align-items:center;gap:4px;flex:0 0 auto}
.player__btn{
  width:34px;height:34px;border-radius:50%;display:grid;place-items:center;font-size:15px;
  color:var(--ink);border:1px solid transparent;
  transition:background .25s var(--ease),color .25s var(--ease),transform .25s var(--ease),box-shadow .3s var(--ease);
}
.player__btn:hover{background:color-mix(in srgb,var(--azure) 12%,transparent);color:var(--azure-ink)}
.player__btn:active{transform:scale(.92)}

.player__btn--skip{width:30px;height:30px;font-size:13px;color:var(--ink-2)}
.player__btn--skip:hover{color:var(--ink);background:transparent;transform:scale(1.12)}

.player__btn--play{
  width:40px;height:40px;font-size:16px;margin-inline:3px;
  background:var(--azure-fill);color:#fff;
  box-shadow:0 6px 18px -6px color-mix(in srgb,var(--azure) 90%,transparent);
}
.player__btn--play:hover{
  background:var(--azure-fill);color:#fff;transform:scale(1.07);
  box-shadow:0 8px 24px -6px color-mix(in srgb,var(--azure) 95%,transparent),
             0 0 26px -4px color-mix(in srgb,var(--azure) 70%,transparent);
}

/* Служебное: громкость, анимации, свернуть */
.player__extra{
  display:flex;align-items:center;gap:2px;flex:0 0 auto;
  padding-left:12px;margin-left:2px;border-left:1px solid var(--line);
}
.player__vol{display:flex;align-items:center;gap:2px}
.player__range{
  width:0;opacity:0;height:4px;border-radius:4px;appearance:none;cursor:pointer;
  background:color-mix(in srgb,var(--ink) 14%,transparent);
  transition:width .35s var(--ease),opacity .35s var(--ease);
}
.player__vol:hover .player__range,.player__range:focus-visible{width:64px;opacity:1}
.player__range::-webkit-slider-thumb{
  appearance:none;width:11px;height:11px;border-radius:50%;background:var(--azure-fill);
  border:2px solid var(--surface);box-shadow:0 1px 4px rgba(8,40,80,.4);cursor:pointer;
}
.player__range::-moz-range-thumb{
  width:11px;height:11px;border-radius:50%;background:var(--azure-fill);
  border:2px solid var(--surface);cursor:pointer;
}

.player__btn--motion{
  width:auto;padding:0 11px;height:30px;gap:6px;border-radius:var(--r-pill);
  display:flex;align-items:center;font-size:12px;font-weight:600;color:var(--ink-2);
}
.player__btn--motion[aria-pressed="true"]{
  color:var(--azure-ink);background:color-mix(in srgb,var(--azure) 10%,transparent);
}
.player__btn--motion[aria-pressed="false"]{opacity:.55}

.player__collapse{
  width:28px;height:28px;border-radius:50%;display:grid;place-items:center;color:var(--ink-2);
  transition:background .25s var(--ease),transform .35s var(--ease),color .25s var(--ease);
}
.player__collapse:hover{background:color-mix(in srgb,var(--azure) 12%,transparent);color:var(--azure-ink)}

/* Свёрнутое состояние: обложка и кнопка */
/* Свёрнутая плашка — такой же скруглённый прямоугольник, как обложка.
   Радиус 22px = 14px у обложки + 8px отступа, углы получаются концентричными. */
.player[data-open="false"]{width:auto;gap:0;padding:8px;border-radius:22px}
.player[data-open="false"] .player__row{gap:8px}
.player[data-open="false"] .player__meta,
.player[data-open="false"] .player__line,
.player[data-open="false"] .player__vol,
.player[data-open="false"] .player__btn--skip,
.player[data-open="false"] .player__btn--motion{display:none}
.player[data-open="false"] .player__extra{padding-left:0;margin-left:0;border-left:0}
.player[data-open="false"] .player__collapse{transform:rotate(180deg)}

/* Пока звук не разрешён браузером, кнопка зовёт нажать */
.player.is-armed .player__btn--play{animation:armed 2s var(--ease) infinite}
@keyframes armed{
  0%,100%{box-shadow:0 0 0 0 color-mix(in srgb,var(--azure) 55%,transparent)}
  50%{box-shadow:0 0 0 10px color-mix(in srgb,var(--azure) 0%,transparent)}
}

@media (max-width:760px){
  .player{left:12px;right:12px;bottom:12px;width:auto;gap:11px;padding:10px 12px}
  /* свёрнутая плашка не растягивается на всю ширину */
  .player[data-open="false"]{right:auto;width:auto}
  .player__btn--motion span{display:none}
  .player__btn--motion{padding:0;width:30px;justify-content:center}
  .player__vol{display:none}
  #prevBtn{display:none}
  .player__extra{padding-left:8px}
}
html.no-motion .eq i{animation:none;transform:scaleY(.45)}
html.no-motion .player.is-armed .player__btn--play{animation:none}

/* =========================================================
   Скидка: карточка переворачивается и отдаёт промокод
   ========================================================= */
.promo{background:var(--bg-2)}
.promo__shell{display:grid;grid-template-columns:1.05fr .95fr;gap:clamp(32px,6vw,80px);align-items:center}
.promo__text p{margin-top:24px;color:var(--ink-2);max-width:48ch}
.promo__list{margin-top:26px;display:flex;flex-direction:column;gap:11px}
.promo__list li{
  position:relative;padding-left:26px;color:var(--ink-2);font-size:14.5px;
}
.promo__list li::before{
  content:"";position:absolute;left:0;top:.55em;width:9px;height:9px;border-radius:3px;
  background:var(--azure);
}

.promo__stage{perspective:1400px}
.promo__card{
  position:relative;width:100%;max-width:420px;margin-inline:auto;aspect-ratio:1.62;
  transform-style:preserve-3d;transition:transform .9s var(--ease);
}
.promo__card.is-open{transform:rotateY(180deg)}

.promo__face{
  position:absolute;inset:0;border-radius:var(--r-card);overflow:hidden;
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:12px;
  backface-visibility:hidden;-webkit-backface-visibility:hidden;
  box-shadow:0 40px 90px -40px rgba(10,71,168,.6);
}

/* Лицевая сторона */
.promo__face--front{
  color:#fff;cursor:pointer;
  background:
    radial-gradient(120% 90% at 85% 0%,rgba(255,255,255,.2),transparent 58%),
    linear-gradient(150deg,var(--azure-fill) 0%,var(--azure-fill-2) 55%,#072F73 100%);
  transition:transform .4s var(--ease),box-shadow .4s var(--ease);
}
.promo__face--front:hover{
  transform:translateY(-4px);
  box-shadow:0 50px 110px -42px rgba(10,71,168,.75),
             0 0 46px -10px color-mix(in srgb,var(--azure) 70%,transparent);
}
.promo__shine{
  position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(115deg,transparent 38%,rgba(255,255,255,.28) 50%,transparent 62%);
  transform:translateX(-120%);
}
.promo__card:not(.is-open) .promo__shine{animation:shine 4.5s var(--ease) infinite}
@keyframes shine{0%,62%{transform:translateX(-120%)}86%,100%{transform:translateX(120%)}}

.promo__badge{
  font-size:clamp(3rem,7vw,4.6rem);font-weight:800;letter-spacing:-.05em;line-height:1;
}
.promo__badge i{font-style:normal;font-size:.45em;vertical-align:super;margin-left:.06em}
.promo__cta{
  font-size:13.5px;font-weight:600;color:rgba(255,255,255,.96);
  padding:9px 18px;border-radius:var(--r-pill);border:1px solid rgba(255,255,255,.45);
}

/* Обратная сторона */
.promo__face--back{
  transform:rotateY(180deg);
  background:var(--surface);border:1px solid var(--line);
}
.promo__label{
  font-family:'JetBrains Mono',ui-monospace,monospace;font-size:11px;text-transform:uppercase;
  letter-spacing:.2em;color:var(--azure-ink);
}
.promo__code{
  font-family:'JetBrains Mono',ui-monospace,monospace;font-weight:500;
  font-size:clamp(1.3rem,3vw,2rem);letter-spacing:.06em;color:var(--ink);
}
.promo__copy{
  display:inline-flex;align-items:center;gap:8px;margin-top:4px;
  padding:11px 20px;border-radius:var(--r-pill);font-size:14px;font-weight:600;
  background:var(--azure-fill);color:#fff;
  transition:background .3s var(--ease),box-shadow .35s var(--ease);
}
.promo__copy:hover{
  box-shadow:0 0 34px -6px color-mix(in srgb,var(--azure) 75%,transparent);
}
.promo__copy.is-done{background:#1E9E5A}
.promo__note{font-size:12.5px;color:var(--ink-2);text-align:center;padding-inline:20px}

@media (max-width:900px){
  .promo__shell{grid-template-columns:1fr;gap:40px}
}
html.no-motion .promo__card{transition:none}
html.no-motion .promo__shine{animation:none}

/* Кабинет: плашка выше, чтобы не спорить с содержимым */
body.lk .player{bottom:16px;left:16px}
html.no-motion .eq i{animation:none;transform:scaleY(.45)}
html.no-motion .player.is-armed .player__btn--play{animation:none}