.wipe-overlay{z-index:9000;pointer-events:none;width:100vw;height:100dvh;position:fixed;top:0;left:0;transform:translate(-100%)}.wipe-overlay.wipe-in{animation:.35s cubic-bezier(.7,0,.3,1) forwards wipeIn}html[data-wipe]:before{content:"";z-index:9000;pointer-events:none;background:var(--wipe-color,var(--c-yellow,#ffe500));width:100vw;height:100dvh;animation:.35s cubic-bezier(.7,0,.3,1) forwards wipeOut;position:fixed;top:0;left:0;transform:translate(0)}html[data-wipe=back]:before{animation-name:wipeOutReverse}@keyframes wipeIn{0%{transform:translate(-100%)}to{transform:translate(0)}}@keyframes wipeOut{0%{transform:translate(0)}to{transform:translate(100%)}}@keyframes wipeInReverse{0%{transform:translate(100%)}to{transform:translate(0)}}@keyframes wipeOutReverse{0%{transform:translate(0)}to{transform:translate(-100%)}}.wipe-overlay.wipe-in-reverse{animation:.35s cubic-bezier(.7,0,.3,1) forwards wipeInReverse}.circle-overlay{z-index:9000;pointer-events:none;width:100vw;height:100dvh;position:fixed;top:0;left:0}.circle-overlay.circle-in{animation:.45s cubic-bezier(.4,0,.2,1) forwards circleIn}.circle-overlay.circle-out{animation:.4s cubic-bezier(.4,0,.2,1) forwards circleOut}@keyframes circleIn{0%{clip-path:circle(0% at var(--cx,50%) var(--cy,50%))}to{clip-path:circle(150% at var(--cx,50%) var(--cy,50%))}}@keyframes circleOut{0%{clip-path:circle(150% at var(--cx,50%) var(--cy,50%))}to{clip-path:circle(0% at var(--cx,50%) var(--cy,50%))}}