/* ==========================================================================
   NoSuchProvider.org — media.css
   The stage: a full-bleed animated canvas with the synced lyrics floating
   over it. Built on the tokens in style.css.
   ========================================================================== */

/* ----------------------------------------------------------------- stage */
.stage {
  --energy: 0;                   /* 0–1, set by media-player.js from the audio */
  --progress: 0;                 /* 0–1 playback position */
  --buffered: 0;                 /* 0–1 buffered amount */
  --accent: var(--amber-400);
  position: relative;
  display: block;
  height: clamp(620px, calc(100svh - 5.6rem), 1040px);
  color: var(--text-on-dark);
  background:
    radial-gradient(circle at 88% 8%, rgba(255, 205, 125, .34), rgba(245, 158, 11, .16) 26%, rgba(217, 119, 6, 0) 52%),
    radial-gradient(1100px 520px at 78% -8%, rgba(29, 90, 160, .5), transparent 62%),
    radial-gradient(900px 480px at 8% 108%, rgba(217, 119, 6, .13), transparent 60%),
    linear-gradient(180deg, #0b2140, #061428 62%, #04101f);
  overflow: hidden;
  isolation: isolate;
  border-bottom: 1px solid rgba(125, 170, 230, .16);
}
@supports not (height: 100svh) {
  .stage { height: clamp(620px, calc(100vh - 5.6rem), 1040px); }
}

.stage__canvas {
  position: absolute; inset: 0; z-index: 0;
  width: 100%; height: 100%; display: block;
  pointer-events: none;
  opacity: .95;
}

/* a soft column of shade so the lyrics always clear AA over the animation */
.stage__scrim {
  position: absolute; inset: 0; z-index: 1; pointer-events: none;
  background:
    radial-gradient(52% 42% at 50% 48%, rgba(4, 14, 28, .66), rgba(4, 14, 28, .36) 58%, rgba(4, 14, 28, 0) 80%),
    linear-gradient(180deg, rgba(4, 14, 28, .72) 0%, rgba(4, 14, 28, 0) 22%, rgba(4, 14, 28, 0) 62%, rgba(4, 14, 28, .88) 100%);
}
/* fine film grain, drawn in CSS so it costs nothing per frame */
.stage__grain {
  position: absolute; inset: 0; z-index: 1; pointer-events: none; opacity: .5;
  background-image: radial-gradient(rgba(255, 255, 255, .055) 1px, transparent 1.5px);
  background-size: 3px 3px;
  mix-blend-mode: overlay;
}
/* an amber breath that swells with the music */
.stage::after {
  content: ""; position: absolute; inset: -25%; z-index: 1; pointer-events: none;
  background: radial-gradient(closest-side at 50% 52%, rgba(245, 158, 11, .22), transparent 72%);
  opacity: calc(.05 + var(--energy) * .55);
  transform: scale(calc(.85 + var(--energy) * .3));
  transition: opacity .12s linear, transform .12s linear;
}
.stage[data-style="shouted"] { --accent: #fb7185; }
.stage[data-style="spoken"]  { --accent: #93c5fd; }
.stage[data-style="fading"]  { --accent: #a5b4fc; }
.stage[data-style="building"]{ --accent: #fbbf24; }
.stage[data-style="shouted"]::after { background: radial-gradient(closest-side at 50% 52%, rgba(251, 113, 133, .26), transparent 72%); }

/* ----------------------------------------------------------------- title card */
.stage__card {
  position: absolute; inset: 0; z-index: 4;
  display: grid; place-content: center; justify-items: center; text-align: center;
  padding: clamp(1.2rem, 5vw, 3rem);
  transition: opacity .7s var(--ease-out), transform .7s var(--ease-out), visibility 0s linear .7s;
}
.stage[data-started="1"] .stage__card {
  opacity: 0; visibility: hidden; transform: scale(1.04); pointer-events: none;
}
.stage__eyebrow {
  display: inline-flex; align-items: center; gap: .6rem; margin: 0 0 1.1rem;
  font-size: .74rem; font-weight: 800; letter-spacing: .22em; text-transform: uppercase; color: var(--amber-400);
}
.stage__eyebrow::before, .stage__eyebrow::after {
  content: ""; width: 2rem; height: 1px; background: linear-gradient(90deg, transparent, var(--amber-500));
}
.stage__eyebrow::after { background: linear-gradient(90deg, var(--amber-500), transparent); }
.stage__title {
  margin: 0; color: #fff; font-family: var(--font-serif); font-weight: 800; line-height: .96;
  font-size: clamp(2.7rem, 9vw, 6.5rem); letter-spacing: -.02em;
  text-shadow: 0 12px 44px rgba(0, 0, 0, .6);
}
.stage__sub {
  margin: 1.1rem 0 0; max-width: 30ch; color: #cddcf2;
  font-family: var(--font-serif); font-style: italic; font-size: clamp(1.05rem, 2.4vw, 1.4rem);
}
.stage__meta-line { margin: .5rem 0 0; font-size: .82rem; letter-spacing: .12em; text-transform: uppercase; color: #9db2d3; }
.stage__start { margin-top: 2rem; display: grid; justify-items: center; gap: .8rem; }
.stage__hint { margin: 0; font-size: .8rem; color: #9db2d3; }

/* ----------------------------------------------------------------- lyrics */
.stage__lyrics {
  position: absolute; inset: 0; z-index: 3;
  display: grid; place-items: center;
  padding: clamp(3rem, 7vh, 5rem) 1rem calc(clamp(3rem, 7vh, 5rem) + 118px);
  opacity: 0; transition: opacity .8s var(--ease-out);
  pointer-events: none;
}
.stage[data-started="1"] .stage__lyrics { opacity: 1; pointer-events: auto; }

.lyrics-scroll {
  position: relative; width: min(100%, 40rem); height: 100%;
  overflow: hidden auto; overscroll-behavior: contain;
  scrollbar-width: none; scroll-padding-block: 18%;
  -webkit-mask-image: linear-gradient(180deg, transparent, #000 16%, #000 84%, transparent);
          mask-image: linear-gradient(180deg, transparent, #000 16%, #000 84%, transparent);
}
.lyrics-scroll::-webkit-scrollbar { width: 0; height: 0; }
.lyrics {
  list-style: none; margin: 0; display: flex; flex-direction: column; gap: .5rem;
  padding: 42% 1.4rem max(46%, 15rem);
  text-align: center;
}
.lyrics__sec {
  margin: 1.6rem auto .4rem; display: flex; align-items: center; gap: .7rem;
  font-size: .68rem; font-weight: 800; letter-spacing: .24em; text-transform: uppercase; color: #a9bcd8;
  text-shadow: 0 1px 3px rgba(3, 10, 20, .95);
}
.lyrics__sec::before, .lyrics__sec::after { content: ""; width: 1.6rem; height: 1px; background: rgba(255, 255, 255, .18); }
.lyrics__sec:first-child { margin-top: 0; }
.lyrics__line { margin: 0; }
.lyrics__btn {
  display: block; width: 100%; text-align: center; background: none; border: 0; cursor: pointer; border-radius: 12px;
  font: inherit; font-family: var(--font-serif); font-weight: 700; line-height: 1.28; letter-spacing: -.008em;
  font-size: clamp(1.25rem, 2.9vw, 2.1rem); color: rgba(255, 255, 255, .62);
  padding: .3rem .6rem; text-wrap: balance;
  text-shadow: 0 1px 3px rgba(3, 10, 20, .95), 0 2px 16px rgba(3, 10, 20, .85);
  transition: color .4s ease, transform .5s var(--ease-out), filter .4s ease;
}
.lyrics__btn[disabled] { cursor: default; }
.lyrics__btn:not([disabled]):hover { color: rgba(255, 255, 255, .92); background: rgba(255, 255, 255, .05); }
.lyrics__line.is-past .lyrics__btn { color: rgba(255, 255, 255, .46); }
.lyrics__line.is-active .lyrics__btn {
  color: #fff; transform: scale(1.05);
  filter: drop-shadow(0 2px 26px rgba(0, 0, 0, .8));
}
.lyrics__line.is-active + .lyrics__line .lyrics__btn { color: rgba(255, 255, 255, .74); }

/* per-word sweep, clipped to the glyphs */
.lyrics .w { --p: 0; display: inline; }
.lyrics__line.is-active .w {
  background: linear-gradient(90deg, var(--accent) calc(var(--p) * 100%), rgba(255, 255, 255, .96) calc(var(--p) * 100%));
  -webkit-background-clip: text; background-clip: text; color: transparent;
}
.lyrics__line.is-active .w.is-done { color: var(--accent); background: none; -webkit-text-fill-color: currentColor; }
.lyrics__line.is-active .w.is-hot { filter: drop-shadow(0 0 12px rgba(245, 158, 11, .65)); }

/* the voices of the song */
.lyrics__line[data-style="spoken"] .lyrics__btn { font-style: italic; font-weight: 600; }
.lyrics__line[data-style="shouted"] .lyrics__btn {
  text-transform: uppercase; letter-spacing: .015em; font-family: var(--font-sans); font-weight: 900;
}
.lyrics__line[data-style="shouted"].is-active .lyrics__btn { animation: mediaShout .45s var(--ease-out); }
@keyframes mediaShout {
  0% { transform: scale(1.05) translateX(0); } 22% { transform: scale(1.13) translateX(-4px); }
  46% { transform: scale(1.1) translateX(4px); } 70% { transform: scale(1.07) translateX(-2px); }
  100% { transform: scale(1.05) translateX(0); }
}
.lyrics__line[data-style="chorus"].is-active .lyrics__btn { text-shadow: 0 0 34px rgba(245, 158, 11, .4); }
.lyrics__line[data-style="fading"] .lyrics__btn { font-weight: 500; }
.lyrics__line[data-style="fading"].is-active .lyrics__btn { opacity: .88; }

/* instrumental gaps */
.lyrics__gap {
  --g: 0; display: flex; justify-content: center; align-items: center; gap: .5rem; padding: .7rem .6rem;
  color: #a9bcd8; font-size: .72rem; letter-spacing: .22em; text-transform: uppercase; font-weight: 700;
  opacity: .8; transition: opacity .3s ease, color .3s ease;
}
.lyrics__gap.is-active { opacity: 1; color: var(--amber-400); }
.lyrics__gap i { width: 7px; height: 7px; border-radius: 50%; background: currentColor; opacity: .35; }
.lyrics__gap i:nth-child(1) { opacity: calc(.35 + .65 * clamp(0, var(--g) * 3, 1)); }
.lyrics__gap i:nth-child(2) { opacity: calc(.35 + .65 * clamp(0, var(--g) * 3 - 1, 1)); }
.lyrics__gap i:nth-child(3) { opacity: calc(.35 + .65 * clamp(0, var(--g) * 3 - 2, 1)); }
.lyrics__gap.is-active i { animation: mediaDot 1.2s ease-in-out infinite; }
.lyrics__gap.is-active i:nth-child(2) { animation-delay: .2s; }
.lyrics__gap.is-active i:nth-child(3) { animation-delay: .4s; }
@keyframes mediaDot { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-4px); } }

.stage__resume {
  position: absolute; left: 50%; bottom: 128px; z-index: 5;
  transform: translate(-50%, 8px); opacity: 0; visibility: hidden; pointer-events: none;
  background: var(--amber-400); color: #2a1602; border: 0; border-radius: 999px;
  font: inherit; font-weight: 800; font-size: .8rem; padding: .45rem .95rem; cursor: pointer;
  box-shadow: 0 10px 26px rgba(0, 0, 0, .55);
  transition: opacity .2s ease, transform .2s var(--ease-out), visibility 0s linear .2s;
}
.stage__resume.is-shown { opacity: 1; visibility: visible; pointer-events: auto; transform: translate(-50%, 0); transition-delay: 0s; }

/* ----------------------------------------------------------------- HUD */
.stage__top {
  position: absolute; top: 0; left: 0; right: 0; z-index: 5;
  display: flex; align-items: center; gap: .9rem; flex-wrap: wrap;
  padding: 1.1rem clamp(1rem, 3vw, 2rem);
  opacity: 0; transition: opacity .6s var(--ease-out); pointer-events: none;
}
.stage[data-started="1"] .stage__top { opacity: 1; }
.stage__now { margin: 0; font-family: var(--font-serif); font-weight: 800; font-size: 1.02rem; color: #fff; }
.stage__now small { display: block; font-family: var(--font-sans); font-weight: 600; font-size: .72rem; letter-spacing: .14em; text-transform: uppercase; color: #9db2d3; margin-top: 2px; }
.stage__chip {
  margin-left: auto; font-size: .68rem; font-weight: 800; letter-spacing: .16em; text-transform: uppercase;
  color: #0a1f38; background: var(--accent); padding: .3rem .75rem; border-radius: 999px; min-width: 6em; text-align: center;
  transition: background .4s ease;
}
.stage__chip.is-bump { animation: mediaChip .5s var(--ease-out); }
@keyframes mediaChip {
  0% { transform: scale(.86); } 60% { transform: scale(1.09); } 100% { transform: scale(1); }
}

.stage__hud {
  position: absolute; left: 0; right: 0; bottom: 0; z-index: 6;
  padding: .9rem clamp(.8rem, 3vw, 2rem) 1.1rem;
  display: grid; gap: .55rem;
  background: linear-gradient(180deg, rgba(4, 14, 28, 0), rgba(4, 14, 28, .82) 42%, rgba(4, 14, 28, .95));
}
.hud__seek { display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: .7rem; font-variant-numeric: tabular-nums; font-size: .8rem; color: #b8cae6; }
.hud__seek > span { min-width: 3.1em; }
.hud__seek > span:last-child { text-align: right; }
.hud__track { position: relative; height: 24px; display: flex; align-items: center; }
.hud__track::before {
  content: ""; position: absolute; left: 0; right: 0; height: 5px; border-radius: 999px;
  background:
    linear-gradient(90deg, var(--amber-400), var(--amber-500)) 0 0 / calc(var(--progress) * 100%) 100% no-repeat,
    linear-gradient(rgba(255, 255, 255, .46), rgba(255, 255, 255, .46)) 0 0 / calc(var(--buffered) * 100%) 100% no-repeat,
    rgba(255, 255, 255, .24);
}
.hud__row { display: flex; align-items: center; gap: .6rem; flex-wrap: wrap; }
.hud__row--right { margin-left: auto; display: flex; align-items: center; gap: .6rem; }

.stage__btn {
  display: inline-grid; place-items: center; width: 42px; height: 42px; border-radius: 50%; cursor: pointer;
  background: rgba(255, 255, 255, .08); border: 1px solid rgba(255, 255, 255, .2); color: #fff;
  transition: background .15s ease, transform .15s var(--ease-out);
}
.stage__btn svg { width: 19px; height: 19px; fill: currentColor; }
.stage__btn:hover { background: rgba(255, 255, 255, .17); transform: translateY(-1px); }
.stage__btn:active { transform: translateY(1px); }
.stage__btn--play {
  position: relative; width: 56px; height: 56px; overflow: hidden; border: 0;
  background: linear-gradient(180deg, var(--amber-400), var(--amber-500)); color: #2a1602;
  box-shadow: 0 10px 24px -6px rgba(217, 119, 6, .7);
}
.stage__btn--play svg { width: 24px; height: 24px; }
.stage__btn--play:hover { background: linear-gradient(180deg, #fbbf24, var(--amber-500)); }
.stage__btn--play::after {
  content: ""; position: absolute; inset: 0; border-radius: 50%; background: rgba(255, 255, 255, .55);
  transform: scale(0); opacity: 0; pointer-events: none;
}
.stage__btn--play.is-rippling::after { animation: mediaRipple .5s ease-out; }
@keyframes mediaRipple { 0% { transform: scale(0); opacity: .7; } 100% { transform: scale(1.7); opacity: 0; } }
.ico-pause { display: none; }
.stage[data-state="playing"] .ico-play { display: none; }
.stage[data-state="playing"] .ico-pause { display: block; }
.stage__btn .ico-muted { display: none; }
.stage[data-muted="true"] .stage__btn .ico-sound { display: none; }
.stage[data-muted="true"] .stage__btn .ico-muted { display: block; }

/* the big opening play button on the title card */
.stage__btn--hero {
  position: relative;
  width: 92px; height: 92px; border: 0; border-radius: 50%;
  background: linear-gradient(180deg, var(--amber-400), var(--amber-500)); color: #2a1602;
  box-shadow: 0 18px 44px -10px rgba(217, 119, 6, .75);
}
.stage__btn--hero svg { width: 36px; height: 36px; margin-left: 4px; }
.stage__btn--hero::before {
  content: ""; position: absolute; inset: -6px; border-radius: 50%; border: 2px solid rgba(245, 158, 11, .55);
  animation: mediaRing 2.6s ease-out infinite;
}
@keyframes mediaRing {
  0% { transform: scale(1); opacity: .8; } 100% { transform: scale(1.45); opacity: 0; }
}

.hud__range {
  -webkit-appearance: none; appearance: none; position: relative; width: 100%; height: 24px; margin: 0;
  background: transparent; cursor: pointer;
}
.hud__range::-webkit-slider-runnable-track { height: 24px; background: transparent; }
.hud__range::-moz-range-track { height: 5px; background: transparent; }
.hud__range::-webkit-slider-thumb {
  -webkit-appearance: none; appearance: none; width: 15px; height: 15px; margin-top: 4px; border-radius: 50%;
  background: #fff; border: 3px solid var(--amber-500); box-shadow: 0 2px 8px rgba(0, 0, 0, .55);
  transition: transform .12s var(--ease-out);
}
.hud__range::-moz-range-thumb {
  width: 9px; height: 9px; border-radius: 50%; background: #fff; border: 3px solid var(--amber-500);
}
.hud__range:hover::-webkit-slider-thumb, .hud__range:focus-visible::-webkit-slider-thumb { transform: scale(1.28); }
.hud__vol { width: 96px; height: 24px; }
.hud__vol::-webkit-slider-runnable-track { height: 4px; border-radius: 999px; background: rgba(255, 255, 255, .4); }
.hud__vol::-moz-range-track { height: 4px; border-radius: 999px; background: rgba(255, 255, 255, .4); }
.hud__vol::-webkit-slider-thumb { width: 13px; height: 13px; margin-top: -5px; border-width: 2px; }
.hud__vol::-moz-range-thumb { width: 8px; height: 8px; border-width: 2px; }

.stage__link {
  display: inline-flex; align-items: center; gap: .4rem; color: #fff; font-weight: 700; font-size: .82rem;
  text-decoration: none; padding: .42rem .8rem; border-radius: 999px;
  border: 1px solid rgba(255, 255, 255, .22); background: rgba(255, 255, 255, .06);
}
.stage__link:hover { background: rgba(255, 255, 255, .16); color: #fff; }
.stage__link svg { width: 15px; height: 15px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.stage__status { margin: 0; font-size: .78rem; color: #b8cae6; min-height: 1.1em; }
.stage__keys { margin: 0; font-size: .72rem; color: #93a8c7; }
.stage__keys kbd {
  font-family: var(--font-mono); font-size: .7rem; background: rgba(255, 255, 255, .1);
  border: 1px solid rgba(255, 255, 255, .2); border-radius: 4px; padding: .04em .35em;
}
.stage__motion {
  background: none; border: 0; color: #9db2d3; font: inherit; font-size: .74rem; cursor: pointer;
  text-decoration: underline; text-underline-offset: 3px; padding: .2rem .1rem;
}
.stage__motion:hover { color: #fff; }

/* keyboard focus is amber on this dark surface, never the light-mode navy ring */
.stage :focus-visible {
  outline: 3px solid var(--amber-400); outline-offset: 2px;
  box-shadow: 0 0 0 5px rgba(255, 255, 255, .5);
}
.stage .stage__btn:focus-visible { border-radius: 50%; }
.stage .stage__link:focus-visible { border-radius: 999px; }
.stage .stage__btn--play:focus-visible, .stage .stage__btn--hero:focus-visible {
  outline: 3px solid #fff; outline-offset: 3px; box-shadow: 0 0 0 6px rgba(10, 31, 56, .75); border-radius: 50%;
}

/* no-JS: the native player and the plain lyrics carry the page */
.stage__native { width: 100%; max-width: 32rem; margin: 1.4rem auto 0; }
html.nsp-media-js .stage__native { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); margin: -1px; }
html:not(.nsp-media-js) .stage { height: auto; }
html:not(.nsp-media-js) .stage__card { position: static; padding-block: clamp(2.5rem, 8vw, 4.5rem); }
html:not(.nsp-media-js) .stage__lyrics { position: static; opacity: 1; padding: 0 1rem clamp(2.5rem, 8vw, 4rem); }
html:not(.nsp-media-js) .lyrics-scroll { height: auto; overflow: visible; -webkit-mask-image: none; mask-image: none; margin-inline: auto; }
html:not(.nsp-media-js) .lyrics { padding: 0 1.4rem; }
html:not(.nsp-media-js) .stage__jsonly { display: none !important; }

/* ----------------------------------------------------------------- credits strip */
.credits {
  background: #061428; color: #b8cae6; border-bottom: 1px solid rgba(125, 170, 230, .14);
  padding-block: 1.1rem;
}
.credits .container {
  display: flex; align-items: center; gap: 1rem 1.6rem; flex-wrap: wrap;
  font-size: .86rem;
}
.credits p { margin: 0; max-width: 62ch; }
.credits a { color: #eef3fb; }
.credits__links { margin-left: auto; display: flex; gap: 1.1rem; flex-wrap: wrap; }

/* ----------------------------------------------------------------- responsive */
@media (max-width: 900px) {
  .stage { height: clamp(560px, calc(100svh - 4.4rem), 900px); }
  .stage__lyrics { padding-bottom: calc(clamp(2rem, 6vh, 4rem) + 150px); }
  .stage__resume { bottom: 158px; }
}
@media (max-width: 620px) {
  .stage__top { padding: .8rem 1rem; }
  .stage__now { font-size: .92rem; }
  .stage__chip { margin-left: 0; }
  .hud__row { gap: .45rem; }
  .hud__vol { width: 68px; }
  .stage__keys { display: none; }
  .lyrics { padding-inline: .6rem; }
}
@media (max-height: 560px) {
  .stage { height: auto; min-height: 520px; }
}

/* ----------------------------------------------------------------- motion + print */
@media (prefers-reduced-motion: reduce) {
  .stage__btn--hero::before, .lyrics__gap.is-active i,
  .lyrics__line[data-style="shouted"].is-active .lyrics__btn, .stage__chip.is-bump { animation: none !important; }
  .stage::after { opacity: .16 !important; transform: none !important; }
  .lyrics__line.is-active .lyrics__btn { transform: none; }
  .stage__card, .stage__lyrics, .stage__top { transition: none; }
}
@media print {
  .stage { height: auto; background: #fff; color: #000; border: 0; }
  .stage__canvas, .stage__scrim, .stage__grain, .stage__top, .stage__hud, .stage__resume, .stage__native,
  .stage__start, .stage__keys, .lyrics__gap { display: none !important; }
  .stage::after { display: none !important; }
  .stage__card { position: static; opacity: 1 !important; visibility: visible !important; transform: none !important; }
  .stage__title, .stage__sub, .stage__meta-line, .stage__eyebrow { color: #000 !important; text-shadow: none; }
  .stage__lyrics { position: static; opacity: 1 !important; padding: 0; }
  .lyrics-scroll { height: auto; overflow: visible; -webkit-mask-image: none; mask-image: none; }
  .lyrics { padding: 0; }
  .stage .lyrics__btn, .stage .w {
    color: #000 !important; -webkit-text-fill-color: #000; background: none !important;
    text-shadow: none; filter: none !important; transform: none !important; opacity: 1 !important; font-size: 12pt;
  }
  .lyrics__sec { color: #444 !important; }
  .credits { background: #fff; color: #000; }
}