/* Vinilo protagonista detrás de la portada de cada canción */
body.track-page-body .track-hero-art{
  overflow:visible;
}

body.track-page-body .track-hero-art .track-vinyl{
  position:absolute;
  z-index:1;
  width:min(94%,590px);
  aspect-ratio:1;
  border-radius:50%;
  opacity:.98;
  transform-origin:50% 50%;
  background:
    radial-gradient(circle at 50% 50%,
      #080705 0 5.5%,
      #d39b24 5.8% 12%,
      #1a1207 12.4% 15.5%,
      transparent 15.8%),
    repeating-radial-gradient(circle at 50% 50%,
      #181713 0 2px,
      #090907 2.6px 5px,
      #24211b 5.5px 6.2px,
      #0a0907 6.8px 9px);
  border:1px solid rgba(255,224,145,.24);
  box-shadow:
    0 44px 90px rgba(0,0,0,.72),
    0 0 0 2px rgba(255,224,145,.035),
    0 0 54px rgba(219,164,38,.08);
  animation:track-main-vinyl-spin 8.5s linear infinite;
  will-change:transform;
}

body.track-page-body .track-hero-art .track-vinyl::before{
  content:"";
  position:absolute;
  inset:0;
  border-radius:50%;
  pointer-events:none;
  background:
    conic-gradient(from 22deg,
      transparent 0 8%,
      rgba(255,255,255,.10) 10%,
      transparent 13% 31%,
      rgba(246,200,78,.055) 34%,
      transparent 37% 64%,
      rgba(255,255,255,.055) 68%,
      transparent 72% 100%),
    radial-gradient(circle at 50% 50%,transparent 0 64%,rgba(255,255,255,.035) 65%,transparent 68%);
  mix-blend-mode:screen;
}

body.track-page-body .track-hero-art .track-vinyl::after{
  content:"";
  position:absolute;
  left:50%;
  top:50%;
  width:13%;
  aspect-ratio:1;
  border-radius:50%;
  transform:translate(-50%,-50%);
  background:
    radial-gradient(circle,#090805 0 16%,#e1ad37 18% 58%,#9a6814 60% 64%,#20170a 66% 100%);
  border:1px solid rgba(255,232,173,.35);
  box-shadow:0 0 0 5px rgba(0,0,0,.18),0 0 24px rgba(225,173,55,.18);
}

body.track-page-body .track-hero-art .track-vinyl > span{
  position:absolute;
  inset:7%;
  border-radius:50%;
  border:1px solid rgba(255,255,255,.025);
  box-shadow:
    inset 0 0 0 1px rgba(255,255,255,.015),
    inset 0 0 38px rgba(255,255,255,.018);
}

body.track-page-body .track-hero-art::after{
  content:"";
  position:absolute;
  z-index:0;
  right:-3%;
  top:50%;
  width:68%;
  aspect-ratio:1;
  border-radius:50%;
  transform:translateY(-48%);
  background:radial-gradient(circle,rgba(232,176,45,.18) 0,rgba(232,176,45,.055) 42%,transparent 72%);
  filter:blur(42px);
  pointer-events:none;
}

body.track-page-body .track-cover{
  z-index:3;
}

body.track-page-body .track-cover-footer{
  z-index:4;
}

body.track-page-body:has(.track-player.is-playing) .track-hero-art .track-vinyl{
  animation-duration:2.8s;
  box-shadow:
    0 48px 100px rgba(0,0,0,.76),
    0 0 0 2px rgba(255,224,145,.06),
    0 0 72px rgba(219,164,38,.14);
}

@keyframes track-main-vinyl-spin{
  from{transform:translate(28%,4%) rotate(0deg)}
  to{transform:translate(28%,4%) rotate(360deg)}
}

@media(max-width:900px){
  body.track-page-body .track-hero-art .track-vinyl{width:min(91%,520px)}
  @keyframes track-main-vinyl-spin{
    from{transform:translate(25%,4%) rotate(0deg)}
    to{transform:translate(25%,4%) rotate(360deg)}
  }
}

@media(max-width:640px){
  body.track-page-body .track-hero-art .track-vinyl{
    width:min(88%,430px);
    opacity:.94;
  }
  @keyframes track-main-vinyl-spin{
    from{transform:translate(22%,3%) rotate(0deg)}
    to{transform:translate(22%,3%) rotate(360deg)}
  }
}

@media(prefers-reduced-motion:reduce){
  body.track-page-body .track-hero-art .track-vinyl{
    animation:none!important;
    transform:translate(28%,4%) rotate(18deg);
  }
}