/* Insta360 hero: while the sound is held, the sung line sits at the
   exact centre of the viewport over a very soft darkening and fills with white as
   it is sung. Same type as the hero caption. */
.pb-hero-scrim {
  position: fixed;
  left: 15vw;
  right: 15vw;
  top: 32dvh;
  bottom: 32dvh;
  z-index: 2;
  pointer-events: none;
  opacity: 0;
  transition: opacity var(--dur-1) ease;
  background: radial-gradient(closest-side,
    color-mix(in srgb, var(--color-bg-primary) 34%, transparent),
    color-mix(in srgb, var(--color-bg-primary) 18%, transparent) 55%,
    transparent);
}
.pb-hero-lyrics {
  --lyric-rest: color-mix(in srgb, var(--color-pure-white) 45%, transparent);
  position: fixed;
  left: 0;
  right: 0;
  top: 50%;
  height: 0;
  z-index: 3;
  pointer-events: none;
  opacity: 0;
  transition: opacity var(--dur-1) ease;
  color: var(--color-pure-white);
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  font-weight: 500;
  letter-spacing: 0.14em;
  line-height: 1.5;
  text-align: center;
  text-transform: uppercase;
}
body.pb-sound-held .pb-hero-scrim.is-loop,
body.pb-sound-held .pb-hero-lyrics.is-loop,
body.pb-song-on.pb-song-in-hero .pb-hero-scrim.is-song,
body.pb-song-on.pb-song-in-hero .pb-hero-lyrics.is-song { opacity: 1; }

.pb-hero-lyrics-track {
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  transition: transform calc(var(--dur-1) * 2) var(--ease-out);
}
.pb-hero-lyrics-track.is-snap,
.pb-hero-lyrics-track.is-snap .pb-hero-lyrics-row span { transition: none; }

.pb-hero-lyrics-row {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 3em;
}
.pb-hero-lyrics-row span {
  display: inline-block;
  line-height: 1.5;
  opacity: 0;
  transition: opacity var(--dur-1) ease;
}
/* the next line waits below; nothing above, that is where the dot bounces */
.pb-hero-lyrics-row.is-next span { opacity: 1; color: var(--lyric-rest); }
.pb-hero-lyrics-row.is-sung span {
  position: relative;
  opacity: 1;
  color: var(--lyric-rest);
}
/* The sung part is a white copy on top, cut at --x. Text cut out of a background
   (background-clip) vanished on an iPhone after scrolling away and back. */
.pb-hero-lyrics-row.is-sung span::after {
  content: attr(data-text);
  position: absolute;
  inset: 0;
  color: var(--color-pure-white);
  white-space: nowrap;
  clip-path: inset(-0.5em calc(100% - var(--x, 0px)) -0.5em 0);
}

body.pb-song-on .pb-hero[data-pb-sound] h1 { opacity: 0; }

.pb-song-toggle {
  flex: none;
  width: 1.7em;
  height: 1.7em;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: var(--accent);
  color: var(--color-pure-black);
}
.pb-song-toggle svg { width: 0.6em; height: 0.6em; fill: currentColor; }
.pb-song-title,
.pb-song-time { color: color-mix(in srgb, var(--color-pure-white) 72%, transparent); }
.pb-song-time { font-variant-numeric: tabular-nums; }
/* a tall hit area around a thin line */
.pb-song-track {
  position: relative;
  flex: 1;
  min-width: 0;
  height: 2.2em;
  cursor: pointer;
  touch-action: none;
  background: linear-gradient(color-mix(in srgb, var(--color-pure-white) 18%, transparent), color-mix(in srgb, var(--color-pure-white) 18%, transparent)) center / 100% 2px no-repeat;
}
.pb-song-track i {
  position: absolute;
  left: 0;
  top: calc(50% - 1px);
  height: 2px;
  width: var(--p);
  background: var(--accent);
}
.pb-song-close {
  flex: none;
  width: 1.7em;
  height: 1.7em;
  display: grid;
  place-items: center;
  color: color-mix(in srgb, var(--color-pure-white) 72%, transparent);
  transition: color var(--dur-1) ease;
}
.pb-song-close:hover { color: var(--color-pure-white); }
.pb-song-close svg { width: 0.7em; height: 0.7em; }

/* the whole song has its own dot: the cursor stays free to reach the bar */
.pb-song-dot {
  position: fixed;
  left: 0;
  top: 0;
  z-index: 4;
  width: 10px;
  height: 10px;
  margin: -5px 0 0 -5px;
  border-radius: 50%;
  background: var(--accent);
  mix-blend-mode: difference;
  pointer-events: none;
  opacity: 0;
  transition: opacity var(--dur-1) ease;
  will-change: transform;
}
body.pb-song-on.pb-song-in-hero .pb-song-dot { opacity: 1; }

/* ── The player ──
   A circle in the rail that grows as the mouse comes near, and a popup in the language of
   the site's menu: off the edges so the page shows around it, 18px corners, a hairline,
   pills and circles, and the menu's own movement. */
.pb-song-disc {
  --ring-stroke: 1px;
  position: fixed;
  right: calc(var(--navbar-width) + 1vw);
  bottom: 1vh;
  z-index: 38;
  transform-origin: 100% 100%;
  transition: opacity var(--dur-1) ease;
  width: 96px;
  height: 96px;
  padding: 0;
  border-radius: 50%;
  background: var(--color-bg-primary);
  color: var(--color-pure-white);
  pointer-events: auto;
  will-change: transform;
}
body.side-menu-open .pb-song-disc,
body.pb-song-pop-open .pb-song-disc,
body.pb-song-at-footer:not(.pb-song-on) .pb-song-disc { opacity: 0; pointer-events: none; }

/* behind the open panel the page blurs exactly as it does behind the menu */
.pb-song-scrim {
  position: fixed;
  inset: 0;
  z-index: 39;
  background: color-mix(in srgb, var(--color-pure-black) 50%, transparent);
  -webkit-backdrop-filter: blur(4px);
  backdrop-filter: blur(4px);
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: opacity 360ms ease, visibility 0s linear 360ms;
}
body.pb-song-expanded.pb-song-pop-open .pb-song-scrim {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
  transition: opacity 360ms ease, visibility 0s;
}
.pb-song-disc svg:first-child { display: block; width: 100%; height: 100%; overflow: visible; }
.pb-song-disc text { fill: currentColor; font-family: var(--font-mono); font-size: 8.6px; font-weight: 500; letter-spacing: 0.04em; text-transform: uppercase; }
.pb-song-disc .ring { transform-box: view-box; transform-origin: center; animation: pb-song-turn 16s linear infinite; animation-play-state: paused; }
body.pb-song-on:not(.pb-song-paused) .pb-song-disc .ring { animation-play-state: running; }
@keyframes pb-song-turn { to { transform: rotate(360deg); } }
.pb-song-disc .base,
.pb-song-disc .arc { fill: none; vector-effect: non-scaling-stroke; }
.pb-song-disc .base { stroke: var(--color-pure-white); stroke-width: calc(var(--ring-stroke) * var(--ring-scale, 1)); }
.pb-song-disc .arc { stroke: var(--accent); stroke-width: calc(var(--ring-stroke) * var(--ring-scale, 1)); opacity: 0; }
body.pb-song-on .pb-song-disc .arc { opacity: 1; }
.pb-song-disc .mid { position: absolute; inset: 0; display: grid; place-items: center; color: var(--color-pure-white); }
body.pb-song-on .pb-song-disc .mid { color: var(--accent); }
.pb-song-disc .mid svg { width: 15px; height: 15px; fill: currentColor; }
.pb-song-disc:hover .mid { color: var(--accent); }

.pb-song-pop {
  position: fixed;
  right: calc(var(--navbar-width) + 1vw);
  bottom: 1vh;
  z-index: 40;
  box-sizing: border-box;
  width: clamp(420px, 30vw, 560px);
  --song-fig: 124px;
  padding: 12px;
  display: flex;
  flex-direction: column;
  background: var(--color-bg-primary);
  border: 1px solid var(--color-border);
  border-radius: 18px;
  box-shadow: -40px 0 80px -20px color-mix(in srgb, var(--color-pure-black) 55%, transparent);
  color: var(--color-pure-white);
  /* it opens out of the circle at its bottom right corner */
  clip-path: inset(calc(100% - 44px) 0 0 calc(100% - 44px) round 22px);
  opacity: 0;
  visibility: hidden;
  transition: clip-path 540ms cubic-bezier(0.7, 0, 0.2, 1), opacity 160ms ease, visibility 0s linear 540ms;
}
body.pb-song-pop-open .pb-song-pop {
  clip-path: inset(-120px -120px -120px -120px round 138px);
  opacity: 1;
  visibility: visible;
  transition: clip-path 540ms cubic-bezier(0.2, 0.85, 0.2, 1), opacity 160ms ease, visibility 0s;
}
/* the arrow drops the popup exactly as the menu's cross drops the menu */
body.pb-song-pop-closing .pb-song-pop {
  visibility: visible;
  opacity: 1;
  clip-path: none;
  transition: none;
  pointer-events: none;
  transform-origin: 100% 100%;
  animation: side-menu-drop 760ms cubic-bezier(0.55, 0.06, 0.85, 0.18) both;
  will-change: transform, opacity;
}
@media (prefers-reduced-motion: reduce) {
  body.pb-song-pop-closing .pb-song-pop { animation: none; transition: opacity 200ms ease; opacity: 0; }
}
.pb-song-row { flex: none; display: flex; gap: 14px; }
.pb-song-acts { flex: none; display: flex; gap: 6px; }
.pb-song-fig { flex: none; display: block; width: var(--song-fig); height: var(--song-fig); border-radius: 14px; object-fit: cover; }
.pb-song-col { flex: 1; min-width: 0; padding: 4px 4px 0 0; }
.pb-song-top { display: flex; justify-content: space-between; align-items: flex-start; gap: 10px; }
.pb-song-pop .pb-song-title { display: block; font-size: clamp(18px, 1.5vw, 26px); line-height: 1.1; white-space: nowrap; color: var(--color-pure-white); }
.pb-song-sub { display: block; margin-top: 8px; font-size: var(--text-micro); line-height: 1.3; letter-spacing: 0.08em; color: color-mix(in srgb, var(--color-pure-white) 62%, transparent); text-transform: uppercase; white-space: nowrap; }
.pb-song-ctl {
  position: absolute;
  right: 16px;
  bottom: 14px;
  left: calc(12px + var(--song-fig) + 14px + 1px);
  display: flex;
  align-items: center;
  gap: 12px;
  transition: left 540ms cubic-bezier(0.7, 0, 0.2, 1);
}
body.pb-song-expanded .pb-song-ctl { left: 16px; transition: left 540ms cubic-bezier(0.2, 0.85, 0.2, 1); }
.pb-song-pop .pb-song-toggle { width: 44px; height: 44px; }
.pb-song-pop .pb-song-toggle svg { width: 13px; height: 13px; }
.pb-song-pop .pb-song-time { font-size: var(--text-micro); letter-spacing: 0.08em; white-space: nowrap; }
.pb-song-pop .pb-song-close,
.pb-song-more { flex: none; display: grid; place-items: center; box-sizing: border-box; width: 32px; height: 32px; border-radius: 50%; border: var(--song-stroke, 1px) solid var(--color-border); color: var(--color-pure-white); }
.pb-song-pop .pb-song-close svg,
.pb-song-more svg { width: 10px; height: 10px; }
.pb-song-more svg { transition: transform calc(var(--dur-1) * 2) var(--ease-out); }
body.pb-song-expanded .pb-song-more svg { transform: rotate(180deg); }
/* One arrow down at a time: first the lyrics fold, then the player. */
body.pb-song-expanded .pb-song-pop .pb-song-close { display: none; }

/* the whole text, in a panel that grows upward like the menu */
.pb-song-words {
  flex: none;
  height: 0;
  margin: 0;
  overflow: hidden;
  -webkit-mask-image: linear-gradient(transparent, #000 7%, #000 88%, transparent);
  mask-image: linear-gradient(transparent, #000 7%, #000 88%, transparent);
  transition: height 540ms cubic-bezier(0.7, 0, 0.2, 1), margin 540ms cubic-bezier(0.7, 0, 0.2, 1);
}
body.pb-song-expanded .pb-song-words {
  height: var(--pb-words-h);
  margin: 14px 0 58px;
  transition: height 540ms cubic-bezier(0.2, 0.85, 0.2, 1), margin 540ms cubic-bezier(0.2, 0.85, 0.2, 1);
}
.pb-song-list {
  list-style: none;
  margin: 0;
  padding: calc(var(--pb-words-h, 0px) * 0.08) clamp(8px, 1vw, 16px) calc(var(--pb-words-h, 0px) * 0.14);
  transition: transform calc(var(--dur-1) * 2) var(--ease-out);
}
.pb-song-list li {
  padding: 0.16em 0;
  font-size: clamp(18px, 1.4vw, 26px);
  font-weight: 500;
  line-height: 1.2;
  color: color-mix(in srgb, var(--color-pure-white) 30%, transparent);
  cursor: pointer;
}
/* the text waits greyed out and stays white once it has been sung; a gap between verses */
.pb-song-list li:nth-child(4n) { margin-bottom: 1em; }
.pb-song-list li.is-past { color: var(--color-pure-white); }
.pb-song-list li span { transition: color calc(var(--dur-1) / 2) ease; }
.pb-song-list li span.on { color: var(--color-pure-white); }
/* the words are in the panel now, so the line at the centre steps aside */
body.pb-song-on.pb-song-expanded.pb-song-in-hero .pb-hero-scrim.is-song,
body.pb-song-on.pb-song-expanded.pb-song-in-hero .pb-hero-lyrics.is-song,
body.pb-song-on.pb-song-expanded.pb-song-in-hero .pb-song-dot { opacity: 0; }
.pb-song-pop .pb-song-track { height: 18px; background: none; }
.pb-song-pop .pb-song-track::before { content: ""; position: absolute; left: 0; right: 0; top: calc(50% - var(--song-stroke, 1px) / 2); height: var(--song-stroke, 1px); background: color-mix(in srgb, var(--color-pure-white) 22%, transparent); }
.pb-song-pop .pb-song-track i { top: calc(50% - var(--song-stroke, 1px) / 2); height: var(--song-stroke, 1px); }

@media (max-width: 760px), (max-width: 1024px) and (orientation: portrait) {
  .pb-song-disc.is-phone {
    position: fixed;
    left: auto;
    top: auto;
    right: calc(var(--grid-left) - 26px);
    bottom: calc(var(--song-nav-bottom) - 12px);
    transform-origin: center;
  }
  .pb-song-pop {
    left: 8px;
    right: 8px;
    bottom: calc(var(--song-nav-bottom) + 8px);
    width: auto;
  }
  .pb-song-pop { --song-fig: 110px; }
  .pb-song-pop .pb-song-title { font-size: 16px; line-height: 30px; }
  .pb-song-acts { gap: 4px; }
  .pb-song-pop .pb-song-close,
  .pb-song-more { width: 30px; height: 30px; }
  .pb-hero-scrim.is-loop,
  .pb-hero-lyrics.is-loop { display: none; }
  /* bright skies on a phone need a stronger darkening behind the line */
  .pb-hero-scrim.is-song {
    left: 0;
    right: 0;
    top: 38dvh;
    bottom: 38dvh;
    background: radial-gradient(closest-side,
      color-mix(in srgb, var(--color-bg-primary) 52%, transparent),
      color-mix(in srgb, var(--color-bg-primary) 30%, transparent) 60%,
      transparent);
  }
  .pb-hero-lyrics.is-song { letter-spacing: 0.08em; }
  .pb-song-title { display: none; }
}