/* S7: the same reversible scroll clock drives gathering, packing and a real hinge.
   The closed envelope is x15..623, y62..433, z-47..3 in model coordinates. */
.cr-section{
 --cr-g:clamp(0,calc(var(--cr-p)/.55),1);
 --cr-gather:calc(var(--cr-g)*var(--cr-g)*(3 - 2*var(--cr-g)));
 --cr-i:clamp(0,calc((var(--cr-p) - .60)/.17),1);
 --cr-insert:calc(var(--cr-i)*var(--cr-i)*(3 - 2*var(--cr-i)));
 --cr-c:clamp(0,calc((var(--cr-p) - .80)/.16),1);
 --cr-close:calc(var(--cr-c)*var(--cr-c)*(3 - 2*var(--cr-c)));
}
.cr-object-frame{perspective:3000px}
/* Keep a real stage when the motion runtime is unavailable or disabled. */
.cr-section.focus-scene .cr-art{height:calc(var(--stage,780px) - 100px)}
.cr-dossier-model{transform:rotateX(calc(22deg - var(--cr-gather)*8deg)) rotateY(calc(-10deg + var(--cr-gather)*2deg)) rotateZ(calc(-8deg + var(--cr-gather)*6deg));transform-origin:50% 60%}
.cr-model-shadow{transform:rotate(-2deg) scaleX(calc(1.08 - var(--cr-close)*.14))}
.cr-sheet{
 --cr-t:clamp(0,calc((var(--cr-p) - var(--cr-pack-start))/.17),1);
 --cr-pack:calc(var(--cr-t)*var(--cr-t)*(3 - 2*var(--cr-t)));
 --cr-away:calc(1 - var(--cr-gather));
 transform:translate3d(calc(var(--cr-away)*var(--cr-x)),calc(var(--cr-away)*var(--cr-y) + var(--cr-pack)*var(--cr-dock-y)),calc(var(--cr-z) + var(--cr-away)*var(--cr-float-z) + var(--cr-pack)*var(--cr-dock-z))) rotateZ(calc(var(--cr-away)*var(--cr-rz))) rotateY(calc(var(--cr-away)*var(--cr-ry))) scale(calc(1 + var(--cr-away)*var(--cr-grow)));
 box-shadow:inset 0 1px 0 #fff,0 2px 0 #acbbd0,0 4px 0 #dae3f1,0 calc(11px - var(--cr-pack)*8px) calc(20px - var(--cr-pack)*16px) #06132c27;
}
.cr-sheet-customer{--cr-pack-start:.46;--cr-x:-230px;--cr-y:-72px;--cr-z:-7px;--cr-float-z:-165px;--cr-dock-y:84px;--cr-dock-z:-28px;--cr-rz:-8deg;--cr-ry:-5deg;--cr-grow:-.06;--cr-tab-y:0px}
.cr-sheet-company{--cr-pack-start:.50;--cr-x:250px;--cr-y:-48px;--cr-z:15px;--cr-float-z:105px;--cr-dock-y:4px;--cr-dock-z:-44px;--cr-rz:7deg;--cr-ry:4deg;--cr-grow:.035;--cr-tab-y:68px}
.cr-sheet-bank{--cr-pack-start:.54;--cr-x:-96px;--cr-y:70px;--cr-z:37px;--cr-float-z:200px;--cr-dock-y:-76px;--cr-dock-z:-60px;--cr-rz:-3deg;--cr-ry:0deg;--cr-grow:.10;--cr-tab-y:136px}
/* The small exposed tab is connected to its sheet underneath the cover edge. */
.cr-index-tab{right:-62px;width:44px;transform:translateY(calc(var(--cr-pack)*var(--cr-tab-y)));box-shadow:2px 2px 3px #001b471f}
.cr-index-tab::before{content:"";position:absolute;right:100%;top:-1px;bottom:-1px;width:19px;background:inherit;border-block:1px solid #8aaddd}
.cr-punch-hole{left:18px;top:27px;width:14px;height:14px}
.cr-punch-hole-lower{top:187px}
.cr-metal-spine{width:42px;transform:translateZ(-41px);opacity:1}
/* These rings stand in XZ, reaching the common holes through all three Z layers. */
.cr-binding{width:53px;height:44px;opacity:1;transform:translateZ(-22px) rotateX(90deg);transform-origin:center}
.cr-binding-top{top:112px}
.cr-binding-bottom{top:272px}
.cr-section .cr-deadline,.cr-section.focus-scene .cr-deadline{
 left:597px;top:310px;
 transform:translate3d(calc((1 - var(--cr-gather))*140px - var(--cr-insert)*177px),calc((1 - var(--cr-gather))*56px - var(--cr-insert)*144px),calc(76px + (1 - var(--cr-gather))*95px - var(--cr-insert)*95px)) rotateZ(calc((4deg + (1 - var(--cr-gather))*9deg)*(1 - var(--cr-insert)))) scale(calc(.82 + (1 - var(--cr-gather))*.18 - var(--cr-insert)*.18));
}
.cr-section .cr-conditions,.cr-section.focus-scene .cr-conditions{
 left:32px;top:405px;
 transform:translate3d(calc((1 - var(--cr-gather))*-165px + var(--cr-insert)*84px),calc((1 - var(--cr-gather))*-30px - var(--cr-insert)*160px),calc(-20px - (1 - var(--cr-gather))*92px + var(--cr-insert)*9px)) rotateZ(calc((-3deg - (1 - var(--cr-gather))*6deg)*(1 - var(--cr-insert)))) scale(calc(.88 + (1 - var(--cr-gather))*.05 - var(--cr-insert)*.16));
}
.cr-case-spine{position:absolute;left:15px;top:62px;width:50px;height:371px;background:linear-gradient(90deg,#16358f,#335acc 45%,#193888);border:1px solid #6687e1;transform-origin:left center;transform:translateZ(-47px) rotateY(-90deg);box-shadow:inset 5px 0 9px #102a7966}
.cr-case-spine::after{content:"";position:absolute;inset:10px 8px;border-inline:1px solid #93b1ff36;border-radius:6px}
.cr-lid{position:absolute;left:15px;top:62px;width:608px;height:371px;transform-style:preserve-3d;transform-origin:0 50%;transform:translateZ(3px) rotateY(calc(-92deg*(1 - var(--cr-close))))}
.cr-lid-face{position:absolute;inset:0;border:1px solid #7795f1;border-radius:11px 13px 17px 11px;backface-visibility:hidden;-webkit-backface-visibility:hidden}
.cr-lid-outer{transform:translateZ(.8px);background:linear-gradient(115deg,#375de4,#2448c6 62%,#2e53d4);box-shadow:inset 1px 1px 0 #b3c6ff80,inset -2px -2px 0 #16379166}
.cr-lid-inner{transform:rotateY(180deg) translateZ(.8px);background:linear-gradient(110deg,#25459f,#385bbb);box-shadow:inset 0 0 0 13px #b1c4ff0a}
.cr-lid-inner::before{content:"";position:absolute;left:36px;right:36px;bottom:34px;height:92px;border:1px solid #a3bfff40;border-radius:5px;background:#9bb6ff0a;box-shadow:inset 0 1px 0 #cfdaff33}
.cr-lid::after{content:"";position:absolute;right:0;top:7px;bottom:10px;width:2px;background:#7592ee;transform-origin:right center;transform:rotateY(90deg)}
.cr-lid-rule{position:absolute;left:38px;top:0;bottom:0;width:1px;background:#142f8866;box-shadow:2px 0 0 #bacfff25}
.cr-lid-logo{position:absolute;left:68px;top:39px;font-size:29px;line-height:1;font-weight:650;letter-spacing:-1.6px;color:#fff}
.cr-lid-title{position:absolute;left:68px;top:109px;font-size:55px;line-height:1.02;letter-spacing:-2.3px;font-weight:560;color:#fff}
.cr-lid-caption{position:absolute;left:70px;bottom:42px;max-width:390px;font-size:17px;line-height:1.5;color:#dce6ff}
.cr-lid-seal{position:absolute;right:34px;top:38px;width:32px;height:32px;display:grid;place-items:center;border:1px solid #d7e3ff70;border-radius:50%;color:#e2eaff;font-size:16px}
@media(max-width:767px){
 .cr-section.focus-scene .cr-art{height:min(calc(var(--stage,100svh) - 100px),112vw)}
 /* Frame the complete open hinge, then ease back to the full-size closed folder. */
 .cr-object-frame{transform:translate(calc(-50% + (1 - var(--cr-close))*70px*var(--cr-scale)),-50%) scale(calc(var(--cr-scale)*(.82 + var(--cr-close)*.18)))}
 .cr-sheet-customer{--cr-x:-108px;--cr-y:-94px;--cr-float-z:-120px;--cr-rz:-5deg;--cr-ry:0deg;--cr-grow:-.04}
 .cr-sheet-company{--cr-x:104px;--cr-y:-16px;--cr-float-z:50px;--cr-rz:4deg;--cr-ry:0deg;--cr-grow:.02}
 .cr-sheet-bank{--cr-x:-30px;--cr-y:139px;--cr-float-z:145px;--cr-rz:-2deg;--cr-grow:.06}
 .cr-section .cr-deadline,.cr-section.focus-scene .cr-deadline{left:515px;top:380px;transform:translate3d(calc((1 - var(--cr-gather))*-16px - var(--cr-insert)*95px),calc((1 - var(--cr-gather))*53px - var(--cr-insert)*214px),calc(185px + (1 - var(--cr-gather))*75px - var(--cr-insert)*204px)) rotateZ(calc((3deg + (1 - var(--cr-gather))*5deg)*(1 - var(--cr-insert)))) scale(calc(.8 - var(--cr-insert)*.16))}
 .cr-section .cr-conditions,.cr-section.focus-scene .cr-conditions{left:68px;top:447px;transform:translate3d(calc((1 - var(--cr-gather))*-70px + var(--cr-insert)*48px),calc((1 - var(--cr-gather))*55px - var(--cr-insert)*202px),calc(-20px - (1 - var(--cr-gather))*45px + var(--cr-insert)*9px)) rotateZ(calc((-3deg - (1 - var(--cr-gather))*4deg)*(1 - var(--cr-insert)))) scale(calc(.85 - var(--cr-insert)*.13))}
 .cr-index-tab{font-size:14px}
}
@media(max-height:599px) and (min-width:768px){
 .cr-section.focus-scene .cr-art{height:230px}
}