/* The artwork stays full-ratio; its entry shares one plane with the home scene. */
html { --quiet-idle: .28; --quiet-music-idle: .3; }
.story-animated #home-scene { z-index: auto; }
#home-scene .page { z-index: 3; pointer-events: none; }
#home-scene .page > :is(header,main), #home-scene footer > * { pointer-events: auto; }
#story { z-index: 2; }
body:has(#music-player) .story-cue { position: absolute; bottom: 4px; left: 50%; transform: translateX(-50%); margin: 0; padding: 3px 12px; pointer-events: auto; }
.story-home-hidden .story-cue { visibility: hidden; pointer-events: none; }

/* Almost invisible at rest. The hit areas remain unchanged. */
#story :is(.story-controls,.story-reading-button,.story-back) {
  opacity: var(--quiet-idle); background: rgba(38,49,65,.055); border-color: rgba(245,239,230,.12);
  box-shadow: none; backdrop-filter: blur(1px); -webkit-backdrop-filter: blur(1px);
  transition: opacity .4s ease, background .4s ease, border-color .4s ease, backdrop-filter .4s ease;
}
#story .story-reading-button { border-width: 1px; }
#story .reading-action { border-color: rgba(245,239,230,.14); }
#story .story-motion-toggle { border-left-color: rgba(245,239,230,.12); }
#story .story-dot[aria-pressed="true"]::before { box-shadow: none; }
#story :is(.story-controls,.story-reading-button,.story-back):is(:has(:focus-visible),:focus-visible,:active) {
  opacity: 1; background: rgba(31,43,60,.42); border-color: rgba(245,239,230,.34); backdrop-filter: blur(8px);
}
body:has(#story) #music-home-slot > #music-player, dialog > #music-player {
  opacity: var(--quiet-music-idle); background: rgba(245,236,238,.045); border-color: rgba(236,226,225,.12);
  box-shadow: none; backdrop-filter: blur(1px); -webkit-backdrop-filter: blur(1px); animation: none;
  transition: opacity .4s ease, background .4s ease, border-color .4s ease, backdrop-filter .4s ease;
}
#music-player .music-record { background: transparent; box-shadow: inset 0 0 0 1px currentColor; }
#music-player .music-record::before { background: transparent; border-color: transparent; }
#music-player .music-record::after { border-color: currentColor; border-right-color: transparent; border-bottom-color: transparent; opacity: .3; }
#music-player .music-record svg { color: var(--music-ink); }
#music-player .music-mute::before { opacity: .3; }
:is(body:has(#story) #music-home-slot,dialog) > #music-player:is(:has(:focus-visible),:active,[data-state="error"]) {
  opacity: 1; background: rgba(245,236,238,.9); border-color: rgba(236,226,225,.5); backdrop-filter: blur(8px);
}
body:has(#story.is-visible) #music-home-slot > #music-player:is(:has(:focus-visible),:active,[data-state="error"]) { background: rgba(31,43,60,.42); }
@media (hover: hover) {
  #story :is(.story-controls,.story-reading-button,.story-back):hover { opacity: .94; background: rgba(31,43,60,.3); border-color: rgba(245,239,230,.3); backdrop-filter: blur(8px); }
  :is(body:has(#story) #music-home-slot,dialog) > #music-player:hover { opacity: .94; background: rgba(245,236,238,.86); border-color: rgba(236,226,225,.4); backdrop-filter: blur(8px); }
  body:has(#story.is-visible) #music-home-slot > #music-player:hover { background: rgba(31,43,60,.3); }
}
@media (prefers-reduced-motion: reduce) {
  #story :is(.story-controls,.story-reading-button,.story-back), #music-player { transition: none; }
}