/* HKC loading animation: the logo coin-flips and bobs while a pink → purple → teal ring spins around it.
   Markup: <div class="hkload" role="status"><div class="hkload-art"><span class="hkload-ring"></span><img src="assets/logo.png" alt=""></div><div class="hkload-t">Loading…</div></div>
   Add class "sm" for the small inline version (table cells, lists). */
.hkload{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:14px;padding:56px 0;color:var(--ink-2,#888);font-weight:600;font-size:14px;text-align:center}
.hkload-art{position:relative;width:104px;height:104px;display:grid;place-items:center;perspective:400px}
.hkload-art img{width:62px;height:auto;animation:hkflip 1.8s cubic-bezier(.45,.05,.55,.95) infinite;filter:drop-shadow(0 6px 14px rgba(160,90,255,.5));will-change:transform}
.hkload-art::after{content:"";position:absolute;bottom:4px;left:50%;width:44px;height:8px;margin-left:-22px;border-radius:50%;background:rgba(120,60,200,.35);filter:blur(3px);animation:hkshadow 1.8s cubic-bezier(.45,.05,.55,.95) infinite}
.hkload-ring{position:absolute;inset:0;border-radius:50%;background:conic-gradient(from 0deg,transparent 0 50%,#d6336c 72%,#b05cff 86%,#35c2b1 100%);
  -webkit-mask:radial-gradient(farthest-side,transparent calc(100% - 4px),#000 calc(100% - 3px));mask:radial-gradient(farthest-side,transparent calc(100% - 4px),#000 calc(100% - 3px));animation:hkspin .9s linear infinite;will-change:transform}
.hkload-t{max-width:320px}
.hkload-t::after{content:"";display:inline-block;width:1.2em;text-align:left;animation:hkdots 1.2s steps(4) infinite}
@keyframes hkspin{to{transform:rotate(360deg)}}
@keyframes hkflip{0%{transform:translateY(0) rotateY(0)}50%{transform:translateY(-10px) rotateY(180deg) scale(1.06)}100%{transform:translateY(0) rotateY(360deg)}}
@keyframes hkshadow{0%,100%{transform:scaleX(1);opacity:.9}50%{transform:scaleX(.65);opacity:.45}}
@keyframes hkdots{0%{content:""}25%{content:"."}50%{content:".."}75%{content:"..."}}
/* small inline version */
.hkload.sm{flex-direction:row;gap:10px;padding:6px 0;font-size:13px;justify-content:flex-start}
.hkload.sm .hkload-art{width:30px;height:30px}.hkload.sm .hkload-art img{width:18px;filter:none}.hkload.sm .hkload-art::after{display:none}
.hkload.sm .hkload-ring{-webkit-mask:radial-gradient(farthest-side,transparent calc(100% - 2.5px),#000 calc(100% - 2px));mask:radial-gradient(farthest-side,transparent calc(100% - 2.5px),#000 calc(100% - 2px))}
/* full-screen overlay (Raid Tools while it crunches a lot of pulls) */
#busyLoad{display:none}
body.busy #busyLoad{display:flex;position:fixed;left:50%;top:45%;transform:translate(-50%,-50%);z-index:80;background:var(--surface,#1a1a19);border:1px solid var(--ring,rgba(255,255,255,.1));border-radius:16px;padding:22px 30px;box-shadow:0 12px 40px rgba(0,0,0,.35);color:var(--ink,#fff)}
@media (prefers-reduced-motion: reduce){.hkload-ring{animation-duration:3s}.hkload-art img,.hkload-art::after{animation:none}.hkload-t::after{animation:none;content:"…"}}