/* ---------- Loading screen ---------- */
.loader {
  position: fixed; inset: 0; z-index: 200; display: grid; place-items: center; background: var(--bg); color: var(--ink);
  clip-path: circle(150% at 50% 50%); transition: clip-path .85s cubic-bezier(.7,0,.25,1) .15s;
}
.loader.done { clip-path: circle(0% at 50% 50%); }
.ld-grid {
  position: absolute; inset: 0; opacity: .9;
  background:
    linear-gradient(var(--grid-major) 1px, transparent 1px) 0 0 / 200px 200px,
    linear-gradient(90deg, var(--grid-major) 1px, transparent 1px) 0 0 / 200px 200px,
    linear-gradient(var(--grid-minor) 1px, transparent 1px) 0 0 / 40px 40px,
    linear-gradient(90deg, var(--grid-minor) 1px, transparent 1px) 0 0 / 40px 40px;
  background-position: center;
  -webkit-mask: radial-gradient(circle at 50% 50%, #000 0, transparent 62%); mask: radial-gradient(circle at 50% 50%, #000 0, transparent 62%);
  animation: ld-grid 2.4s cubic-bezier(.2,.8,.2,1) both;
}
@keyframes ld-grid { from { transform: scale(1.35); opacity: 0; } }
.ld-center { position: relative; display: grid; justify-items: center; gap: 14px; width: min(340px, calc(100vw - 48px)); transition: transform .5s cubic-bezier(.6,0,.4,1), opacity .4s ease; }
.loader.done .ld-center { transform: scale(1.12); opacity: 0; }
.ld-logo { display: flex; font-family: var(--f-display); font-weight: 900; font-stretch: 125%; font-size: clamp(64px, 14vw, 132px); line-height: .9; text-transform: uppercase; letter-spacing: -.01em; }
.ld-logo span { display: inline-block; animation: ld-in .7s cubic-bezier(.2,1.4,.4,1) both; }
.ld-logo span:nth-child(2) { animation-delay: .07s; } .ld-logo span:nth-child(3) { animation-delay: .14s; }
.ld-logo span:nth-child(4) { animation-delay: .21s; }
.ld-logo .ld-dot { color: var(--hot); animation: ld-in .7s .3s cubic-bezier(.2,1.4,.4,1) both, ld-beat 1.1s 1.1s ease-in-out infinite; }
@keyframes ld-in { from { opacity: 0; transform: translateY(48px) rotate(6deg); } }
@keyframes ld-beat { 50% { transform: translateY(-10px); } }
.ld-sub { margin: 0; font: 600 11px/1 var(--f-mono); letter-spacing: .18em; text-transform: uppercase; color: var(--ink-dim); animation: ld-fade .6s .45s both; }
.ld-bar { position: relative; width: 100%; height: 3px; margin-top: 18px; border-radius: 2px; background: var(--hud-line); overflow: hidden; animation: ld-fade .5s .55s both; }
.ld-bar i { position: absolute; left: 0; top: 0; bottom: 0; width: 0; border-radius: inherit; background: var(--hot); box-shadow: 0 0 12px var(--hot); }
.ld-bar i::after { content: ""; position: absolute; right: 0; top: -3px; width: 9px; height: 9px; border-radius: 50%; background: var(--hot); transform: translateX(50%); box-shadow: 0 0 10px var(--hot); }
.ld-row { width: 100%; display: flex; justify-content: space-between; gap: 12px; font: 600 11px/1 var(--f-mono); letter-spacing: .1em; text-transform: uppercase; color: var(--ink-dim); animation: ld-fade .5s .6s both; }
.ld-pct { color: var(--ink); font-variant-numeric: tabular-nums; }
@keyframes ld-fade { from { opacity: 0; transform: translateY(8px); } }