/* Lyric film (public/lyric-film.js). A dark stage inside the warm-paper page: the song is the room's only light.
   Layout follows the stage's own shape: tall = portrait (centred lines), wide = landscape (left-set, cinematic). */
.lf {
  --cream: #fcf8f3; --rose: #f2c9b4; --name: #ffd9b0;
  --lf-heat: 0; --base: .28; --lf-y: 0px;
  position: relative; isolation: isolate; overflow: hidden;
  width: 100%; height: clamp(520px, 84svh, 860px);
  container-type: size; container-name: film;
  background: radial-gradient(130% 95% at 50% 42%, #6b2539 0%, #451628 46%, #250a14 100%);
  color: var(--cream); font-family: "Labrada", Georgia, serif;
  -webkit-user-select: none; user-select: none; touch-action: manipulation;
}
@media (min-width: 760px) { .lf { height: min(84vh, calc(min(100vw - 48px, 1180px) * 0.5625)); min-height: 540px; border-radius: 14px; } }
@media (orientation: landscape) and (max-height: 560px) { .lf { height: 100svh; min-height: 0; border-radius: 0; } }
.lf[data-sec="chorus"], .lf[data-sec="hook"] { --base: .52; }
.lf[data-sec="bridge"] { --base: .40; }
.lf[data-sec="pre-chorus"] { --base: .38; }
.lf[data-sec="coda"] { --base: .6; }

/* Stage light: one warm pool behind the words, brighter in choruses, swelling when their name is sung. */
.lf-light { position: absolute; inset: 0; z-index: -1; pointer-events: none; }
.lf-light i { position: absolute; border-radius: 50%; filter: blur(48px); will-change: opacity, transform; }
.lf-light i:first-child {
  left: 50%; top: 50%; width: 120cqmin; height: 90cqmin; translate: -50% -50%;
  background: radial-gradient(closest-side, rgba(242, 165, 128, .62), rgba(176, 62, 88, .28) 55%, transparent 72%);
  opacity: calc(var(--base) + var(--lf-heat) * .55); scale: calc(1 + var(--lf-heat) * .14);
  transition: opacity 1.4s cubic-bezier(.16, 1, .3, 1);
}
.lf-light i:last-child {
  left: 18%; top: 78%; width: 70cqmin; height: 60cqmin;
  background: radial-gradient(closest-side, rgba(119, 46, 68, .9), transparent 70%);
  opacity: .7; animation: lf-drift 22s ease-in-out infinite alternate; animation-play-state: paused;
}
.lf.is-playing .lf-light i:last-child { animation-play-state: running; }
@keyframes lf-drift { to { transform: translate(55cqw, -48cqh) scale(1.25); } }
.lf-grain { position: absolute; inset: 0; z-index: -1; pointer-events: none; opacity: .09; mix-blend-mode: overlay;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E"); }

/* The lines. Only the sung line, the one before and the one after are in view; the rest wait off-stage. */
.lf-track { position: absolute; inset: 13% 7% 13%; opacity: 0; transition: opacity .6s ease;
  -webkit-mask-image: linear-gradient(transparent, #000 22%, #000 78%, transparent); mask-image: linear-gradient(transparent, #000 22%, #000 78%, transparent); }
.lf.is-timed.is-started .lf-track { opacity: 1; }
.lf-line {
  margin: 0; padding: .16em 0; text-align: center; text-wrap: balance;
  font-size: clamp(25px, 8cqw, 52px); line-height: 1.16; letter-spacing: -.02em;
  transform: translateY(var(--lf-y)) scale(var(--s, .9)); transform-origin: 50% 50%;
  opacity: 0; filter: blur(var(--b, 0px));
  transition: transform .8s cubic-bezier(.16, 1, .3, 1), opacity .6s ease, filter .6s ease;
}
.lf-line.is-cur { --s: 1; opacity: 1; }
.lf-line.is-prev { --s: .84; --b: 1.2px; opacity: .34; }
.lf-line.is-next { --s: .86; opacity: .48; }
.lf-line.is-past { --s: .8; opacity: 0; }
.lf-coda { font-style: italic; }

/* A word fills from left to right as it is sung (clip-path over a lit copy of the word). */
.lf-w { position: relative; display: inline-block; white-space: nowrap; color: rgba(252, 248, 243, .26); --p: 0; }
.lf-w::after { content: attr(data-w); position: absolute; inset: 0 auto auto 0; color: var(--cream);
  clip-path: inset(-25% calc((1 - var(--p)) * 100%) -25% -2%); text-shadow: 0 0 22px rgba(255, 214, 190, .28); }
.lf-line.is-prev .lf-w::after, .lf-line.is-past .lf-w::after { text-shadow: none; }
.lf-w.is-name { font-style: italic; }
.lf-w.is-name::after { color: var(--name); text-shadow: 0 0 calc(16px + var(--lf-heat) * 30px) rgba(255, 186, 140, calc(.35 + var(--lf-heat) * .45)); }
.lf-line.is-cur .lf-w.is-name.is-sung { scale: calc(1 + var(--lf-heat) * .07); transition: scale .5s cubic-bezier(.16, 1, .3, 1); }

/* Long instrumental gaps: three slow lights under the last line, so the stage never feels stuck. */
.lf-dots { position: absolute; left: 50%; bottom: 16%; display: flex; gap: 10px; translate: -50% 0; opacity: 0; transition: opacity .6s ease; }
.lf-dots i { width: 7px; height: 7px; border-radius: 50%; background: var(--rose); animation: lf-breathe 1.8s ease-in-out infinite; }
.lf-dots i:nth-child(2) { animation-delay: .3s; } .lf-dots i:nth-child(3) { animation-delay: .6s; }
.lf.is-gap .lf-dots { opacity: .8; }
@keyframes lf-breathe { 0%, 100% { opacity: .25; transform: scale(.8); } 50% { opacity: 1; transform: scale(1.15); } }

/* Title card: before the song starts and after it ends. */
.lf-card { position: absolute; inset: 0; display: grid; place-content: center; justify-items: center; gap: 2px; padding: 24px; text-align: center;
  transition: opacity .7s cubic-bezier(.16, 1, .3, 1), transform .7s cubic-bezier(.16, 1, .3, 1); }
.lf.is-started:not(.is-ended) .lf-card { opacity: 0; transform: scale(.97); pointer-events: none; }
.lf-lead { margin: 0; font: 500 clamp(14px, 3.6cqw, 17px)/1.3 "Albert Sans", sans-serif; letter-spacing: .02em; color: var(--rose); }
.lf-name { margin: 2px 0 0; font-size: clamp(54px, 19cqw, 128px); line-height: .98; letter-spacing: -.035em; font-style: italic; color: var(--cream);
  text-shadow: 0 10px 40px rgba(20, 4, 10, .45); overflow-wrap: anywhere; }
.lf-from { margin: 10px 0 0; font: 400 clamp(16px, 4.2cqw, 20px)/1.3 "Albert Sans", sans-serif; color: rgba(252, 248, 243, .78); }
.lf-big { margin-top: clamp(22px, 6cqh, 44px); width: 92px; height: 92px; border: 0; border-radius: 50%; display: grid; place-items: center; cursor: pointer;
  background: var(--cream); color: #582034; box-shadow: 0 18px 40px -14px rgba(0, 0, 0, .6), 0 0 0 10px rgba(252, 248, 243, .1);
  transition: transform .2s cubic-bezier(.16, 1, .3, 1), box-shadow .3s ease; }
.lf-big:hover { transform: translateY(-2px); box-shadow: 0 22px 44px -14px rgba(0, 0, 0, .65), 0 0 0 14px rgba(252, 248, 243, .12); }
.lf-big:active { transform: scale(.97); }
.lf-big svg { width: 34px; height: 34px; fill: currentColor; stroke: none; margin-left: 4px; }
.lf.is-ended .lf-big svg { fill: none; stroke: currentColor; stroke-width: 2; margin: 0; }
/* When the song ends the lines step back and only the end card speaks. */
.lf.is-ended .lf-track, .lf.is-ended .lf-dots { opacity: 0; transition-duration: .5s; }
.lf-cta { margin-top: 18px; min-height: 52px; padding: 14px 26px; border: 0; border-radius: 7px; cursor: pointer; background: var(--rose); color: #582034;
  font: 700 16px/1.2 "Albert Sans", sans-serif; transition: transform .2s cubic-bezier(.16, 1, .3, 1), background .2s ease; }
.lf-cta:hover { background: var(--cream); transform: translateY(-2px); }
.lf-hint { margin: 16px 0 0; font: 400 14px/1.4 "Albert Sans", sans-serif; color: rgba(252, 248, 243, .62); }

/* Plain words: shown while the timing is being prepared (first open) or if it cannot be made. */
.lf-static { position: absolute; inset: 9% 8% 17%; overflow: auto; display: none; padding: 8px 4px 40px; text-align: center; -webkit-user-select: text; user-select: text;
  font-size: clamp(19px, 5cqw, 26px); line-height: 1.5; color: rgba(252, 248, 243, .9); scrollbar-color: rgba(252, 248, 243, .3) transparent; }
.lf-static h3 { margin: 22px 0 6px; font: 600 12px/1.2 "Albert Sans", sans-serif; letter-spacing: .14em; text-transform: uppercase; color: var(--rose); }
.lf-static p { margin: 0; }
.lf.is-started:not(.is-timed):not(.is-ended) .lf-static { display: block; }

/* Controls: a quiet bar that rests out of sight while the song plays. */
.lf-bar { position: absolute; left: 0; right: 0; bottom: 0; display: flex; align-items: center; gap: 12px; padding: 28px 14px max(14px, env(safe-area-inset-bottom));
  background: linear-gradient(transparent, rgba(22, 6, 12, .62)); opacity: 0; transition: opacity .3s ease; pointer-events: none; }
.lf.is-started .lf-bar { opacity: 1; pointer-events: auto; }
.lf.is-playing:not(.is-awake) .lf-bar { opacity: 0; pointer-events: none; transition-duration: .9s; }
.lf-btn { flex: none; width: 44px; height: 44px; border: 0; border-radius: 50%; display: grid; place-items: center; cursor: pointer; background: rgba(252, 248, 243, .12); color: var(--cream);
  transition: background .2s ease; }
.lf-btn:hover { background: rgba(252, 248, 243, .22); }
.lf-btn svg { width: 22px; height: 22px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.lf-pp svg { fill: currentColor; stroke: none; }
.lf-seek { position: relative; flex: 1; height: 44px; cursor: pointer; touch-action: none; }
.lf-seek::before, .lf-seek i { content: ""; position: absolute; left: 0; right: 0; top: 50%; height: 3px; margin-top: -1.5px; border-radius: 2px; }
.lf-seek::before { background: rgba(252, 248, 243, .22); }
.lf-seek i { background: var(--cream); transform-origin: 0 50%; transform: scaleX(0); }
.lf-time { flex: none; min-width: 74px; text-align: right; font: 500 13px/1 "Albert Sans", sans-serif; font-variant-numeric: tabular-nums; color: rgba(252, 248, 243, .8); }
.lf :focus-visible { outline: 3px solid var(--rose); outline-offset: 3px; }
.lf ::selection { background: rgba(255, 214, 190, .35); color: #fff; }

/* Landscape: wide stage, words set left like a film title sequence, the name card to the side. */
@container film (min-aspect-ratio: 6/5) {
  .lf-track { inset: 14% 30% 14% 8%; }
  .lf-line { text-align: left; transform-origin: 0 50%; font-size: clamp(28px, 4.6cqw, 74px); }
  .lf-dots { left: 8%; translate: 0 0; }
  .lf-name { font-size: clamp(64px, 12cqw, 150px); }
  .lf-static { inset: 10% 22% 18%; }
}

/* Full screen (real, or the stage filling the window where full screen is not allowed). */
.lf:fullscreen, .lf.is-max { position: fixed; inset: 0; z-index: 2147483000; width: 100vw; height: 100dvh; min-height: 0; border-radius: 0; }
.lf:-webkit-full-screen { width: 100vw; height: 100vh; }
html.lf-locked, html.lf-locked body { overflow: hidden; }

@media (prefers-reduced-motion: reduce) {
  .lf-line, .lf-card, .lf-light i, .lf-big { transition: opacity .3s ease !important; }
  .lf-line { --s: 1 !important; filter: none; }
  .lf-light i:last-child, .lf-dots i { animation: none; }
}