/* First view: the hero is a building site. Dotted, dashed zones mark where
   each part goes; a person and two agents fill them in place; the zones
   clear as each part is built. Layers inside the hero, bottom to top:
   paper background, zones, the page itself, the crew (cursors and notes). */
.hero.building{--crew-ease:cubic-bezier(.2,.8,.2,1)}
.hero.building .nav,.hero.building .hero-body{position:relative;z-index:2}
body.building{overflow:hidden}

/* Parts not built yet are laid out but invisible, so the zones match them. */
.hero.building .b-wait{opacity:0;transform:translateY(6px)}
.hero.building .b-in{transition:opacity .45s var(--crew-ease),transform .55s var(--crew-ease)}

.b-site{position:absolute;inset:0;z-index:1;pointer-events:none;transition:opacity .7s ease}
.b-site::before{content:"";position:absolute;inset:0;background-image:radial-gradient(color-mix(in srgb,var(--line) 70%,transparent) 1px,transparent 1.2px);
  background-size:20px 20px;opacity:.55;transition:opacity .9s ease}
.b-site.clear::before{opacity:0}
.b-zone{position:absolute;border:1.5px dashed color-mix(in srgb,var(--muted) 38%,transparent);border-radius:10px;
  background-image:radial-gradient(color-mix(in srgb,var(--muted) 30%,transparent) 1.1px,transparent 1.2px);background-size:12px 12px;
  transition:border-color .5s,opacity .6s ease,height .5s var(--crew-ease),width .5s var(--crew-ease),background-color .5s}
.b-zone.warm{border-color:color-mix(in srgb,var(--accent) 55%,transparent);background-image:radial-gradient(color-mix(in srgb,var(--accent) 35%,transparent) 1.1px,transparent 1.2px)}
.b-zone.done{opacity:0}
.b-zone b{position:absolute;left:8px;top:-9px;padding:0 6px;background:var(--paper);font:600 10px/18px var(--font-body);letter-spacing:.04em;text-transform:uppercase;
  color:color-mix(in srgb,var(--muted) 85%,transparent);border-radius:4px}
.b-zone.warm b{color:var(--accent)}

.b-crew{position:absolute;inset:0;z-index:3;pointer-events:none;transition:opacity .6s ease}
.b-crew.gone{opacity:0}

/* Cursors with name tags, like collaborators on a shared canvas. */
.b-cursor{position:absolute;left:0;top:0;display:flex;align-items:flex-start;gap:3px;transition-property:transform,opacity;transition-timing-function:cubic-bezier(.45,.05,.25,1);will-change:transform}
.b-cursor svg{width:20px;height:22px;filter:drop-shadow(0 2px 3px rgb(0 0 0 / 22%))}
.b-cursor span{margin-top:15px;padding:3px 8px 3px 6px;border-radius:7px;color:#fff;font:600 12px/1.2 var(--font-body);white-space:nowrap;display:flex;align-items:center;gap:5px;box-shadow:0 4px 10px -4px rgb(0 0 0 / 30%)}
.b-cursor span i{width:14px;height:14px;border-radius:4px;flex:none}
.b-ripple{position:absolute;width:30px;height:30px;margin:-15px 0 0 -15px;border-radius:50%;border:2px solid var(--accent);animation:b-ripple .5s ease-out forwards}
@keyframes b-ripple{from{transform:scale(.3);opacity:.9}to{transform:scale(1.4);opacity:0}}

/* What people say: your notes are sticky notes; agents answer in small bubbles. */
.b-note,.b-say{position:absolute;max-width:280px;padding:9px 12px;border-radius:10px;font:500 14px/1.4 var(--font-body);color:var(--ink);transform-origin:0 100%}
.b-note{background:#fff6e1;border:1px solid #f0d49a;box-shadow:0 8px 20px -10px rgb(120 80 20 / 35%);transform:rotate(-1.5deg)}
.b-note small,.b-say small{display:flex;align-items:center;gap:5px;margin-bottom:3px;font-size:11px;font-weight:600;color:#92651c}
.b-say{background:#fff;border:1px solid var(--line);box-shadow:0 8px 20px -10px rgb(60 40 20 / 30%)}
.b-say small{color:var(--muted)}
.b-note small i,.b-say small i{width:14px;height:14px;border-radius:4px}
.av-you{background:#18181b url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Ccircle cx='12' cy='9' r='4' fill='white'/%3E%3Cpath d='M4.5 20c1.2-3.6 4-5.5 7.5-5.5s6.3 1.9 7.5 5.5' fill='white'/%3E%3C/svg%3E") center/70% no-repeat}
.b-caret{display:inline-block;width:.06em;min-width:2px;height:.9em;margin-left:.04em;vertical-align:-.05em;background:var(--accent);animation:b-blink 1s steps(1) infinite}
@keyframes b-blink{50%{opacity:0}}

/* Three directions as one strip of swatches. */
.b-swatches{position:absolute;display:flex;gap:8px;padding:8px;border-radius:14px;background:#fff;border:1px solid var(--line);box-shadow:0 10px 24px -12px rgb(60 40 20 / 35%)}
.b-swatch{display:flex;align-items:center;gap:8px;padding:6px 12px 6px 6px;border-radius:9px;font:600 13px/1 var(--font-body);color:var(--ink);transition:box-shadow .2s,background .2s}
.b-swatch i{width:26px;height:26px;border-radius:7px;box-shadow:inset 0 0 0 1px rgb(0 0 0 / 8%)}
.b-swatch.on{background:var(--soft);box-shadow:0 0 0 2px var(--accent)}

/* Who is working: the same presence strip as the app's session corner. */
.b-presence{position:absolute;left:50%;bottom:22px;transform:translateX(-50%);display:flex;align-items:center;gap:8px;padding:7px 14px 7px 8px;border-radius:999px;
  background:rgb(255 255 255 / 85%);border:1px solid var(--line);font:500 13px/1 var(--font-body);color:var(--muted);box-shadow:0 8px 20px -12px rgb(60 40 20 / 35%);backdrop-filter:blur(8px)}
.b-presence i{width:24px;height:24px;border-radius:7px;transition:box-shadow .3s}
.b-presence i.working{box-shadow:0 0 0 2px #fff,0 0 0 4px var(--accent)}
.b-presence b{color:var(--ink);font-weight:600}
.b-skip{position:absolute;right:20px;bottom:22px;padding:7px 13px;border-radius:999px;border:1px solid var(--line);background:rgb(255 255 255 / 85%);
  color:var(--muted);font:500 13px/1 var(--font-body);cursor:pointer;pointer-events:auto;transition:color .2s,border-color .2s}
.b-skip:hover{color:var(--ink);border-color:var(--muted)}

/* A part an agent just added. */
.b-pop{animation:b-pop .7s var(--crew-ease) both}
@keyframes b-pop{0%{transform:scale(.4);opacity:0}60%{transform:scale(1.06);opacity:1}100%{transform:none;opacity:1}}
.b-ring{position:absolute;border:2.5px solid var(--accent);border-radius:999px;animation:b-ring 1.3s var(--crew-ease) both}
@keyframes b-ring{0%{opacity:0;transform:scale(1.5)}35%{opacity:1;transform:scale(1)}75%{opacity:1}100%{opacity:0;transform:scale(1.12)}}
.mini-board .b-wait{transform:scale(.92)}
.mb-links path{transition:stroke-dashoffset .8s ease}

@media (prefers-reduced-motion:reduce){.b-site,.b-crew{display:none}}