.platform-links{
  display:flex;
  align-items:center;
  justify-content:center;
  flex-wrap:wrap;
  gap:.65rem;
  width:min(100%, 820px);
  margin:1.65rem auto 0;
}

.platform-link{
  --platform-color:var(--pink);
  position:relative;
  isolation:isolate;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:.55rem;
  min-height:2.8rem;
  padding:.65rem .9rem;
  overflow:hidden;
  border:1px solid var(--border);
  border-radius:999px;
  background:var(--surface);
  color:var(--text);
  font-size:.73rem;
  font-weight:700;
  line-height:1;
  text-decoration:none;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.07);
  backdrop-filter:blur(var(--glass-blur)) saturate(var(--glass-saturate));
  -webkit-backdrop-filter:blur(var(--glass-blur)) saturate(var(--glass-saturate));
  transition:transform .25s ease, border-color .25s ease, background-color .25s ease, box-shadow .25s ease;
}

.platform-link::before{
  content:"";
  position:absolute;
  inset:0;
  z-index:-1;
  background:linear-gradient(120deg, transparent 15%, color-mix(in srgb, var(--platform-color) 28%, transparent), transparent 85%);
  opacity:0;
  transform:translateX(-35%);
  transition:opacity .25s ease, transform .4s ease;
}

.platform-link svg,
.platform-link img{
  width:1.15rem;
  height:1.15rem;
  flex:0 0 auto;
  fill:currentColor;
  object-fit:contain;
  transition:transform .3s cubic-bezier(.2,.8,.2,1), color .25s ease;
}

.platform-link:hover{
  transform:translateY(-4px) scale(1.02);
  border-color:color-mix(in srgb, var(--platform-color) 68%, transparent);
  background:color-mix(in srgb, var(--platform-color) 12%, var(--surface));
  box-shadow:0 12px 28px color-mix(in srgb, var(--platform-color) 22%, transparent), inset 0 1px 0 rgba(255,255,255,.13);
}

.platform-link:hover::before{
  opacity:1;
  transform:translateX(35%);
}

.platform-link:hover svg,
.platform-link:hover img{
  color:var(--platform-color);
  transform:scale(1.15) rotate(-5deg);
}

.platform-tidal img,
.platform-apple img{ filter:invert(1) brightness(1.08); }
:root[data-theme="light"] .platform-tidal img,
:root[data-theme="light"] .platform-apple img{ filter:none; }
@media (prefers-color-scheme:light){
  :root:not([data-theme]) .platform-tidal img,
  :root:not([data-theme]) .platform-apple img{ filter:none; }
}

.platform-soundcloud{ --platform-color:#ff5500; }
.platform-spotify{ --platform-color:#1ed760; }
.platform-tidal{ --platform-color:#55d7ff; }
.platform-apple{ --platform-color:#fa57c1; }
.platform-itunes{ --platform-color:#a75cff; }
.platform-deezer{ --platform-color:#a855f7; }

@media (max-width:640px){
  .platform-links{
    justify-content:flex-start;
    flex-wrap:nowrap;
    width:100%;
    max-width:100%;
    margin-top:1.35rem;
    padding:.25rem .15rem .8rem;
    overflow-x:auto;
    overscroll-behavior-inline:contain;
    scroll-snap-type:x proximity;
    scrollbar-width:none;
  }

  .platform-links::-webkit-scrollbar{ display:none; }

  .platform-link{
    flex:0 0 auto;
    scroll-snap-align:start;
  }
}