/* Every moving asset meets the exact rectangle used by the finished card. */
.scroll-story{height:335svh;--background-progress:0;--nav-progress:0;--first-name-progress:0;--last-name-progress:0;--descriptor-progress:0;--cover-progress:0;--release-title-progress:0;--player-progress:0;--invitation-progress:0}
.scene{perspective:1200px}
.canvas{box-shadow:0 28px 60px #22153112;will-change:transform}
.canvas-corner{position:absolute;width:20px;height:20px;border-color:#e4dced;border-style:solid;opacity:calc(1 - var(--background-progress));transition:none}
.corner-a{top:22px;left:22px;border-width:1px 0 0 1px}.corner-b{top:22px;right:22px;border-width:1px 1px 0 0}.corner-c{bottom:22px;left:22px;border-width:0 0 1px 1px}.corner-d{bottom:22px;right:22px;border-width:0 1px 1px 0}
.artist-card{clip-path:none;background:transparent}
.artist-background,.artist-shade{opacity:var(--background-progress,1)}
.artist-topline{opacity:var(--nav-progress,1);transform:translateY(calc(8px * (1 - var(--nav-progress,1))))}
.artist-identity h2{line-height:.84;letter-spacing:-.06em;margin-bottom:1.6cqw}
.name-line{display:block;overflow:hidden;padding-bottom:.08em;margin-bottom:-.08em}
.name-line>span{display:block;will-change:transform;transform:translateY(calc(110% * (1 - var(--name-line-progress,1))))}
.name-first{--name-line-progress:var(--first-name-progress,1)}.name-last{--name-line-progress:var(--last-name-progress,1)}
.artist-identity p{opacity:var(--descriptor-progress,1);transform:translateY(calc(10px * (1 - var(--descriptor-progress,1))))}
.release>img{opacity:var(--cover-progress,1)}
.release-details h3{opacity:var(--release-title-progress,1);transform:translateY(calc(12px * (1 - var(--release-title-progress,1))))}
.music-strip{opacity:var(--player-progress,1)}
.collaboration{opacity:var(--invitation-progress,1);transform:translateY(calc(13px * (1 - var(--invitation-progress,1)))) scale(calc(.96 + .04 * var(--invitation-progress,1)));transform-origin:center}
.fragment{opacity:1;transform:translate(-50%,-50%) translate3d(var(--x),var(--y),0) rotate(var(--rotation));will-change:transform;backface-visibility:hidden}
.photo-fragment{z-index:4;border-radius:3px;overflow:hidden;contain:layout style;transform-style:flat;box-shadow:0 16px 35px #18102220}
.photo-fragment img{filter:grayscale(var(--photo-mono,1));object-position:var(--photo-focus,74%) 45%}
.photo-tone{position:absolute;inset:0;pointer-events:none;background:linear-gradient(90deg,#08080dec 0%,#0b0a1299 33%,#100b1626 65%),linear-gradient(0deg,#09090eee,transparent 55%);opacity:var(--photo-shade,0)}
.note-fragment{z-index:6}.album-fragment{z-index:7}.waveform-fragment{z-index:8}.contact-fragment,.second-photo-fragment{z-index:3}
.album-fragment{contain:layout style}.album-fragment img{height:100%;width:100%;object-fit:cover}
.waveform-fragment{box-sizing:border-box;contain:layout style;--rail-progress:0}
.waveform-fragment .play-mark{width:var(--play-size,34px);height:var(--play-size,34px);color:#ab9dd6}
.play-mark circle{fill:currentColor}
.waveform{height:var(--play-size,40px);gap:calc(2px * (1 - var(--rail-progress)));position:relative;overflow:visible;transform:translateY(calc(var(--rail-offset,0px) * var(--rail-progress)))}
.waveform i{width:auto;min-width:0;flex:1;height:calc(var(--bar-height) * (1 - var(--rail-progress)) + 4px * var(--rail-progress));background:#a99ac7;border-radius:2px}
.waveform::after{content:'';position:absolute;left:0;width:10%;height:4px;top:calc(50% - 2px);background:#f3edf6;border-radius:4px;opacity:var(--rail-progress)}
.choice{transform-origin:center;border-color:#ded2ef;background:#fcfaff;box-shadow:0 5px 20px #7f59bb13;will-change:transform,opacity}
.choice::after{content:'';position:absolute;inset:-5px;border:1px solid #ccb2f0;border-radius:inherit;opacity:var(--choice-ring,0);transform:scale(var(--choice-ring-scale,1));pointer-events:none}
.style-choice{transform:translateY(var(--style-offset)) scale(var(--style-scale,1))}.purpose-choice{transform:translateY(var(--purpose-offset)) scale(var(--purpose-scale,1))}
.scanner{height:1px;box-shadow:0 0 3px #fff,0 0 12px #c4a2f2,0 0 20px #ceb9ed88;top:var(--scan-position,0%);opacity:var(--scan-opacity,0)}
.scanner span{height:30px;top:-15px;background:linear-gradient(0deg,transparent,#cab4ed35,transparent);filter:blur(2px)}
.scroll-cue>span{animation:cue-breathe 2.4s ease-in-out infinite}
@keyframes cue-breathe{0%,100%{opacity:.35;transform:scaleY(.7)}50%{opacity:1;transform:scaleY(1)}}
.dialog-card-mount .artist-background,.dialog-card-mount .artist-shade,.dialog-card-mount .artist-topline,.dialog-card-mount .artist-identity p,.dialog-card-mount .release>img,.dialog-card-mount .release-details h3,.dialog-card-mount .music-strip,.dialog-card-mount .collaboration{opacity:1;transform:none}
.dialog-card-mount .name-line>span{transform:none}
@media(max-width:700px){.scroll-story{height:305svh}.artist-identity h2{line-height:.84}.canvas-corner{width:13px;height:13px}.corner-a,.corner-b{top:14px}.corner-c,.corner-d{bottom:14px}.corner-a,.corner-c{left:14px}.corner-b,.corner-d{right:14px}}
@media(prefers-reduced-motion:reduce){.scroll-story{height:100svh;--background-progress:1!important;--nav-progress:1!important;--first-name-progress:1!important;--last-name-progress:1!important;--descriptor-progress:1!important;--cover-progress:1!important;--release-title-progress:1!important;--player-progress:1!important;--invitation-progress:1!important}.fragment{opacity:0!important}.scroll-cue>span{animation:none}.name-line>span{transform:none}.scanner{opacity:0!important}}
@media(min-width:1281px) and (max-width:1500px){.style-choice{left:12%;top:calc(50% - 20.84vw - 76px);margin-top:0}.purpose-choice{right:12%;top:calc(50% + 20.84vw + 20px);margin-top:0}}
.waveform i{border-radius:calc(2px * (1 - var(--rail-progress)));background:rgb(calc(169 + var(--rail-progress)) calc(154 + 6 * var(--rail-progress)) calc(199 + 2 * var(--rail-progress)) / calc(1 - .6 * var(--rail-progress)))}