.duo-fold{--panel-w:235px;--panel-h:337px;--p:1;--pe:1;--fold:0;--cam-x:0px;--cam-s:1;--cam-rx:0deg;--cam-ry:0deg;--t-crease:0;--t-spine:0;--focus-moving:0;--focus-fixed:0;--focus-cover:0;--blur-moving:0px;--blur-fixed:0px;--blur-cover:0px;--hinge:50%;--band-reach:24%;position:relative;display:grid;place-items:center;width:100%;perspective:calc(var(--panel-w) * 9);perspective-origin:50% 50%}.duo-fold__camera{position:relative;width:calc(var(--panel-w) * 2);height:var(--panel-h);transform-style:preserve-3d;transform:translate3d(var(--cam-x),0,0) rotateX(var(--cam-rx)) rotateY(var(--cam-ry)) scale(var(--cam-s));will-change:transform}.duo-fold__leaf{position:absolute;top:0;width:var(--panel-w);height:var(--panel-h);transform-style:preserve-3d}.duo-fold__leaf--fixed{left:50%;transform:translateZ(-3px)}.duo-fold__leaf--moving{left:0;transform-origin:right center;transform:rotateY(calc(var(--fold) * 1deg));will-change:transform}.duo-fold__face{position:absolute;top:0;bottom:0;backface-visibility:hidden}.duo-fold__face--front{left:0;right:0;transform:translateZ(.5px)}.duo-fold__face--back{left:calc(var(--closed-overhang, 1) * -100% + 100%);width:calc(var(--closed-overhang, 1) * 100%);transform:rotateY(180deg) translateZ(.5px)}.duo-fold__soft{position:absolute;inset:0;pointer-events:none;will-change:mask-position}.duo-fold__soft>div{will-change:filter}.duo-fold__soft--moving{--band:calc(var(--focus-moving) * var(--band-reach));-webkit-mask-image:linear-gradient(90deg,transparent calc(var(--hinge) - var(--band)),#000 calc(var(--hinge) - var(--band) * .3),#000 100%);mask-image:linear-gradient(90deg,transparent calc(var(--hinge) - var(--band)),#000 calc(var(--hinge) - var(--band) * .3),#000 100%)}.duo-fold__soft--moving>div{filter:blur(var(--blur-moving))}.duo-fold__soft--fixed{--band:calc(var(--focus-fixed) * var(--band-reach));-webkit-mask-image:linear-gradient(90deg,#000 0,#000 calc(var(--hinge) + var(--band) * .3),transparent calc(var(--hinge) + var(--band)));mask-image:linear-gradient(90deg,#000 0,#000 calc(var(--hinge) + var(--band) * .3),transparent calc(var(--hinge) + var(--band)))}.duo-fold__soft--fixed>div{filter:blur(var(--blur-fixed))}.duo-fold__soft--cover{--band:calc(var(--focus-cover) * 70%);-webkit-mask-image:linear-gradient(90deg,#000 0,#000 calc(var(--band) * .3),transparent var(--band));mask-image:linear-gradient(90deg,#000 0,#000 calc(var(--band) * .3),transparent var(--band))}.duo-fold__soft--cover>div{filter:blur(var(--blur-cover))}.duo-fold__shade{position:absolute;inset:0;pointer-events:none}.duo-fold__shade--moving{opacity:var(--t-crease);background:linear-gradient(90deg,transparent calc(var(--hinge) - 36%),rgba(0,0,0,.58) var(--hinge))}.duo-fold__shade--fixed{opacity:calc(var(--t-crease) * .8);background:linear-gradient(90deg,rgba(0,0,0,.42) var(--hinge),transparent calc(var(--hinge) + 30%))}.duo-fold__shade--cover{opacity:calc(var(--focus-cover) * .85);background:linear-gradient(90deg,rgba(0,0,0,.5),transparent 42%)}.duo-fold[data-duo-phase=closed] .duo-fold__soft--cover,.duo-fold[data-duo-phase=open] .duo-fold__soft--fixed,.duo-fold[data-duo-phase=open] .duo-fold__soft--moving{display:none}.duo-fold__spine{position:absolute;left:50%;top:.4%;bottom:.4%;width:calc(3px + var(--t-spine) * 9px);transform:translateX(-50%) translateZ(1.5px);border-radius:999px;pointer-events:none;opacity:var(--t-spine);background:linear-gradient(90deg,#0c0e13,#2b303b 26%,#4a5160 48%,#23272f 72%,#0a0c11);box-shadow:0 0 18px rgba(0,0,0,.7)}.duo-fold[data-finish=star-white] .duo-fold__spine{background:linear-gradient(90deg,#8d8f94,#d9dadd 30%,#f4f4f5 50%,#cfd0d3 72%,#86888d);box-shadow:0 0 18px rgba(0,0,0,.35)}.duo-fold__shadow{position:absolute;left:50%;top:calc(50% + var(--panel-h) * .46);width:calc(var(--panel-w) * (.95 + 1.15 * var(--pe)));height:calc(var(--panel-w) * .22);transform:translate(-50%) translateX(calc(var(--cam-x) * .7));pointer-events:none;background:radial-gradient(50% 50% at 50% 50%,rgba(0,0,0,.75) 0,rgba(0,0,0,.35) 44%,transparent 74%);filter:blur(14px);opacity:calc(.85 - .4 * var(--pe))}