/* Blueprint ghosts that construction drones build on scroll
   (js/build/sections.js). Elements only become ghosts when the script says
   so, so without it everything is simply visible. */

:root { --bp-ready: 1; } /* lets the script know this file is loaded */

.blueprint {
  --bp-line: var(--accent, #ffa630);
  isolation: isolate;
}
.blueprint-anchor { position: relative; }

/* The cover hides what isn't built yet and shrinks from the bottom up in
   pixel rows as --bp-built grows. It overhangs 2px so the panel's outer edge
   is hidden too. */
.blueprint::after {
  content: '';
  position: absolute;
  z-index: 1;
  top: -2px;
  right: -2px;
  bottom: calc(var(--bp-built, 0px) - 2px);
  left: -2px;
  background:
    repeating-linear-gradient(90deg, var(--bp-line) 0 8px, transparent 8px 14px) 0 0 / 100% 2px no-repeat,
    repeating-linear-gradient(90deg, var(--bp-line) 0 8px, transparent 8px 14px) 0 100% / 100% 2px no-repeat,
    repeating-linear-gradient(var(--bp-line) 0 8px, transparent 8px 14px) 0 0 / 2px 100% no-repeat,
    repeating-linear-gradient(var(--bp-line) 0 8px, transparent 8px 14px) 100% 0 / 2px 100% no-repeat,
    repeating-linear-gradient(90deg, rgba(255, 166, 48, 0.05) 0 2px, transparent 2px 16px),
    repeating-linear-gradient(rgba(255, 166, 48, 0.05) 0 2px, transparent 2px 16px),
    linear-gradient(rgba(255, 166, 48, 0.06), rgba(255, 166, 48, 0.06)),
    var(--bp-bg, var(--bg, #15130f));
}

/* While drones lay bricks the leading edge is a solid row. */
.blueprint-rising::after {
  box-shadow: inset 0 -2px 0 var(--bp-line), 0 2px 0 rgba(255, 166, 48, 0.35);
}

.build-overlay {
  position: fixed;
  inset: 0;
  z-index: 6;
  overflow: hidden;
  pointer-events: none;
}
.build-overlay[hidden] { display: none; }
.build-overlay canvas {
  display: block;
  image-rendering: pixelated;
  image-rendering: crisp-edges;
}

@media print, (prefers-reduced-motion: reduce) {
  .blueprint::after { display: none; }
}