body.is-loading{overflow:hidden}
.load-screen{position:fixed;inset:0;z-index:1000;isolation:isolate;overflow:hidden}
.paper-half{position:absolute;inset:0;background-color:#f8f7f3;background-image:url('assets/paper.png');background-position:center;background-size:cover;transition:transform 850ms cubic-bezier(.77,0,.175,1);will-change:transform}
.paper-left{clip-path:polygon(0 0,49.8% 0,51.3% 5.8%,47.5% 14.2%,48.7% 22.8%,50.8% 31.6%,48.8% 40.4%,47.6% 49%,52.2% 57.4%,46.9% 65.8%,48.4% 74.4%,50.4% 83%,51.5% 91.6%,49.8% 100%,0 100%)}
.paper-right{clip-path:polygon(49.8% 0,100% 0,100% 100%,49.8% 100%,51.5% 91.6%,50.4% 83%,48.4% 74.4%,46.9% 65.8%,52.2% 57.4%,47.6% 49%,48.8% 40.4%,50.8% 31.6%,48.7% 22.8%,47.5% 14.2%,51.3% 5.8%)}
.paper-seam{position:absolute;top:0;left:45%;width:10%;height:100%;fill:none;stroke:#44463f;stroke-width:1.5;transition:opacity 180ms ease}
.paper-seam path{vector-effect:non-scaling-stroke}
.load-center{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);text-align:center;transition:opacity 180ms ease;width:280px}
.load-progress{width:120px;height:120px;margin:auto;display:grid;place-items:center;position:relative;color:#1c1d1a}
.load-progress svg{position:absolute;inset:0;width:100%;height:100%;fill:none;stroke:#64665d;stroke-width:1.6;transform:rotate(-15deg)}
.load-progress circle:first-child{stroke-dasharray:13 18 9 12 17 13}
.load-progress circle:last-child{stroke-dasharray:5 17 12 14;opacity:.6}
#load-percent{font-family:'DM Sans',sans-serif;font-size:32px;font-weight:700;font-variant-numeric:tabular-nums;line-height:1}
#load-continue{margin-top:24px;padding:12px 16px;background:var(--ink);color:var(--paper);font-size:14px;border-radius:3px}
.load-screen.reveal .paper-left{transform:translateX(-102%) rotate(-5deg)}
.load-screen.reveal .paper-right{transform:translateX(102%) rotate(5deg)}
.load-screen.reveal .load-center,.load-screen.reveal .paper-seam{opacity:0}
.load-screen.reveal{pointer-events:none}
@media(prefers-reduced-motion:reduce){.paper-half{transition:opacity 180ms ease;will-change:auto}.load-screen.reveal .paper-half{transform:none;opacity:0}}
/* The seam grows with the displayed progress; tension precedes the final paper tear. */
.paper-half{transition:none;transform-origin:50% 48%;backface-visibility:hidden}
.paper-seam path{stroke-linecap:round;stroke-linejoin:round}
.load-progress svg{animation:loader-orbit 7s linear infinite}
@keyframes loader-orbit{from{transform:rotate(-15deg)}to{transform:rotate(345deg)}}
.load-screen.complete .load-progress svg{animation-play-state:paused}
.load-screen.reveal .paper-half{transition:transform 1100ms cubic-bezier(.77,0,.175,1)}
.load-screen.reveal .paper-left{transform:translate(-102%,-3%) rotate(-9deg)}
.load-screen.reveal .paper-right{transform:translate(102%,4%) rotate(11deg)}
@media(prefers-reduced-motion:reduce){.load-progress svg{animation:none}.load-screen.reveal .paper-half{transition:opacity 180ms ease;transform:none}}
