/* Light Strip record. The sleeve is a night photo of the strip itself:
   27 glowing dots on a dark wall, light spilling over the cover.
   The glow around the record uses the same rainbow as the strip. */

.led-art {
  background:
    radial-gradient(120% 70% at 50% 62%, #2a1d22 0%, #120c0e 70%),
    #120c0e;
}
.led-art-bloom {
  position: absolute; left: -10%; right: -10%; top: 40%; height: 46%;
  background: linear-gradient(90deg, #ff6a4d, #ffc46b, #9be36a, #6fd9c4, #6c88ff, #d97cdb, #ff6a4d);
  filter: blur(34px);
  opacity: calc(0.12 + 0.5 * var(--led-level, 1));
  transition: opacity .6s, filter .6s;
}
.led-art-row {
  position: absolute; left: 9%; right: 9%; top: 61%;
  display: flex; justify-content: space-between; align-items: center;
  transform: rotate(-4deg);
}
.led-art-row i {
  width: 5px; height: 5px; border-radius: 50%;
  background: hsl(var(--hue) 100% 72%);
  box-shadow: 0 0 6px 1px hsl(var(--hue) 100% 60%), 0 0 16px 3px hsl(var(--hue) 100% 50% / .55);
  opacity: calc(0.25 + 0.75 * var(--led-level, 1));
  transition: opacity .6s, background .6s, box-shadow .6s;
}
.led-sleeve .sleeve-name { text-shadow: 0 1px 12px rgba(0,0,0,.6); }
.led-sleeve.is-off .led-art-bloom { opacity: .04; }
.led-sleeve.is-off .led-art-row i { background: #3b3236; box-shadow: none; opacity: 1; }

.led-glow {
  background: conic-gradient(from 200deg, #ff7a59, #ffc46b, #9be36a, #7fe0cc, #6c88ff, #e07cdb, #ff7a59);
}
.led-glow.is-wave { animation: spin 14s linear infinite; }