@property --fold-open{syntax:"<number>";inherits:true;initial-value:0}@property --fold-back{syntax:"<number>";inherits:true;initial-value:0}@property --fold-flip{syntax:"<number>";inherits:true;initial-value:0}@property --fold-zoom{syntax:"<number>";inherits:true;initial-value:1}.fold-stage{perspective:2400px;perspective-origin:50% 35%}.fold-camera{transform-style:preserve-3d;transform:scale(var(--fold-zoom))}.fold-spread{transform-style:preserve-3d;position:relative}.fold-card{transform-style:preserve-3d;transform:translateX(calc((var(--fold-open) + var(--fold-back)) * 50%)) translateZ(calc(sin(var(--fold-flip) * 180deg) * 56px)) rotateY(calc(var(--fold-flip) * 180deg));position:absolute;inset:0 25%}.fold-leaf{transform-style:preserve-3d;position:absolute;inset:0}.fold-cover{transform-origin:0;transform:translateZ(1px) rotateY(calc(var(--fold-open) * -180deg))}.fold-base{transform-origin:0;transform:translateZ(calc(var(--fold-back) * 2px)) rotateY(calc(var(--fold-back) * -180deg))}.fold-face{backface-visibility:hidden;background:#fff;position:absolute;inset:0;overflow:hidden}.fold-face:after{content:"";pointer-events:none;position:absolute;inset:0}.fold-face--reverse{transform:rotateY(180deg)}.fold-face[data-face=front]{opacity:min(clamp(0, (.5 - var(--fold-open)) * 1000, 1), clamp(0, (.5 - var(--fold-flip)) * 1000, 1))}.fold-face[data-face=inside-left]{opacity:min(clamp(0, (var(--fold-open) - .5) * 1000, 1), clamp(0, (.5 - var(--fold-flip)) * 1000, 1), clamp(0, (.999 - var(--fold-back)) * 1000, 1))}.fold-face[data-face=back]{opacity:min(clamp(0, var(--fold-open) * 1000, 1), clamp(0, (.5 - var(--fold-flip)) * 1000, 1), clamp(0, (.5 - var(--fold-back)) * 1000, 1))}.fold-face[data-face=outer-back]{opacity:max(clamp(0, (var(--fold-flip) - .5) * 1000, 1), clamp(0, (var(--fold-back) - .5) * 1000, 1))}.fold-face[data-face=front]:after{opacity:calc(sin(var(--fold-open) * 180deg) * .22);background:#281c10}.fold-face[data-face=inside-left]:after{background:linear-gradient(to left, rgb(40 28 16/calc(sin(var(--fold-open) * 180deg) * .22 + sin(var(--fold-back) * 180deg) * .36)), rgb(40 28 16/calc(sin(var(--fold-open) * 180deg) * .22)) 75%)}.fold-face[data-face=back]:after{opacity:calc(sin(var(--fold-open) * 180deg) * 1.1 + sin(var(--fold-back) * 180deg) * .7);background:linear-gradient(90deg,#281c1052,#281c1000 75%)}.fold-face[data-face=outer-back]:after{opacity:calc(sin(var(--fold-back) * 180deg) * .22);background:#281c10}.fold-face[data-face=inside-left]:before,.fold-face[data-face=back]:before{content:"";z-index:1;pointer-events:none;width:7%;position:absolute;top:0;bottom:0}.fold-face[data-face=inside-left]:before{background:linear-gradient(270deg,#281c1021,#281c1000);right:0}.fold-face[data-face=back]:before{background:linear-gradient(90deg,#281c1029,#ffffff59 1.5px,#281c1000);left:0}.fold-shadow{top:2.5%;bottom:-1.5%;left:calc(25% * (1 - var(--fold-open) + var(--fold-back)) + 1%);width:calc(48% + 50% * (var(--fold-open) - var(--fold-back)));filter:blur(calc(9px + sin(var(--fold-flip) * 180deg) * 10px));transform:translateZ(-2px) scale(max(.15, abs(cos(var(--fold-flip) * 180deg))), calc(1 - sin(var(--fold-flip) * 180deg) * .12));opacity:calc(1 - sin(var(--fold-flip) * 180deg) * .45);pointer-events:none;background:#281c104d;position:absolute}.fold-face[data-face=front]:before,.fold-face[data-face=outer-back]:before{content:"";z-index:1;pointer-events:none;width:5%;position:absolute;top:0;bottom:0}.fold-face[data-face=front]:before{background:linear-gradient(90deg,#281c1038,#281c100f 1.5px,#fff6 2.5px,#281c1000);left:0}.fold-face[data-face=outer-back]:before{background:linear-gradient(270deg,#281c1038,#281c100f 1.5px,#fff6 2.5px,#281c1000);right:0}@media (prefers-reduced-motion:reduce){.fold-root{transition:none!important}}
