body.neon-preview-mode {
  --preview-glow-core: rgba(249, 252, 255, 0.98);
  --preview-glow-near: rgba(154, 212, 255, 0.28);
  --preview-glow-far: rgba(110, 178, 255, 0.1);
}

body.neon-preview-mode #trackTitle,
body.neon-preview-mode #lyrics {
  color: transparent;
  text-shadow: none;
  filter: none;
}

body.neon-preview-mode #lyrics {
  position: relative;
}

body.neon-preview-mode #trackTitle,
body.neon-preview-mode #lyrics,
body.neon-preview-mode #homeTrigger {
  -webkit-text-stroke: 0 transparent;
}

.neon-mirror {
  position: fixed;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  pointer-events: none;
  z-index: 11;
  padding: 40px;
  text-transform: lowercase;
  will-change: transform, opacity;
}

.neon-title {
  z-index: 10;
  font-family: var(--lyrics-font-family);
  font-size: var(--lyrics-title-size);
  font-weight: 300;
  letter-spacing: 0.05em;
}

.neon-lyrics {
  font-family: var(--lyrics-font-family);
  font-size: var(--lyrics-body-size);
  line-height: var(--lyrics-line-height);
  font-weight: 300;
  letter-spacing: 0.05em;
}

.neon-stack {
  display: grid;
  gap: 0.08em;
  justify-items: center;
  width: min(1040px, 100%);
}

.neon-line {
  position: relative;
  display: inline-block;
  color: var(--preview-glow-core);
  white-space: pre-wrap;
  text-shadow:
    0 0 1px rgba(255, 255, 255, 0.94),
    0 0 4px rgba(240, 248, 255, 0.22),
    0 0 12px var(--preview-glow-near),
    0 0 26px var(--preview-glow-far);
  filter:
    drop-shadow(0 0 3px rgba(245, 251, 255, 0.12))
    drop-shadow(0 0 9px rgba(170, 220, 255, 0.1));
  animation: neonPreviewPulse 6.6s ease-in-out infinite, neonPreviewFlicker 8.4s linear infinite;
}

.neon-line::after {
  content: attr(data-text);
  position: absolute;
  inset: 0;
  pointer-events: none;
}

.neon-line::after {
  color: rgba(255, 255, 255, 0.78);
  opacity: 0.14;
  transform: translateX(-0.015em);
  filter: blur(5px);
}

.neon-title .neon-line {
  letter-spacing: 0.07em;
}

.neon-lyrics .neon-line {
  max-width: min(1000px, 100%);
}

@keyframes neonPreviewPulse {
  0%, 100% {
    opacity: 0.96;
  }

  50% {
    opacity: 1;
  }
}

@keyframes neonPreviewFlicker {
  0%, 42%, 44%, 71%, 73%, 100% {
    opacity: 1;
  }

  43% {
    opacity: 0.93;
  }

  72% {
    opacity: 0.89;
  }
}

@media (max-width: 700px) {
  .neon-mirror {
    padding: 28px;
  }
}