/* Film 03 · Building in public (spec 19, kept to the 10s loop; 1% = 0.1s).
   0.4s  the Harbour org graph floats in on the starfield
   1.6s  the camera zooms hard into 'Lead-03 · Squad lead'; from 2.6s its five checks appear 0.2s apart
         (the neighbours' stacks fill in at the frame edges)
   3.9s  pull back to the whole graph; from 5.35s a copper packet rides the connectors to Merge
   9.0s  fade to the sky */

.il.fb-root {
  --loop: 10s;
  --settle: -6.6s; /* reduced motion: the whole graph, every stack filled, packet mid-route */
}

.fb-cam {
  animation-name: fb-cam;
}
@keyframes fb-cam {
  0%, 4% { transform: translate(2.4em, 1.35em) scale(.96); }
  12%, 16% { transform: translate(0em, 0em) scale(1); }
  25%, 39% { transform: translate(-73.25em, -44.25em) scale(2.6); }
  50% { transform: translate(0em, 0em) scale(1); }
  90%, 100% { transform: translate(-1.5em, -.84375em) scale(1.025); }
}
.fb-graph {
  position: absolute;
  inset: 0;
  opacity: 0;
  animation-name: fb-graph;
}
@keyframes fb-graph {
  0%, 4% { opacity: 0; }
  12%, 90% { opacity: 1; }
  95%, 100% { opacity: 0; }
}

/* Canvas, label, controls */
.fb-canvas {
  left: 5em;
  top: 20.5em;
  width: 110em;
  height: 26em;
}
.fb-label {
  position: absolute;
  left: 6em;
  top: 21.125em;
  width: 108em;
  height: 1.25em;
  display: flex;
  align-items: center;
  justify-content: space-between;
  white-space: nowrap;
}
.fb-lt {
  font-size: .75em;
  color: var(--f-text-2);
}
.fb-live {
  display: flex;
  align-items: center;
  gap: .5em;
  color: var(--f-text-3);
}
.fb-live > span:last-child {
  font-size: .75em;
}
.fb-ctrls {
  position: absolute;
  left: 6em;
  top: 39.75em;
  display: flex;
  flex-direction: column;
  gap: .25em;
}
.fb-ctrls > span {
  display: grid;
  place-items: center;
  width: 1.75em;
  height: 1.75em;
  background: var(--f-card);
  border: 1px solid var(--f-line);
  border-radius: 2px;
  color: var(--f-text-2);
}
.fb-ctrls .film-ico {
  width: .875em;
  height: .875em;
}

/* Wires live in one svg over the canvas: viewBox units are px at 1920 */
.fb-wires {
  left: 5em;
  top: 20.5em;
  width: 110em;
  height: 26em;
}

/* Nodes in a zig-zag, 240x56 at 1920 */
.fb-n0 { left: 8.25em; top: 23.5em; }
.fb-n1 { left: 25.75em; top: 30.5em; }
.fb-n2 { left: 43.25em; top: 23.5em; }
.fb-n3 { left: 60.75em; top: 30.5em; }
.fb-n4 { left: 78.25em; top: 23.5em; }
.fb-n5 { left: 95.75em; top: 30.5em; }

/* Check stacks: kebab-case Gate checks and Title Case Judge criteria, 0.2s apart */
.fb-stack {
  position: absolute;
  width: 16em;
  display: flex;
  flex-direction: column;
  gap: .375em;
}
.fb-s0 { left: 8.25em; top: 27.5em; }
.fb-s1 { left: 25.75em; top: 34.5em; }
.fb-s2 { left: 43.25em; top: 27.5em; }
.fb-s3 { left: 60.75em; top: 34.5em; }
.fb-s4 { left: 78.25em; top: 27.5em; }
.fb-s5 { left: 95.75em; top: 34.5em; }
.fb-stack > .film-crow {
  opacity: 0;
  animation-name: fb-row;
}
.fb-stack > :nth-child(2) { --film-d: .2s; }
.fb-stack > :nth-child(3) { --film-d: .4s; }
.fb-stack > :nth-child(4) { --film-d: .6s; }
.fb-stack > :nth-child(5) { --film-d: .8s; }
@keyframes fb-row {
  0%, 26% { opacity: 0; translate: 0 -.375em; }
  28%, 94% { opacity: 1; translate: 0 0; }
  95%, 100% { opacity: 0; translate: 0 0; }
}

/* Copper packet: 0.45s along each connector, 0.17s hidden under each node, 5.35s to 8.28s */
.fb-packet {
  position: absolute;
  left: 0;
  top: 0;
  width: .5em;
  height: .5em;
  background: var(--f-copper);
  opacity: 0;
  animation-name: fb-packet;
}
@keyframes fb-packet {
  0%, 53.4% { opacity: 0; transform: translate(24em, 25em); }
  53.5% { opacity: 1; transform: translate(24em, 25em); }
  53.9% { transform: translate(24.75em, 25em); }
  57.6% { transform: translate(24.75em, 32em); }
  58% { transform: translate(25.5em, 32em); }
  59.7% { transform: translate(41.5em, 32em); }
  60.1% { transform: translate(42.25em, 32em); }
  63.8% { transform: translate(42.25em, 25em); }
  64.2% { transform: translate(43em, 25em); }
  65.9% { transform: translate(59em, 25em); }
  66.3% { transform: translate(59.75em, 25em); }
  70% { transform: translate(59.75em, 32em); }
  70.4% { transform: translate(60.5em, 32em); }
  72.1% { transform: translate(76.5em, 32em); }
  72.5% { transform: translate(77.25em, 32em); }
  76.2% { transform: translate(77.25em, 25em); }
  76.6% { transform: translate(78em, 25em); }
  78.3% { transform: translate(94em, 25em); }
  78.7% { transform: translate(94.75em, 25em); }
  82.4% { transform: translate(94.75em, 32em); }
  82.8% { opacity: 1; transform: translate(95.5em, 32em); }
  84%, 100% { opacity: 0; transform: translate(95.5em, 32em); }
}