/* GENERATED by `node tooling/gen-boot.mjs` — do not edit.

   The boot loader: the building section of `design/project/loader/index.html`, on screen from
   the first paint, before the bundle and before React. Its markup lives between the
   `gen-boot` markers in `frontend/index.html` and is generated by the same command.

   TWIN: `frontend/src/components/PageLoader.tsx` + `PageLoader.module.css` are the same
   drawing, hand-carried, for after the bundle arrives. Neither is edited to match the other —
   both are changed by editing `design/project/loader/index.html` and regenerating this one.

   TWIN: the `:root` values below are copies of `design/project/styles/tokens.css`, read by the
   generator, never retyped. Nothing has loaded the token file yet at this point in the page;
   when it does it redefines these identically. */

/* From design/project/styles/tokens.css. */
:root {
  --neutral-0: #FFFFFF;
  --neutral-50: #F7F8FA;
  --neutral-100: #EEF0F3;
  --neutral-300: #C2C8D1;
  --neutral-400: #9098A4;
  --neutral-500: #6C7480;
  --neutral-600: #4D545E;
  --neutral-700: #363B43;
}

body { margin: 0; }

.kalqa-boot {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 100dvh;
  box-sizing: border-box;
  /* The React loader draws a sentence under the drawing: a 20px gap plus one 13px line at
     1.4 = 38px more content, centred as one block. Reserving that height here keeps the
     drawing on the same pixel across the hand-over instead of rising ~19px when the
     sentence arrives. TWIN: `PageLoader.module.css` `.loader` gap and `.label` type. */
  padding-bottom: 38px;
  background: var(--neutral-0);
}

/* One 7s section. 0–5 ground+foundation · 5–69 five storeys (walls → core → stair → windows → slab → level mark) · 69–74 parapet · 78 section mark · hold · 92–98 wipe */
.kalqa-boot-sheet { animation: kb-wipe 7s linear infinite; animation-delay: var(--kb-phase, 0ms); }
.kalqa-boot-ink { fill: none; stroke-linecap: square; stroke-linejoin: miter; }
.kalqa-boot-fig { font-family: "IBM Plex Mono", Menlo, monospace; font-weight: 500; font-size: 3.6px; fill: var(--neutral-600); }

/* What the prototype wrote as `style=""` attributes. The CSP forbids those, so the
   generator lifts each distinct declaration set out into a class. See the header. */
.kb-s1 { stroke: var(--neutral-100); }
.kb-s2 { stroke: var(--neutral-300); }
.kb-s3 { fill: var(--neutral-50); }
.kb-s4 { stroke: var(--neutral-700); stroke-width: 1; stroke-dasharray: 72; animation: kb-ground 7s linear infinite; animation-delay: var(--kb-phase, 0ms); }
.kb-s5 { fill: url(#kalqa-boot-hatch); opacity: 0; animation: kb-found 7s linear infinite; animation-delay: var(--kb-phase, 0ms); }
.kb-s6 { stroke: var(--neutral-400); stroke-width: 0.5; opacity: 0; animation: kb-found 7s linear infinite; animation-delay: var(--kb-phase, 0ms); }
.kb-s7 { opacity: 0; animation: kb-lvl0 7s linear infinite; animation-delay: var(--kb-phase, 0ms); }
.kb-s8 { stroke: var(--neutral-500); stroke-width: 0.5; }
.kb-s9 { stroke: var(--neutral-700); stroke-width: 1.2; stroke-dasharray: 12; animation: kb-wall0 7s linear infinite; animation-delay: var(--kb-phase, 0ms); }
.kb-s10 { stroke: var(--neutral-400); stroke-width: 0.5; stroke-dasharray: 12; animation: kb-core0 7s linear infinite; animation-delay: var(--kb-phase, 0ms); }
.kb-s11 { stroke: var(--neutral-600); stroke-width: 0.7; stroke-dasharray: 20; animation: kb-stair0 7s linear infinite; animation-delay: var(--kb-phase, 0ms); }
.kb-s12 { stroke: var(--neutral-500); stroke-width: 0.5; opacity: 0; animation: kb-win0 7s linear infinite; animation-delay: var(--kb-phase, 0ms); }
.kb-s13 { stroke: var(--neutral-300); stroke-width: 0.4; opacity: 0; animation: kb-win0 7s linear infinite; animation-delay: var(--kb-phase, 0ms); }
.kb-s14 { stroke: var(--neutral-700); stroke-width: 1.6; stroke-dasharray: 52; animation: kb-slab0 7s linear infinite; animation-delay: var(--kb-phase, 0ms); }
.kb-s15 { opacity: 0; animation: kb-lvl1 7s linear infinite; animation-delay: var(--kb-phase, 0ms); }
.kb-s16 { stroke: var(--neutral-700); stroke-width: 1.2; stroke-dasharray: 12; animation: kb-wall1 7s linear infinite; animation-delay: var(--kb-phase, 0ms); }
.kb-s17 { stroke: var(--neutral-400); stroke-width: 0.5; stroke-dasharray: 12; animation: kb-core1 7s linear infinite; animation-delay: var(--kb-phase, 0ms); }
.kb-s18 { stroke: var(--neutral-600); stroke-width: 0.7; stroke-dasharray: 20; animation: kb-stair1 7s linear infinite; animation-delay: var(--kb-phase, 0ms); }
.kb-s19 { stroke: var(--neutral-500); stroke-width: 0.5; opacity: 0; animation: kb-win1 7s linear infinite; animation-delay: var(--kb-phase, 0ms); }
.kb-s20 { stroke: var(--neutral-300); stroke-width: 0.4; opacity: 0; animation: kb-win1 7s linear infinite; animation-delay: var(--kb-phase, 0ms); }
.kb-s21 { stroke: var(--neutral-700); stroke-width: 1.6; stroke-dasharray: 52; animation: kb-slab1 7s linear infinite; animation-delay: var(--kb-phase, 0ms); }
.kb-s22 { opacity: 0; animation: kb-lvl2 7s linear infinite; animation-delay: var(--kb-phase, 0ms); }
.kb-s23 { stroke: var(--neutral-700); stroke-width: 1.2; stroke-dasharray: 12; animation: kb-wall2 7s linear infinite; animation-delay: var(--kb-phase, 0ms); }
.kb-s24 { stroke: var(--neutral-400); stroke-width: 0.5; stroke-dasharray: 12; animation: kb-core2 7s linear infinite; animation-delay: var(--kb-phase, 0ms); }
.kb-s25 { stroke: var(--neutral-600); stroke-width: 0.7; stroke-dasharray: 20; animation: kb-stair2 7s linear infinite; animation-delay: var(--kb-phase, 0ms); }
.kb-s26 { stroke: var(--neutral-500); stroke-width: 0.5; opacity: 0; animation: kb-win2 7s linear infinite; animation-delay: var(--kb-phase, 0ms); }
.kb-s27 { stroke: var(--neutral-300); stroke-width: 0.4; opacity: 0; animation: kb-win2 7s linear infinite; animation-delay: var(--kb-phase, 0ms); }
.kb-s28 { stroke: var(--neutral-700); stroke-width: 1.6; stroke-dasharray: 52; animation: kb-slab2 7s linear infinite; animation-delay: var(--kb-phase, 0ms); }
.kb-s29 { opacity: 0; animation: kb-lvl3 7s linear infinite; animation-delay: var(--kb-phase, 0ms); }
.kb-s30 { stroke: var(--neutral-700); stroke-width: 1.2; stroke-dasharray: 12; animation: kb-wall3 7s linear infinite; animation-delay: var(--kb-phase, 0ms); }
.kb-s31 { stroke: var(--neutral-400); stroke-width: 0.5; stroke-dasharray: 12; animation: kb-core3 7s linear infinite; animation-delay: var(--kb-phase, 0ms); }
.kb-s32 { stroke: var(--neutral-600); stroke-width: 0.7; stroke-dasharray: 20; animation: kb-stair3 7s linear infinite; animation-delay: var(--kb-phase, 0ms); }
.kb-s33 { stroke: var(--neutral-500); stroke-width: 0.5; opacity: 0; animation: kb-win3 7s linear infinite; animation-delay: var(--kb-phase, 0ms); }
.kb-s34 { stroke: var(--neutral-300); stroke-width: 0.4; opacity: 0; animation: kb-win3 7s linear infinite; animation-delay: var(--kb-phase, 0ms); }
.kb-s35 { stroke: var(--neutral-700); stroke-width: 1.6; stroke-dasharray: 52; animation: kb-slab3 7s linear infinite; animation-delay: var(--kb-phase, 0ms); }
.kb-s36 { opacity: 0; animation: kb-lvl4 7s linear infinite; animation-delay: var(--kb-phase, 0ms); }
.kb-s37 { stroke: var(--neutral-700); stroke-width: 1.2; stroke-dasharray: 12; animation: kb-wall4 7s linear infinite; animation-delay: var(--kb-phase, 0ms); }
.kb-s38 { stroke: var(--neutral-400); stroke-width: 0.5; stroke-dasharray: 12; animation: kb-core4 7s linear infinite; animation-delay: var(--kb-phase, 0ms); }
.kb-s39 { stroke: var(--neutral-600); stroke-width: 0.7; stroke-dasharray: 20; animation: kb-stair4 7s linear infinite; animation-delay: var(--kb-phase, 0ms); }
.kb-s40 { stroke: var(--neutral-500); stroke-width: 0.5; opacity: 0; animation: kb-win4 7s linear infinite; animation-delay: var(--kb-phase, 0ms); }
.kb-s41 { stroke: var(--neutral-300); stroke-width: 0.4; opacity: 0; animation: kb-win4 7s linear infinite; animation-delay: var(--kb-phase, 0ms); }
.kb-s42 { stroke: var(--neutral-700); stroke-width: 1.6; stroke-dasharray: 52; animation: kb-slab4 7s linear infinite; animation-delay: var(--kb-phase, 0ms); }
.kb-s43 { opacity: 0; animation: kb-lvl5 7s linear infinite; animation-delay: var(--kb-phase, 0ms); }
.kb-s44 { stroke: var(--neutral-700); stroke-width: 1.2; stroke-dasharray: 4; animation: kb-para 7s linear infinite; animation-delay: var(--kb-phase, 0ms); }
.kb-s45 { stroke: var(--neutral-700); stroke-width: 0.8; opacity: 0; animation: kb-cap 7s linear infinite; animation-delay: var(--kb-phase, 0ms); }
.kb-s46 { opacity: 0; animation: kb-mark 7s linear infinite; animation-delay: var(--kb-phase, 0ms); }

@keyframes kb-ground { 0% { stroke-dashoffset: 72; } 3%, 100% { stroke-dashoffset: 0; } }
@keyframes kb-found { 0%, 2% { opacity: 0; } 5%, 100% { opacity: 1; } }
@keyframes kb-lvl0 { 0%, 4.0% { opacity: 0; transform: translateY(1px); } 6.0%, 100% { opacity: 1; transform: translateY(0); } }
@keyframes kb-wall0 { 0%, 5.0% { stroke-dashoffset: 12; } 8.5%, 100% { stroke-dashoffset: 0; } }
@keyframes kb-core0 { 0%, 7.0% { stroke-dashoffset: 12; } 9.5%, 100% { stroke-dashoffset: 0; } }
@keyframes kb-stair0 { 0%, 8.5% { stroke-dashoffset: 20; } 12.5%, 100% { stroke-dashoffset: 0; } }
@keyframes kb-win0 { 0%, 12.0% { opacity: 0; } 13.5%, 100% { opacity: 1; } }
@keyframes kb-slab0 { 0%, 13.0% { stroke-dashoffset: 52; } 16.5%, 100% { stroke-dashoffset: 0; } }
@keyframes kb-lvl1 { 0%, 16.0% { opacity: 0; transform: translateY(1px); } 17.8%, 100% { opacity: 1; transform: translateY(0); } }
@keyframes kb-wall1 { 0%, 17.8% { stroke-dashoffset: 12; } 21.3%, 100% { stroke-dashoffset: 0; } }
@keyframes kb-core1 { 0%, 19.8% { stroke-dashoffset: 12; } 22.3%, 100% { stroke-dashoffset: 0; } }
@keyframes kb-stair1 { 0%, 21.3% { stroke-dashoffset: 20; } 25.3%, 100% { stroke-dashoffset: 0; } }
@keyframes kb-win1 { 0%, 24.8% { opacity: 0; } 26.3%, 100% { opacity: 1; } }
@keyframes kb-slab1 { 0%, 25.8% { stroke-dashoffset: 52; } 29.3%, 100% { stroke-dashoffset: 0; } }
@keyframes kb-lvl2 { 0%, 28.8% { opacity: 0; transform: translateY(1px); } 30.6%, 100% { opacity: 1; transform: translateY(0); } }
@keyframes kb-wall2 { 0%, 30.6% { stroke-dashoffset: 12; } 34.1%, 100% { stroke-dashoffset: 0; } }
@keyframes kb-core2 { 0%, 32.6% { stroke-dashoffset: 12; } 35.1%, 100% { stroke-dashoffset: 0; } }
@keyframes kb-stair2 { 0%, 34.1% { stroke-dashoffset: 20; } 38.1%, 100% { stroke-dashoffset: 0; } }
@keyframes kb-win2 { 0%, 37.6% { opacity: 0; } 39.1%, 100% { opacity: 1; } }
@keyframes kb-slab2 { 0%, 38.6% { stroke-dashoffset: 52; } 42.1%, 100% { stroke-dashoffset: 0; } }
@keyframes kb-lvl3 { 0%, 41.6% { opacity: 0; transform: translateY(1px); } 43.4%, 100% { opacity: 1; transform: translateY(0); } }
@keyframes kb-wall3 { 0%, 43.4% { stroke-dashoffset: 12; } 46.9%, 100% { stroke-dashoffset: 0; } }
@keyframes kb-core3 { 0%, 45.4% { stroke-dashoffset: 12; } 47.9%, 100% { stroke-dashoffset: 0; } }
@keyframes kb-stair3 { 0%, 46.9% { stroke-dashoffset: 20; } 50.9%, 100% { stroke-dashoffset: 0; } }
@keyframes kb-win3 { 0%, 50.4% { opacity: 0; } 51.9%, 100% { opacity: 1; } }
@keyframes kb-slab3 { 0%, 51.4% { stroke-dashoffset: 52; } 54.9%, 100% { stroke-dashoffset: 0; } }
@keyframes kb-lvl4 { 0%, 54.4% { opacity: 0; transform: translateY(1px); } 56.2%, 100% { opacity: 1; transform: translateY(0); } }
@keyframes kb-wall4 { 0%, 56.2% { stroke-dashoffset: 12; } 59.7%, 100% { stroke-dashoffset: 0; } }
@keyframes kb-core4 { 0%, 58.2% { stroke-dashoffset: 12; } 60.7%, 100% { stroke-dashoffset: 0; } }
@keyframes kb-stair4 { 0%, 59.7% { stroke-dashoffset: 20; } 63.7%, 100% { stroke-dashoffset: 0; } }
@keyframes kb-win4 { 0%, 63.2% { opacity: 0; } 64.7%, 100% { opacity: 1; } }
@keyframes kb-slab4 { 0%, 64.2% { stroke-dashoffset: 52; } 67.7%, 100% { stroke-dashoffset: 0; } }
@keyframes kb-lvl5 { 0%, 67.2% { opacity: 0; transform: translateY(1px); } 69.0%, 100% { opacity: 1; transform: translateY(0); } }
@keyframes kb-para { 0%, 69% { stroke-dashoffset: 4; } 72%, 100% { stroke-dashoffset: 0; } }
@keyframes kb-cap { 0%, 72% { opacity: 0; } 74%, 100% { opacity: 1; } }
@keyframes kb-mark { 0%, 75% { opacity: 0; } 78%, 100% { opacity: 1; } }
@keyframes kb-wipe { 0%, 92% { opacity: 1; } 98%, 100% { opacity: 0; } }
@media (prefers-reduced-motion: reduce) {
  .kalqa-boot-sheet, .kalqa-boot-sheet * { animation: none !important; }
  .kalqa-boot-sheet path, .kalqa-boot-sheet rect { stroke-dashoffset: 0 !important; }
  .kalqa-boot-sheet * { opacity: 1 !important; transform: none !important; }
}