/* =========================================================
   Blueprint drawings (inline SVG built by js/fig-*.js)
   Groups carry data-from="n": hidden until the story reaches step n.
   Groups carry data-at="n m": highlighted while the story is on step n or m.
   ========================================================= */
.fig { display: block; width: 100%; height: 100%; overflow: visible; }
.fig text {
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.05em;
  fill: var(--chalk-2);
}
.fig .t-strong { fill: var(--chalk); font-weight: 500; }
.fig .t-big { font-size: 16px; font-weight: 500; fill: var(--amber); }
.fig .t-small { font-size: 9.5px; }
.fig .t-amber { fill: var(--amber); }

.fig .s { fill: none; stroke: var(--chalk); stroke-width: 1.4; stroke-linejoin: round; stroke-linecap: round; }
.fig .s2 { fill: none; stroke: var(--chalk-2); stroke-width: 1; stroke-linejoin: round; stroke-linecap: round; }
.fig .sf { fill: none; stroke: rgba(233, 238, 244, 0.24); stroke-width: 1; }
.fig .sa { fill: none; stroke: var(--amber); stroke-width: 1.6; stroke-linejoin: round; stroke-linecap: round; }
.fig .guide { fill: none; stroke: rgba(233, 238, 244, 0.13); stroke-width: 0.8; stroke-dasharray: 3 5; }
.fig .panel { fill: rgba(10, 31, 56, 0.72); }
.fig .fill-chalk { fill: var(--chalk); }
.fig .fill-amber { fill: var(--amber); }
.fig .fill-faint { fill: rgba(233, 238, 244, 0.1); }
.fig .hatch { fill: url(#bp-hatch); }
.fig .cross { fill: url(#bp-cross); }
.fig .soil { fill: url(#bp-soil); }
.fig .hatch-a { fill: url(#bp-hatch-a); }

/* --- draw-on lines --- */
.fig .draw {
  stroke-dasharray: var(--len, 0) var(--len, 0);
  stroke-dashoffset: 0;
  fill-opacity: 1;
  transition:
    stroke-dashoffset var(--dur, 1.1s) cubic-bezier(0.65, 0, 0.35, 1) var(--delay, 0s),
    fill-opacity 0.7s ease calc(var(--delay, 0s) + 0.45s);
}
.fig [data-from]:not(.on) .draw,
.fig .draw[data-from]:not(.on) {
  stroke-dashoffset: var(--len, 0);
  fill-opacity: 0;
  transition-duration: 0.35s, 0.2s;
  transition-delay: 0s, 0s;
}

/* --- fade / rise in --- */
.fig .fade { opacity: 1; transition: opacity 0.6s ease var(--delay, 0s); }
.fig [data-from]:not(.on) .fade,
.fig .fade[data-from]:not(.on) { opacity: 0; transition-delay: 0s; transition-duration: 0.25s; }

.fig .rise {
  transform: none;
  opacity: 1;
  transition: transform 0.9s cubic-bezier(0.2, 0.8, 0.2, 1) var(--delay, 0s), opacity 0.5s ease var(--delay, 0s);
}
.fig [data-from]:not(.on) .rise,
.fig .rise[data-from]:not(.on) { transform: translateY(-22px); opacity: 0; transition-delay: 0s; }

.fig .drop { transition: transform 0.7s cubic-bezier(0.3, 1.4, 0.5, 1) var(--delay, 0s), opacity 0.3s ease var(--delay, 0s); }
.fig [data-from]:not(.on) .drop,
.fig .drop[data-from]:not(.on) { transform: translateY(-40px); opacity: 0; transition-delay: 0s; }

/* --- stamp slam --- */
.fig .stamp-in {
  transform-box: fill-box;
  transform-origin: center;
  transition: transform 0.45s cubic-bezier(0.2, 1.6, 0.4, 1) var(--delay, 0.4s), opacity 0.2s ease var(--delay, 0.4s);
}
.fig [data-from]:not(.on) .stamp-in,
.fig .stamp-in[data-from]:not(.on) { transform: scale(1.7); opacity: 0; transition-delay: 0s; }
.fig .stamp rect { fill: rgba(245, 184, 65, 0.06); stroke: var(--amber); }
.fig .stamp text { fill: var(--amber); font-weight: 500; }

/* --- focus: the layer the story is talking about --- */
.fig [data-at] { transition: opacity 0.5s ease; }
.fig.has-focus [data-at]:not(.at) { opacity: 0.42; }
.fig [data-at].at .lbl { fill: var(--amber); }
.fig [data-at].at .hl { stroke: var(--amber); }

/* --- packets (amber dots riding along paths) --- */
.fig .pk-dot { fill: var(--amber); }
.fig .pk-glow { fill: url(#bp-glow); }

/* --- building --- */
.fig .floor { cursor: pointer; }
.fig .floor:hover .hl { stroke: var(--amber); }
.fig .floor .slab { fill: rgba(10, 31, 56, 0.85); }
.fig .floor.at .slab { fill: rgba(245, 184, 65, 0.07); }
.fig .crane { transition: transform 1.3s cubic-bezier(0.45, 0, 0.2, 1); }
.fig .win { fill: rgba(233, 238, 244, 0.08); transition: fill 0.4s ease var(--delay, 0s); }
.fig .on .win { fill: rgba(245, 184, 65, 0.75); }

/* --- stack wiring --- */
.fig .lit .slab, .fig .lit .annex-box { fill: rgba(245, 184, 65, 0.14); }
.fig .lit .hl { stroke: var(--amber); }
.fig .lit .lbl { fill: var(--amber); }
.fig .dimmed { opacity: 0.35; transition: opacity 0.4s ease; }
.fig .wire { fill: none; stroke: var(--amber); stroke-width: 1.4; stroke-linejoin: round; transition: stroke-dashoffset 0.9s cubic-bezier(0.65, 0, 0.35, 1) var(--delay, 0s); }
.fig .tl-bar { fill: rgba(233, 238, 244, 0.2); transition: fill 0.4s ease; }
.fig .tl-bar.lit { fill: var(--amber); }

/* --- flying tile, cart counter, typing caret --- */
.fig .fly { transition: transform 1.1s cubic-bezier(0.5, 0, 0.2, 1) 0.5s, opacity 0.4s ease 0.5s; }
.fig .caret { animation: blink 1s steps(1) infinite; }
@keyframes blink { 50% { opacity: 0; } }

/* --- isometric building: opaque faces so nearer floors hide what is behind them --- */
.fig .face-l { fill: #17375F; }
.fig .face-r { fill: #0E2847; }
.fig .face-t { fill: #1E4472; }
.fig .floor.at .face-l { fill: #1F4270; }
.fig .floor.at .face-r { fill: #15345A; }
.fig .floor.at .face-t { fill: #27507F; }
.fig .iso-win { fill: rgba(233, 238, 244, 0.1); stroke: rgba(233, 238, 244, 0.3); stroke-width: 0.6; }
.fig .floor.at .iso-win { fill: rgba(245, 184, 65, 0.6); stroke: var(--amber); }
/* in isometric view, dim other floors by colour, not transparency, or the floors behind show through */
.fig.iso.has-focus .floor:not(.at) { opacity: 1; }
.fig.iso.has-focus .floor:not(.at) .hl { stroke: rgba(233, 238, 244, 0.42); }
.fig.iso.has-focus .floor:not(.at) .face-l { fill: #132F52; }
.fig.iso.has-focus .floor:not(.at) .face-r { fill: #0C223D; }
.fig.iso.has-focus .floor:not(.at) .face-t { fill: #183A63; }
.fig.iso.has-focus .floor:not(.at) text { fill-opacity: 0.45; }

/* motion off: every state still changes, just without travel */
.no-motion .fig *, .no-motion .fig { transition: none !important; animation: none !important; }

@media (max-width: 899px) {
  .fig .m-hide { display: none; }
}