/* ScarabPay — coin page loader + login coin ring.
   Presentation only. Coins shown are the supported deposit assets:
   USDT, USDC, Tron, Solana, Polygon, BNB Chain. */
.spc{--s:46px;--t:5px;--spc-veil:rgba(255,253,248,.2);--spc-ds:0s;--spc-dt:0s;--spc-dp:0s}
.spc,.spc *{box-sizing:border-box}

/* ---------- one coin ---------- */
.spc-coin{--e1:#c5cad3;--e2:#a4abb7;position:relative;display:block;width:var(--s);height:var(--s);transform-style:preserve-3d}
.spc-coin>i{position:absolute;inset:0;border-radius:50%;display:block}
/* stacked discs give the coin its thickness */
.spc-coin>.e{inset:.6px;background:linear-gradient(var(--spc-veil),var(--spc-veil)),repeating-conic-gradient(var(--e1) 0 5deg,var(--e2) 5deg 10deg)}
.spc-coin>.e1{transform:translateZ(calc(var(--t)*-.36))}
.spc-coin>.e2{transform:translateZ(calc(var(--t)*-.18))}
.spc-coin>.e3{transform:translateZ(0)}
.spc-coin>.e4{transform:translateZ(calc(var(--t)*.18))}
.spc-coin>.e5{transform:translateZ(calc(var(--t)*.36))}
.spc-coin>.f{overflow:hidden;-webkit-backface-visibility:hidden;backface-visibility:hidden;background:#fff center/cover no-repeat}
.spc-coin>.front{transform:translateZ(calc(var(--t)*.5))}
.spc-coin>.back{transform:rotateY(180deg) translateZ(calc(var(--t)*.5));box-shadow:inset 0 0 0 1px rgba(24,35,56,.16)}
/* back face: plain white with the outlined scarab */
.spc-coin>.back::before{content:"";position:absolute;inset:13% 23%;background:url(/img/brand/scarab-line-coin.webp) center/contain no-repeat}
/* soft gloss + veil that keeps the coins quieter than the logo */
.spc-coin>.f::after{content:"";position:absolute;inset:0;border-radius:50%;
  background:linear-gradient(140deg,rgba(255,255,255,.5) 0%,rgba(255,255,255,.08) 36%,rgba(255,255,255,0) 48%,rgba(0,0,0,.08) 100%),linear-gradient(var(--spc-veil),var(--spc-veil))}
.spc-c-usdt{--e1:#1f8566;--e2:#17654d}.spc-c-usdt>.front{background-image:url(/img/crypto/usdt.svg)}
.spc-c-usdc{--e1:#2167b3;--e2:#184d87}.spc-c-usdc>.front{background-image:url(/img/crypto/usdc.svg)}
.spc-c-trx{--e1:#c9141f;--e2:#990f18}.spc-c-trx>.front{background-image:url(/img/coins/tron.webp)}
.spc-c-sol{--e1:#34343d;--e2:#1c1c22}.spc-c-sol>.front{background-color:#000;background-image:url(/img/coins/solana.webp)}
.spc-c-pol{--e1:#7b3fe4;--e2:#5c2bb0}.spc-c-pol>.front{background-image:url(/img/coins/polygon.svg)}
.spc-c-bnb{--e1:#34343d;--e2:#1c1c22}.spc-c-bnb>.front{background-color:#0b0e11;background-image:url(/img/coins/bnb.webp)}

.spc-logo{position:absolute;display:block;background:url(/img/brand/scarab-line.webp) center/contain no-repeat}
.spc-label{position:absolute;left:-130px;top:90px;width:260px;text-align:center;font-size:14px;font-weight:600;line-height:1.4;color:#687080;white-space:nowrap}

/* ---------- page loader: coins orbit the logo ---------- */
.spc-loader{position:fixed;inset:0;z-index:2147483000;display:none;align-items:center;justify-content:center;
  background:#fffdf8;opacity:0;transition:opacity .15s ease;perspective:900px;
  -webkit-tap-highlight-color:transparent;overscroll-behavior:contain}
/* the id keeps older page-level rules (body.scarab-auth>div) from repainting the backdrop */
#spc-loader{background:#fffdf8}
.spc-loader.is-on{display:flex}
.spc-loader.is-in{opacity:1}
.spc-loader.spc-instant{transition:none}
.spc-scene{position:relative;width:0;height:0;transform-style:preserve-3d}
.spc-orbit{position:absolute;transform-style:preserve-3d;transform:rotateX(62deg)}
.spc-spin{position:absolute;transform-style:preserve-3d;animation:spc-spin 9s linear infinite;animation-delay:var(--spc-ds)}
.spc-slot{position:absolute;transform-style:preserve-3d;transform:rotateZ(var(--a)) translateX(104px)}
.spc-bill{position:absolute;transform-style:preserve-3d;animation:spc-unspin 9s linear infinite;animation-delay:var(--spc-ds)}
.spc-bill>.spc-coin{--s:40px;--t:5px;position:absolute;left:-20px;top:-20px;animation:spc-turn 4.8s linear infinite;animation-delay:calc(var(--spc-dt) + var(--d,0s))}
.spc-loader .spc-logo{left:-32px;top:-47px;width:64px;height:90px;animation:spc-pulse 1.9s ease-in-out infinite;animation-delay:var(--spc-dp)}
.spc-ground{position:absolute;left:-36px;top:56px;width:72px;height:11px;border-radius:50%;
  background:radial-gradient(closest-side,rgba(24,35,56,.2),rgba(24,35,56,0));animation:spc-shade 1.9s ease-in-out infinite;animation-delay:var(--spc-dp)}
@keyframes spc-spin{to{transform:rotateZ(360deg)}}
@keyframes spc-unspin{from{transform:rotateZ(calc(var(--a)*-1)) rotateX(-62deg)}to{transform:rotateZ(calc(var(--a)*-1 - 360deg)) rotateX(-62deg)}}
@keyframes spc-turn{to{transform:rotateY(360deg)}}
@keyframes spc-pulse{0%,100%{transform:translateY(0) scale(1)}50%{transform:translateY(-4px) scale(1.04)}}
@keyframes spc-shade{0%,100%{transform:scale(1);opacity:1}50%{transform:scale(.86);opacity:.7}}
@media (max-width:380px){.spc-scene{transform:scale(.88)}}

/* ---------- login: ring of coins that flip one after another ---------- */
.spc-ring{--r:92px;--s:38px;--t:4px;position:relative;width:calc(var(--r)*2 + var(--s) + 6px);height:calc(var(--r)*2 + var(--s) + 6px);margin:0 auto 14px;perspective:900px;direction:ltr}
.spc-seat{position:absolute;left:50%;top:50%;width:0;height:0;transform-style:preserve-3d;transform:translate(calc(var(--x)*var(--r)),calc(var(--y)*var(--r)))}
.spc-seat>.spc-coin{position:absolute;left:calc(var(--s)*-.5);top:calc(var(--s)*-.5);animation:spc-flip 6.4s cubic-bezier(.6,.05,.3,1) infinite;animation-delay:calc(var(--i)*.16s)}
.spc-ring .spc-logo{left:50%;top:50%;width:66px;height:92px;margin:-46px 0 0 -33px}
.spc-halo{position:absolute;left:50%;top:50%;width:132px;height:132px;margin:-66px 0 0 -66px;border-radius:50%;background:radial-gradient(closest-side,rgba(244,182,64,.18),rgba(244,182,64,0))}
@keyframes spc-flip{0%,26%{transform:rotateY(0)}40%,70%{transform:rotateY(180deg)}84%,100%{transform:rotateY(360deg)}}
@media (max-width:640px){.spc-ring{--r:78px;--s:33px;margin-bottom:10px}.spc-ring .spc-logo{width:56px;height:78px;margin:-39px 0 0 -28px}.spc-halo{width:112px;height:112px;margin:-56px 0 0 -56px}}

@media (prefers-reduced-motion:reduce){
  .spc-spin,.spc-bill,.spc-bill>.spc-coin,.spc-seat>.spc-coin,.spc-loader .spc-logo,.spc-ground{animation:none}
  .spc-bill{transform:rotateZ(calc(var(--a)*-1)) rotateX(-62deg)}
  .spc-loader{transition:none}
}

/* Customer navigation only: transparent interaction shield + compact frosted surface. */
body.scarab-user #spc-loader{background:transparent}
body.scarab-user #spc-loader::before{content:"";position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);width:min(220px,calc(100vw - 32px));height:190px;border-radius:24px;background:rgba(255,253,248,.20);border:1px solid rgba(232,223,207,.25);box-shadow:0 4px 12px rgba(53,41,23,.03);backdrop-filter:blur(0px);-webkit-backdrop-filter:blur(0px);pointer-events:none}
@media(max-width:430px){body.scarab-user #spc-loader::before{width:min(210px,calc(100vw - 32px));height:180px;border-radius:22px}}

/* V2.3: customer-only proportional animation reduction; timings remain inherited. */
body.scarab-user #spc-loader .spc-scene{transform:scale(.83)}
body.scarab-user #spc-loader .spc-label{top:80px;font-size:calc(14px / .83)}
@media(max-width:380px){body.scarab-user #spc-loader .spc-scene{transform:scale(.7304)}}