/* =========================================================
   MEDIA – iOS LOCKSCREEN STYLE
========================================================= */
.media-lock{
  width:360px;
  padding:22px;
  border-radius:26px;
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:16px;
}

/* COVER */
.media-cover img{
  width:220px;
  height:220px;
  border-radius:18px;
  object-fit:cover;
  box-shadow:0 20px 50px rgba(0,0,0,.45);
}

/* INFO */
.media-info{
  text-align:center;
}

.media-title{
  font-size:18px;
  font-weight:600;
}

.media-artist{
  font-size:14px;
  color:var(--muted);
  margin-top:4px;
}

/* WAVE */
.media-wave{
  display:flex;
  gap:4px;
  height:26px;
}

.media-wave span{
  width:4px;
  background:var(--accent);
  border-radius:2px;
  animation: wave 1.2s infinite ease-in-out;
}

.media-wave span:nth-child(2){ animation-delay:.1s }
.media-wave span:nth-child(3){ animation-delay:.2s }
.media-wave span:nth-child(4){ animation-delay:.3s }
.media-wave span:nth-child(5){ animation-delay:.4s }

@keyframes wave{
  0%,100%{ height:6px; opacity:.4 }
  50%{ height:26px; opacity:1 }
}

/* CONTROLS */
.media-controls{
  margin-top:6px;
  font-size:42px;
  color:var(--accent);
}