/* Adapted from the approved newsletter paper variant, scott-homes 6201abf. */
.paperScene{position:relative;isolation:isolate;overflow:hidden}
#stage>.page{animation:none}
.paperLeaving{position:absolute;inset:0;width:100%;height:100%;box-sizing:border-box}
.paperLeaving .page{animation:none!important}
@media print{.paperLeaving,.paperShadow{display:none!important}}
/* Newsletter-only physical paper leaf. The incoming page stays still under
   the outgoing sheet; a rolled edge and moving cast shadow give the turn
   depth rather than translating/fading the two editorial pages. */
.paperScene{perspective:1900px;perspective-origin:50% 48%;background:#e7e4db}
.paperCurrent{z-index:1;transform:none;animation:none}
.paperContent{position:absolute;inset:0;width:100%;height:100%;overflow:hidden}
.paperLeaving{z-index:3;pointer-events:none;transform-style:preserve-3d;
 overflow:visible;will-change:transform;backface-visibility:hidden;
 animation-duration:780ms;animation-timing-function:cubic-bezier(.31,.04,.23,1);
 animation-fill-mode:both;box-shadow:0 4px 18px #10282522}
.paperLeaving.paperForward{transform-origin:0 50%;animation-name:paperLeafForward}
.paperLeaving.paperBackward{transform-origin:100% 50%;animation-name:paperLeafBackward}
/* The leaf's narrow return surface is deliberately paper, not a second render
   of the editorial tree. Curved radii, a gradient and skew suggest its curl. */
.paperLeaving::after{content:"";position:absolute;z-index:5;top:-.4%;bottom:-.4%;
 width:21%;pointer-events:none;backface-visibility:visible;
 background:linear-gradient(90deg,#adac9d 0%,#dddccf 10%,#fffdf2 31%,#f4f1e7 63%,#c7c7b8 100%);
 box-shadow:-8px 0 15px #18322b20;opacity:0;
 animation-duration:780ms;animation-timing-function:cubic-bezier(.31,.04,.23,1);
 animation-fill-mode:both}
.paperLeaving.paperForward::after{right:-.2%;transform-origin:0 50%;
 border-radius:0 37% 35% 0/0 6% 6% 0;animation-name:paperCurlForward}
.paperLeaving.paperBackward::after{left:-.2%;transform-origin:100% 50%;
 border-radius:37% 0 0 35%/6% 0 0 6%;animation-name:paperCurlBackward;
 background:linear-gradient(270deg,#adac9d 0%,#dddccf 10%,#fffdf2 31%,#f4f1e7 63%,#c7c7b8 100%)}
.paperShadow{position:absolute;z-index:2;inset:0;pointer-events:none;
 background:linear-gradient(90deg,transparent 30%,#152b282e 70%,#152b2860 92%,transparent);
 opacity:0;will-change:transform,opacity;animation-duration:780ms;
 animation-timing-function:cubic-bezier(.31,.04,.23,1);animation-fill-mode:both}
.paperShadow.paperForward{transform-origin:0 50%;animation-name:paperShadowForward}
.paperShadow.paperBackward{transform-origin:100% 50%;animation-name:paperShadowBackward;
 background:linear-gradient(270deg,transparent 30%,#152b282e 70%,#152b2860 92%,transparent)}
@keyframes paperLeafForward{
 0%{transform:rotateY(0deg) skewY(0deg)}
 22%{transform:rotateY(-19deg) skewY(-.7deg)}
 58%{transform:rotateY(-61deg) skewY(-1.6deg)}
 100%{transform:rotateY(-111deg) skewY(0deg)}
}
@keyframes paperLeafBackward{
 0%{transform:rotateY(0deg) skewY(0deg)}
 22%{transform:rotateY(19deg) skewY(.7deg)}
 58%{transform:rotateY(61deg) skewY(1.6deg)}
 100%{transform:rotateY(111deg) skewY(0deg)}
}
@keyframes paperCurlForward{
 0%{opacity:0;transform:rotateY(0deg) scaleX(.02)}
 15%{opacity:1;transform:rotateY(16deg) scaleX(.6)}
 46%{opacity:1;transform:rotateY(54deg) scaleX(1.15) skewY(1deg)}
 78%{opacity:.9;transform:rotateY(82deg) scaleX(.8)}
 100%{opacity:0;transform:rotateY(96deg) scaleX(.1)}
}
@keyframes paperCurlBackward{
 0%{opacity:0;transform:rotateY(0deg) scaleX(.02)}
 15%{opacity:1;transform:rotateY(-16deg) scaleX(.6)}
 46%{opacity:1;transform:rotateY(-54deg) scaleX(1.15) skewY(-1deg)}
 78%{opacity:.9;transform:rotateY(-82deg) scaleX(.8)}
 100%{opacity:0;transform:rotateY(-96deg) scaleX(.1)}
}
@keyframes paperShadowForward{
 0%{opacity:0;transform:scaleX(1)}
 24%{opacity:.6;transform:scaleX(.84)}
 61%{opacity:.8;transform:scaleX(.45)}
 100%{opacity:0;transform:scaleX(.03)}
}
@keyframes paperShadowBackward{
 0%{opacity:0;transform:scaleX(1)}
 24%{opacity:.6;transform:scaleX(.84)}
 61%{opacity:.8;transform:scaleX(.45)}
 100%{opacity:0;transform:scaleX(.03)}
}
@media(max-width:760px){
 .paperScene{perspective:1250px}
 .paperLeaving::after{width:25%}
}
@media(prefers-reduced-motion:reduce){
 .paperLeaving,.paperLeaving::after,.paperShadow{animation:none!important;display:none!important}
 .paperCurrent{transform:none!important}
}

