/* loader.css — splash (first visit), action overlay (busy), connection banner */

/* ---------- 1) Splash: first visit / slow load ---------- */
#boot{position:fixed;inset:0;z-index:200;display:grid;place-items:center;text-align:center;
  background:radial-gradient(900px 600px at 50% 38%,color-mix(in srgb,var(--acc) 10%,var(--bg)),var(--bg));
  animation:bootIn .35s ease both}
.boot-in{display:grid;justify-items:center;gap:22px;padding:24px}
.boot-logo{font:italic 600 clamp(44px,9vw,76px)/1 var(--serif);color:var(--ink);letter-spacing:.01em;animation:logoIn .8s var(--e) both}
.boot-logo i{color:var(--acc);margin-left:.18em}
.boot-bar{width:min(220px,56vw);height:3px;border-radius:99px;overflow:hidden;background:color-mix(in srgb,var(--acc) 16%,transparent)}
.boot-bar i{display:block;height:100%;width:42%;border-radius:inherit;
  background:linear-gradient(90deg,transparent,var(--acc),transparent);animation:bar 1.15s var(--e) infinite}
#boot p{min-height:1.6em;max-width:26em;color:var(--mut);font-size:14.5px;opacity:0;transition:opacity .4s}
#boot p.show{opacity:1}
#boot button{display:none}
#boot.slow button{display:inline-block}
@keyframes bar{from{transform:translateX(-120%)}to{transform:translateX(320%)}}
@keyframes bootIn{from{opacity:0}}
body:has(#boot) main,body:has(#boot) #hd,body:has(#boot) #ft{visibility:hidden}

/* ---------- 2) Action overlay: busy() ---------- */
.busy{position:fixed;inset:0;z-index:150;display:grid;place-items:center;padding:20px;
  background:color-mix(in srgb,var(--bg) 62%,transparent);backdrop-filter:blur(8px) saturate(1.1);
  animation:busyIn .3s .25s var(--e) both}          /* .25s delay: never flashes on fast actions */
.busy-card{display:grid;justify-items:center;gap:16px;min-width:230px;max-width:86vw;padding:30px 36px;border-radius:var(--r);text-align:center;
  background:var(--card);border:1px solid var(--line);box-shadow:0 30px 70px -28px rgba(0,0,0,.45),var(--halo)}
.busy-card p{font-weight:600;font-size:15px;color:var(--ink)}
.spin{width:46px;height:46px;border-radius:50%;display:grid;place-items:center;
  border:3px solid color-mix(in srgb,var(--acc) 18%,transparent);border-top-color:var(--acc);animation:spin .8s linear infinite}
.spin.tick{border-color:var(--acc);background:var(--acc);color:var(--on);animation:okPop2 .5s var(--e) both}
@keyframes spin{to{transform:rotate(360deg)}}
@keyframes okPop2{from{transform:scale(.6);opacity:.4}}
@keyframes busyIn{from{opacity:0}}

/* ---------- 3) Connection banner ---------- */
.net{position:fixed;left:50%;top:14px;transform:translateX(-50%);z-index:180;max-width:92vw;padding:10px 22px;border-radius:99px;
  font:600 14px var(--sans);text-align:center;color:#fff;background:var(--bad);
  box-shadow:0 14px 34px -14px rgba(0,0,0,.5);animation:netIn .45s var(--e) both}
.net::before{content:"";display:inline-block;width:8px;height:8px;margin-inline-end:10px;border-radius:50%;background:#fff;animation:pulse 1.2s ease-in-out infinite}
.net.ok{background:var(--ok)}
.net.ok::before{animation:none}
@keyframes netIn{from{opacity:0;transform:translate(-50%,-14px)}}
@keyframes pulse{50%{opacity:.25}}

/* ---------- 4) Button-level spinner (disabled submit buttons) ---------- */
.btn.loading{pointer-events:none;opacity:.8}
.btn.loading::before{content:"";display:inline-block;width:14px;height:14px;margin-inline-end:10px;vertical-align:-2px;border-radius:50%;
  border:2px solid color-mix(in srgb,currentColor 30%,transparent);border-top-color:currentColor;animation:spin .7s linear infinite}

@media(prefers-reduced-motion:reduce){.spin,.boot-bar i,.net::before{animation-duration:2.4s!important;animation-iteration-count:infinite!important}}

/* Safety net: the splash never stays longer than 8 s */
@keyframes hideAnyway{to{opacity:0;visibility:hidden;pointer-events:none}}
#boot{animation:bootIn .35s ease both,hideAnyway 0s 8s forwards}