/* Swarm build — overlay, cursors and build states. Colours come from design-system.css. */

/* before swarm.js has tagged the page: hide content, keep the page background */
.swarm-pre body > header, .swarm-pre body > section, .swarm-pre body > main, .swarm-pre body > footer { opacity: 0; }

/* tagged-but-not-yet-built layers are invisible */
.swarm-on [data-sw]:not(.sw-built):not(.sw-building) { opacity: 0 !important; }
.sw-building { will-change: clip-path, transform; transition: none !important; animation-play-state: paused; }

/* the portal's own scroll-reveal would fight the swarm — neutralise it */
.swarm-on .reveal { opacity: 1 !important; transform: none !important; transition: none !important; }

/* selection frame drawn around the layer being built */
#sw-ov { position: absolute; left: 0; top: 0; width: 0; height: 0; z-index: 9990; pointer-events: none; }
.sw-fr { position: absolute; left: 0; top: 0; border: 1px solid var(--accent-electric, #38BDF8);
  background: color-mix(in srgb, var(--accent-electric, #38BDF8) 7%, transparent); }
.sw-fr i { position: absolute; width: 7px; height: 7px; background: var(--bg, #fff); border: 1px solid var(--accent-electric, #38BDF8); }
.sw-fr i:nth-child(1) { left: -4px; top: -4px; } .sw-fr i:nth-child(2) { right: -4px; top: -4px; }
.sw-fr i:nth-child(3) { left: -4px; bottom: -4px; } .sw-fr i:nth-child(4) { right: -4px; bottom: -4px; }
.sw-fr .nm { position: absolute; left: -1px; top: -17px; font: 600 10px/1 var(--font-mono, monospace); color: var(--accent, #0284C7); white-space: nowrap; }
.sw-fr .sz { position: absolute; left: 50%; top: 100%; transform: translate(-50%, 6px); background: var(--accent, #0284C7); color: #fff;
  font: 600 9.5px/1 var(--font-mono, monospace); padding: 3px 5px; border-radius: 3px; white-space: nowrap; }

/* cursors */
#swarm { position: fixed; inset: 0; pointer-events: none; z-index: 9999; overflow: hidden; }
.sw-cur { position: absolute; left: 0; top: 0; width: 0; height: 0; will-change: transform; }
.sw-cur svg { position: absolute; overflow: visible; }
.sw-cur .ar { left: -2px; top: -1.5px; width: 18px; height: 20px; filter: drop-shadow(0 2px 3px rgba(0,0,0,.4)); }
.sw-cur .ar path { fill: var(--c); stroke: #fff; stroke-width: 1.3; stroke-linejoin: round; }
.sw-cur .ib { display: none; left: -5px; top: -11px; width: 10px; height: 22px; }
.sw-cur .ib path { fill: none; stroke: var(--c); stroke-width: 2.2; stroke-linecap: round; }
.sw-cur.ib .ar { display: none; } .sw-cur.ib .ib { display: block; }
.sw-cur .tag { position: absolute; left: 14px; top: 16px; font: 600 9px/1 var(--font-mono, monospace); background: var(--c); color: #0A111F;
  padding: 3px 5px; border-radius: 4px; opacity: 0; transform: scale(.6); transform-origin: 0 0; transition: .2s; white-space: nowrap; }
.sw-cur.busy .tag { opacity: .95; transform: scale(1); }
.sw-dock { position: absolute; left: 0; top: 0; font: 700 9.5px/1 var(--font-mono, monospace); color: var(--text-on-accent, #fff);
  background: var(--accent, #0284C7); padding: 3px 5px; border-radius: 5px; opacity: 0; transition: opacity .25s; box-shadow: 0 2px 8px rgba(0,0,0,.25); }
.sw-dock.on { opacity: .95; }
.sw-bit { position: absolute; left: 0; top: 0; width: 7px; height: 7px; border-radius: 2px; pointer-events: none; will-change: transform, opacity; }

/* frames near the right edge must never cause sideways scrolling on phones */
html.swarm-on { overflow-x: clip; }

/* phones: lighter chrome — smaller labels, no per-agent name tags, smaller cursors */
@media (max-width: 720px), (pointer: coarse) {
  .sw-fr .nm { font-size: 8.5px; top: -14px; }
  .sw-fr .sz { font-size: 8px; padding: 2px 4px; }
  .sw-fr i { width: 5px; height: 5px; }
  .sw-fr i:nth-child(1) { left: -3px; top: -3px; } .sw-fr i:nth-child(2) { right: -3px; top: -3px; }
  .sw-fr i:nth-child(3) { left: -3px; bottom: -3px; } .sw-fr i:nth-child(4) { right: -3px; bottom: -3px; }
  .sw-cur .tag { display: none; }
  .sw-cur .ar { width: 15px; height: 17px; }
  .sw-dock { font-size: 9px; }
}

@media (prefers-reduced-motion: reduce) {
  .swarm-pre body > * { opacity: 1 !important; }
  #swarm, #sw-ov { display: none; }
}