/* ==========================================================================
   Club Copy — shared listening object
   Square sleeve + chrome play bezel. Used on home hero, releases, shelves.
   ========================================================================== */

.listen-sleeve {
  position: relative;
  width: min(420px, 72vw);
  aspect-ratio: 1;
  border-radius: var(--bezel-r, 2px);
  overflow: hidden;
  background: #0a0a0c;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.16),
    0 0 0 1px rgba(200,214,230,.26),
    0 28px 64px rgba(0,0,0,.55);
  isolation: isolate;
}
.listen-sleeve::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  background:
    linear-gradient(135deg, rgba(255,255,255,.14) 0%, transparent 38%, transparent 62%, rgba(0,0,0,.18) 100%);
  opacity: .55;
  mix-blend-mode: soft-light;
}
.listen-sleeve img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.listen-sleeve.is-live {
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.24),
    0 0 0 1px rgba(200,214,230,.46),
    0 32px 72px rgba(0,0,0,.62),
    0 0 48px rgba(186,204,224,.14);
}
.listen-sleeve.is-live::after {
  content: "";
  position: absolute;
  inset: -10%;
  z-index: 0;
  border-radius: inherit;
  pointer-events: none;
  box-shadow: 0 0 0 1px rgba(200,214,230,.18);
  animation: sleevePulse 2.6s var(--ease, cubic-bezier(.22,1,.36,1)) infinite;
  opacity: .55;
}
@keyframes sleevePulse {
  0%, 100% { transform: scale(.96); opacity: .2; }
  50% { transform: scale(1.02); opacity: .55; }
}

.listen-sleeve-hit {
  position: absolute;
  inset: 0;
  z-index: 2;
  display: grid;
  place-items: center;
  cursor: pointer;
  border: 0;
  background: transparent;
  color: #fff;
  -webkit-tap-highlight-color: transparent;
  touch-action: manipulation;
}
.listen-sleeve-hit .listen-glyph {
  width: clamp(56px, 16%, 72px);
  aspect-ratio: 1;
  border-radius: 50%;
  display: grid;
  place-items: center;
  background:
    linear-gradient(180deg, rgba(255,255,255,.28) 0%, rgba(230,236,244,.92) 42%, rgba(176,190,208,.86) 100%);
  color: #111;
  border: 1px solid rgba(255,255,255,.58);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.95),
    inset 0 -1px 0 rgba(80,90,110,.18),
    0 0 0 1px rgba(0,0,0,.28),
    0 12px 28px rgba(0,0,0,.42);
  opacity: .94;
  transform: scale(1);
  transition: opacity .35s var(--ease), transform .35s var(--ease), filter .35s var(--ease), box-shadow .35s var(--ease);
}
.listen-sleeve-hit svg {
  width: 38%;
  height: 38%;
  fill: currentColor;
  margin-left: 6%;
  display: block;
}
.listen-sleeve-hit .glyph-pause,
.listen-sleeve-hit .i-pause { display: none; margin-left: 0; }
.listen-sleeve-hit.is-playing .glyph-play,
.listen-sleeve-hit.is-playing .i-play,
.listen-sleeve-hit.on .glyph-play,
.listen-sleeve-hit.on .i-play { display: none; }
.listen-sleeve-hit.is-playing .glyph-pause,
.listen-sleeve-hit.is-playing .i-pause,
.listen-sleeve-hit.on .glyph-pause,
.listen-sleeve-hit.on .i-pause { display: block; margin-left: 0; }

@media (hover:hover) {
  .listen-sleeve-hit:hover .listen-glyph {
    transform: scale(1.07);
    filter: brightness(1.07);
    box-shadow:
      inset 0 1px 0 #fff,
      0 0 0 1px rgba(0,0,0,.22),
      0 14px 32px rgba(0,0,0,.45),
      0 0 28px rgba(210,226,244,.28);
  }
}
.listen-sleeve-hit:active .listen-glyph { transform: scale(.96); }
.listen-sleeve-hit:focus-visible {
  outline: 2px solid #fff;
  outline-offset: 4px;
}

/* While audio runs, fade the glyph; reveal on hover */
.listen-sleeve.is-playing .listen-sleeve-hit .listen-glyph { opacity: 0; }
@media (hover:hover) {
  .listen-sleeve.is-playing .listen-sleeve-hit:hover .listen-glyph { opacity: .94; }
}

/* Compact shelf / list variant */
.listen-sleeve--sm {
  width: 88px;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.14),
    0 0 0 1px rgba(200,214,230,.3),
    0 8px 18px rgba(0,0,0,.28);
}
.listen-sleeve--sm::before { opacity: .4; }
@media (max-width: 560px) {
  .listen-sleeve--sm { width: 64px; }
}
.listen-sleeve--sm .listen-sleeve-hit .listen-glyph {
  width: 36px;
  opacity: 0;
  transform: translateY(4px);
}
@media (hover:hover) {
  .listen-sleeve--sm:hover .listen-sleeve-hit .listen-glyph,
  .listen-sleeve--sm.is-playing .listen-sleeve-hit .listen-glyph {
    opacity: 1;
    transform: none;
  }
}
@media (hover:none) {
  .listen-sleeve--sm .listen-sleeve-hit .listen-glyph { opacity: 1; transform: none; }
}

@media (prefers-reduced-motion: reduce) {
  .listen-sleeve.is-live::after { animation: none; }
}