/* The scroll is a sequence of physical cards, connected by one travelling technical artefact. */
body{perspective:1800px}.turn-page{transform:perspective(1700px) rotateX(var(--turn,0deg)) translate3d(0,var(--lift,0px),0);transform-origin:50% 50%;transition:box-shadow .5s ease;will-change:transform}.turn-page.is-turning{box-shadow:0 55px 100px rgba(0,0,0,.25)}
.scroll-artefact{position:fixed;z-index:18;left:var(--artefact-x,69%);top:var(--artefact-y,54%);width:132px;height:24px;pointer-events:none;opacity:var(--artefact-opacity,0);transform:translate3d(-50%,-50%,0) rotate(var(--artefact-rot,-20deg)) scale(var(--artefact-scale,.8));transform-origin:center;transition:opacity .25s ease;filter:drop-shadow(0 16px 17px rgba(0,0,0,.5))}.scroll-artefact:before{content:'';position:absolute;inset:2px 0;border-radius:8px;background:repeating-linear-gradient(105deg,#75ece9 0 6px,#166a9d 7px 11px,#b8f0ed 12px 14px);box-shadow:inset 0 5px 6px rgba(255,255,255,.42),inset 0 -6px 8px rgba(0,0,0,.38)}.scroll-artefact:after{content:'';position:absolute;right:-18px;top:6px;width:24px;height:12px;background:#d0eeea;clip-path:polygon(0 0,100% 50%,0 100%)}.scroll-artefact i{position:absolute;z-index:2;top:-21px;width:2px;height:23px;background:linear-gradient(#79efee,transparent);opacity:.7}.scroll-artefact i:nth-child(1){left:22%}.scroll-artefact i:nth-child(2){left:50%;height:38px;top:-32px}.scroll-artefact i:nth-child(3){left:76%;height:18px;top:-15px}.scroll-artefact b{position:absolute;z-index:3;left:-15px;top:0;width:21px;height:24px;border-radius:50% 4px 4px 50%;background:linear-gradient(90deg,#d7ffff,#2ea5ba 70%,#12587e)}
.closing-mark{position:absolute;right:-5vw;bottom:-10vw;width:clamp(360px,48vw,720px);aspect-ratio:1;transform:rotate(-24deg);opacity:.8}.closing-mark i{position:absolute;display:block;width:82%;height:15%;border:2px solid rgba(104,225,226,.5);background:linear-gradient(90deg,rgba(104,225,226,.06),transparent);transform:skewY(-28deg)}.closing-mark i:nth-child(1){top:14%;left:2%}.closing-mark i:nth-child(2){top:42%;left:13%;border-color:rgba(255,255,255,.32)}.closing-mark i:nth-child(3){top:70%;left:0%;border-color:rgba(104,225,226,.74)}
@media(max-width:760px){.turn-page{transform:none!important}.scroll-artefact{display:none}.closing-mark{width:500px;right:-50%;bottom:-10%}}
@media(prefers-reduced-motion:reduce){.turn-page{transform:none!important}.scroll-artefact{display:none}}