/* Agent build overlay: each station is laid out, built and reviewed by visible agents. */
:root {
  --ab-plan: #3b8eea;
  --ab-build: #f08a3c;
  --ab-review: #4cc38a;
  --ab-qa: #e8edef;
}

/* Hidden until an agent builds it. clip-path only, so the page's own opacity/transform logic is untouched. */
html.ab-on :is(.top .brand, .top .top-link, .readout, .instruments, .panel > *, .seabed .mark-depth, .seabed h2, .seabed .cta, .seabed .mail, .seabed .reel-card, .foot p):not(.ab-built) {
  clip-path: inset(0 100% 0 0);
}
html.ab-on .hero .panel > * { animation: none; }
.ab-reveal { transition: clip-path var(--ab-dur, 480ms) var(--ab-ease, cubic-bezier(0.2, 0.7, 0.2, 1)); }

/* The overlay is a page-sized clipped box: agents/boxes that stray past the edge (flying off-screen, tags at the right edge)
   must never widen or lengthen the document, or phones zoom out and the site stops fitting. */
html.ab-on { overflow-x: hidden; overflow-x: clip; }
#ab-layer { position: absolute; left: 0; top: 0; width: 100%; height: 0; overflow: hidden; overflow: clip; z-index: 6; pointer-events: none; }

.ab-box {
  position: absolute; box-sizing: border-box;
  border: 1px dashed var(--c, var(--ab-plan));
  background: color-mix(in srgb, var(--c, var(--ab-plan)) 7%, transparent);
  transform-origin: 0 0; transform: scale(0, 0);
  transition: transform 300ms cubic-bezier(0.2, 0.7, 0.2, 1), opacity 260ms ease, border-color 180ms ease, background 180ms ease;
}
.ab-box.on { transform: scale(1, 1); }
.ab-box.ok { --c: var(--ab-review); border-style: solid; }
.ab-box.gone { opacity: 0; }
.ab-box::before, .ab-box::after {
  content: ""; position: absolute; width: 5px; height: 5px; background: var(--c, var(--ab-plan));
}
.ab-box::before { left: -3px; top: -3px; }
.ab-box::after { right: -3px; bottom: -3px; }
.ab-tag {
  position: absolute; left: -1px; top: -19px; white-space: nowrap;
  font: 500 10px/1 ui-monospace, "SF Mono", Menlo, Consolas, monospace; letter-spacing: 0.02em;
  color: #06090c; background: var(--c, var(--ab-plan)); padding: 4px 5px 3px; border-radius: 2px;
}
.ab-check {
  position: absolute; right: -9px; top: -9px; width: 18px; height: 18px; border-radius: 50%;
  background: var(--ab-review); color: #06090c; font: 700 11px/18px system-ui, sans-serif; text-align: center;
  transform: scale(0); transition: transform 220ms cubic-bezier(0.3, 1.6, 0.5, 1);
}
.ab-box.ok .ab-check { transform: scale(1); }

.ab-qa {
  position: absolute; box-sizing: border-box; border: 1px solid var(--ab-qa); border-radius: 3px;
  opacity: 0; transition: opacity 240ms ease;
}
.ab-qa.on { opacity: 0.55; }
.ab-qa .ab-tag { --c: var(--ab-qa); }

.ab-agent {
  position: absolute; left: 0; top: 0; will-change: transform;
  transition: transform var(--t, 420ms) cubic-bezier(0.3, 0.8, 0.25, 1), opacity 300ms ease;
  opacity: 0;
}
.ab-agent.live { opacity: 1; }
.ab-agent svg { display: block; width: 16px; height: 16px; filter: drop-shadow(0 1px 2px rgba(0, 0, 0, 0.6)); }
.ab-agent.sub svg { width: 11px; height: 11px; }
.ab-agent .ab-name {
  position: absolute; left: 13px; top: 13px; white-space: nowrap;
  font: 600 10px/1 var(--font); letter-spacing: 0.02em; color: #06090c;
  background: var(--c); padding: 4px 6px; border-radius: 9px 9px 9px 2px;
}

#ab-status {
  position: fixed; z-index: 7; left: 50%; bottom: 22px; transform: translateX(-50%) translateY(12px);
  display: flex; align-items: center; gap: 10px; padding: 7px 8px 7px 12px;
  background: rgba(10, 14, 18, 0.86); border: 1px solid rgba(232, 237, 239, 0.12); border-radius: 999px;
  -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px);
  font: 500 12px/1 var(--font); color: var(--fg-2); white-space: nowrap;
  opacity: 0; transition: opacity 300ms ease, transform 300ms cubic-bezier(0.2, 0.7, 0.2, 1);
}
#ab-status.on { opacity: 1; transform: translateX(-50%); }
#ab-status .dots { display: flex; }
#ab-status .dots i { width: 9px; height: 9px; border-radius: 50%; margin-left: -3px; border: 1.5px solid #0a0e12; }
#ab-status .dots i:first-child { margin-left: 0; }
#ab-status b { color: var(--fg-1); font-weight: 600; font-variant-numeric: tabular-nums; }
#ab-status .bar { width: 72px; height: 2px; background: rgba(232, 237, 239, 0.14); border-radius: 2px; overflow: hidden; }
#ab-status .bar span { display: block; height: 100%; width: 0; background: var(--ab-plan); transition: width 260ms ease; }
#ab-status button {
  font: 600 11px/1 var(--font); color: var(--fg-1); background: rgba(232, 237, 239, 0.1);
  border: 1px solid rgba(232, 237, 239, 0.14); border-radius: 999px; padding: 6px 10px; cursor: pointer;
}
#ab-status button:hover { background: rgba(232, 237, 239, 0.18); }
#ab-status button:focus-visible { outline: 2px solid var(--ab-plan); outline-offset: 2px; }
#ab-status .done { color: var(--fg-1); }
#ab-status [hidden] { display: none; }

@media (max-width: 720px) {
  #ab-status { bottom: 14px; gap: 8px; font-size: 11px; }
  #ab-status .bar { width: 44px; }
  .ab-agent .ab-name { font-size: 9px; }
}