/* BillProofs page loader: a 3D carton folds shut, is taped, stamped with the BP mark and scanned
   while invoice slips orbit it. The page is revealed through an opening circle. */
@property --bpr{syntax:'<length-percentage>';inherits:false;initial-value:0%}
html.bp-loading,html.bp-loading body{overflow:hidden}
.bpl{position:fixed;inset:0;z-index:2147483000;display:grid;place-items:center;background:radial-gradient(900px 600px at 50% 42%,#10284a 0,#071120 55%,#030812 100%);color:#E9EEF3;font-family:'Archivo',system-ui,-apple-system,'Segoe UI',sans-serif;-webkit-mask:radial-gradient(circle at 50% 44%,transparent var(--bpr),#000 calc(var(--bpr) + 1px));mask:radial-gradient(circle at 50% 44%,transparent var(--bpr),#000 calc(var(--bpr) + 1px));animation:bplFailsafe .6s 9s forwards}
.bpl.out{animation:bplOpen .9s cubic-bezier(.7,0,.2,1) forwards;pointer-events:none}
@keyframes bplOpen{to{--bpr:150%}}
@keyframes bplFailsafe{to{opacity:0;visibility:hidden}}
.bpl-grid{position:absolute;inset:-20%;background:linear-gradient(rgba(120,170,255,.07) 1px,transparent 1px) 0 0/48px 48px,linear-gradient(90deg,rgba(120,170,255,.07) 1px,transparent 1px) 0 0/48px 48px;transform:perspective(700px) rotateX(62deg) translateY(28%);-webkit-mask:radial-gradient(closest-side,#000,transparent);mask:radial-gradient(closest-side,#000,transparent);animation:bplGrid 3s linear infinite}
@keyframes bplGrid{to{background-position:0 48px,0 0}}
.bpl-in{position:relative;display:grid;justify-items:center;gap:26px}
.bpl-stage{position:relative;width:300px;height:280px;perspective:900px;perspective-origin:50% 35%}
.bpl-shadow{position:absolute;left:50%;top:228px;width:190px;height:34px;margin-left:-95px;border-radius:50%;background:radial-gradient(closest-side,rgba(0,201,141,.35),transparent);filter:blur(6px);animation:bplShadow 3.2s ease-in-out infinite}
@keyframes bplShadow{50%{transform:scale(.85);opacity:.7}}
.bpl-float{position:absolute;left:50%;top:44%;transform-style:preserve-3d;animation:bplFloat 3.2s ease-in-out infinite}
@keyframes bplFloat{50%{transform:translateY(-12px)}}
.bpl-spin{transform-style:preserve-3d;transform:rotateX(-22deg) rotateY(-35deg);animation:bplSpin 7s linear infinite}
@keyframes bplSpin{to{transform:rotateX(-22deg) rotateY(325deg)}}
.bpl-box{--s:120px;position:absolute;left:calc(var(--s) / -2);top:calc(var(--s) / -2);width:var(--s);height:var(--s);transform-style:preserve-3d}
.bpl-f{position:absolute;inset:0;background:#C8975A;box-shadow:inset 0 0 0 1px rgba(0,0,0,.08),inset 0 -14px 24px rgba(0,0,0,.14)}
.bpl-f::after{content:"";position:absolute;inset:0;background:repeating-linear-gradient(90deg,rgba(255,255,255,.035) 0 2px,transparent 2px 7px)}
.bpl-front{transform:translateZ(60px)}
.bpl-back{transform:rotateY(180deg) translateZ(60px);background:#B3834A}
.bpl-right{transform:rotateY(90deg) translateZ(60px);background:#A97A43}
.bpl-left{transform:rotateY(-90deg) translateZ(60px);background:#B98A50}
.bpl-bottom{transform:rotateX(-90deg) translateZ(60px);background:#7d5a31}
.bpl-inside{transform:rotateX(90deg) translateZ(56px);background:#5a3f22}
/* stamped BP mark on the front */
.bpl-stamp{position:absolute;left:50%;top:50%;width:62px;height:70px;margin:-38px 0 0 -31px;background:url(/img/brand/mark-dark.webp) center/contain no-repeat;opacity:0;transform:scale(2.4) rotate(-14deg);filter:drop-shadow(0 0 0 rgba(0,201,141,0));animation:bplStamp .45s 1.05s cubic-bezier(.2,1.4,.4,1) forwards}
@keyframes bplStamp{60%{opacity:1;transform:scale(.92) rotate(-4deg)}100%{opacity:.95;transform:scale(1) rotate(-6deg);filter:drop-shadow(0 0 10px rgba(0,201,141,.55))}}
.bpl-front::before{content:"PROOF";position:absolute;left:8px;bottom:8px;font:900 10px/1 'Archivo',sans-serif;letter-spacing:.18em;color:#00A877;border:2px solid #00A877;padding:3px 5px 2px;border-radius:3px;opacity:0;transform:scale(1.8) rotate(-12deg);animation:bplProof .35s 1.55s cubic-bezier(.2,1.4,.4,1) forwards}
@keyframes bplProof{to{opacity:.9;transform:rotate(-8deg)}}
/* top flaps: they start open and fold shut */
.bpl-top{position:absolute;inset:0;transform:rotateX(90deg) translateZ(60px);transform-style:preserve-3d}
.bpl-flap{position:absolute;background:#D2A56C;box-shadow:inset 0 0 0 1px rgba(0,0,0,.1);backface-visibility:visible}
.bpl-fl{left:0;top:0;width:60px;height:120px;transform-origin:left center;transform:rotateY(-115deg);animation:bplFlapL .4s .1s cubic-bezier(.5,0,.2,1.2) forwards;background:#c49558}
.bpl-fr{right:0;top:0;width:60px;height:120px;transform-origin:right center;transform:rotateY(115deg);animation:bplFlapR .4s .18s cubic-bezier(.5,0,.2,1.2) forwards;background:#c49558}
.bpl-ft{left:0;top:0;width:120px;height:60px;transform-origin:center top;transform:translateZ(1px) rotateX(120deg);animation:bplFlapT .42s .45s cubic-bezier(.5,0,.2,1.2) forwards}
.bpl-fb{left:0;bottom:0;width:120px;height:60px;transform-origin:center bottom;transform:translateZ(1px) rotateX(-120deg);animation:bplFlapB .42s .55s cubic-bezier(.5,0,.2,1.2) forwards}
@keyframes bplFlapL{to{transform:rotateY(0)}}
@keyframes bplFlapR{to{transform:rotateY(0)}}
@keyframes bplFlapT{to{transform:translateZ(1px) rotateX(0)}}
@keyframes bplFlapB{to{transform:translateZ(1px) rotateX(0)}}
.bpl-tape{position:absolute;left:46px;top:-6px;width:28px;height:0;transform:translateZ(2px);background:linear-gradient(90deg,rgba(255,255,255,.35),rgba(255,255,255,0) 40%),#00C98D;box-shadow:0 0 14px rgba(0,201,141,.45);animation:bplTape .32s .95s cubic-bezier(.3,0,.2,1) forwards}
@keyframes bplTape{to{height:132px}}
.bpl-tape-front{position:absolute;left:46px;top:0;width:28px;height:0;background:#00C98D;animation:bplTape2 .2s 1.2s ease-out forwards;opacity:.95}
@keyframes bplTape2{to{height:26px}}
/* scanning beam passing down through the box */
.bpl-scan{position:absolute;left:-30px;top:-30px;width:180px;height:180px;transform:rotateX(90deg) translateZ(70px);background:radial-gradient(closest-side,rgba(120,170,255,.55),rgba(47,107,255,.2) 60%,transparent 72%);border-radius:50%;opacity:0;animation:bplScan 1.6s 1.3s ease-in-out infinite}
@keyframes bplScan{0%{opacity:0;transform:rotateX(90deg) translateZ(80px)}15%{opacity:1}85%{opacity:1}100%{opacity:0;transform:rotateX(90deg) translateZ(-80px)}}
/* invoice slips orbiting the carton */
.bpl-orbit{position:absolute;left:0;top:0;transform-style:preserve-3d;transform:rotateX(-14deg);animation:bplOrbit 5.5s linear infinite}
@keyframes bplOrbit{from{transform:rotateX(-14deg) rotateY(0)}to{transform:rotateX(-14deg) rotateY(-360deg)}}
.bpl-slip{position:absolute;left:-42px;top:-11px;width:84px;height:22px;border-radius:6px;background:#F6F4EF;color:#13202E;font:700 9px/22px 'Archivo',sans-serif;padding:0 7px;display:flex;justify-content:space-between;box-shadow:0 6px 14px rgba(0,0,0,.35);white-space:nowrap}
.bpl-slip b{color:#14703f}.bpl-slip.bad b{color:#D9473B}
.bpl-slip.bad{box-shadow:0 0 0 2px #E5483B,0 6px 14px rgba(0,0,0,.35)}
/* text and progress */
.bpl-brand{display:grid;justify-items:center;gap:8px;opacity:0;animation:bplRise .6s .2s cubic-bezier(.16,1,.3,1) forwards}
.bpl-brand img{height:30px;width:auto}
.bpl-slogan{font:700 13px/1 'Archivo',sans-serif;letter-spacing:.08em;color:transparent;background:linear-gradient(90deg,#00C98D 0,#7ff0c8 25%,#F2C230 50%,#00C98D 75%) 0 0/200% 100%;-webkit-background-clip:text;background-clip:text;animation:bplSlogan 3s linear infinite}
@keyframes bplSlogan{to{background-position:-200% 0}}
@keyframes bplRise{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:none}}
.bpl-prog{width:240px;display:grid;gap:8px;opacity:0;animation:bplRise .6s .35s cubic-bezier(.16,1,.3,1) forwards}
.bpl-bar{height:4px;border-radius:4px;background:rgba(255,255,255,.1);overflow:hidden}
.bpl-bar i{display:block;height:100%;width:var(--p,0%);background:linear-gradient(90deg,#00C98D,#F2C230);border-radius:4px;transition:width .25s ease-out;box-shadow:0 0 12px rgba(0,201,141,.6)}
.bpl-txt{display:flex;justify-content:space-between;font:600 11px/1 'Archivo',sans-serif;color:#8FA2B6;font-variant-numeric:tabular-nums;letter-spacing:.02em}
.bpl-txt b{color:#E9EEF3}
.bpl.out .bpl-float{animation:bplLeave .7s cubic-bezier(.6,0,.3,1) forwards}
@keyframes bplLeave{to{transform:translateY(-30px) scale(2.6);opacity:0}}
.bpl.out .bpl-brand,.bpl.out .bpl-prog{animation:bplFade .3s forwards}
@keyframes bplFade{to{opacity:0;transform:translateY(-10px)}}
@media (max-width:480px){.bpl-stage{transform:scale(.82)}}
@media (prefers-reduced-motion:reduce){
  .bpl *,.bpl{animation-duration:.01ms!important;animation-delay:0s!important;animation-iteration-count:1!important}
  .bpl-scan,.bpl-orbit{display:none}
}