/* Homepage ledger hero — populate-then-scan experiment (easy to revert) */
.ledger-hero {
  /*
    8s loop: sources write rows in mixed colours.
    A people row is later edited by AI (purple highlight), then Airspeed flags it.
    Row i appears at 6% + i*3%. Scan 22%→78%. AI edit 38%. Flag peak 55%.
  */
  --lh-loop: 8s;
  --lh-scan-in: 22%;
  --lh-scan-bottom: 78%;
  --lh-scan-fade: 84%;
  --lh-flag-peak: 55%;
  --lh-people: #000080;
  --lh-auto: #3f7bff;
  --lh-ai: #7c3aed;
  --lh-flag: #ea580c;
  width: 100%;
  max-width: 560px;
  min-width: 0;
}

.ledger-hero__svg {
  width: 100%;
  max-width: 100%;
  height: auto;
  display: block;
  overflow: visible;
}

.ledger-hero__svg--narrow {
  display: none;
}

.ledger-hero__svg text {
  font-family: var(--sans);
  font-weight: 500;
  fill: var(--ink-soft);
  font-variation-settings: "opsz" 14;
}

.ledger-hero__svg text.ledger-hero__kicker {
  font-size: 11px;
  fill: var(--ink-muted);
  letter-spacing: 0.02em;
}

.ledger-hero__svg text.ledger-hero__brand {
  font-size: 13px;
  fill: var(--accent);
  letter-spacing: 0.08em;
}

.ledger-hero__svg text.ledger-hero__label {
  font-size: 13px;
}

.ledger-hero__svg .ledger-hero__source--people { stroke: var(--lh-people); }
.ledger-hero__svg .ledger-hero__source--people .ledger-hero__label { fill: var(--lh-people); stroke: none; }
.ledger-hero__svg .ledger-hero__source--auto { stroke: var(--lh-auto); }
.ledger-hero__svg .ledger-hero__source--auto .ledger-hero__label { fill: var(--lh-auto); stroke: none; }
.ledger-hero__svg .ledger-hero__source--ai { stroke: var(--lh-ai); }
.ledger-hero__svg .ledger-hero__source--ai .ledger-hero__label { fill: var(--lh-ai); stroke: none; }

.ledger-hero__source-mark {
  transform-box: fill-box;
  transform-origin: center;
}

.ledger-hero__source--people .ledger-hero__source-mark {
  animation: lh-src-people var(--lh-loop) ease-out infinite;
}
.ledger-hero__source--auto .ledger-hero__source-mark {
  animation: lh-src-auto var(--lh-loop) ease-out infinite;
}
.ledger-hero__source--ai .ledger-hero__source-mark {
  animation: lh-src-ai var(--lh-loop) ease-out infinite;
}

.ledger-hero__row--people > rect { fill: var(--lh-people); fill-opacity: 0.5; }
.ledger-hero__row--auto > rect { fill: var(--lh-auto); fill-opacity: 0.5; }
.ledger-hero__row--ai > rect { fill: var(--lh-ai); fill-opacity: 0.42; }
.ledger-hero__row--people > rect.ledger-hero__row-tick { fill: var(--lh-people); fill-opacity: 0.85; }
.ledger-hero__row--people > rect.ledger-hero__row-hi,
.ledger-hero__row-hi {
  fill: var(--lh-ai);
  fill-opacity: 0.12;
}
.ledger-hero__row-hi {
  opacity: 0;
  animation: lh-row-edit-hi var(--lh-loop) linear infinite;
}

.ledger-hero__row {
  opacity: 0;
  animation: lh-row-0 var(--lh-loop) linear infinite;
}
.ledger-hero__row--0 { animation-name: lh-row-0; }
.ledger-hero__row--1 { animation-name: lh-row-1; }
.ledger-hero__row--2 { animation-name: lh-row-2; }
.ledger-hero__row--3 { animation-name: lh-row-3; }
.ledger-hero__row--4 { animation-name: lh-row-4; }
.ledger-hero__row--5 { animation-name: lh-row-5; }
.ledger-hero__row--6 { animation-name: lh-row-6; }
.ledger-hero__row--7 { animation-name: lh-row-7; }
.ledger-hero__row--8 { animation-name: lh-row-8; }
.ledger-hero__row--9 { animation-name: lh-row-9; }
.ledger-hero__row--10 { animation-name: lh-row-10; }
.ledger-hero__row--11 { animation-name: lh-row-11; }
.ledger-hero__row--12 { animation-name: lh-row-12; }
.ledger-hero__row--13 { animation-name: lh-row-13; }

.ledger-hero__scan-motion {
  transform-box: view-box;
  transform-origin: 0 0;
  animation: lh-scan var(--lh-loop) linear infinite;
}

.ledger-hero__flag-bar {
  transform-box: fill-box;
  transform-origin: center;
  animation: lh-flag-bar var(--lh-loop) ease-out infinite;
}

.ledger-hero__flag-glow {
  opacity: 0;
  transform-box: fill-box;
  transform-origin: center;
  animation: lh-flag-glow var(--lh-loop) ease-out infinite;
}

.ledger-hero__dot {
  opacity: 0;
}
.ledger-hero__dot--people {
  animation: lh-dot-people var(--lh-loop) linear infinite;
}
.ledger-hero__dot--auto {
  animation: lh-dot-auto var(--lh-loop) linear infinite;
}
.ledger-hero__dot--ai {
  animation: lh-dot-ai var(--lh-loop) linear infinite;
}

.ledger-hero__svg--wide {
  --lh-scan-distance: calc(100% * 290 / 348);
}

.ledger-hero__svg--narrow {
  --lh-scan-distance: calc(100% * 290 / 384);
}

@keyframes lh-scan {
  0%, 21% {
    transform: translateY(0);
    opacity: 0;
  }
  22% {
    transform: translateY(0);
    opacity: 1;
  }
  78% {
    transform: translateY(var(--lh-scan-distance));
    opacity: 1;
  }
  84% {
    transform: translateY(var(--lh-scan-distance));
    opacity: 0;
  }
  84.01% {
    transform: translateY(0);
    opacity: 0;
  }
  100% {
    transform: translateY(0);
    opacity: 0;
  }
}

@keyframes lh-row-0 {
  0%, 5% { opacity: 0; }
  7%, 86% { opacity: 1; }
  91%, 100% { opacity: 0; }
}
@keyframes lh-row-1 {
  0%, 8% { opacity: 0; }
  10%, 86% { opacity: 1; }
  91%, 100% { opacity: 0; }
}
@keyframes lh-row-2 {
  0%, 11% { opacity: 0; }
  13%, 86% { opacity: 1; }
  91%, 100% { opacity: 0; }
}
@keyframes lh-row-3 {
  0%, 14% { opacity: 0; }
  16%, 86% { opacity: 1; }
  91%, 100% { opacity: 0; }
}
@keyframes lh-row-4 {
  0%, 17% { opacity: 0; }
  19%, 86% { opacity: 1; }
  91%, 100% { opacity: 0; }
}
@keyframes lh-row-5 {
  0%, 20% { opacity: 0; }
  22%, 86% { opacity: 1; }
  91%, 100% { opacity: 0; }
}
@keyframes lh-row-6 {
  0%, 23% { opacity: 0; }
  25%, 86% { opacity: 1; }
  91%, 100% { opacity: 0; }
}
@keyframes lh-row-7 {
  0%, 26% { opacity: 0; }
  28%, 86% { opacity: 1; }
  91%, 100% { opacity: 0; }
}
@keyframes lh-row-8 {
  0%, 29% { opacity: 0; }
  31%, 86% { opacity: 1; }
  91%, 100% { opacity: 0; }
}
@keyframes lh-row-9 {
  0%, 32% { opacity: 0; }
  34%, 86% { opacity: 1; }
  91%, 100% { opacity: 0; }
}
@keyframes lh-row-10 {
  0%, 35% { opacity: 0; }
  37%, 86% { opacity: 1; }
  91%, 100% { opacity: 0; }
}
@keyframes lh-row-11 {
  0%, 38% { opacity: 0; }
  40%, 86% { opacity: 1; }
  91%, 100% { opacity: 0; }
}
@keyframes lh-row-12 {
  0%, 41% { opacity: 0; }
  43%, 86% { opacity: 1; }
  91%, 100% { opacity: 0; }
}
@keyframes lh-row-13 {
  0%, 44% { opacity: 0; }
  46%, 86% { opacity: 1; }
  91%, 100% { opacity: 0; }
}

@keyframes lh-src-people {
  0% { transform: scale(1); }
  5%, 8% { transform: scale(1); }
  6% { transform: scale(1.16); }
  14%, 17% { transform: scale(1); }
  15% { transform: scale(1.16); }
  20%, 23% { transform: scale(1); }
  21% { transform: scale(1.16); }
  29%, 32% { transform: scale(1); }
  30% { transform: scale(1.16); }
  38%, 41% { transform: scale(1); }
  39% { transform: scale(1.16); }
  100% { transform: scale(1); }
}
@keyframes lh-src-auto {
  0% { transform: scale(1); }
  8%, 11% { transform: scale(1); }
  9% { transform: scale(1.16); }
  17%, 20% { transform: scale(1); }
  18% { transform: scale(1.16); }
  26%, 29% { transform: scale(1); }
  27% { transform: scale(1.16); }
  35%, 38% { transform: scale(1); }
  36% { transform: scale(1.16); }
  44%, 47% { transform: scale(1); }
  45% { transform: scale(1.16); }
  100% { transform: scale(1); }
}
@keyframes lh-src-ai {
  0% { transform: scale(1); }
  11%, 14% { transform: scale(1); }
  12% { transform: scale(1.16); }
  23%, 26% { transform: scale(1); }
  24% { transform: scale(1.16); }
  32%, 35% { transform: scale(1); }
  33% { transform: scale(1.16); }
  37%, 40% { transform: scale(1); }
  38% { transform: scale(1.16); }
  41%, 44% { transform: scale(1); }
  42% { transform: scale(1.16); }
  100% { transform: scale(1); }
}

@keyframes lh-dot-people {
  0% { opacity: 0; transform: translateX(0); }
  5% { opacity: 0; transform: translateX(0); }
  6% { opacity: 0.95; transform: translateX(0); }
  8% { opacity: 0; transform: translateX(72px); }
  14% { opacity: 0; transform: translateX(0); }
  15% { opacity: 0.95; transform: translateX(0); }
  17% { opacity: 0; transform: translateX(72px); }
  20% { opacity: 0; transform: translateX(0); }
  21% { opacity: 0.95; transform: translateX(0); }
  23% { opacity: 0; transform: translateX(72px); }
  29% { opacity: 0; transform: translateX(0); }
  30% { opacity: 0.95; transform: translateX(0); }
  32% { opacity: 0; transform: translateX(72px); }
  38% { opacity: 0; transform: translateX(0); }
  39% { opacity: 0.95; transform: translateX(0); }
  41% { opacity: 0; transform: translateX(72px); }
  100% { opacity: 0; transform: translateX(0); }
}
@keyframes lh-dot-auto {
  0% { opacity: 0; transform: translateX(0); }
  8% { opacity: 0; transform: translateX(0); }
  9% { opacity: 0.95; transform: translateX(0); }
  11% { opacity: 0; transform: translateX(72px); }
  17% { opacity: 0; transform: translateX(0); }
  18% { opacity: 0.95; transform: translateX(0); }
  20% { opacity: 0; transform: translateX(72px); }
  26% { opacity: 0; transform: translateX(0); }
  27% { opacity: 0.95; transform: translateX(0); }
  29% { opacity: 0; transform: translateX(72px); }
  35% { opacity: 0; transform: translateX(0); }
  36% { opacity: 0.95; transform: translateX(0); }
  38% { opacity: 0; transform: translateX(72px); }
  44% { opacity: 0; transform: translateX(0); }
  45% { opacity: 0.95; transform: translateX(0); }
  47% { opacity: 0; transform: translateX(72px); }
  100% { opacity: 0; transform: translateX(0); }
}
@keyframes lh-dot-ai {
  0% { opacity: 0; transform: translateX(0); }
  11% { opacity: 0; transform: translateX(0); }
  12% { opacity: 0.95; transform: translateX(0); }
  14% { opacity: 0; transform: translateX(72px); }
  23% { opacity: 0; transform: translateX(0); }
  24% { opacity: 0.95; transform: translateX(0); }
  26% { opacity: 0; transform: translateX(72px); }
  32% { opacity: 0; transform: translateX(0); }
  33% { opacity: 0.95; transform: translateX(0); }
  35% { opacity: 0; transform: translateX(72px); }
  37% { opacity: 0; transform: translateX(0); }
  38% { opacity: 0.95; transform: translateX(0); }
  40% { opacity: 0; transform: translateX(72px); }
  41% { opacity: 0; transform: translateX(0); }
  42% { opacity: 0.95; transform: translateX(0); }
  44% { opacity: 0; transform: translateX(72px); }
  100% { opacity: 0; transform: translateX(0); }
}

@keyframes lh-row-edit-hi {
  0%, 36% { opacity: 0; }
  39%, 86% { opacity: 1; }
  91%, 100% { opacity: 0; }
}

@keyframes lh-flag-bar {
  0%, 36% {
    transform: scale(1);
    fill: var(--lh-people);
    fill-opacity: 0.5;
  }
  39%, 51% {
    transform: scale(1);
    fill: var(--lh-ai);
    fill-opacity: 0.5;
  }
  55% {
    transform: scale(1.75);
    fill: var(--lh-flag);
    fill-opacity: 0.95;
  }
  62%, 86% {
    transform: scale(1);
    fill: var(--lh-flag);
    fill-opacity: 0.9;
  }
  91%, 100% {
    transform: scale(1);
    fill: var(--lh-people);
    fill-opacity: 0.5;
  }
}

@keyframes lh-flag-glow {
  0%, 51% {
    opacity: 0;
    transform: scale(0.5);
  }
  55% {
    opacity: 0.4;
    transform: scale(1);
  }
  62%, 100% {
    opacity: 0;
    transform: scale(1.35);
  }
}