/* Bright initials cling to the glass; the rest of each phrase trickles below. */
.has-lyric-rain { isolation: isolate; }
.lyric-rain-backdrop, .lyric-rain {
  position: fixed;
  inset: 0;
  pointer-events: none;
  overflow: hidden;
  z-index: -1;
}
.lyric-rain-backdrop {
  background: linear-gradient(180deg, rgba(8, 13, 21, .76), rgba(8, 13, 21, .91)),
    var(--rain-artwork) center / cover no-repeat;
}
.lyric-rain-backdrop::after {
  content: '';
  position: absolute;
  inset: 0;
  background: radial-gradient(ellipse at 55% 30%, transparent, rgba(8, 13, 21, .6));
}
.lyric-rain { display: none; }
.lyric-rain[data-state] { display: block; }
.lyric-drop {
  position: absolute;
  top: var(--y);
  left: var(--x);
  width: 0;
  font-family: var(--serif);
  font-weight: 300;
  color: #edf6ff;
  opacity: 0;
  animation: lyric-drop-life var(--life) var(--age) linear both;
  animation-play-state: paused;
}
.lyric-drop-head {
  position: relative;
  display: block;
  width: max-content;
  font-size: min(var(--head-size), 22vw);
  line-height: 1.1;
  color: #f3f9ff;
  text-shadow: 0 0 3px #fff8, 0 0 24px #a5d6ff60, 0 5px 35px #06111d;
  animation: lyric-head-slip var(--life) var(--age) linear both;
  animation-play-state: paused;
}
.lyric-drop-head.is-red {
  color: #ff666b;
  text-shadow: 0 0 3px #ffb3b380, 0 0 24px #ff233a70, 0 5px 35px #26040c;
}
.lyric-drop-tail {
  position: absolute;
  top: calc(min(var(--head-size), 22vw) * 1.04);
  left: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  transform: translateX(-50%);
  font-size: var(--trail-size);
  line-height: 1.45;
  text-shadow: 0 1px 7px #020914, 0 0 12px #a6d4fa38;
}
.lyric-drop-tail > span {
  display: block;
  white-space: nowrap;
  opacity: 0;
  animation: lyric-stream-flow calc(var(--life) - var(--token-delay)) calc(var(--age) + var(--token-delay)) linear both;
  animation-play-state: paused;
}
.lyric-drop-tail > span[lang="en"] { letter-spacing: .015em; }
.lyric-rain[data-state="running"] :is(.lyric-drop, .lyric-drop-head, .lyric-drop-tail > span) { animation-play-state: running; }
@keyframes lyric-drop-life {
  0% { opacity: 0; }
  4%, 78% { opacity: 1; }
  100% { opacity: 0; }
}
@keyframes lyric-head-slip {
  0% { transform: translate3d(-50%, -6px, 0) scale(.84); opacity: 0; }
  4% { transform: translate3d(-50%, 0, 0) scale(1); opacity: 1; }
  18% { transform: translate3d(-50%, 0, 0); opacity: 1; }
  48% { transform: translate3d(-50%, 24px, 0); opacity: .9; }
  100% { transform: translate3d(-50%, 140px, 0); opacity: .3; }
}
@keyframes lyric-stream-flow {
  0% { transform: translate3d(0, -26px, 0); opacity: 0; }
  7% { opacity: var(--trail-opacity); }
  72% { opacity: var(--trail-opacity); }
  100% { transform: translate3d(0, 160px, 0); opacity: .12; }
}
.has-lyric-rain main, .has-lyric-rain .footer { position: relative; }
.has-lyric-rain .site-header { background: rgba(8, 13, 21, .85); }
.has-lyric-rain .single-hero {
  padding-top: 28px;
  padding-bottom: 100px;
  min-height: min(760px, 85svh);
}
.has-lyric-rain .single-hero > div:last-child {
  position: relative;
  z-index: 0;
  padding: 28px;
  margin: -28px;
  background: linear-gradient(135deg, #080d15ed, #080d15d4);
}
.has-lyric-rain .single-hero .album-cover { box-shadow: 0 24px 100px #0008; }
.lyric-rain-controls { display: flex; align-items: center; flex-wrap: wrap; gap: 14px 28px; margin-top: 35px; }
.lyric-rain-controls .text-link { margin: 0; font-size: .875rem; }
.lyric-rain-toggle {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  border: 0;
  padding: 8px 0;
  background: transparent;
  color: #c6d4e5;
  cursor: pointer;
  font-size: .8125rem;
}
.lyric-rain-toggle[hidden] { display: none; }
.lyric-rain-toggle:hover { color: #fff; }
.lyric-rain-toggle-icon { width: 9px; height: 10px; border-inline: 2px solid currentColor; }
.lyric-rain-toggle[aria-pressed="true"] .lyric-rain-toggle-icon {
  width: 0;
  height: 0;
  border: 5px solid transparent;
  border-right: 0;
  border-left: 8px solid currentColor;
}
.single-lyrics { padding: 0 var(--gutter) 88px; }
.lyric-rain-window { display: none; min-height: max(520px, 72svh); position: relative; border-top: 1px solid #ffffff20; }
.lyric-rain[data-state] ~ main .lyric-rain-window { display: block; }
.lyric-rain-window > p { padding-top: 24px; display: flex; justify-content: space-between; gap: 24px; font-size: .6875rem; letter-spacing: .18em; color: #a3b9d1; }
.lyric-sheet { border-block: 1px solid #ffffff30; background: rgba(8, 13, 21, .66); }
.lyric-sheet[open] { background: rgba(8, 13, 21, .94); }
.lyric-sheet summary { cursor: pointer; display: flex; align-items: center; gap: 24px; padding: 25px 28px; list-style: none; }
.lyric-sheet summary::-webkit-details-marker { display: none; }
.lyric-sheet summary .section-kicker { color: #a3b9d1; font-size: .6875rem; }
.lyric-sheet-indicator { margin-left: auto; font-size: 1.25rem; transition: transform .25s; }
.lyric-sheet[open] .lyric-sheet-indicator { transform: rotate(45deg); }
.lyric-sheet-text { max-width: 800px; margin: 0 auto; padding: 24px 28px 64px; font-family: var(--serif); font-weight: 300; font-size: clamp(.9375rem, 1.4vw, 1.125rem); line-height: 2.3; }
.lyric-sheet-text p + p { margin-top: 32px; }
.lyric-sheet-text span { display: block; overflow-wrap: anywhere; }
.has-lyric-rain .single-info { background: rgba(13, 21, 33, .94); color: var(--paper); border-block: 1px solid #ffffff20; }
.has-lyric-rain .single-info .section-kicker,
.has-lyric-rain .single-facts dt,
.has-lyric-rain .single-service-note { color: #b7c7da; }
.has-lyric-rain .single-facts > div { border-color: #ffffff25; }
.has-lyric-rain .single-album { border-color: #ffffff25; }
.has-lyric-rain .single-album p:not(.section-kicker) { color: #c6d4e5; }
.has-lyric-rain .single-info .text-link:hover { color: #a3c0ff; }
.has-lyric-rain .related-section { background: rgba(8, 13, 21, .65); }
.has-lyric-rain .footer { background: rgba(8, 13, 21, .9); }
@media (max-width: 700px) {
  .has-lyric-rain .single-hero { min-height: 0; padding-top: 0; padding-bottom: 64px; }
  .has-lyric-rain .single-hero > div:last-child { padding: 18px; margin: -18px; }
  .lyric-drop-tail { font-size: min(var(--trail-size), 17px); }
  .single-lyrics { padding-bottom: 64px; }
  .lyric-sheet summary { gap: 16px; padding: 22px 16px; }
  .lyric-sheet-text { padding: 16px 18px 40px; }
}
@media (prefers-reduced-motion: reduce) {
  .lyric-rain, .lyric-rain-toggle, .lyric-rain-window { display: none !important; }
}