.sofi-cover {
  position: relative;
  display: block;
  width: 100%;
  aspect-ratio: 3 / 2;
  overflow: hidden;
  margin: 0;
  isolation: isolate;
  background: #30243c;
  line-height: 0;
}
.sofi-cover__image {
  position: absolute;
  inset: 0;
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
  object-position: center;
  image-rendering: pixelated;
  user-select: none;
  -webkit-user-drag: none;
}
.sofi-cover__effects {
  position: absolute;
  inset: 0;
  overflow: hidden;
  pointer-events: none;
}
.sofi-cover__light {
  position: absolute;
  width: 11%;
  aspect-ratio: 1;
  border-radius: 50%;
  transform: translate(-50%, -50%);
  background: radial-gradient(circle, rgb(255 221 148 / 18%) 0, rgb(255 183 95 / 10%) 32%, transparent 72%);
  animation: sofi-light-breathe 5.8s ease-in-out infinite;
  will-change: opacity, transform;
}
.sofi-cover__light--lantern-right { width: 9%; animation-duration: 6.4s; animation-delay: -2.1s; }
.sofi-cover__light--candle { width: 8%; animation-duration: 4.9s; animation-delay: -1.3s; }
.sofi-cover__light--lantern-left { animation-delay: -3.2s; }
.sofi-cover--loading .sofi-cover__light { animation-duration: 6.4s; }
.sofi-cover--album .sofi-cover__light--candle { animation-duration: 5.7s; }

.sofi-cover__steam {
  position: absolute;
  width: 7%;
  height: 10%;
  transform: translateX(-50%);
}
.sofi-cover__wisp {
  position: absolute;
  bottom: 0;
  left: 50%;
  width: 3%;
  height: 48%;
  border-radius: 100%;
  background: linear-gradient(180deg, transparent, rgb(255 238 212 / 36%), transparent);
  opacity: 0;
  animation: sofi-steam-rise 4.8s ease-in-out infinite;
}
.sofi-cover__wisp--1 { margin-left: -25%; animation-delay: -1.6s; }
.sofi-cover__wisp--2 { height: 62%; animation-delay: -3.2s; }
.sofi-cover__wisp--3 { margin-left: 24%; height: 42%; animation-delay: -.4s; }

.sofi-cover__star {
  position: absolute;
  width: clamp(2px, .28vw, 4px);
  aspect-ratio: 1;
  border-radius: 50%;
  background: #fff0c9;
  box-shadow: 0 0 6px rgb(255 226 164 / 42%);
  opacity: .14;
  animation: sofi-star-twinkle 6.3s ease-in-out infinite;
}
.sofi-cover__star--one { animation-delay: -2.4s; }
.sofi-cover__star--two { animation-duration: 5.1s; animation-delay: -.8s; }
.sofi-cover__star--three { animation-duration: 6.8s; animation-delay: -4.2s; }

@keyframes sofi-light-breathe {
  0%, 100% { opacity: .58; transform: translate(-50%, -50%) scale(.94); }
  50% { opacity: 1; transform: translate(-50%, -50%) scale(1.04); }
}
@keyframes sofi-steam-rise {
  0% { opacity: 0; transform: translate3d(-50%, 12%, 0) scaleY(.75); }
  32% { opacity: .48; }
  100% { opacity: 0; transform: translate3d(-50%, -55%, 0) scaleY(1); }
}
@keyframes sofi-star-twinkle {
  0%, 100% { opacity: .08; transform: scale(.82); }
  50% { opacity: .18; transform: scale(1); }
}

@media (prefers-reduced-motion: reduce) {
  .sofi-cover__light, .sofi-cover__star, .sofi-cover__wisp {
    animation: none !important;
    will-change: auto;
  }
  .sofi-cover__light { opacity: .72; }
  .sofi-cover__star { opacity: .2; }
  .sofi-cover__wisp { display: none; }
}