/* ======================================================
   MUSIC ROW PIANO — RECORD PLAYER WIDGET
   piano-widget.css v3
====================================================== */

@import url('https://fonts.googleapis.com/css2?family=Barlow+Condensed:wght@400;600;700&family=Share+Tech+Mono&display=swap');

/* ── Widget mount ── */
.piano-widget {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 0;
  text-align: center;
}

/* ================================================================
   TURNTABLE
================================================================ */

.turntable {
  width: 100%;
  max-width: 210px;
  position: relative;
  margin-bottom: 14px;
}

.platter-base {
  width: 148px;
  height: 148px;
  margin: 0 auto;
  position: relative;
}

/* Felt mat */
.platter-felt {
  position: absolute; inset: 0; border-radius: 50%;
  background: radial-gradient(circle at 40% 35%, #1e1e1e, #111);
  box-shadow:
    0 0 0 3px rgba(255,255,255,0.03),
    0 8px 28px rgba(0,0,0,0.7),
    inset 0 0 0 1px rgba(255,255,255,0.025);
}

/* ── Record ── */
.record {
  position: absolute; inset: 4px; border-radius: 50%;
}

.record-disc {
  position: absolute; inset: 0; border-radius: 50%;
  background: radial-gradient(circle at 36% 30%, #272727, #0a0a0a 75%);
  box-shadow: inset 0 0 32px rgba(0,0,0,0.9);
}

.record-grooves {
  position: absolute; inset: 0; border-radius: 50%;
  background: repeating-radial-gradient(
    circle at center,
    transparent 0px, transparent 2.5px,
    rgba(0,0,0,0.18) 2.5px, rgba(0,0,0,0.18) 3px
  );
  opacity: 0.7; pointer-events: none;
}

.record-sheen {
  position: absolute; inset: 0; border-radius: 50%;
  background: conic-gradient(from 100deg, transparent 0deg, rgba(255,255,255,0.025) 50deg, transparent 100deg);
  pointer-events: none;
}

/* Center label */
.record-label {
  position: absolute; top: 50%; left: 50%;
  transform: translate(-50%, -50%);
  width: 42px; height: 42px; border-radius: 50%;
  background: radial-gradient(circle at 40% 35%, #c8c8de, #9090a8);
  border: 2px solid rgba(0,0,0,0.35);
  box-shadow: inset 0 1px 4px rgba(255,255,255,0.25), 0 2px 10px rgba(0,0,0,0.6);
  transition: background 0.4s ease, box-shadow 0.4s ease;
  display: flex; align-items: center; justify-content: center;
}

.record-label::after {
  content: '';
  width: 7px; height: 7px; border-radius: 50%;
  background: rgba(0,0,0,0.92);
  box-shadow: inset 0 1px 2px rgba(0,0,0,1);
}

/* Label color by version — driven by data-version on .demo-card */
.demo-card[data-version="mix"]     .record-label,
.piano-widget[data-version="mix"]  .record-label {
  background: radial-gradient(circle at 40% 35%, #c8c8de, #9090a8);
  box-shadow: inset 0 1px 4px rgba(255,255,255,0.25), 0 2px 10px rgba(0,0,0,0.6);
}
.demo-card[data-version="pianoUp"]     .record-label,
.piano-widget[data-version="pianoUp"]  .record-label {
  background: radial-gradient(circle at 40% 35%, #fde077, #d4a82a);
  box-shadow: inset 0 1px 4px rgba(255,255,255,0.35), 0 2px 14px rgba(252,203,59,0.4);
}
.demo-card[data-version="solo"]     .record-label,
.piano-widget[data-version="solo"]  .record-label {
  background: radial-gradient(circle at 40% 35%, #f47878, #cc3333);
  box-shadow: inset 0 1px 4px rgba(255,255,255,0.25), 0 2px 14px rgba(240,80,80,0.35);
}

/* Spin */
@keyframes vinyl-spin { to { transform: rotate(360deg); } }
.piano-widget.is-playing .record-disc {
  animation: vinyl-spin 1.8s linear infinite;
}

/* Keep spin uninterrupted when version changes */
.record-disc.spinning {
  animation: vinyl-spin 1.8s linear infinite;
}

/* Record swap animation — label only, never touches disc so spin is uninterrupted */
@keyframes swap-in {
  from { opacity: 0; transform: translate(-50%, -50%) scale(0.8); }
  to   { opacity: 1; transform: translate(-50%, -50%) scale(1); }
}
.record.swap-in .record-label {
  animation: swap-in 0.3s cubic-bezier(0.22, 1, 0.36, 1);
}

/* ── Tonearm ── */
.tonearm-pivot {

  position: absolute; right: 8px; top: 8px;
  width: 14px; height: 14px; border-radius: 50%;
  background: radial-gradient(circle at 40% 35%, #c8c4be, #888480);
  box-shadow: 0 2px 6px rgba(0,0,0,0.6), inset 0 1px 2px rgba(255,255,255,0.3);
  z-index: 10;
}

.tonearm {
  position: absolute; right: 13px; top: 13px;
  width: 3px; height: 86px;
  transform-origin: top center;
  transform: rotate(15deg);
  transition: transform 0.85s cubic-bezier(0.25, 0.46, 0.45, 0.94);
  z-index: 9;
}

.tonearm.on-record {
  transform: rotate(30deg);
}

.tonearm-body {
  position: absolute; top: 6px; left: 50%; transform: translateX(-50%);
  width: 3px; height: 100%;
  background: linear-gradient(to bottom, #c8c4be, #888480);
  border-radius: 2px;
  box-shadow: 1px 1px 3px rgba(0,0,0,0.5);
}

.tonearm-head {
  position: absolute; bottom: -6px; left: 50%;
  transform: translateX(-50%) rotate(-20deg);
  width: 10px; height: 16px;
  background: linear-gradient(135deg, #b0aca6, #706c68);
  border-radius: 3px 3px 5px 5px;
  box-shadow: 1px 1px 4px rgba(0,0,0,0.5);
}

.tonearm-head::after {
  content: ''; position: absolute; bottom: -3px; left: 50%; transform: translateX(-50%);
  width: 2px; height: 5px; background: #888; border-radius: 1px;
}

/* ================================================================
   VERSION SELECTOR
================================================================ */

.version-selector {
  display: inline-flex;
  background: rgba(255,255,255,0.04);
  border: 1px solid rgba(255,255,255,0.07);
  border-radius: 20px;
  padding: 2px;
  margin-bottom: 13px;
  gap: 0;
}

.ver-btn {
  height: 24px; padding: 0 10px;
  background: none; border: none; border-radius: 16px;
  font-family: 'Barlow Condensed', sans-serif;
  font-size: 10px; font-weight: 600;
  letter-spacing: 0.06em; text-transform: uppercase;
  color: rgba(255,255,255,0.35);
  cursor: pointer; white-space: nowrap;
  transition: all 0.2s ease;
  -webkit-tap-highlight-color: transparent;
  touch-action: manipulation;
}

.ver-btn:hover:not(.active) { color: rgba(255,255,255,0.7); }

/* Active state inherits version color from card */
.demo-card[data-version="mix"]     .ver-btn[data-version="mix"],
.piano-widget[data-version="mix"]  .ver-btn[data-version="mix"] {
  background: rgba(160,160,192,0.18); color: #c8c8de; font-weight: 700;
}
.demo-card[data-version="pianoUp"]    .ver-btn[data-version="pianoUp"],
.piano-widget[data-version="pianoUp"] .ver-btn[data-version="pianoUp"] {
  background: rgba(252,203,59,0.16); color: #fccb3b; font-weight: 700;
}
.demo-card[data-version="solo"]    .ver-btn[data-version="solo"],
.piano-widget[data-version="solo"] .ver-btn[data-version="solo"] {
  background: rgba(240,100,100,0.16); color: #f47878; font-weight: 700;
}

/* ================================================================
   PROGRESS STRIP
================================================================ */

.progress-strip {
  width: calc(100% - 8px);
  height: 16px; position: relative;
  display: flex; align-items: center;
  cursor: pointer; margin-bottom: 8px;
}

.progress-track {
  position: absolute; left: 0; right: 0; height: 1px;
  background: rgba(255,255,255,0.1); border-radius: 1px;
}

.progress-fill {
  position: absolute; left: 0; height: 1px; width: 0%;
  background: rgba(255,255,255,0.3); border-radius: 1px;
  pointer-events: none;
}

.progress-tick {
  position: absolute; width: 2px; height: 9px;
  background: rgba(255,255,255,0.72); border-radius: 1px;
  transform: translateX(-50%); top: 50%; margin-top: -4.5px;
  left: 0%; pointer-events: none;
  transition: background 0.15s ease;
  box-shadow: 0 0 4px rgba(255,255,255,0.2);
}

.progress-strip:hover .progress-tick {
  background: #fccb3b;
  box-shadow: 0 0 6px rgba(252,203,59,0.45);
}

/* Hidden range input sits over the visual track */
.pw-scrub {
  position: absolute; inset: 0;
  opacity: 0; cursor: pointer;
  width: 100%; height: 100%;
  margin: 0;
  -webkit-appearance: none; appearance: none;
}

/* ================================================================
   BOTTOM ROW
================================================================ */

/* Timestamp sits above the progress strip, left-aligned */
.pw-time {
  width: calc(100% - 8px);
  text-align: left;
  margin-bottom: 4px;
  font-family: 'Share Tech Mono', monospace;
  font-size: 9px; color: rgba(255,255,255,0.22);
  letter-spacing: 0.05em; line-height: 1;
}
.pw-time .pw-current  { color: rgba(255,255,255,0.42); }
.pw-time .pw-sep      { margin: 0 2px; opacity: 0.3; }
.pw-time .pw-duration { color: rgba(255,255,255,0.22); }

/* Bottom row — play button centered alone */
.bottom-row {
  width: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  margin-top: 2px;
}

.bottom-spacer { display: none; }

/* Play button */
.play-btn {
  width: 32px; height: 32px; position: relative;
  display: flex; align-items: center; justify-content: center;
  background: rgba(255,255,255,0.07);
  border: 1.5px solid rgba(255,255,255,0.18);
  border-radius: 50%; cursor: pointer;
  transition: all 0.2s ease;
  -webkit-tap-highlight-color: transparent;
  touch-action: manipulation;
}

.play-btn:hover   { background: rgba(255,255,255,0.13); transform: scale(1.06); }
.play-btn:active  { transform: scale(0.96); }

.play-btn svg {
  width: 12px; height: 12px;
  fill: rgba(255,255,255,0.82);
  position: absolute;
  transition: all 0.22s cubic-bezier(0.4,0,0.2,1);
}

.pw-play-icon  { opacity: 1; transform: scale(1) translateX(1px); }
.pw-pause-icon { opacity: 0; transform: scale(0.4) rotate(90deg); }

.piano-widget.is-playing .pw-play-icon  { opacity: 0; transform: scale(0.4) rotate(-90deg); }
.piano-widget.is-playing .pw-pause-icon { opacity: 1; transform: scale(1); }

.piano-widget.is-playing .play-btn {
  background: rgba(252,203,59,0.12);
  border-color: rgba(252,203,59,0.5);
  box-shadow: 0 0 12px rgba(252,203,59,0.14);
}
.piano-widget.is-playing .play-btn svg { fill: #fccb3b; }

/* ================================================================
   DEMO CARD ACTIVE STATE (glow when playing)
================================================================ */

.product-slider .demo-card:has(.piano-widget.is-playing) {
  box-shadow:
    0 0 0 1.5px rgba(252,203,59,0.5),
    0 0 36px rgba(252,203,59,0.1),
    0 18px 40px rgba(0,0,0,0.35);
  transition: box-shadow 0.35s ease;
}

.product-slider .slick-slide:has(.piano-widget.is-playing) {
  transform: translateY(-3px);
  transition: transform 0.35s ease;
}

.product-slider:has(.piano-widget.is-playing) .slick-slide:not(:has(.piano-widget.is-playing)) {
  opacity: 0.55;
  transition: opacity 0.35s ease;
}

.product-slider .slick-slide:not(:has(.piano-widget.is-playing)):hover {
  opacity: 1 !important;
  transition: opacity 0.2s ease;
}

/* ================================================================
   RESPONSIVE
================================================================ */

@media (max-width: 640px) {
  .platter-base { width: 132px; height: 132px; }
  .tonearm      { height: 76px; }
  .record-label { width: 38px; height: 38px; }
  .record-label::after { width: 6px; height: 6px; }
}