/* Reset */
*,*::before,*::after{box-sizing:border-box}html{line-height:1.15;-webkit-text-size-adjust:100%}body{margin:0}h1{margin:.67em 0}img{border-style:none;max-width:100%}a{background-color:transparent}

body {
  background: #111;
  padding: 80px 120px 120px;
  font-family: 'Open Sans', sans-serif;
  font-weight: 400;
  font-size: 32px;
  line-height: 1.35;
  color: var(--album-text, #fff);
  opacity: 0;
  animation: fadein 1.5s .5s forwards;
}
@keyframes fadein { to { opacity: 1 } }

.section-img {
  width: 180px;
  border-radius: 50%;
  margin-bottom: 40px;
  display: block;
  box-shadow: 0 8px 40px rgba(0,0,0,.35);
  mask-image: radial-gradient(circle, #000 69%, transparent 70.5%);
  -webkit-mask-image: radial-gradient(circle, #000 69%, transparent 70.5%);
}
a, a:visited {
  color: inherit;
  position: relative;
  top: 0;
  transition: top .2s ease-out;
}
a:hover {
  top: -4px;
  color: var(--album-text-hover, #fff);
}
h1 {
  font-size: 86px;
  font-weight: 600;
  margin-bottom: 0;
  position: relative;
  left: -6px;
  letter-spacing: -1px;
}
.title {
  font-size: 22px;
  font-weight: 600;
  margin-bottom: 60px;
}
.actions {
  margin-bottom: 0;
  line-height: 1.75;
  padding: 0;
  list-style: none;
}
.actions li { display: inline-block }
.actions li::after { content: " | " }
.actions li:last-child::after { content: "" }
.content { position: relative; z-index: 0 }

/* Album art background */
.album-bg {
  position: fixed;
  inset: 0;
  background: center/cover no-repeat;
  filter: blur(12px) saturate(1.2) brightness(.85);
  transform: scale(1.3);
  opacity: 0;
  transition: opacity 1.8s ease;
  z-index: -1;
  will-change: opacity;
}
#albumBg { z-index: -2 }

/* TV effects */
.tv-effects {
  position: fixed;
  inset: 0;
  z-index: 1;
  pointer-events: none;
}
.tv-grain {
  position: absolute;
  inset: -50%;
  filter: url(#grain);
  opacity: .2;
  animation: grainShift .15s steps(6) infinite;
  will-change: transform;
}
@keyframes grainShift {
  0%   { transform: translate(0, 0) }
  25%  { transform: translate(-2%, -3%) }
  50%  { transform: translate(3%, 1%) }
  75%  { transform: translate(-1%, 2%) }
  100% { transform: translate(2%, -1%) }
}
.tv-scanlines {
  position: absolute;
  inset: 0;
  height: 200%;
  background: repeating-linear-gradient(to bottom, transparent, transparent 3px, rgba(0,0,0,.022) 3px, rgba(0,0,0,.022) 6px);
  animation: scanScroll 225s linear infinite;
  will-change: transform;
}
@keyframes scanScroll { to { transform: translateY(-50%) } }
.tv-effects::after {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 10;
  background: radial-gradient(ellipse at center, transparent 50%, rgba(0,0,0,.08) 60%, rgba(0,0,0,.2) 72%, rgba(0,0,0,.4) 85%, rgba(0,0,0,.65) 100%);
}

h1, .title, .actions, .now-playing { filter: blur(0.4px) }

/* Now Playing */
.now-playing {
  position: fixed;
  bottom: 24px;
  right: 24px;
  z-index: 0;
  opacity: 0;
  transform: translateY(16px);
  transition: opacity .4s ease, transform .4s ease;
  pointer-events: none;
  color: inherit;
}
.now-playing.visible {
  opacity: 1;
  transform: none;
  pointer-events: auto;
}
.now-playing-inner {
  display: flex;
  align-items: center;
  gap: 8px;
  transition: opacity .3s ease;
}
.np-icon {
  flex-shrink: 0;
  display: flex;
  align-items: flex-start;
  align-self: flex-start;
  padding-top: 2px;
  margin-left: 2px;
}
.np-info { min-width: 0; max-width: 250px }
.np-track, .np-artist {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.np-track { font-size: 13px; font-weight: 600 }
.np-artist { font-size: 12px }

/* Responsive */
@media (max-width: 900px) {
  .actions { max-width: 400px }
  .actions li:nth-child(2)::after { content: "" }
}
@media (max-width: 700px) {
  body { padding: 60px }
  .section-img { width: 160px }
  .now-playing {
    position: static;
    margin-top: 40px;
    pointer-events: auto;
  }
  .now-playing.visible { transform: none }
}
@media (max-width: 460px) {
  body { padding: 40px }
  h1 { font-size: 70px }
}
@media (max-width: 420px) {
  .section-img { width: 128px }
  h1 { font-size: 50px }
  .title { font-size: 16px; margin-bottom: 40px }
  .actions li { display: block }
  .actions li::after { content: "" }
}