/* ════════════════════════════════════════
   LIVE BUILD — a crew of cursors assembles the hero after the clock intro
   (driven by build-intro.js; nothing here applies until it runs)
════════════════════════════════════════ */
:root {
  --crew-layout: var(--amber);
  --crew-copy:   #8a9ab0;
  --crew-type:   var(--soft);
  --crew-motion: var(--amber-deep);
  --crew-ink:    #131313;
}

#build-layer {
  position: fixed; inset: 0; z-index: 9990;
  pointer-events: none; overflow: hidden;
}

/* Cursor + name tag */
.bc-cursor {
  position: absolute; left: 0; top: 0;
  color: var(--c); will-change: transform;
}
.bc-cursor svg {
  width: 20px; height: 26px; display: block;
  filter: drop-shadow(0 3px 8px rgba(0,0,0,0.55));
}
.bc-tag {
  position: absolute; left: 15px; top: 21px;
  font: 600 10px/1 var(--sans); letter-spacing: 0.1em; text-transform: uppercase;
  padding: 5px 8px 4px; border-radius: 2px; white-space: nowrap;
  color: var(--crew-ink); background: var(--c);
}

/* Click ripple */
.bc-ring {
  position: absolute; left: -14px; top: -14px;
  width: 28px; height: 28px; border-radius: 50%;
  border: 1.5px solid var(--c);
}

/* Selection / crop frame with handles and a live size readout */
.bc-box {
  position: absolute; left: 0; top: 0; width: 0; height: 0; opacity: 0;
  border: 1px solid var(--c);
  background: color-mix(in srgb, var(--c) 5%, transparent);
}
.bc-box i {
  position: absolute; width: 7px; height: 7px;
  background: var(--bg); border: 1px solid var(--c);
}
.bc-box i.tl { left: -4px;  top: -4px; }
.bc-box i.tr { right: -4px; top: -4px; }
.bc-box i.bl { left: -4px;  bottom: -4px; }
.bc-box i.br { right: -4px; bottom: -4px; }
.bc-size {
  position: absolute; left: 50%; top: 100%; transform: translate(-50%, 9px);
  font: 500 10px/1 var(--sans); font-variant-numeric: tabular-nums; letter-spacing: 0.04em;
  padding: 4px 6px 3px; border-radius: 2px; white-space: nowrap;
  color: var(--crew-ink); background: var(--c);
}

/* Text caret */
.bc-caret {
  position: absolute; left: 0; top: 0; width: 2px; opacity: 0;
  background: var(--c);
  animation: bcBlink 1s steps(1) infinite;
}
@keyframes bcBlink { 50% { visibility: hidden; } }

/* Font picker chip */
.bc-chip {
  position: absolute; left: 0; top: 0; opacity: 0;
  font: 500 11px/1 var(--sans); letter-spacing: 0.04em; white-space: nowrap;
  padding: 8px 11px; border-radius: 3px;
  color: var(--ink); background: var(--panel);
  border: 1px solid var(--line-strong);
  box-shadow: 0 10px 28px rgba(0,0,0,0.55);
}
.bc-chip b { color: var(--c); font-weight: 600; }

/* Smart guide that flashes when an element snaps into place */
.bc-guide {
  position: absolute; left: 0; top: 0; width: 1px; opacity: 0;
  background: var(--amber);
  box-shadow: 0 0 10px rgba(240,164,92,0.6);
}

/* Layout grid laid over the hero while it is under construction */
.bc-grid {
  position: absolute; opacity: 0;
  display: grid; grid-template-columns: repeat(12, 1fr); gap: 20px;
  padding-inline: clamp(20px, 4vw, 56px);
}
.bc-grid span {
  background: rgba(240,164,92,0.028);
  border-inline: 1px solid rgba(240,164,92,0.07);
}
@media (max-width: 700px) {
  .bc-grid { grid-template-columns: repeat(4, 1fr); gap: 14px; }
  .bc-grid span:nth-child(n+5) { display: none; }
  .bc-tag { font-size: 9px; }
}

/* Skip control, styled after the intro's own skip button */
#build-skip {
  position: fixed; z-index: 9991;
  right: max(20px, env(safe-area-inset-right, 0px));
  bottom: max(20px, env(safe-area-inset-bottom, 0px));
  font: 500 11px/1 var(--sans); letter-spacing: 0.16em; text-transform: uppercase;
  padding: 12px 16px; border: 1px solid var(--line-strong); border-radius: 2px;
  color: var(--muted); background: rgba(7,7,7,0.7);
  transition: color .2s, border-color .2s;
}
#build-skip:hover, #build-skip:focus-visible { color: var(--amber); border-color: var(--amber-line); outline: none; }

/* "Built" toast after the crew leaves */
.bc-toast {
  position: fixed; z-index: 9991;
  left: max(20px, env(safe-area-inset-left, 0px));
  bottom: max(20px, env(safe-area-inset-bottom, 0px));
  display: flex; align-items: center; gap: 10px;
  font: 500 11px/1 var(--sans); letter-spacing: 0.14em; text-transform: uppercase;
  font-variant-numeric: tabular-nums;
  padding: 12px 16px; border-radius: 2px;
  color: var(--soft); background: rgba(12,12,13,0.92);
  border: 1px solid var(--line);
  pointer-events: none;
}
.bc-toast::before {
  content: ''; width: 7px; height: 7px; border-radius: 50%;
  background: var(--amber); box-shadow: 0 0 10px var(--amber);
}