/* ===== Homepage 09 — Music =====
   The homepage shows one full-screen section at a time, so everything here
   is placed inside that one screen: words at the top, bars and player below. */
body.restored-chapters #ch-09 { display: block; position: relative; height: 100dvh; min-height: 0; padding: 0; background: #000 !important; overflow: hidden; }
body.restored-chapters #ch-09 > div { height: auto; min-height: 0; overflow: visible; padding: 0; box-sizing: border-box; }
body.restored-chapters #ch-09 > .music-glow { position: absolute; inset: -10% -10% 0; height: auto; }
body.restored-chapters #ch-09 > .music-copy { position: absolute; z-index: 1; bottom: auto; height: auto !important; min-height: 0 !important; top: clamp(78px, 13vh, 132px); left: clamp(20px, 6vw, 96px); right: clamp(20px, 6vw, 96px); max-width: 48rem; }
body.restored-chapters #ch-09 > .music-player { position: absolute; z-index: 2; top: auto; right: auto; height: auto !important; min-height: 0 !important; left: 50%; bottom: max(clamp(24px, 6vh, 64px), calc(env(safe-area-inset-bottom) + 16px)); transform: translateX(-50%); width: auto; }
body.restored-chapters #ch-09 .music-canvas { top: auto; bottom: calc(max(clamp(24px, 6vh, 64px), env(safe-area-inset-bottom) + 16px) + 70px); height: min(40dvh, 420px); }
body.restored-chapters #ch-09 .music-hint { bottom: calc(max(clamp(24px, 6vh, 64px), env(safe-area-inset-bottom) + 16px) + 86px); }
body.restored-chapters #ch-09 h2 {
  max-width: none; margin: 0; color: transparent !important; -webkit-text-fill-color: transparent;
  font: italic 900 clamp(76px, 14vw, 210px)/.86 Arial, 'Helvetica Neue', sans-serif !important; letter-spacing: -.06em;
}
body.restored-chapters #ch-09 .next-label { color: rgba(255,255,255,.62); }
body.restored-chapters #ch-09 .chapter-intro { display: block !important; color: #d6d6de; }
.music-chapter {
  --c1: #ff1684; --c2: #a767ff; --c3: #40d9ff; --c4: #ffdc5e;
  --beat: 0;
  position: relative; overflow: hidden; isolation: isolate;
  min-height: 100svh; background: #000 !important; color: #fff;
  display: grid; grid-template-rows: auto 1fr auto; align-items: start;
  padding: clamp(84px, 12vh, 140px) clamp(20px, 5vw, 72px) clamp(28px, 5vh, 56px);
  box-sizing: border-box;
}
/* A soft glow behind everything that swells with the bass */
.music-glow {
  position: absolute; inset: -20% -10% auto; height: 120%; z-index: -1; pointer-events: none;
  background:
    radial-gradient(38% 30% at 22% 72%, rgba(255,22,132,calc(.10 + var(--beat) * .32)), transparent 70%),
    radial-gradient(32% 28% at 50% 78%, rgba(167,103,255,calc(.08 + var(--beat) * .26)), transparent 70%),
    radial-gradient(30% 26% at 76% 74%, rgba(64,217,255,calc(.06 + var(--beat) * .22)), transparent 70%),
    radial-gradient(26% 22% at 94% 70%, rgba(255,220,94,calc(.04 + var(--beat) * .18)), transparent 70%);
  transition: opacity .6s ease;
}
.music-canvas { position: absolute; z-index: 0; left: 0; right: 0; bottom: clamp(96px, 16vh, 150px); width: 100%; height: min(58vh, 560px); display: block; }

.music-copy { position: relative; z-index: 1; max-width: 46rem; }
.music-chapter .next-label { color: rgba(255,255,255,.62); letter-spacing: .22em; font-size: 12px; font-weight: 800; text-transform: uppercase; margin: 0 0 14px; }
.music-chapter h2 {
  margin: 0; font: italic 900 clamp(76px, 15vw, 220px)/.86 Arial, 'Helvetica Neue', sans-serif; letter-spacing: -.06em;
  background: linear-gradient(90deg, var(--c1), var(--c2), var(--c3), var(--c4), var(--c1)) 0 0 / 220% 100%;
  -webkit-background-clip: text; background-clip: text; color: transparent;
  filter: drop-shadow(0 0 calc(var(--beat) * 26px) rgba(255,22,132,.55));
  animation: music-shimmer 9s linear infinite;
  transform: scale(calc(1 + var(--beat) * .025)); transform-origin: left bottom;
  padding-right: .08em; /* italic overhang */
}
@keyframes music-shimmer { to { background-position: -220% 0; } }
.music-chapter .chapter-intro { margin: 18px 0 0; max-width: 34rem; font-size: clamp(16px, 1.6vw, 20px); line-height: 1.5; color: #d6d6de; }

/* Controls: just play/pause and mute in a small glass pill — the bars are the show */
.music-player {
  grid-row: 3; position: relative; z-index: 2; justify-self: center;
  display: flex; align-items: center; gap: 10px; width: auto; box-sizing: border-box;
  padding: 8px; border-radius: 99px;
  background: rgba(14,14,18,.6); border: 1px solid rgba(255,255,255,.12);
  -webkit-backdrop-filter: blur(16px) saturate(1.4); backdrop-filter: blur(16px) saturate(1.4);
  box-shadow: 0 18px 50px rgba(0,0,0,.6);
}
.music-play {
  position: relative; flex: none; display: grid; place-items: center; width: 56px; height: 56px; padding: 0; border: 0; border-radius: 50%; cursor: pointer; color: #000;
  background: conic-gradient(from 0deg, var(--c1), var(--c2), var(--c3), var(--c4), var(--c1));
  box-shadow: 0 0 calc(10px + var(--beat) * 30px) rgba(255,22,132,.55);
  transition: transform .3s cubic-bezier(.16,1,.3,1);
}
.music-play::before { content: ''; position: absolute; inset: 3px; border-radius: 50%; background: #fff; }
.music-play svg { position: relative; width: 24px; height: 24px; }
.music-play:hover { transform: scale(1.06); }
.music-play:focus-visible, .music-mute:focus-visible { outline: 3px solid var(--c3); outline-offset: 3px; }
.music-icon-pause, .music-chapter.is-playing .music-icon-play { display: none; }
.music-chapter.is-playing .music-icon-pause { display: block; }
.music-chapter.is-playing .music-play { animation: music-spin 6s linear infinite; }
.music-chapter.is-playing .music-play svg { animation: music-unspin 6s linear infinite; }
@keyframes music-spin { to { transform: rotate(1turn); } }
@keyframes music-unspin { to { transform: rotate(-1turn); } }
.music-mute { flex: none; display: grid; place-items: center; width: 44px; height: 44px; padding: 0; border: 0; border-radius: 50%; background: rgba(255,255,255,.08); color: #fff; cursor: pointer; }
.music-mute svg { width: 22px; height: 22px; }
.music-icon-muted, .music-chapter.is-muted .music-icon-sound { display: none; }
.music-chapter.is-muted .music-icon-muted { display: block; }

/* "Tap to play" — only when the track isn't playing */
.music-hint {
  grid-row: 3; position: absolute; z-index: 2; left: 50%; bottom: calc(clamp(28px, 5vh, 56px) + 86px); transform: translateX(-50%);
  margin: 0; padding: 7px 14px; border-radius: 99px; white-space: nowrap;
  background: rgba(0,0,0,.55); border: 1px solid rgba(255,255,255,.16); color: #fff; font-size: 13px; font-weight: 700; letter-spacing: .02em;
  pointer-events: none; opacity: 0; transition: opacity .4s ease;
}
.music-chapter.is-visible:not(.is-playing) .music-hint { opacity: 1; animation: music-nudge 2.4s ease-in-out infinite; }
@keyframes music-nudge { 0%, 100% { transform: translate(-50%, 0); } 50% { transform: translate(-50%, -5px); } }

@media (max-width: 700px) {
  /* Phones: the analyser fills the top (with a gap each side), the words sit centred underneath, buttons at the bottom */
  body.restored-chapters #ch-09 { --music-layout: bars-top; }
  body.restored-chapters #ch-09 .music-canvas { left: 16px; right: 16px; width: calc(100% - 32px); }
  body.restored-chapters #ch-09 > .music-copy { top: auto; left: 20px; right: 20px; max-width: none; margin: 0 auto; text-align: center; bottom: calc(env(safe-area-inset-bottom) + 92px); }
  body.restored-chapters #ch-09 > .music-player { bottom: calc(env(safe-area-inset-bottom) + 18px); }
  body.restored-chapters #ch-09 .music-hint { bottom: auto; top: calc(var(--music-bars-bottom, 50%) - 44px); }
  body.restored-chapters #ch-09 .next-label { margin-bottom: 8px; }
  body.restored-chapters #ch-09 h2 { font-size: clamp(52px, 16vw, 88px) !important; text-align: center !important; margin-left: auto !important; margin-right: auto !important; transform-origin: center bottom; padding: 0 .08em; }
  body.restored-chapters #ch-09 .next-label, body.restored-chapters #ch-09 .chapter-intro { text-align: center !important; margin-left: auto !important; margin-right: auto !important; }
  body.restored-chapters #ch-09 .chapter-intro { font-size: 15px; line-height: 1.45; margin: 10px auto 0; max-width: 22rem; }
  html.music-in-view .mike:not(.is-open) { opacity: 0; visibility: hidden; transition: opacity .3s, visibility 0s .3s; }
  .music-play { width: 52px; height: 52px; }
}
@media (max-width: 700px) and (max-height: 600px) {
  /* Short phones (iPhone SE): a little tighter so the bars keep their room */
  body.restored-chapters #ch-09 .next-label { display: none; }
  body.restored-chapters #ch-09 h2 { font-size: 48px !important; }
  body.restored-chapters #ch-09 .chapter-intro { font-size: 13px; margin-top: 6px; }
  body.restored-chapters #ch-09 > .music-copy { bottom: calc(env(safe-area-inset-bottom) + 84px); }
}
@media (orientation: landscape) and (max-height: 500px) {
  body.restored-chapters #ch-09 { --music-layout: normal; }
  body.restored-chapters #ch-09 .music-canvas { left: 0; right: 0; width: 100%; }
  body.restored-chapters #ch-09 > .music-copy { bottom: auto; left: clamp(20px, 6vw, 96px); text-align: left; }
  body.restored-chapters #ch-09 .chapter-intro { margin-left: 0 !important; }
  /* Phones on their side: compact words on the left, buttons top right, bars across the bottom */
  body.restored-chapters #ch-09 > .music-copy { top: 66px; right: 150px; max-width: 40rem; }
  body.restored-chapters #ch-09 .next-label { display: none; }
  body.restored-chapters #ch-09 h2 { font-size: 40px !important; }
  body.restored-chapters #ch-09 .chapter-intro { font-size: 13px !important; line-height: 1.4 !important; margin-top: 6px !important; max-width: 30rem !important; }
  body.restored-chapters #ch-09 > .music-player { top: 62px; bottom: auto; left: auto; right: max(16px, env(safe-area-inset-right)); transform: none; }
  body.restored-chapters #ch-09 .music-hint { top: 128px; bottom: auto; left: auto; right: max(16px, env(safe-area-inset-right)); transform: none; animation: none; }
  html.music-in-view .mike:not(.is-open) { opacity: 0; visibility: hidden; transition: opacity .3s, visibility 0s .3s; }
}
@media (prefers-reduced-motion: reduce) {
  .music-chapter h2, .music-chapter.is-playing .music-play, .music-chapter.is-playing .music-play svg, .music-chapter.is-visible:not(.is-playing) .music-hint { animation: none; }
  .music-chapter h2 { transform: none; }
}