<div class="div-music-surface">
  <p class="div-music-text">The record opens with eleven seconds of room tone — the sound of the studio itself, breathing, before the first note is allowed to arrive.</p>
  <div class="div-music-v1" role="separator">
    <span class="div-music-eq"><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i></span>
  </div>
  <p class="div-music-text">Side two was recorded live in a single take, the engineer refusing to stop the tape even when the bassist's string broke four bars from the end.</p>
  <div class="div-music-v2" role="separator">
    <svg viewBox="0 0 476 24" fill="none" preserveAspectRatio="none" aria-hidden="true">
      <path class="div-music-wave" d="M0 12 L40 12 L52 4 L64 20 L76 8 L88 16 L100 12 L150 12 L162 2 L174 22 L186 6 L198 18 L210 12 L280 12 L292 5 L304 19 L316 9 L328 15 L340 12 L410 12 L422 3 L434 21 L446 7 L458 17 L476 12" stroke="#15d18a" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
    </svg>
  </div>
  <p class="div-music-text">The mastering took longer than the recording — six weeks spent moving a single frequency band a fraction of a decibel, listening, then moving it back.</p>
  <div class="div-music-v3" role="separator"><span class="div-music-vinyl"></span></div>
  <p class="div-music-text">When the test pressing arrived, the band listened to it in a parked car, because the car was where, the singer said, music was actually heard.</p>
</div>

@keyframes div-mus-rise { from { transform: scaleY(0); } to { transform: scaleY(1); } }
@keyframes div-mus-draw { to { stroke-dashoffset: 0; } }
@keyframes div-mus-spin { from { transform: scale(0) rotate(-90deg); opacity: 0; } to { transform: scale(1) rotate(0); opacity: 1; } }
.div-music-surface {
  background: #0e1014;
  padding: 36px 40px;
  border-radius: 12px;
}
.div-music-text {
  font-family: system-ui, -apple-system, sans-serif;
  font-size: 14px;
  line-height: 1.82;
  color: #8a93a0;
  margin: 0;
}
/* v1 — rising equalizer bars */
.div-music-v1 { margin: 32px 0; }
.div-music-eq {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  height: 26px;
}
.div-music-eq i {
  flex: 1;
  margin: 0 1.5px;
  border-radius: 1.5px;
  background: linear-gradient(to top, #15d18a, #15d18a 60%, rgba(21,209,138,0.35));
  transform-origin: bottom;
  animation: div-mus-rise 0.5s cubic-bezier(.34,1.56,.64,1) both;
}
.div-music-eq i:nth-child(odd)  { height: 60%; }
.div-music-eq i:nth-child(even) { height: 100%; }
.div-music-eq i:nth-child(3n)   { height: 38%; }
.div-music-eq i:nth-child(1)  { animation-delay: 0.04s; }
.div-music-eq i:nth-child(2)  { animation-delay: 0.08s; }
.div-music-eq i:nth-child(3)  { animation-delay: 0.12s; }
.div-music-eq i:nth-child(4)  { animation-delay: 0.16s; }
.div-music-eq i:nth-child(5)  { animation-delay: 0.20s; }
.div-music-eq i:nth-child(6)  { animation-delay: 0.24s; }
.div-music-eq i:nth-child(7)  { animation-delay: 0.28s; }
.div-music-eq i:nth-child(8)  { animation-delay: 0.32s; }
.div-music-eq i:nth-child(9)  { animation-delay: 0.36s; }
.div-music-eq i:nth-child(10) { animation-delay: 0.40s; }
.div-music-eq i:nth-child(11) { animation-delay: 0.44s; }
.div-music-eq i:nth-child(12) { animation-delay: 0.48s; }
.div-music-eq i:nth-child(n+13) { animation-delay: 0.52s; }
/* v2 — waveform pulse line */
.div-music-v2 { margin: 32px 0; }
.div-music-v2 svg { display: block; width: 100%; height: 24px; }
.div-music-wave {
  stroke-dasharray: 900;
  stroke-dashoffset: 900;
  animation: div-mus-draw 1.2s cubic-bezier(.16,1,.3,1) both;
}
/* v3 — concentric vinyl-groove rule */
.div-music-v3 {
  display: flex;
  align-items: center;
  margin: 32px 0;
}
.div-music-v3::before,
.div-music-v3::after {
  content: '';
  flex: 1;
  height: 4px;
  /* concentric grooves rendered as repeating lines */
  background: repeating-linear-gradient(to bottom, rgba(21,209,138,0.4) 0 1px, transparent 1px 2px);
}
.div-music-vinyl {
  flex-shrink: 0;
  width: 16px;
  height: 16px;
  margin: 0 14px;
  border-radius: 50%;
  background: radial-gradient(circle, #15d18a 0 3px, #0e1014 3px 4px, #15d18a 4px 5px, #0e1014 5px 6px, #15d18a 6px 7px, #0e1014 7px 8px);
  animation: div-mus-spin 0.55s cubic-bezier(.34,1.56,.64,1) 0.3s both;
}
@media (prefers-reduced-motion: reduce) {
  .div-music-eq i { animation: none; }
  .div-music-wave { animation: none; stroke-dashoffset: 0; }
  .div-music-vinyl { animation: none; }
}