/* Пилюля «Звук мотора» на фото и её морф в круг с выхлопом (static/exhaust.js) */
:root{--snd-pill:36px;--snd-inset:14px;--snd-inset-hero:16px;--snd-circle:88px;--snd-circle-hero:112px;--snd-stroke:1.5px}

.snd-pill{position:absolute;left:var(--snd-inset);bottom:var(--snd-inset);display:inline-flex;align-items:center;justify-content:center;height:var(--snd-pill);padding:0 14px 0 11px;border:0;border-radius:calc(var(--snd-pill) / 2);background:rgba(17,18,21,.74);color:#F4F5F6;font-family:var(--disp);font-size:12px;letter-spacing:.1em;text-transform:uppercase;white-space:nowrap;cursor:pointer;-webkit-tap-highlight-color:transparent;transition:transform 160ms cubic-bezier(.23,1,.32,1)}
/* зона нажатия 44 px при видимых 36 */
.snd-pill::before{content:"";position:absolute;inset:-4px;border-radius:inherit}
.snd-pill::after{content:"";position:absolute;inset:0;border-radius:inherit;border:1px solid rgba(245,196,0,.7);pointer-events:none;transition:opacity 120ms cubic-bezier(.23,1,.32,1)}
.snd-pill:active:not(.open){transform:scale(.97)}
.snd-pill:focus-visible{outline:2px solid var(--yellow,#F5C400);outline-offset:3px}
.sp-label{display:inline-flex;align-items:center;gap:8px;transition:opacity 120ms cubic-bezier(.23,1,.32,1)}
.sp-ico{width:17px;height:17px;flex-shrink:0;color:var(--yellow,#F5C400)}
.sp-eq{display:none;align-items:flex-end;gap:2.5px;height:13px;flex-shrink:0}
.sp-eq i{width:2.5px;height:100%;background:currentColor;border-radius:1px;transform-origin:bottom;transform:scaleY(.4);animation:sp-eq 1s cubic-bezier(.45,0,.55,1) infinite}
.sp-eq i:nth-child(2){animation-delay:.18s}.sp-eq i:nth-child(3){animation-delay:.36s}.sp-eq i:nth-child(4){animation-delay:.54s}
@keyframes sp-eq{0%,100%{transform:scaleY(.35)}50%{transform:scaleY(1)}}
/* играет без круга (короткий тап на телефоне или машина без фото выхлопа) — как в приложении */
.snd-pill.on:not(.open){background:var(--yellow,#F5C400);color:#101010}
.snd-pill.on:not(.open)::after{opacity:0}
.snd-pill.on:not(.open) .sp-ico{display:none}
.snd-pill.on:not(.open) .sp-eq{display:inline-flex}

/* морф: подложка кнопки уходит мгновенно, .sp-fill той же подложкой повторяет пилюлю и режется в круг */
.snd-pill.open{background:transparent}
.snd-pill.open::after,.snd-pill.open .sp-label{opacity:0}
.sp-fx{position:absolute;left:0;bottom:0;visibility:hidden;pointer-events:none}
.snd-pill.open .sp-fx{visibility:visible}
/* без backdrop-filter: Chrome рисует размытие на весь прямоугольник, игнорируя clip-path */
.sp-fill{position:absolute;inset:0;background:rgba(17,18,21,.74);pointer-events:auto}
.sp-disc,.sp-ring{position:absolute;left:0;top:0;border-radius:50%;box-sizing:border-box}
.sp-disc{overflow:hidden;border:var(--snd-stroke) solid var(--yellow,#F5C400);background:#111;box-shadow:0 3px 8px rgba(0,0,0,.35)}
.sp-disc img{display:block;width:100%;height:100%;object-fit:cover}
.sp-ring{border:var(--snd-stroke) solid var(--yellow,#F5C400);opacity:0}

/* страница машины: пилюля в углу главного фото; удержание не скроллит, не выделяет, не зовёт меню */
.gallery .snd-pill{left:var(--snd-inset-hero);bottom:var(--snd-inset-hero)}
.snd-pill[data-ex]{touch-action:none;-webkit-user-select:none;user-select:none;-webkit-touch-callout:none}

/* каталог: фото-обёртка режет круг по своим границам */
.cc-media{position:relative;overflow:hidden;border-radius:6px;margin-bottom:16px}
.cc-media>.cc-img{margin-bottom:0}
@media (hover:hover){
  .cc-media .snd-pill{opacity:0;transform:scale(.94);transform-origin:0 100%;pointer-events:none;transition:opacity 150ms cubic-bezier(.23,1,.32,1),transform 150ms cubic-bezier(.23,1,.32,1)}
  .car-card:hover .cc-media .snd-pill,.cc-media .snd-pill:focus-visible,.cc-media .snd-pill.on,.cc-media .snd-pill.open{opacity:1;transform:none;pointer-events:auto;transition-duration:200ms}
  .car-card:hover .cc-media .snd-pill:active:not(.open){transform:scale(.97)}
}
/* сенсорный экран: наведения нет — всегда видна круглая иконка без подписи */
@media (hover:none){
  .cc-media .snd-pill{width:var(--snd-pill);padding:0}
  .cc-media .snd-pill [data-i="snd_btn"]{display:none}
}
@media (prefers-reduced-motion:reduce){
  .sp-eq i{animation:none;transform:scaleY(.7)}
  .cc-media .snd-pill,.car-card:hover .cc-media .snd-pill{transform:none}
}