/* web/entry/entry.css — the entry ground, the orbit and the boot loader (UI_REDESIGN_PLAN.md §3b-§3c).
   Shared by the sign-in page and index.html; colours come from the pack's --brand-* variables. */

.mirai-ground {
  --mo-accent: var(--brand-accent, #F5A524);
  --mo-soft: var(--brand-accent-soft, #FFC766);
  --mo-hub: color-mix(in srgb, var(--brand-surface, #111114) 80%, #000);
  background-color: var(--brand-surface, #111114);
  background-image: radial-gradient(rgba(157, 170, 184, .06) 1.3px, transparent 1.6px);
  background-size: 28px 28px;
}

/* The light round the orbit: a grid fading out from it and a soft accent glow. */
.ml-light { position: absolute; inset: 0; pointer-events: none; }
.mo-grid, .mo-glow { position: absolute; inset: 0; pointer-events: none; transition: opacity 1100ms cubic-bezier(.32, .72, 0, 1); }
.mo-grid {
  background-image: linear-gradient(rgba(157, 170, 184, .055) 1px, transparent 1px),
    linear-gradient(90deg, rgba(157, 170, 184, .055) 1px, transparent 1px);
  background-size: 44px 44px;
  -webkit-mask-image: radial-gradient(ellipse 55% 65% at var(--gx, 50%) var(--gy, 50%), #000 25%, transparent 75%);
  mask-image: radial-gradient(ellipse 55% 65% at var(--gx, 50%) var(--gy, 50%), #000 25%, transparent 75%);
}
.mo-glow {
  background: radial-gradient(560px 420px at var(--gx, 50%) var(--gy, 50%), color-mix(in srgb, var(--mo-accent) 13%, transparent), transparent 70%);
  opacity: .75;
}
.mo-dim .mo-grid, .mo-dim .mo-glow { opacity: 0; }

/* The orbit: a 560 x 440 box with the hub at (280, 220), placed by orbit.js. */
.mo { position: absolute; left: 0; top: 0; width: 560px; height: 440px; transform-origin: 0 0; pointer-events: none; }
.mo-orb { position: absolute; box-sizing: border-box; border: 1px dotted rgba(157, 170, 184, .3); border-radius: 50%; }
.mo-orb-a { left: 54px; top: 107px; width: 452px; height: 226px; }
.mo-orb-b { left: 160px; top: 160px; width: 240px; height: 120px; }
.mo-wire, .mo-wire-s { position: absolute; transform-origin: 0 50%; }
.mo-wire { height: 1.3px; margin-top: -.65px; background: rgba(157, 170, 184, .22); }
.mo-wire-s { height: 1px; margin-top: -.5px; background: rgba(157, 170, 184, .12); }
.mo-pkts { position: absolute; inset: 0; }
.mo-pkt {
  position: absolute; width: 12px; height: 12px; border-radius: 50%;
  background: radial-gradient(circle, var(--mo-soft) 0 2.6px, color-mix(in srgb, var(--mo-accent) 24%, transparent) 2.8px 6px, transparent 6.2px);
}
.mo-nd { position: absolute; left: 0; top: 0; width: 0; height: 0; }
.mo-nd > i, .mo-hubp {
  position: absolute; box-sizing: border-box; border-radius: 50%;
  width: var(--d); height: var(--d); margin-left: calc(var(--d) / -2); margin-top: calc(var(--d) / -2);
}
.mo-nd > i { left: 0; top: 0; }
.mo-nf { background: var(--mo-accent); }
.mo-nr { background: var(--mo-hub); border: 1.7px solid var(--mo-accent); }
.mo-nr::after { content: ''; position: absolute; left: 31.5%; top: 31.5%; width: 37%; height: 37%; border-radius: 50%; background: var(--mo-soft); }
.mo-pl, .mo-hubp { border: 1.2px solid var(--mo-accent); opacity: 0; }
.mo-hubp { --d: 56px; left: 280px; top: 220px; z-index: 2; }
.mo-tl {
  position: absolute; left: 0; top: calc(var(--d) / -2 - 6px); transform: translate(-50%, -100%); white-space: nowrap;
  font: 500 9.5px "IBM Plex Mono", ui-monospace, monospace; letter-spacing: .06em; color: #9DAAB8; transition: opacity 300ms ease;
}
.mo-hub {
  position: absolute; left: 252px; top: 192px; width: 56px; height: 56px; box-sizing: border-box; border-radius: 50%; z-index: 2;
  background: var(--mo-hub); border: 1.6px solid var(--mo-accent); display: flex; align-items: center; justify-content: center;
}
.mo-hub > img { height: 37px; width: auto; }
.mo-narrow .mo-tl, .mo-warp .mo-tl { opacity: 0; }
.mo-warp .mo-orb { animation: moRing 900ms cubic-bezier(.55, 0, .75, .3) 550ms both; }
@keyframes moRing { to { transform: scale(.08); opacity: 0; } }

/* The boot loader painted from the pack (index.html #loading-container.ml). */
#loading-container.ml { display: block; overflow: hidden; }
#loading-container.ml-out { opacity: 0; transition: opacity 300ms ease; pointer-events: none; }
.ml-mark { position: absolute; left: 50%; top: 50%; width: 162px; height: 162px; margin: -81px 0 0 -81px; display: flex; align-items: center; justify-content: center; }
.ml-mark > img { position: relative; height: 148.5px; width: auto; }
.ml-ping {
  position: absolute; left: 50%; top: 50%; width: 44px; height: 44px; margin: -22px 0 0 -22px; box-sizing: border-box;
  border-radius: 50%; border: 2px solid var(--mo-accent); opacity: 0; animation: mlPing 2400ms cubic-bezier(.3, .4, .3, 1) infinite;
}
.ml-ping + .ml-ping { border-width: 1.5px; animation-delay: 800ms; }
.ml-ping + .ml-ping + .ml-ping { border-width: 1px; animation-delay: 1600ms; }
@keyframes mlPing { 0% { transform: scale(1); opacity: 0; } 12% { opacity: .55; } 100% { transform: scale(5.5); opacity: 0; } }

@media (prefers-reduced-motion: reduce) {
  .ml-ping, .mo-warp .mo-orb { animation: none; }
  .mo, .mo-grid, .mo-glow { transition: none !important; }
}