.trackMeta {
  display: grid;
  gap: 6px;
  margin: 14px 0 0;
  color: #8d5374;
  font-size: 14px;
  line-height: 1.55;
}

.trackMeta.compact {
  margin: 12px 0 16px;
  font-size: 13px;
}

.trackMeta strong {
  color: #b44f82;
}

.cuteNoteCard {
  background: linear-gradient(180deg, #fff5fc 0%, #ffeaf7 100%);
}

/* ========================= */
/* VIDEO REVEAL CARD */
/* ========================= */

.videoRevealCard {
  position: relative;
  overflow: hidden;
  isolation: isolate;
  min-height: 350px;
  border-radius: 24px;
  background: transparent !important;
  box-shadow: none !important;
  padding: 0 !important;
}

.albumVideoLayer {
  position: absolute;
  inset: 0;
  z-index: 1;
  overflow: hidden;
  border-radius: 24px;
  opacity: 0;
  visibility: hidden;
  transition:
    opacity 0.22s ease,
    visibility 0s linear 0.22s;
  background: #000;
}

.miniYoutubePlayer {
  position: absolute;
  inset: 0;
}

.miniYoutubePlayer iframe {
  width: 100%;
  height: 100%;
  border: 0;
  display: block;
}

/* local video should fit exactly like youtube cards */
.localVideoLayer {
  position: absolute;
  inset: 0;
  z-index: 1;
  overflow: hidden;
  border-radius: 24px;
  background: #000;
}

.localTrackVideo {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  display: block;
  object-fit: cover;
  object-position: center center;
  border: 0;
  background: #000;
}

/* only the inner box has color */
.albumSurface {
  position: relative;
  z-index: 3;
  min-height: 350px;
  padding: 22px 20px 88px;
  border-radius: 24px;
  transition:
    opacity 0.20s ease,
    visibility 0s linear 0.20s;
}

.videoRevealCard.pink .albumSurface {
  background: linear-gradient(180deg, rgba(255,247,252,0.98), rgba(255,238,248,0.96));
}

.videoRevealCard.lavender .albumSurface {
  background: linear-gradient(180deg, rgba(247,243,255,0.98), rgba(236,228,255,0.96));
}

.videoRevealCard.peach .albumSurface {
  background: linear-gradient(180deg, rgba(255,246,239,0.98), rgba(255,233,222,0.96));
}

.videoRevealCard.blue .albumSurface {
  background: linear-gradient(180deg, rgba(240,248,255,0.98), rgba(224,239,255,0.96));
}

/* remove outer color look */
.videoRevealCard.pink,
.videoRevealCard.lavender,
.videoRevealCard.peach,
.videoRevealCard.blue {
  background: transparent !important;
}

/* keep button above everything */
.musicCardBtn,
.musicCardBtn.alt {
  position: absolute;
  left: 20px;
  bottom: 20px;
  z-index: 10;
  min-width: 92px;
}

/* ========================= */
/* PLAYING STATE */
/* ========================= */

.videoRevealCard.is-playing .albumVideoLayer {
  opacity: 1;
  visibility: visible;
  transition:
    opacity 0.22s ease,
    visibility 0s;
}

.videoRevealCard.is-playing .albumSurface {
  opacity: 0;
  visibility: hidden;
  transition:
    opacity 0.16s ease,
    visibility 0s linear 0.16s;
}

.js-track-toggle.is-playing {
  background: linear-gradient(135deg, #ff7ebb, #ff5da9);
  color: white;
  box-shadow:
    0 0 18px rgba(255, 120, 190, 0.26),
    0 12px 24px rgba(255, 154, 206, 0.16);
}

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

@media (max-width: 760px) {
  .videoRevealCard,
  .albumSurface {
    min-height: 320px;
  }

  .albumSurface {
    padding: 20px 18px 82px;
  }

  .musicCardBtn,
  .musicCardBtn.alt {
    left: 18px;
    bottom: 18px;
    min-width: 84px;
  }
}