/* The genre choice supplies the grade, while the note supplies the voice. */
.scroll-story{height:370svh;--style-progress:0;--palette-spread:0;--palette-pulse:0;--palette-radius:8%;--voice-lead-progress:0;--voice-night-progress:0;--voice-and-progress:0;--voice-beginning-progress:0;--highlight-night:0;--highlight-beginning:0}
.artist-background,.photo-fragment img{filter:grayscale(calc(1 - var(--style-progress,1))) saturate(calc(1 + .14 * var(--style-progress,1)))}
.palette-wash{position:absolute;inset:0;pointer-events:none;background:radial-gradient(ellipse at 89% 18%,#9670ca80 0%,#73519d28 46%,transparent 78%);clip-path:circle(var(--palette-radius,130%) at 89% 18%);opacity:calc(.32 * var(--style-progress,1) + var(--palette-pulse,0));mix-blend-mode:screen}
.photo-fragment .palette-wash{opacity:calc((.32 * var(--style-progress,1) + var(--palette-pulse,0)) * var(--photo-shade,0))}
.scene-haze{background:radial-gradient(ellipse,#a67bc622,transparent 67%);opacity:calc(.2 + .8 * var(--palette-spread,0));transform:translate(-50%,-50%) scale(calc(.85 + .15 * var(--palette-spread,0)))}
.artist-identity{top:21.2%}
.artist-identity h2{font-size:calc(12.5cqw - 1.3cqw * var(--style-progress,1));letter-spacing:calc(-.015em - .045em * var(--style-progress,1));line-height:.84;margin-bottom:1.6cqw}
.artist-identity .artist-voice{font:normal 2.05cqw/1.32 Georgia,serif;opacity:1;transform:none;margin:0;color:#f2edf7}
.voice-line{display:block;white-space:nowrap}
.voice-word{display:inline-block;opacity:var(--word-progress,1);transform:translateY(calc(8px * (1 - var(--word-progress,1))));filter:blur(calc(2px * (1 - var(--word-progress,1))));white-space:pre}
.voice-lead{--word-progress:var(--voice-lead-progress,1)}.voice-night{--word-progress:var(--voice-night-progress,1)}.voice-and{--word-progress:var(--voice-and-progress,1)}.voice-beginning{--word-progress:var(--voice-beginning-progress,1)}
.note-fragment{transform-origin:center;isolation:isolate}
.note-fragment img{width:100%;height:100%;object-fit:contain}
.note-highlight{position:absolute;background:#ae81de55;border-radius:3px;mix-blend-mode:multiply;transform-origin:left center;pointer-events:none;opacity:.95}
.highlight-night{left:28%;top:37%;width:51%;height:4.5%;transform:rotate(-4deg) scaleX(var(--highlight-night))}
.highlight-beginning{left:25%;top:51%;width:57%;height:4.5%;transform:rotate(-2deg) scaleX(var(--highlight-beginning))}
.dialog-card-mount{--style-progress:1;--palette-radius:130%;--palette-pulse:0;--voice-lead-progress:1;--voice-night-progress:1;--voice-and-progress:1;--voice-beginning-progress:1}
@media(max-width:700px){.scroll-story{height:330svh}.artist-identity{top:20%}.artist-identity h2{font-size:calc(14.5cqw - 1.5cqw * var(--style-progress,1))}.artist-identity .artist-voice{font-size:2.9cqw;line-height:1.3}}
@media(prefers-reduced-motion:reduce){.scroll-story{height:100svh;--style-progress:1!important;--palette-spread:1!important;--palette-radius:130%!important;--palette-pulse:0!important;--voice-lead-progress:1!important;--voice-night-progress:1!important;--voice-and-progress:1!important;--voice-beginning-progress:1!important}.voice-word{transform:none;filter:none}}

.voice-night,.voice-beginning{position:relative}
.voice-night::after,.voice-beginning::after{content:"";position:absolute;left:0;right:0;bottom:.04em;height:.2em;background:#b897e777;opacity:var(--voice-glow,0);pointer-events:none}

@media(max-width:700px){.waveform{gap:calc(.8px * (1 - var(--rail-progress)))}}