/* ── Vinyl portrait player (hero disc) ── */

.hero-portrait--vinyl .portrait-frame {
  display: block;
  width: 100%;
  padding: 0;
  cursor: pointer;
  font: inherit;
  color: inherit;
  text-align: inherit;
  -webkit-tap-highlight-color: transparent;
}

.hero-portrait--vinyl .portrait-disc-wrap {
  position: absolute;
  inset: 0;
  border-radius: 50%;
  overflow: hidden;
  transform-origin: center center;
}

.hero-portrait--vinyl.is-spinning .portrait-disc-wrap {
  animation: vinyl-spin 14s linear infinite;
  animation-play-state: paused;
}

.hero-portrait--vinyl.is-spinning.is-playing .portrait-disc-wrap {
  animation-play-state: running;
}

.hero-portrait--vinyl .portrait-disc-wrap::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: 50%;
  pointer-events: none;
  background:
    repeating-radial-gradient(
      circle at center,
      transparent 0,
      transparent 3px,
      rgba(42, 40, 38, 0.04) 3px,
      rgba(42, 40, 38, 0.04) 4px
    );
  opacity: 0.55;
}

.hero-portrait--vinyl .portrait-disc {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 18%;
  display: block;
}

.hero-portrait--vinyl.is-playing:hover .portrait-frame {
  transform: rotate(3deg);
}

.hero-portrait--vinyl .portrait-control {
  position: absolute;
  top: 50%;
  left: 50%;
  z-index: 2;
  transform: translate(-50%, -50%);
  pointer-events: none;
}

.hero-portrait--vinyl .portrait-control-badge {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 3rem;
  height: 3rem;
  border-radius: 50%;
  background: rgba(42, 40, 38, 0.42);
  border: 2px solid rgba(255, 255, 255, 0.92);
  box-shadow: 0 2px 10px rgba(42, 40, 38, 0.28);
}

.hero-portrait--vinyl .portrait-icon {
  position: absolute;
  top: 50%;
  left: 50%;
  color: #fff;
  pointer-events: none;
}

.hero-portrait--vinyl .portrait-icon--play {
  width: 1.2rem;
  height: 1.2rem;
  transform: translate(calc(-50% + 1px), -50%);
}

.hero-portrait--vinyl .portrait-icon--pause {
  width: 1.15rem;
  height: 1.15rem;
  transform: translate(-50%, -50%);
  display: none;
}

.hero-portrait--vinyl.is-playing .portrait-icon--play {
  display: none;
}

.hero-portrait--vinyl.is-playing .portrait-icon--pause {
  display: block;
}

@keyframes vinyl-spin {
  from { transform: rotate(0deg); }
  to { transform: rotate(360deg); }
}

@media (prefers-reduced-motion: reduce) {
  .hero-portrait--vinyl.is-spinning .portrait-disc-wrap {
    animation: none;
  }
}