/* Scroll provides the timeline. Paper and cloud layers are decorative. */
.portal-scene,.scroll-story{--depth-progress:0}.depth-atmosphere{position:absolute;inset:0;pointer-events:none;transform-style:preserve-3d;z-index:0;overflow:clip}.depth-cloud{position:absolute;left:-12%;right:-12%;bottom:5%;height:28%;background:url('/assets/portal-atmosphere-900.webp') 68% 85%/cover;mask-image:radial-gradient(ellipse at center,#0009 3%,transparent 72%);border-radius:50%;backface-visibility:hidden}.depth-cloud-far{opacity:.28;transform:translate3d(calc(-16px + var(--depth-progress)*32px),calc(10px - var(--depth-progress)*26px),-50px) rotateZ(-4deg) scale(1.16)}.depth-cloud-near{opacity:.24;bottom:-1%;height:24%;background-position:48% 100%;transform:translate3d(calc(20px - var(--depth-progress)*40px),calc(var(--depth-progress)*22px),45px) rotateZ(4deg) scale(1.12)}.depth-light-shaft{position:absolute;top:14%;bottom:10%;width:28%;left:36%;background:linear-gradient(90deg,transparent,#f3ca6d25,transparent);opacity:calc(.18 + var(--depth-progress)*.22);transform:translate3d(0,0,-35px) rotateZ(calc(-7deg + var(--depth-progress)*12deg));mask-image:linear-gradient(transparent,#000 25%,#000 70%,transparent)}.portal-scene>.depth-atmosphere{z-index:2}.portal-scene>.portal-book,.portal-scene>.reflection-trigger{z-index:3}.portal-scene .depth-cloud{bottom:4%;height:23%}.portal-scene .depth-cloud-near{bottom:-4%;height:20%}.portal-scene .depth-light-shaft{opacity:calc(.1 + var(--depth-progress)*.14)}.story-stage>.depth-atmosphere{z-index:1}.story-stage>.story-book{z-index:2}.story-visual,.story-track{z-index:3}.story-stage .depth-cloud{bottom:11%;height:24%}.story-stage .depth-cloud-near{bottom:6%;height:20%}.depth-bookleaf{position:absolute;inset:4px 1px 4px 0;background:url('/assets/paper-leaf.svg') center/100% 100%;border-radius:2px 5px 5px 2px;transform-origin:0 50%;backface-visibility:hidden}.depth-bookleaf-back{transform:translateZ(6px) rotateY(calc(var(--depth-progress)*-3deg))}.depth-bookleaf-front{transform:translateZ(11px) rotateY(calc(var(--depth-progress)*-7deg))}.depth-ready .story-book .volume-front{transform-origin:0 50%;transform:translateZ(16px) rotateY(calc(var(--depth-progress)*-14deg));box-shadow:7px 10px 20px #0005}
.book-reading{--detail-depth:.5;perspective:900px;margin-top:36px;isolation:isolate}.book-reading:before{display:none}.book-reading>p,.book-reading>details{position:relative;z-index:1}.depth-page-fan{position:absolute;right:24px;top:-98px;width:78px;height:110px;pointer-events:none;transform-style:preserve-3d;z-index:0;transform:rotateX(calc(9deg - var(--detail-depth)*12deg)) rotateY(calc(-22deg + var(--detail-depth)*30deg))}.depth-sheet{position:absolute;inset:0;background:url('/assets/paper-leaf.svg') center/100% 100%;border-radius:3px 8px 8px 3px;transform-origin:0 90%;box-shadow:3px 6px 12px #0004;backface-visibility:hidden}.depth-sheet-back{transform:translate3d(-4px,2px,-12px) rotateZ(calc(-5deg - var(--detail-depth)*18deg))}.depth-sheet-middle{transform:translate3d(0,0,-5px) rotateZ(calc(-2deg - var(--detail-depth)*6deg))}.depth-sheet-front{transform:translate3d(3px,-2px,3px) rotateZ(calc(2deg + var(--detail-depth)*7deg))}
.audio-visual{--audio-depth:.5}.audio-artwork{perspective:1000px;transform-style:preserve-3d;min-height:250px;padding-top:28px}.audio-visual .audio-record{height:190px;width:190px;transform:translate3d(calc(17px + var(--audio-depth)*48px),calc(12px - var(--audio-depth)*18px),-18px) rotateX(calc(18deg - var(--audio-depth)*8deg)) rotateY(-16deg) rotateZ(calc(-32deg + var(--audio-depth)*100deg));border-width:4px;box-shadow:12px 18px 25px #0005}.audio-visual .audio-cover{width:132px;transform:translate3d(calc(-28px + var(--audio-depth)*10px),calc(8px - var(--audio-depth)*14px),26px) rotateX(calc(4deg - var(--audio-depth)*7deg)) rotateY(calc(-18deg + var(--audio-depth)*9deg)) rotateZ(calc(-10deg + var(--audio-depth)*7deg));box-shadow:8px 16px 24px #0007}.audio-handnote{z-index:4}.audio-visual .audio-record>span:after{content:'';position:absolute;inset:15px;border-radius:50%;background:#102033;border:1px solid #e5c28080}.audio-visual .audio-record:after{content:'';position:absolute;inset:12px;border-radius:50%;border:1px solid #e6c58230;box-shadow:inset 0 0 0 8px #d2ab5b08;pointer-events:none}
.motion-paused .depth-atmosphere{--depth-progress:.5}.motion-paused .story-book .volume-front{transform:translateZ(16px)}.motion-paused .depth-bookleaf-front{transform:translateZ(11px)}.motion-paused .depth-bookleaf-back{transform:translateZ(6px)}
@media(max-width:720px){.depth-cloud-far{transform:translate3d(calc(-8px + var(--depth-progress)*16px),calc(6px - var(--depth-progress)*14px),-25px) rotateZ(-3deg) scale(1.1)}.depth-cloud-near{transform:translate3d(calc(10px - var(--depth-progress)*20px),calc(var(--depth-progress)*10px),20px) rotateZ(3deg) scale(1.08);opacity:.19}.story-stage .depth-cloud{height:20%;bottom:15%}.story-stage .depth-cloud-near{bottom:10%}.book-reading{margin-top:48px}.depth-page-fan{width:65px;height:91px;top:-80px;right:24px}.audio-artwork{min-height:225px;padding-top:24px}.audio-visual .audio-record{height:160px;width:160px;transform:translate3d(calc(16px + var(--audio-depth)*24px),calc(8px - var(--audio-depth)*12px),-12px) rotateX(12deg) rotateY(-12deg) rotateZ(calc(-25deg + var(--audio-depth)*80deg))}.audio-visual .audio-cover{width:112px;transform:translate3d(calc(-25px + var(--audio-depth)*6px),calc(4px - var(--audio-depth)*8px),18px) rotateY(calc(-12deg + var(--audio-depth)*6deg)) rotateZ(calc(-8deg + var(--audio-depth)*5deg))}.audio-handnote{right:-2px;top:14px}}
@media(max-width:360px){.audio-visual .audio-cover{width:102px}.audio-visual .audio-record{height:145px;width:145px}.audio-artwork{min-height:210px}.depth-page-fan{right:20px}}
@media(max-width:720px){.scroll-story{overflow-clip-margin:0px}}
@media(prefers-reduced-motion:reduce){.depth-atmosphere{--depth-progress:.5}.depth-cloud,.depth-light-shaft{transform:none}.depth-ready .story-book .volume-front{transform:translateZ(16px)}.depth-bookleaf-front{transform:translateZ(11px)}.depth-bookleaf-back{transform:translateZ(6px)}.book-reading{--detail-depth:.5}.audio-visual{--audio-depth:.5}}