.interface-light-source {
  position: fixed;
  top: 0;
  left: 0;
  width: 640px;
  height: 640px;
  background: radial-gradient(circle, rgba(255,255,255,0.075), rgba(255,255,255,0.025) 28%, transparent 68%);
  pointer-events: none;
  z-index: 3;
  opacity: 0;
  will-change: transform, opacity;
}

html:not(.is-page-ready) .interface-light-source { visibility: hidden; }

.has-interface-light .logo-svg,
.has-interface-light .formkit-powered-by-convertkit {
  filter: drop-shadow(0 0 4px rgba(255,255,255,calc(var(--ui-light, 0) * 0.4)))
    drop-shadow(0 0 12px rgba(255,255,255,calc(var(--ui-light, 0) * 0.18)));
}

.has-interface-light .nav-link::before,
.has-interface-light .social-link::before,
.has-interface-light .music-release-title::before,
.has-interface-light .not-found-home-link::before,
.has-interface-light .join-submit-label::before,
.has-interface-light .join-title::before,
.has-interface-light .join-success-title::before,
.has-interface-light .join-reset::before,
.has-interface-light.modern-track .track-platform-label::before,
.has-interface-light.modern-track .track-title-glyph::before {
  content: attr(data-light-label);
  position: absolute;
  inset: -14px;
  padding: 14px;
  color: #fff;
  text-shadow: 0 0 7px rgba(255,255,255,0.75), 0 0 17px rgba(255,255,255,0.32);
  opacity: var(--ui-light, 0);
  mask-image: radial-gradient(circle 88px at calc(var(--light-x, 0px) + 14px) calc(var(--light-y, 0px) + 14px), #000 15%, transparent 100%);
  pointer-events: none;
}

.has-interface-light .join-reset::before { display: grid; place-items: center; }

.has-interface-light.modern-track .track-title-glyph::before {
  content: attr(data-light-glyph);
  mask-image: radial-gradient(circle 88px at calc(var(--light-x, 0px) - var(--glyph-x, 0px) + 14px) calc(var(--light-y, 0px) - var(--glyph-y, 0px) + 14px), #000 15%, transparent 100%);
}

.has-interface-light .nav-link::after,
.has-interface-light .social-link::after,
.has-interface-light .music-release-title::after,
.has-interface-light .not-found-home-link::after {
  inset: -12px -18px;
  width: auto;
  height: auto;
  background: radial-gradient(ellipse, rgba(255,255,255,0.055), transparent 70%);
  opacity: var(--ui-light, 0);
  transition: none;
  pointer-events: none;
}

.has-interface-light .not-found-home-link::after {
  content: "";
  position: absolute;
}

.has-interface-light .music-release-title { position: relative; }

.has-interface-light .music-release-cover-link::before,
.has-interface-light.modern-track .track-cover-wrap::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  box-shadow:
    0 0 24px rgba(var(--cover-light-color, 128, 128, 128), 0.55),
    0 0 52px rgba(var(--cover-light-color, 128, 128, 128), 0.3),
    0 0 88px rgba(var(--cover-light-color, 128, 128, 128), 0.12);
  opacity: var(--ui-light, 0);
  transform: var(--music-cover-transform, var(--track-cover-transform));
  transition: transform 0.22s ease-out;
}

.is-light-active:is(.music-release-cover-link, .modern-track .track-cover-wrap)::before { will-change: transform, opacity; }
.music-release-cover-link:focus-visible::before { opacity: 1; }

html.is-page-transitioning :is(.music-release-cover-link, .modern-track .track-cover-wrap)::before {
  opacity: 0;
  transition: opacity 0.18s ease-out, transform 0.22s ease-out;
}

.ticker-light-window {
  display: none;
  position: absolute;
  inset: 0;
  overflow: hidden;
  pointer-events: none;
  opacity: 0;
  mask-image: radial-gradient(circle var(--reveal-radius, 0px) at var(--reveal-x, 0px) var(--reveal-y, 0px), #000 84%, transparent 100%);
}

.ticker-light-track { position: absolute; }
.ticker-light-window .ticker-text { color: var(--text-main); -webkit-text-stroke: 0; }

@media (min-width: 601px) and (hover: hover) and (pointer: fine) {
  .has-interface-light .ticker-light-window { display: block; }
  .has-interface-light .ticker-link:hover .ticker-text {
    color: transparent;
    -webkit-text-stroke: 2px var(--text-main);
  }
  .has-interface-light .ticker-link:focus-visible .ticker-text {
    color: var(--text-main);
    -webkit-text-stroke: 0;
  }
}

@media (hover: none), (pointer: coarse) {
  #ticker-link .ticker-text { color: var(--text-main); -webkit-text-stroke: 0; }
}