/* Film 02 · Fuel and hiring (spec 18, compressed into the 10s loop; 1% = 0.1s).
   0.3s  'The company · $YOURS' roster fades in; rows populate top-down from 0.5s
   2.1s  the cursor clicks the header checkbox, ticks cascade, the bulk bar slides up
   2.7s  the camera zooms onto the bar: '493 agents selected · All zones'; click 'Reserve ceilings' at 3.8s
   4.1s  CRT dissolve to the sky (the cursor stays); 4.5s the composer types 'hire 12 more builders for zone 4'
   6.1s  send; 6.6s fuel ledger cells assemble one at a time while the column scrolls; 9.3s fade out */

.il.fh-root {
  --loop: 10s;
  --settle: -2.65s; /* reduced motion: every row ticked and the bulk bar up */
}

.fh-cam {
  animation-name: fh-cam;
}
@keyframes fh-cam {
  0%, 27% { transform: translate(0em, 0em) scale(1); }
  32%, 100% { transform: translate(-75.85em, -71.625em) scale(2.2); }
}
.fh-app {
  animation-name: fh-app;
}
@keyframes fh-app {
  0%, 3% { opacity: 0; translate: 0 0; }
  6%, 40.5% { opacity: 1; translate: 0 0; }
  41% { opacity: 1; translate: .125em 0; animation-timing-function: step-end; }
  42% { opacity: .6; translate: -.125em 0; animation-timing-function: step-end; }
  43% { opacity: .3; translate: .0625em 0; }
  44%, 100% { opacity: 0; translate: 0 0; }
}

/* Roster page */
.fh-main {
  display: grid;
  grid-template-rows: 3.75em 2em 2em 1.5em 1.5em minmax(0, 1fr);
  row-gap: 1em;
}
.fh-tabsrow {
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.fh-tabs {
  display: flex;
  gap: .25em;
  padding: .1875em;
  background: var(--f-card);
  border: 1px solid var(--f-line);
  border-radius: 2px;
}
.fh-tabs > span {
  display: grid;
  place-items: center;
  height: 1.5em;
  padding: 0 .875em;
  color: var(--f-text-3);
  border-radius: 2px;
}
.fh-tabs > span > span {
  font-size: .8125em;
}
.fh-tabs > .is-on {
  background: var(--f-text);
  color: var(--f-on-primary);
}
.fh-upd {
  display: flex;
  align-items: center;
  gap: .5em;
  color: var(--f-text-3);
  white-space: nowrap;
}
.fh-upd > span:last-child {
  font-size: .75em;
}
.fh-toolbar {
  display: flex;
  align-items: center;
  gap: .5em;
}
.fh-search {
  flex: 1 1 auto;
}
.fh-quick {
  display: flex;
  align-items: center;
  gap: .5em;
}
.fh-ql {
  margin-right: .25em;
  font-size: .75em;
  color: var(--f-text-3);
  white-space: nowrap;
}
.fh-active {
  display: flex;
  align-items: center;
}
.fh-fchip {
  border-color: #4a4843;
  color: var(--f-text);
}
.fh-fchip .film-ico {
  color: var(--f-text-3);
}

/* Table: checkbox, Agent · ID, Role, Zone, Ceiling, Status, Spent, Model, Time */
.fh-table {
  position: relative;
  display: grid;
  grid-template-rows: 2.25em minmax(0, 1fr) 2.75em;
  min-height: 0;
  border: 1px solid var(--f-line);
  border-radius: 2px;
}
.fh-tr {
  display: grid;
  grid-template-columns: 3em 18em 10em 9em 8em 7em 9em 10em minmax(0, 1fr);
  align-items: center;
  height: 2.25em;
  padding: 0 1em;
  border-bottom: 1px solid var(--f-line);
}
.fh-time {
  display: flex;
  align-items: center;
  gap: .375em;
  color: var(--f-text-3);
}
.fh-time .film-ico {
  width: .75em;
  height: .75em;
}
.fh-rows {
  min-height: 0;
  overflow: hidden;
}
.fh-rows > .fh-tr {
  --film-d: calc(var(--i, 0) * .09s);
  animation-name: fh-row;
}
.fh-rows > .fh-tr:nth-child(1) { --i: 1; }
.fh-rows > .fh-tr:nth-child(2) { --i: 2; }
.fh-rows > .fh-tr:nth-child(3) { --i: 3; }
.fh-rows > .fh-tr:nth-child(4) { --i: 4; }
.fh-rows > .fh-tr:nth-child(5) { --i: 5; }
.fh-rows > .fh-tr:nth-child(6) { --i: 6; }
.fh-rows > .fh-tr:nth-child(7) { --i: 7; }
.fh-rows > .fh-tr:nth-child(8) { --i: 8; }
.fh-rows > .fh-tr:nth-child(9) { --i: 9; }
.fh-rows > .fh-tr:nth-child(10) { --i: 10; }
.fh-rows > .fh-tr:nth-child(11) { --i: 11; }
.fh-rows > .fh-tr:nth-child(12) { --i: 12; }
.fh-rows > .fh-tr:nth-child(13) { --i: 13; }
.fh-rows > .fh-tr:nth-child(14) { --i: 14; }
@keyframes fh-row {
  0%, 4.5% { opacity: 0; }
  6%, 90% { opacity: 1; }
  90.1%, 100% { opacity: 0; }
}
/* Ticks cascade down the rows after the header checkbox is clicked */
.fh-tick {
  opacity: 0;
  --film-d: calc(var(--i, 0) * .035s);
  animation-name: fh-tick;
}
@keyframes fh-tick {
  0%, 21.5% { opacity: 0; }
  21.6%, 90% { opacity: 1; }
  90.1%, 100% { opacity: 0; }
}
.fh-foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 1em;
  border-top: 1px solid var(--f-line);
  white-space: nowrap;
}
.fh-foot-r {
  display: flex;
  align-items: center;
  gap: .75em;
}
.fh-pp {
  width: 4em;
}

/* Bulk bar, bottom centre of the table */
.fh-bulk {
  position: absolute;
  left: 50%;
  bottom: .25em;
  width: 33.75em;
  height: 2.25em;
  margin-left: -16.875em;
  display: grid;
  grid-template-columns: 2.5em 7.5em 8em 10.25em 1.5em;
  align-items: center;
  column-gap: .75em;
  padding: 0 .5em;
  background: var(--f-card);
  border: 1px solid #45433e;
  border-radius: 2px;
  animation-name: fh-bulk;
}
@keyframes fh-bulk {
  0%, 23% { opacity: 0; translate: 0 1.25em; }
  26%, 100% { opacity: 1; translate: 0 0; }
}
.fh-count {
  position: relative;
  height: 1.5em;
  border: 1px solid var(--f-line-2);
  border-radius: 2px;
}
.fh-count > span {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  font-size: .8125em;
  font-weight: 500;
}
.fh-sel > span {
  font-size: .8125em;
  color: var(--f-text-2);
  white-space: nowrap;
}
.fh-all {
  position: relative;
  height: 1.5em;
}
.fh-all > span {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  gap: .375em;
  color: var(--f-text);
  white-space: nowrap;
}
.fh-all > span > span {
  font-size: .8125em;
}
.fh-all2 .film-ico {
  width: .875em;
  height: .875em;
  color: var(--f-teal-text);
}
.fh-c1,
.fh-all1 {
  animation-name: fh-swap-out;
}
.fh-c2,
.fh-all2 {
  opacity: 0;
  animation-name: fh-swap-in;
}
@keyframes fh-swap-out {
  0% { opacity: 1; }
  33%, 100% { opacity: 0; }
}
@keyframes fh-swap-in {
  0% { opacity: 0; }
  33%, 100% { opacity: 1; }
}
.fh-reserve {
  width: 100%;
  height: 1.75em;
  padding: 0 .5em;
  animation-name: fh-press;
}
@keyframes fh-press {
  0%, 37.9% { background-color: var(--f-text); }
  38%, 39.4% { background-color: #c9c5bf; }
  39.5%, 100% { background-color: var(--f-text); }
}
.fh-x {
  display: grid;
  place-items: center;
  color: var(--f-text-3);
}
.fh-x .film-ico {
  width: .875em;
  height: .875em;
}

/* CRT dissolve out of the roster */
.fh-crt {
  animation-name: fh-crt;
}
@keyframes fh-crt {
  0%, 40.5% { opacity: 0; transform: translateX(0); }
  41% { opacity: 1; transform: translateX(.125em); animation-timing-function: step-end; }
  42% { opacity: 1; transform: translateX(-.125em); animation-timing-function: step-end; }
  43% { opacity: .7; transform: translateX(.0625em); }
  44.5%, 100% { opacity: 0; transform: translateX(0); }
}

/* Composer: about 45% of the frame, #131210 with a 1px border */
.fh-composer {
  position: absolute;
  left: 33em;
  top: 28.25em;
  width: 54em;
  height: 11em;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  padding: 1.25em;
  background: var(--f-page);
  border: 1px solid var(--f-line-2);
  border-radius: 2px;
  opacity: 0;
  animation-name: fh-composer;
}
@keyframes fh-composer {
  0%, 44.5% { opacity: 0; transform: scale(.97); }
  47.5%, 62.5% { opacity: 1; transform: scale(1); }
  65.5%, 100% { opacity: 0; transform: scale(1); }
}
.fh-cin {
  position: relative;
  height: 1.5em;
}
.fh-ph,
.fh-line {
  position: absolute;
  left: 0;
  top: 0;
  display: flex;
  align-items: center;
  height: 1.5em;
  font-size: .9375em;
  white-space: nowrap;
}
.fh-ph {
  color: var(--f-text-3);
  animation-name: fh-ph;
}
@keyframes fh-ph {
  0% { opacity: 1; }
  49%, 100% { opacity: 0; }
}
.fh-typed {
  display: block;
  width: 0;
  overflow: hidden;
  color: var(--f-text);
  animation-name: fh-type;
}
@keyframes fh-type {
  0%, 49% { width: 0ch; animation-timing-function: steps(32, end); }
  59%, 100% { width: 32ch; }
}
.fh-caret {
  flex: none;
  width: .125em;
  height: 1.1em;
  margin-left: .0625em;
  background: var(--f-text);
  opacity: 0;
  animation-name: fh-caret;
}
@keyframes fh-caret {
  0% { opacity: 0; }
  47.5% { opacity: 1; }
  61.25%, 100% { opacity: 0; }
}
.fh-cfoot {
  display: flex;
  align-items: center;
  gap: .5em;
}
.fh-send {
  display: grid;
  place-items: center;
  width: 2.25em;
  height: 2.25em;
  margin-left: auto;
  background: var(--f-text);
  color: var(--f-on-primary);
  border-radius: 2px;
  animation-name: fh-send;
}
.fh-send .film-ico {
  stroke-width: 2;
}
@keyframes fh-send {
  0%, 61% { background-color: var(--f-text); }
  61.25%, 62% { background-color: #bdb9b3; }
  62.5%, 100% { background-color: var(--f-text); }
}

/* Fuel ledger cells: each starts as its header bar and grows while its code types */
.fh-ledger {
  position: absolute;
  inset: 0;
  opacity: 0;
  animation-name: fh-ledger;
}
@keyframes fh-ledger {
  0%, 65.5% { opacity: 0; }
  66%, 93% { opacity: 1; }
  96%, 100% { opacity: 0; }
}
.fh-lcam {
  position: absolute;
  left: 30em;
  top: 6em;
  width: 60em;
  animation-name: fh-lcam;
}
@keyframes fh-lcam {
  0%, 71% { transform: translateY(18em); }
  76%, 79% { transform: translateY(6em); }
  84%, 100% { transform: translateY(-8em); }
}
.fh-cw {
  position: absolute;
  left: 0;
  width: 100%;
}
.fh-cw1 { top: 0; }
.fh-cw2 { top: 23.25em; --cell: .8s; }
.fh-cw3 { top: 46.5em; --cell: 1.6s; }
.fh-cell {
  height: 2.25em;
  overflow: hidden;
  background: var(--f-page);
  border: 1px solid var(--f-line-2);
  border-radius: 2px;
  opacity: 0;
  --film-d: var(--cell, 0s);
  animation-name: fh-cell;
}
@keyframes fh-cell {
  0%, 65.9% { opacity: 0; height: 2.25em; translate: 0 .5em; }
  66.6%, 67% { opacity: 1; height: 2.25em; translate: 0 0; }
  71%, 100% { opacity: 1; height: 19.75em; translate: 0 0; }
}
.fh-chd {
  display: flex;
  align-items: center;
  gap: .5em;
  height: 2.25em;
  padding: 0 .875em;
  border-bottom: 1px solid var(--f-line);
  color: var(--f-text-2);
  white-space: nowrap;
}
.fh-chd .film-ico {
  width: .875em;
  height: .875em;
}
.fh-ct {
  font-size: .8125em;
  color: var(--f-text);
}
.fh-cm {
  margin-left: auto;
  font-size: .75em;
  color: var(--f-text-3);
}
.fh-code {
  padding: .5em 0;
  background: #0f0e0c;
  border-bottom: 1px solid var(--f-line);
}
.fh-cl {
  display: flex;
  align-items: center;
  height: 1.375em;
  white-space: pre;
}
.fh-lno {
  flex: none;
  width: 3.5em;
  padding-right: 1.25em;
  font-size: .75em;
  text-align: right;
  color: #4d4a45;
}
/* Code types at a steady rate: 60 one-character steps whatever the line length */
.fh-type {
  display: block;
  max-width: 0;
  overflow: hidden;
  font-size: .8125em;
  color: var(--f-text);
  --film-d: var(--cell, 0s);
  animation-name: fh-code;
}
.fh-type.fh-l2 {
  --film-d: calc(var(--cell, 0s) + .25s);
}
@keyframes fh-code {
  0%, 67% { max-width: 0ch; animation-timing-function: steps(60, end); }
  70%, 100% { max-width: 60ch; }
}
.fh-o { color: var(--f-text-3); }
.fh-s { color: var(--f-teal-text); }
.fh-n { color: var(--f-blue); }
.fh-b { color: var(--f-bool); }
.fh-filters {
  display: flex;
  align-items: center;
  gap: .5em;
  height: 2em;
  padding: 0 .875em;
  border-bottom: 1px solid var(--f-line);
  color: var(--f-text-3);
}
.fh-filters > span {
  font-size: .75em;
}
.fh-filters .film-ico {
  width: .75em;
  height: .75em;
}
.fh-filters .film-ico:last-child {
  margin-left: auto;
}
.fh-tbl {
  border-bottom: 1px solid var(--f-line);
}
.fh-trow {
  display: grid;
  align-items: center;
  height: 1.625em;
  padding: 0 .875em;
  border-top: 1px solid #1e1d1a;
}
.fh-tbl5 .fh-trow { grid-template-columns: 2em repeat(5, minmax(0, 1fr)); }
.fh-tbl4 .fh-trow { grid-template-columns: 2em repeat(4, minmax(0, 1fr)); }
.fh-tbl3 .fh-trow { grid-template-columns: 2em repeat(3, minmax(0, 1fr)); }
.fh-trow > span {
  min-width: 0;
  overflow: hidden;
  font-size: .75em;
  color: var(--f-text-2);
  white-space: nowrap;
  text-overflow: ellipsis;
}
.fh-trow > span:first-child,
.fh-trow > .fh-null {
  color: var(--f-text-3);
}
.fh-trow > .fh-b {
  color: var(--f-bool);
}
.fh-thr {
  height: 1.75em;
  border-top: 0;
}
.fh-thr > span {
  color: var(--f-text-3);
}
.fh-thr i {
  margin-right: .5em;
  font-style: normal;
  color: #57544e;
}
.fh-cfoot2 {
  display: flex;
  align-items: center;
  gap: .5em;
  height: 1.75em;
  padding: 0 .875em;
  color: var(--f-text-3);
}
.fh-cfoot2 > span {
  font-size: .75em;
}
.fh-cfoot2 .film-ico {
  width: .75em;
  height: .75em;
}
.fh-out {
  position: absolute;
  left: 0;
  top: 20.5em;
  opacity: 0;
  --film-d: var(--cell, 0s);
  animation-name: fh-out;
}
@keyframes fh-out {
  0%, 72.5% { opacity: 0; }
  73.5%, 100% { opacity: 1; }
}

/* Cursor: header checkbox at 2.1s, 'Reserve ceilings' at 3.8s (zoomed), send at 6.1s */
.fh-cursor {
  animation-name: fh-cursor;
}
@keyframes fh-cursor {
  0%, 14.9% { opacity: 0; transform: translate(42em, 46em) scale(1); }
  15% { opacity: 1; transform: translate(42em, 46em) scale(1); }
  20.5% { transform: translate(14.45em, 27.15em) scale(1); }
  21% { transform: translate(14.45em, 27.15em) scale(.85); }
  22%, 27% { transform: translate(14.45em, 27.15em) scale(1); }
  34%, 37.5% { transform: translate(79.8em, 59em) scale(1); }
  38% { transform: translate(79.8em, 59em) scale(.85); }
  39%, 55% { transform: translate(79.8em, 59em) scale(1); }
  60.5% { transform: translate(84.6em, 36.9em) scale(1); }
  61.25% { transform: translate(84.6em, 36.9em) scale(.85); }
  62.25% { opacity: 1; transform: translate(84.6em, 36.9em) scale(1); }
  65%, 100% { opacity: 0; transform: translate(84.6em, 36.9em) scale(1); }
}