/* A complete phrase travels horizontally with light, on its own clock. */
.light-lyrics { display: none; }
.light-lyrics[data-state] {
  --light-duration: 10.8s;
  --light-play-state: paused;
  --light-travel-start: -32px;
  --light-travel-end: 64px;
  display: block;
  position: absolute;
  z-index: 2;
  top: 52%;
  left: 48%;
  right: var(--gutter);
  color: #f5f2e9;
}
.light-lyrics[data-state="running"] { --light-play-state: running; }
.is-story-ready .light-lyrics { opacity: calc(1 - var(--story-landing, 0)); }
.light-lyrics-meta { display: flex; align-items: center; justify-content: space-between; gap: 16px; position: relative; z-index: 2; }
.light-lyrics-meta a { color: #c4cdd8; font-size: .625rem; letter-spacing: .13em; padding: 6px 0; }
.light-lyrics-meta a > span:first-child { color: #d0bb8d; }
.light-lyrics-meta a:hover { color: #fff; }
.light-lyrics-meta button { display: grid; place-items: center; min-width: 38px; min-height: 38px; border: 1px solid #d8e3ec30; border-radius: 50%; color: #d9e5ee; background: #08121b38; font: inherit; font-size: .75rem; cursor: pointer; }
.light-lyrics-meta button:hover { border-color: #e7d7ad99; background: #17263380; }
/* Let the transparent light edges extend past the text area without a hard crop. */
.light-lyrics-stage { position: relative; min-height: 300px; margin: 12px -40px 0; overflow: visible; pointer-events: none; user-select: none; }
.light-lyric { display: none; position: absolute; inset: 16px 40px auto; }
.light-lyric.is-current { display: block; animation: light-passage var(--light-duration) linear both; animation-play-state: var(--light-play-state); }
.light-lyric p { position: relative; z-index: 1; width: calc(100% - var(--light-travel-end)); color: #fffdf7; font-family: var(--serif); font-weight: 400; font-size: clamp(1.375rem, 2.35vw, 2.125rem); line-height: 1.8; letter-spacing: .055em; text-shadow: 0 2px 5px #020914, 0 0 20px #020914, 0 0 2px #020914; }
.light-lyric span { display: block; overflow-wrap: anywhere; }
.light-lyric p > span:first-child::first-letter { color: #ff5753; font-size: 1.9em; font-weight: 500; line-height: 1; text-shadow: 0 2px 5px #160408, 0 0 22px #fa373b55; }
.light-lyric span + span { margin-top: .4em; }
.light-lyric span:lang(en) { letter-spacing: .015em; }
.light-lyric.is-current p { animation: light-words var(--light-duration) linear both; animation-play-state: var(--light-play-state); }
.light-lyric::before, .light-lyric::after { content: ''; position: absolute; z-index: 0; left: -70%; top: 1.8em; width: 150%; pointer-events: none; }
.light-lyric::before { height: 82px; background: radial-gradient(ellipse closest-side, #fff0bdb8, #9bd9ff80 32%, #9bd9ff26 65%, transparent 100%); filter: blur(10px); }
.light-lyric::after { top: calc(1.8em + 34px); height: 14px; background: radial-gradient(ellipse closest-side, #fffbeaff, #d6eeffb3 24%, #e0bc7e40 55%, transparent 100%); filter: blur(2px); }
.light-lyric.is-current::before, .light-lyric.is-current::after { animation: light-ribbon var(--light-duration) linear both; animation-play-state: var(--light-play-state); }
@keyframes light-passage {
  0% { opacity: 0; }
  12%, 74% { opacity: 1; }
  100% { opacity: 0; }
}
@keyframes light-words {
  0% { transform: translate3d(var(--light-travel-start), 0, 0); }
  100% { transform: translate3d(var(--light-travel-end), 0, 0); }
}
@keyframes light-ribbon {
  0% { opacity: 0; transform: translate3d(-30%, 0, 0) scaleX(.65); }
  18%, 58% { opacity: 1; }
  100% { opacity: 0; transform: translate3d(120%, 0, 0) scaleX(1.15); }
}
/* Keep larger passages above the signature on shorter desktop screens. */
@media (min-width: 701px) and (max-height: 950px) {
  .light-lyrics[data-state] { top: 14%; left: var(--gutter); right: 47%; }
}
@media (max-width: 700px) {
  .light-lyrics[data-state] { --light-travel-start: -18px; --light-travel-end: 32px; top: 2%; left: var(--gutter); right: var(--gutter); }
  .light-lyrics-stage { min-height: 245px; margin: 0 -20px; }
  .light-lyric { inset: 9px 20px auto; }
  .light-lyric p { font-size: clamp(1.125rem, 4.9vw, 1.375rem); line-height: 1.7; letter-spacing: .035em; }
  .light-lyric span + span { margin-top: .25em; }
}
@media (prefers-reduced-motion: reduce), (max-height: 540px), print {
  .light-lyrics { display: none !important; }
}