/* The swarm (swarm.js). Only active under html.swarm, which the head
   script sets when motion is allowed. Transform and opacity only. */

.sw-screen { position: fixed; inset: 0; z-index: 61; pointer-events: none; overflow: hidden; }
.sw-paper { position: absolute; top: 0; left: 0; width: 0; height: 0; z-index: 60; pointer-events: none; }

/* ---------- what waits to be drawn ---------- */
.swarm .sw-h { opacity: 0 !important; animation: none !important; }
.swarm .sw-f { transition: opacity .4s ease-out !important; }
/* the swarm brings the motion: no slide under the boxes, no second entrance */
.swarm .rv { transform: none; }
.swarm.sw-ready :is(.hero-copy > *, .hero-dia) { animation: none; }
/* Before swarm.js runs, the first screen waits unbuilt, 3 s at most. */
.swarm:not(.sw-ready) :is(.nav-in > *, .hero-copy > *, .hero-dia) { opacity: 0; animation: sw-fallback .3s 3s forwards; }
@keyframes sw-fallback { to { opacity: 1; } }

/* ---------- the agents ---------- */
.sw-agent { position: absolute; top: 0; left: 0; color: #fff; opacity: 0; transition: opacity .22s ease-out; will-change: transform; }
.sw-agent.on { opacity: 1; }
.sw-agent.lt { color: #16161b; }
.sw-agent svg { position: absolute; overflow: visible; transition: opacity .08s; }
.sw-arrow { left: -1px; top: -1px; width: 12px; height: 12px; fill: var(--c); stroke: rgba(0, 0, 0, .55); stroke-width: .9; stroke-linejoin: round; }
.sw-cross { left: -7px; top: -7px; width: 14px; height: 14px; opacity: 0; }
.sw-cross path { stroke: currentColor; stroke-width: 1.3; fill: none; }
.sw-cross circle { fill: var(--c); }
.sw-agent.x .sw-arrow { opacity: 0; }
.sw-agent.x .sw-cross { opacity: 1; }

/* ---------- the blueprint box ---------- */
.sw-box { position: absolute; --bp: #3d9bff; contain: layout style size; }
.sw-box.lt { --bp: #2f74e8; }
.sw-box > * { position: absolute; left: 0; top: 0; transform-origin: 0 0; opacity: 0; }
.sw-box.on > * { opacity: 1; }
.sw-box b { width: 100%; height: 100%; background: rgba(164, 174, 190, .17); }
.sw-box.ct b { background: rgba(164, 174, 190, .09); }
.sw-box.lt b { background: rgba(36, 48, 68, .085); }
.sw-box.lt.ct b { background: rgba(36, 48, 68, .045); }
.sw-box.drawing b { will-change: transform; }
.sw-box .t, .sw-box .u { width: 100%; height: 1px; background: var(--bp); }
.sw-box .l, .sw-box .r { width: 1px; height: 100%; background: var(--bp); }
.sw-box s { left: -2.5px; top: -2.5px; width: 5px; height: 5px; box-sizing: border-box; background: #fff; border: 1px solid var(--bp); }
.sw-box em {
  padding: 2px 4px; border-radius: 2px; background: var(--bp); color: #fff;
  font: 500 9px/1 "JetBrains Mono", ui-monospace, monospace; font-style: normal; letter-spacing: .02em; white-space: nowrap;
}
.sw-box.rel b { opacity: 0; transition: opacity .35s ease-out; }
.sw-box.out { opacity: 0; transition: opacity .3s ease-out; }

/* ---------- the loader the flock gathers round ---------- */
.sw-core {
  position: absolute; width: 26px; height: 26px; margin: -13px 0 0 -13px;
  background: #121217; border: 1px solid rgba(255, 255, 255, .16);
  opacity: 0; transform: scale(.6); transition: opacity .3s ease-out, transform .45s cubic-bezier(.22, 1, .36, 1);
}
.sw-core::after { content: ""; position: absolute; left: 50%; top: 50%; width: 6px; height: 6px; margin: -3px 0 0 -3px; background: #ff4d17; }
.sw-core.on { opacity: 1; transform: none; }

/* ---------- the status pill ---------- */
.sw-hud {
  position: absolute; left: 50%; bottom: 18px; display: flex; align-items: center; gap: 10px;
  padding: 7px 12px 7px 11px; border-radius: 999px; white-space: nowrap;
  background: #101014; border: 1px solid rgba(255, 255, 255, .12); box-shadow: 0 8px 28px rgba(0, 0, 0, .35);
  font: 500 11px/1 "JetBrains Mono", ui-monospace, monospace; letter-spacing: .02em; color: #8a909b;
  opacity: 0; transform: translate(-50%, 10px); transition: opacity .3s ease-out, transform .3s ease-out;
}
.sw-hud.on { opacity: 1; transform: translate(-50%, 0); }
.sw-hud b { font-weight: 500; color: #f4f4f6; }
.sw-dots { display: flex; padding-left: 2px; }
.sw-dots i { width: 8px; height: 8px; margin-left: -2px; border-radius: 50%; background: var(--c); box-shadow: 0 0 0 1.5px #101014; }
.sw-bar { width: 56px; height: 2px; background: rgba(255, 255, 255, .12); overflow: hidden; }
.sw-bar i { display: block; height: 100%; background: #3d9bff; transform: scaleX(0); transform-origin: 0 50%; transition: transform .25s ease-out, background-color .3s; }
.sw-hud.done .sw-bar i { background: #4ade80; }

@media (max-width: 720px) {
  .sw-box em { display: none; }
  .sw-hud { bottom: 12px; gap: 8px; font-size: 10px; }
  .sw-bar { width: 40px; }
}

/* Printing never waits for the swarm. */
@media print {
  .swarm .sw-h { opacity: 1 !important; }
  .sw-screen, .sw-paper { display: none !important; }
}