/* The loading scenes of OneStop: short animations of the Toupin Technologies logo, "same style and humour".
   V1.11: six at start-up (cart, hoist, hardhat, drill, gold, blast); V1.44: six more (belt, trend, truck, flotation,
   control, breaker); design system 1.0 (V1.62, Source\Docs\Design system\Design system.md section 6): six more (lamp,
   canary, core, tagboard, mill, survey) and the pour, a celebration only. Eighteen loading scenes in five families
   (control room, process, data, field, team: which apps pick which, loading.js and Client\Services\LoadingAnimations.cs).
   loading.js draws each one (class boot-<name> around its stage) and gives its caption; each plays ONCE (2.6 to 3 s; the
   pour 1.2 s) and ends on the whole logo.
   Where they play:
   - The start-up screen (#boot of Components\App.razor, the end of this file): the scene only when the UI is not ready
     after 350 ms (fast path: the still logo), the morning show once a day, the logo flies into the top bar at the end.
   - A page's loading stage (Client\Shared\Os\LoadingStage.razor: a load that lasted LongLoads.SceneAfter, 1.2 s) and a
     long job's success toast (the pour): .os-scene, the same drawing at 1:1, the logo held still at the end.
   Reduced motion, or OneStop inside a frame: the logo alone (boot-static, os-scene--still), never an animation.
   The logo is drawn in the viewBox 100 100 800 800 (ttech-logo.svg; class boot-logo, 130 px at 85, 6 of the 300 x 184 px
   stage): the gold frame M123 116H877V563H774V218H226V563H123Z, the T's top M276 289H722V392H550V563H447V392H276Z and its
   base M447 609H550V781H722V884H276V781H447Z. The full-stage scenes use the same units over the whole stage (class
   boot-scene, viewBox -423 63 1846 1132); canary, core and tagboard draw in stage pixels (viewBox 0 0 300 184). Colours
   that are not the logo's: the --boot- tokens (tokens.css section 7, and the block below: light, then the dark theme). */

.boot { --boot-ground: #ebe5d6; --boot-shaft: #d9cfb6; --boot-layer: #ddd2b8; --boot-layer-2: #d3c6a6; --boot-dust: #ddd3bd; --boot-rail: #a99f82;
  --boot-belt: #4a463f; --boot-tread: #7a7466; --boot-grid: #e4dece; --boot-trend: #3f7fbf; --boot-tank: #ebe7dc; --boot-slurry: #bcc2be; --boot-slurry-2: #a9b1ad;
  --boot-screen: #dfe2e4; --boot-bezel: #2E2E2E; }
:root[data-theme="dark"] .boot { --boot-ground: #2a2620; --boot-shaft: #3a352c; --boot-layer: #3a352c; --boot-layer-2: #332f28; --boot-dust: #4a4338; --boot-rail: #7f796d;
  --boot-belt: #5a554c; --boot-tread: #8c8577; --boot-grid: #3a352c; --boot-trend: #6fa3d8; --boot-tank: #2c2924; --boot-slurry: #565d59; --boot-slurry-2: #4a504c;
  --boot-screen: #3a3f44; --boot-bezel: #4d4840; }

.boot.boot-out { opacity: 0; transition: opacity 0.25s ease; }
.boot-stage { position: relative; width: 300px; height: 184px; overflow: hidden; animation: boot-breathe 1.6s ease-in-out 3s infinite; }
.boot-logo { position: absolute; left: 85px; top: 6px; width: 130px; height: 130px; overflow: hidden; }
.boot-scene { position: absolute; left: 0; top: 0; width: 300px; height: 184px; overflow: hidden; }
.boot-logo .ink, .boot-scene .ink { fill: var(--logo-ink); }
.boot-logo *, .boot-scene * { transform-box: fill-box; }
.boot-line { min-height: 1.2em; color: var(--muted); font-size: 0.85rem; font-weight: 400; letter-spacing: 0; opacity: 0; animation: boot-line 2.8s forwards; }
.boot-bubble { position: absolute; left: 220px; top: 4px; padding: 3px 9px; border-radius: 12px 12px 12px 2px; background: var(--brand-gold); color: #2E2E2E; font-size: 0.8rem; font-weight: 800; white-space: nowrap; opacity: 0; }
@keyframes boot-line { 0%, 70% { opacity: 0; transform: translateY(5px); } 85%, 100% { opacity: 1; transform: translateY(0); } }
@keyframes boot-breathe { 50% { opacity: 0.55; } }

/* Static: the logo alone, as before V1.11 */
.boot-static .boot-stage { width: 130px; height: 136px; animation: boot-breathe 1.4s ease-in-out infinite; }
.boot-static .boot-logo { left: 0; top: 0; }
.boot-static .boot-line { display: none; }

/* 2 - The mine cart: it rolls in with the T, bumps the stop, tips, and the T flips into the frame */
.boot-cart .bc-cart { position: absolute; left: 100px; top: 120px; width: 100px; height: 48px; transform-origin: 100% 100%; animation: bc-cart 2.8s forwards; }
.boot-cart .bc-body { position: absolute; left: 0; top: 4px; width: 100px; height: 30px; background: #8d7f56; clip-path: polygon(0 0, 100% 0, 86% 100%, 14% 100%); }
.boot-cart .bc-rim { position: absolute; left: -4px; top: 0; width: 108px; height: 6px; border-radius: 3px; background: var(--logo-ink); }
.boot-cart .bc-wheel { position: absolute; top: 30px; width: 18px; height: 18px; box-sizing: border-box; border-radius: 50%; border: 4px solid var(--logo-ink);
  background: linear-gradient(90deg, transparent 44%, var(--logo-ink) 44%, var(--logo-ink) 56%, transparent 56%); animation: bc-wheel 2.8s forwards; }
.boot-cart .bc-rail { position: absolute; left: 0; top: 168px; width: 300px; height: 4px; border-radius: 2px; background: var(--boot-rail); }
.boot-cart .bc-ties { position: absolute; left: 0; top: 172px; width: 300px; height: 8px; background: repeating-linear-gradient(90deg, var(--boot-rail) 0 6px, transparent 6px 22px); }
.boot-cart .bc-stop { position: absolute; left: 216px; top: 152px; width: 10px; height: 16px; border-radius: 2px; background: #8f1f1f; }
.boot-cart .bc-t { position: absolute; left: 85px; top: 6px; width: 130px; height: 130px; transform-origin: 50% 50%; animation: bc-t 2.8s forwards; }
@keyframes bc-cart {
  0% { transform: translateX(-270px) rotate(0); animation-timing-function: cubic-bezier(.2,.7,.3,1); }
  38% { transform: translateX(0) rotate(0); } 41% { transform: translateX(5px) rotate(0); } 44% { transform: translateX(0) rotate(0); }
  50% { transform: translateX(0) rotate(20deg); } 60% { transform: translateX(0) rotate(0); }
  66% { transform: translateX(0) rotate(0); animation-timing-function: ease-in; } 90%, 100% { transform: translateX(330px) rotate(0); } }
@keyframes bc-wheel { 0% { transform: rotate(0); } 38%, 66% { transform: rotate(720deg); } 90%, 100% { transform: rotate(1440deg); } }
@keyframes bc-t {
  0% { transform: translate(-270px, 26px) scale(.5) rotate(0); animation-timing-function: cubic-bezier(.2,.7,.3,1); }
  38% { transform: translate(0, 26px) scale(.5) rotate(0); } 41% { transform: translate(5px, 26px) scale(.5) rotate(0); }
  44%, 48% { transform: translate(0, 26px) scale(.5) rotate(0); }
  60% { transform: translate(28px, -70px) scale(.8) rotate(200deg); }
  72% { transform: translate(0, 0) scale(1) rotate(360deg); } 75% { transform: translate(0, 5px) scale(1.04, .9) rotate(360deg); }
  79%, 100% { transform: translate(0, 0) scale(1) rotate(360deg); } }

/* 3 - The headframe hoist: the frame is the headframe, the T rides up the shaft in its cage, "Ding!" */
.boot-hoist .bh-car { animation: bh-car 2.6s forwards; }
.boot-hoist .bh-cable { transform-origin: 50% 0; animation: bh-cable 2.6s forwards; }
.boot-hoist .bh-cage { animation: bh-cage 2.6s forwards; }
.boot-hoist .bh-wheel { transform-origin: 50% 50%; animation: bh-wheel 2.6s forwards; }
.boot-hoist .bh-under { animation: bh-under 2.6s forwards; }
.boot-hoist .bh-ground { fill: var(--boot-ground); } .boot-hoist .bh-shaft { fill: var(--boot-shaft); }
.boot-hoist .bh-cage, .boot-hoist .bh-hub { stroke: var(--logo-ink); }
.boot-hoist .boot-bubble { animation: boot-pop 2.6s forwards; }
@keyframes bh-car { 0% { transform: translateY(720px); animation-timing-function: cubic-bezier(.45,0,.4,1); } 55% { transform: translateY(-14px); } 62%, 100% { transform: translateY(0); } }
@keyframes bh-cable { 0% { transform: scaleY(11.1); animation-timing-function: cubic-bezier(.45,0,.4,1); } 55% { transform: scaleY(.8); } 62%, 75% { transform: scaleY(1); } 88%, 100% { transform: scaleY(0); } }
@keyframes bh-cage { 0%, 72% { opacity: 1; } 85%, 100% { opacity: 0; } }
@keyframes bh-wheel { 0% { transform: rotate(0); animation-timing-function: cubic-bezier(.45,0,.4,1); } 55%, 75% { transform: rotate(-900deg); } 88%, 100% { transform: rotate(-1000deg); } }
@keyframes bh-under { 0%, 78% { opacity: 1; } 92%, 100% { opacity: 0; } }
@keyframes boot-pop { 0%, 55% { opacity: 0; transform: scale(.5) rotate(-8deg); } 60% { opacity: 1; transform: scale(1.2) rotate(4deg); } 64%, 84% { opacity: 1; transform: scale(1) rotate(0); } 95%, 100% { opacity: 0; transform: scale(1); } }

/* 4 - The hard hat: the T hops in, a safety hat drops onto it, "Clonk!" */
.boot-hardhat .bk-t { transform-origin: 50% 100%; animation: bk-t 2.6s forwards; }
.boot-hardhat .bk-hat { transform-origin: 50% 100%; animation: bk-hat 2.6s forwards; }
.boot-hardhat .bk-star { transform-origin: 50% 50%; animation: bk-star 2.6s forwards; }
.boot-hardhat .boot-bubble { left: auto; right: 220px; border-radius: 12px 12px 2px 12px; background: #F08C1A; animation: bk-clonk 2.6s forwards; }
@keyframes bk-t { 0% { transform: translateY(700px) scale(1, 1); animation-timing-function: cubic-bezier(.2,.8,.3,1); } 20% { transform: translateY(-70px) scale(.94, 1.08); }
  28% { transform: translateY(0) scale(1.06, .9); } 33%, 50% { transform: translateY(0) scale(1, 1); } 53% { transform: translateY(0) scale(1.08, .86); } 59%, 100% { transform: translateY(0) scale(1, 1); } }
@keyframes bk-hat { 0%, 34% { transform: translateY(-820px) rotate(0); animation-timing-function: cubic-bezier(.55,0,1,.45); } 50% { transform: translateY(0) rotate(0); }
  53% { transform: translateY(16px) rotate(0); } 57% { transform: translateY(-22px) rotate(-4deg); } 61% { transform: translateY(0) rotate(0); }
  70% { transform: translateY(0) rotate(-7deg); } 75% { transform: translateY(0) rotate(6deg); } 80% { transform: translateY(0) rotate(-3deg); } 85%, 100% { transform: translateY(0) rotate(0); } }
@keyframes bk-star { 0%, 51% { transform: scale(0) rotate(0); opacity: 0; } 56% { transform: scale(1.2) rotate(45deg); opacity: 1; } 68%, 100% { transform: scale(0) rotate(90deg); opacity: 0; } }
@keyframes bk-clonk { 0%, 50% { opacity: 0; transform: scale(.5) rotate(-10deg); } 54% { opacity: 1; transform: scale(1.25) rotate(4deg); } 58%, 78% { opacity: 1; transform: scale(1) rotate(0); } 88%, 100% { opacity: 0; transform: scale(1); } }

/* 6 - Drilling: a drill string bores through the ground under the frame, pulls out, and the T pops up from the hole */
.boot-drill .bd-drill { animation: bd-drill 2.8s forwards; }
.boot-drill .bd-spin { transform-origin: 50% 50%; animation: bd-spin .16s steps(2, end) 10; }
.boot-drill .bd-t { transform-origin: 50% 100%; animation: bd-t 2.8s forwards; }
.boot-drill .bd-dust { fill: var(--boot-dust); transform-origin: 50% 100%; animation: bd-dust 2.8s forwards; }
.boot-drill .bd-hole { transform-origin: 50% 50%; animation: bd-hole 2.8s forwards; }
.boot-drill .bd-under { animation: bd-under 2.8s forwards; }
.boot-drill .bd-s1 { fill: var(--boot-ground); } .boot-drill .bd-s2 { fill: var(--boot-layer); } .boot-drill .bd-s3 { fill: var(--boot-layer-2); }
.boot-drill .bd-depth { position: absolute; left: 220px; top: 6px; width: 76px; height: 22px; color: var(--muted); font-size: 0.75rem; font-weight: 800; white-space: nowrap; }
.boot-drill .bd-depth span { position: absolute; inset: 0; opacity: 0; animation: 2.8s forwards; }
.boot-drill .bd-depth .bd-found { color: #8d7f56; }
/* V1.44: one class more than the rule above, whose animation shorthand would otherwise reset the name (the depths never
   showed since V1.11) */
.boot-drill .bd-depth .bd-d1 { animation-name: bd-d1; } .boot-drill .bd-depth .bd-d2 { animation-name: bd-d2; }
.boot-drill .bd-depth .bd-d3 { animation-name: bd-d3; } .boot-drill .bd-depth .bd-d4 { animation-name: bd-d4; }
@keyframes bd-drill { 0%, 5% { transform: translateY(-120px); animation-timing-function: ease-out; } 10% { transform: translateY(0); animation-timing-function: linear; }
  45% { transform: translateY(640px); } 48% { transform: translateY(640px); animation-timing-function: ease-in; } 60%, 100% { transform: translateY(-900px); } }
@keyframes bd-spin { to { transform: scaleX(-1); } }
@keyframes bd-t { 0%, 60% { transform: translateY(720px) scale(1, 1); animation-timing-function: cubic-bezier(.2,.8,.3,1); } 70% { transform: translateY(-70px) scale(.94, 1.08); }
  76% { transform: translateY(0) scale(1.06, .9); } 81%, 100% { transform: translateY(0) scale(1, 1); } }
@keyframes bd-dust { 0%, 10% { transform: scale(0); opacity: 0; } 15% { transform: scale(1.1); opacity: .9; } 21% { transform: scale(.6); opacity: .6; } 27% { transform: scale(1.2); opacity: .9; }
  33% { transform: scale(.7); opacity: .6; } 39% { transform: scale(1.1); opacity: .9; } 45% { transform: scale(.8); opacity: .6; } 52%, 100% { transform: scale(0); opacity: 0; } }
@keyframes bd-hole { 0%, 9% { transform: scale(0); } 13%, 80% { transform: scale(1); } 88%, 100% { transform: scale(0); } }
@keyframes bd-under { 0%, 80% { opacity: 1; } 92%, 100% { opacity: 0; } }
@keyframes bd-d1 { 0%, 6% { opacity: 0; } 8%, 18% { opacity: 1; } 20%, 100% { opacity: 0; } }
@keyframes bd-d2 { 0%, 18% { opacity: 0; } 20%, 30% { opacity: 1; } 32%, 100% { opacity: 0; } }
@keyframes bd-d3 { 0%, 30% { opacity: 0; } 32%, 45% { opacity: 1; } 47%, 100% { opacity: 0; } }
@keyframes bd-d4 { 0%, 46% { opacity: 0; } 49%, 78% { opacity: 1; } 86%, 100% { opacity: 0; } }

/* 7 - The gold pour: liquid gold fills the empty frame, rising in both legs at once, then the T drops in */
.boot-gold .bg-level { animation: bg-level 2.8s forwards; }
.boot-gold .bg-stream { transform-origin: 50% 0; animation: bg-stream 2.8s forwards; }
.boot-gold .bg-mold { stroke: var(--boot-rail); animation: bg-mold 2.8s forwards; }
.boot-gold .bg-t { transform-origin: 50% 100%; animation: bg-t 2.8s forwards; }
.boot-gold .bg-spark { transform-origin: 50% 50%; opacity: 0; animation: bg-spark 2.8s forwards; }
@keyframes bg-level { 0%, 8% { transform: translateY(470px); animation-timing-function: cubic-bezier(.4,0,.6,1); } 55%, 100% { transform: translateY(0); } }
@keyframes bg-stream { 0%, 4% { transform: scaleY(0); opacity: 1; } 10%, 50% { transform: scaleY(1); opacity: 1; } 58%, 100% { transform: scaleY(1); opacity: 0; } }
@keyframes bg-mold { 0%, 55% { opacity: 1; } 62%, 100% { opacity: 0; } }
@keyframes bg-t { 0%, 58% { transform: translateY(-860px) scale(1, 1); animation-timing-function: cubic-bezier(.55,0,1,.45); } 70% { transform: translateY(0) scale(1.06, .88); }
  75% { transform: translateY(-24px) scale(.97, 1.04); } 79%, 100% { transform: translateY(0) scale(1, 1); } }
@keyframes bg-spark { 0%, 77% { transform: scale(0) rotate(0); opacity: 0; } 83% { transform: scale(1.2) rotate(45deg); opacity: 1; } 92%, 100% { transform: scale(0) rotate(90deg); opacity: 0; } }

/* 10 - The controlled blast: 3, 2, 1 while the fuse burns, "BOUM!", the dust clears on the whole logo */
.boot-blast .boot-stage { animation: bb-shake 2.8s forwards, boot-breathe 1.6s ease-in-out 3s infinite; }
.boot-blast .bb-fuse { stroke: var(--logo-ink); stroke-dasharray: 1000 1000; animation: bb-fuse 2.8s forwards; }
.boot-blast .bb-spark { animation: bb-spark 2.8s forwards; }
.boot-blast .bb-glow { transform-origin: 50% 50%; animation: bb-glow .18s steps(2, end) 8; }
.boot-blast .bb-dust { fill: var(--boot-dust); transform-origin: 50% 50%; opacity: 0; animation: bb-dust 2.8s forwards; }
.boot-blast .bb-t { opacity: 0; animation: bb-t 2.8s forwards; }
.boot-blast .bb-tnt { animation: bb-tnt 2.8s forwards; }
.boot-blast .bb-count { position: absolute; left: 105px; top: 25px; width: 89px; height: 56px; color: var(--logo-ink); font-size: 2.1rem; font-weight: 800; }
.boot-blast .bb-count span { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; opacity: 0; animation: 2.8s forwards; }
/* V1.44: one class more, as for the drill's depths (the countdown never showed since V1.11) */
.boot-blast .bb-count .bb-c3 { animation-name: bb-c3; } .boot-blast .bb-count .bb-c2 { animation-name: bb-c2; } .boot-blast .bb-count .bb-c1 { animation-name: bb-c1; }
.boot-blast .bb-boom { position: absolute; left: 71px; top: 51px; width: 158px; text-align: center; color: #8f1f1f; font-size: 1.6rem; font-weight: 900; letter-spacing: 1px; opacity: 0; animation: bb-boom 2.8s forwards; }
:root[data-theme="dark"] .boot-blast .bb-boom { color: #f29494; }
@keyframes bb-shake { 0%, 46% { transform: translate(0, 0); } 47% { transform: translate(-5px, 2px); } 48% { transform: translate(5px, -2px); } 49% { transform: translate(-4px, 1px); } 50% { transform: translate(3px, 0); } 52%, 100% { transform: translate(0, 0); } }
@keyframes bb-fuse { 0%, 3% { stroke-dashoffset: 0; opacity: 1; animation-timing-function: linear; } 45% { stroke-dashoffset: -1000; opacity: 1; } 46%, 100% { stroke-dashoffset: -1000; opacity: 0; } }
@keyframes bb-spark { 0%, 3% { transform: translateX(0); opacity: 1; animation-timing-function: linear; } 45% { transform: translateX(349px); opacity: 1; } 46%, 100% { transform: translateX(349px); opacity: 0; } }
@keyframes bb-glow { to { transform: scale(1.5); } }
@keyframes bb-dust { 0%, 45% { transform: scale(0); opacity: 0; } 49% { transform: scale(1); opacity: .95; } 60% { transform: scale(1.25); opacity: .9; } 75%, 100% { transform: scale(1.5); opacity: 0; } }
@keyframes bb-t { 0%, 55% { opacity: 0; } 58%, 100% { opacity: 1; } }
@keyframes bb-tnt { 0%, 46% { opacity: 1; } 47%, 100% { opacity: 0; } }
@keyframes bb-c3 { 0%, 3% { opacity: 0; transform: scale(1.6); } 6%, 16% { opacity: 1; transform: scale(1); } 17%, 100% { opacity: 0; transform: scale(.6); } }
@keyframes bb-c2 { 0%, 17% { opacity: 0; transform: scale(1.6); } 20%, 30% { opacity: 1; transform: scale(1); } 31%, 100% { opacity: 0; transform: scale(.6); } }
@keyframes bb-c1 { 0%, 31% { opacity: 0; transform: scale(1.6); } 34%, 44% { opacity: 1; transform: scale(1); } 45%, 100% { opacity: 0; transform: scale(.6); } }
@keyframes bb-boom { 0%, 45% { opacity: 0; transform: scale(.4) rotate(-6deg); } 49% { opacity: 1; transform: scale(1.25) rotate(3deg); } 54%, 62% { opacity: 1; transform: scale(1) rotate(0); } 70%, 100% { opacity: 0; transform: scale(1.1); } }

/* ---- V1.44: the six of the mockups of 2026-11-02 (Source\Docs\Loading animations), played once instead of their loop ---- */

/* V1.44 1 - The belt scale: the T rides the conveyor over the belt scale (0.00 t... 1 T), hops off and grows into the frame */
.boot-belt .bs-t { transform-origin: 50% 100%; animation: bs-t 2.8s forwards; }
.boot-belt .bs-rocks { animation: bs-move 2.8s forwards; }
.boot-belt .bs-tread { stroke: var(--boot-tread); animation: bs-tread 2.8s forwards; }
.boot-belt .bs-spin { transform-origin: 50% 50%; animation: bs-spin 2.8s forwards; }
.boot-belt .bs-line { animation: bs-line 2.8s forwards; }
.boot-belt .bs-post, .boot-belt .bs-roller { fill: var(--boot-rail); } .boot-belt .bs-belt { fill: var(--boot-belt); }
.boot-belt .bs-lcd { position: absolute; left: 214px; top: 8px; width: 80px; height: 26px; border-radius: 6px; background: #2E2E2E; box-shadow: inset 0 0 0 2px #8d7f56;
  color: #8fe3a0; font: 700 0.8rem Consolas, "Courier New", monospace; animation: bs-lcd 2.8s forwards; }
.boot-belt .bs-lcd span { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; opacity: 0; animation: 2.8s forwards; }
.boot-belt .bs-lcd .bs-w0 { animation-name: bs-w0; } .boot-belt .bs-lcd .bs-w1 { animation-name: bs-w1; }
.boot-belt .bs-lcd .bs-w2 { animation-name: bs-w2; } .boot-belt .bs-lcd .bs-w3 { animation-name: bs-w3; color: #E0BF3F; }
@keyframes bs-t {
  0% { transform: translateX(-1050px) scale(.5); animation-timing-function: linear; } 54% { transform: translateX(0) scale(.5); }
  58% { transform: translateX(0) scale(.55, .43); animation-timing-function: cubic-bezier(.2,.8,.3,1); } 66% { transform: translate(0, -80px) scale(.96, 1.08); }
  72% { transform: translate(0, 0) scale(1.06, .9); } 77%, 100% { transform: translate(0, 0) scale(1); } }
@keyframes bs-move { 0% { transform: translateX(-1050px); animation-timing-function: linear; } 54%, 100% { transform: translateX(0); } }
@keyframes bs-tread { 0% { stroke-dashoffset: 0; animation-timing-function: linear; } 54%, 100% { stroke-dashoffset: -1050; } }
@keyframes bs-spin { 0% { transform: rotate(0); animation-timing-function: linear; } 54%, 100% { transform: rotate(2314deg); } }
@keyframes bs-line { 0%, 80% { opacity: 1; } 92%, 100% { opacity: 0; } }
@keyframes bs-lcd { 0%, 84% { opacity: 1; } 94%, 100% { opacity: 0; } }
@keyframes bs-w0 { 0%, 41% { opacity: 1; } 42%, 100% { opacity: 0; } }
@keyframes bs-w1 { 0%, 41% { opacity: 0; } 42%, 47% { opacity: 1; } 48%, 100% { opacity: 0; } }
@keyframes bs-w2 { 0%, 47% { opacity: 0; } 48%, 53% { opacity: 1; } 54%, 100% { opacity: 0; } }
@keyframes bs-w3 { 0%, 53% { opacity: 0; transform: scale(1); } 57% { opacity: 1; transform: scale(1.35); } 62%, 100% { opacity: 1; transform: scale(1); } }

/* V1.44 2 - The PI trend: a noisy trend draws itself, compression keeps only the archived points (the T's corners), the
   frame follows */
.boot-trend .bp-grid line { stroke: var(--boot-grid); stroke-width: 4; }
.boot-trend .bp-frame { fill: none; stroke: var(--boot-rail); stroke-width: 6; }
.boot-trend .bp-tag { fill: var(--accent); font: 700 54px "Segoe UI", Arial, sans-serif; letter-spacing: 2px; }
.boot-trend .bp-axis { fill: var(--boot-rail); font: 600 44px "Segoe UI", Arial, sans-serif; }
.boot-trend .bp-grid { animation: bp-grid 2.8s forwards; }
.boot-trend .bp-noise { fill: none; stroke: var(--boot-trend); stroke-width: 9; stroke-linejoin: round; stroke-dasharray: 1000 1000; animation: bp-noise 2.8s forwards; }
.boot-trend .bp-out { fill: none; stroke: var(--logo-ink); stroke-width: 12; stroke-linejoin: round; stroke-dasharray: 1000 1000; animation: bp-out 2.8s forwards; }
.boot-trend .bp-dots circle { fill: #E0BF3F; stroke: var(--logo-ink); stroke-width: 6; transform-origin: 50% 50%; animation: bp-dot 2.8s both; }
.boot-trend .bp-fill { animation: bp-fill 2.8s forwards; }
.boot-trend .bp-arch { transform-origin: 50% 100%; animation: bp-arch 2.8s forwards; }
.boot-trend .boot-bubble { left: auto; right: 6px; border-radius: 12px 12px 2px 12px; animation: bp-chip 2.8s forwards; }
@keyframes bp-grid { 0%, 76% { opacity: 1; } 88%, 100% { opacity: 0; } }
@keyframes bp-noise { 0% { stroke-dashoffset: 1000; opacity: 1; animation-timing-function: linear; } 40%, 47% { stroke-dashoffset: 0; opacity: 1; }
  58%, 76% { stroke-dashoffset: 0; opacity: .14; } 86%, 100% { stroke-dashoffset: 0; opacity: 0; } }
@keyframes bp-out { 0%, 46% { stroke-dashoffset: 1000; opacity: 1; animation-timing-function: ease-in-out; } 64%, 72% { stroke-dashoffset: 0; opacity: 1; } 78%, 100% { stroke-dashoffset: 0; opacity: 0; } }
@keyframes bp-dot { 0%, 46% { transform: scale(0); } 51% { transform: scale(1.5); } 55%, 70% { transform: scale(1); } 78%, 100% { transform: scale(0); } }
@keyframes bp-fill { 0%, 62% { opacity: 0; } 72%, 100% { opacity: 1; } }
@keyframes bp-arch { 0%, 64% { opacity: 0; transform: translateY(-70px); } 74% { opacity: 1; transform: translateY(10px); } 78%, 100% { opacity: 1; transform: translateY(0); } }
@keyframes bp-chip { 0%, 41% { opacity: 0; transform: scale(.5); } 45% { opacity: 1; transform: scale(1.15); } 49%, 74% { opacity: 1; transform: scale(1); } 82%, 100% { opacity: 0; transform: scale(1); } }

/* V1.44 3 - The haul truck: it backs in beeping, raises its box, the T flips out into the frame, the truck drives off */
.boot-truck .bt-truck { animation: bt-truck 3s forwards; }
.boot-truck .bt-wheel { transform-origin: 50% 50%; animation: bt-wheel 3s forwards; }
.boot-truck .bt-box { transform-origin: 0% 100%; animation: bt-box 3s forwards; }
.boot-truck .bt-t { transform-origin: 50% 50%; animation: bt-t 3s forwards; }
.boot-truck .bt-beacon { animation: bt-blink .4s steps(1) 7; }
.boot-truck .bt-ground { fill: var(--boot-rail); animation: bt-ground 3s forwards; }
.boot-truck .bt-hub { fill: var(--boot-rail); }
.boot-truck .boot-bubble { background: #F08C1A; animation: bt-beep 3s forwards; }
@keyframes bt-truck { 0% { transform: translateX(1300px); animation-timing-function: cubic-bezier(.25,.6,.35,1); }
  40%, 80% { transform: translateX(0); animation-timing-function: ease-in; } 96%, 100% { transform: translateX(1400px); } }
@keyframes bt-wheel { 0% { transform: rotate(0); animation-timing-function: cubic-bezier(.25,.6,.35,1); }
  40%, 80% { transform: rotate(-1060deg); animation-timing-function: ease-in; } 96%, 100% { transform: rotate(85deg); } }
@keyframes bt-box { 0%, 43% { transform: rotate(0); animation-timing-function: ease-in-out; } 54%, 64% { transform: rotate(-38deg); animation-timing-function: ease-in-out; } 74%, 100% { transform: rotate(0); } }
@keyframes bt-t {
  0% { transform: translate(1791px, 250px) scale(.5); animation-timing-function: cubic-bezier(.25,.6,.35,1); } 40%, 45% { transform: translate(491px, 250px) scale(.5); }
  53% { transform: translate(400px, 120px) scale(.5) rotate(-38deg); animation-timing-function: ease-out; }
  62% { transform: translate(190px, -170px) scale(.78) rotate(-200deg); animation-timing-function: ease-in; }
  70% { transform: translate(0, 0) scale(1) rotate(-360deg); } 73% { transform: translate(0, 10px) scale(1.06, .9) rotate(-360deg); }
  77%, 100% { transform: translate(0, 0) scale(1) rotate(-360deg); } }
@keyframes bt-blink { 0% { opacity: 1; } 50% { opacity: .2; } 100% { opacity: 1; } }
@keyframes bt-ground { 0%, 84% { opacity: 1; } 96%, 100% { opacity: 0; } }
@keyframes bt-beep { 0%, 6% { opacity: 0; transform: scale(.6); } 8%, 14% { opacity: 1; transform: scale(1); } 16%, 20% { opacity: 0; transform: scale(.6); }
  22%, 28% { opacity: 1; transform: scale(1); } 30%, 34% { opacity: 0; transform: scale(.6); } 36%, 41% { opacity: 1; transform: scale(1); } 43%, 100% { opacity: 0; transform: scale(1); } }

/* V1.44 4 - The flotation cell: bubbles rise, the froth fills with gold, the T floats up out of the slurry into the frame */
.boot-flotation .bf-inside { fill: var(--boot-tank); }
.boot-flotation .bf-slurry { fill: var(--boot-slurry); transform-origin: 50% 100%; animation: bf-drain 3s forwards; }
.boot-flotation .bf-over { fill: var(--boot-slurry-2); }
.boot-flotation .bf-wall { fill: none; stroke: #7d8790; stroke-width: 22; stroke-linejoin: round; }
.boot-flotation .bf-tank { animation: bf-tank 3s forwards; }
.boot-flotation .bf-bubbles { animation: bf-bubbles 3s forwards; }
.boot-flotation .bf-bubbles circle { fill: #ffffff; stroke: #8f9995; stroke-width: 4; animation: bf-rise .84s linear 4 forwards; }
.boot-flotation .bf-t { transform-origin: 50% 50%; animation: bf-t 3s forwards; }
.boot-flotation .bf-stick { fill: #ffffff; stroke: #8f9995; stroke-width: 4; transform-origin: 50% 50%; animation: bf-pop 3s forwards; }
.boot-flotation .bf-froth { transform-origin: 50% 100%; animation: bf-froth 3s forwards; }
.boot-flotation .bf-froth circle { fill: #f6f3ea; stroke: #cdc5ae; stroke-width: 4; }
.boot-flotation .bf-froth .bf-gold { fill: #E0BF3F; stroke: none; }
.boot-flotation .boot-bubble { animation: bf-blop 3s forwards; }
@keyframes bf-rise { 0% { transform: translateY(0); opacity: 0; } 15%, 85% { opacity: .95; } 100% { transform: translateY(-470px); opacity: 0; } }
@keyframes bf-bubbles { 0%, 70% { opacity: 1; } 78%, 100% { opacity: 0; } }
@keyframes bf-t { 0%, 12% { transform: translateY(480px) rotate(0); animation-timing-function: ease-in-out; }
  28% { transform: translateY(330px) rotate(-3deg); } 44% { transform: translateY(170px) rotate(3deg); animation-timing-function: cubic-bezier(.3,.7,.4,1); }
  60% { transform: translateY(-36px) rotate(-1deg); } 66% { transform: translateY(8px) rotate(0); } 70%, 100% { transform: translateY(0) rotate(0); } }
@keyframes bf-pop { 0%, 62% { opacity: 1; transform: scale(1); } 67%, 100% { opacity: 0; transform: scale(1.6); } }
@keyframes bf-drain { 0%, 72% { transform: scaleY(1); animation-timing-function: ease-in; } 86%, 100% { transform: scaleY(0); } }
@keyframes bf-froth { 0% { transform: scale(1, .35); opacity: 1; } 30% { transform: scale(1, .8); } 45% { transform: scale(1, .7); } 60% { transform: scale(1, 1.05); }
  72% { transform: scale(1, 1); opacity: 1; } 82%, 100% { transform: scale(1, 1); opacity: 0; } }
@keyframes bf-tank { 0%, 82% { opacity: 1; } 94%, 100% { opacity: 0; } }
@keyframes bf-blop { 0%, 60% { opacity: 0; transform: scale(.5) rotate(-8deg); } 64% { opacity: 1; transform: scale(1.2) rotate(4deg); } 68%, 82% { opacity: 1; transform: scale(1) rotate(0); } 90%, 100% { opacity: 0; transform: scale(1); } }

/* V1.44 5 - The control room: an ISA-101 grey screen, TTECH.LOGO LOW-LOW; the cursor clicks ACK, the T drops in, the screen
   leaves the logo (the screen is dark grey on the dark theme, so that the light T reads on it) */
.boot-control .ba-bezel { fill: var(--boot-bezel); } .boot-control .ba-screen { fill: var(--boot-screen); }
.boot-control .ba-txt { fill: #ffffff; font: 800 44px "Segoe UI", Arial, sans-serif; } .boot-control .ba-dark { fill: #2E2E2E; }
.boot-control .ba-mon { animation: ba-mon 2.8s forwards; }
.boot-control .ba-alarm { animation: ba-alarm 2.8s forwards; }
.boot-control .ba-ok { animation: ba-ok 2.8s forwards; }
.boot-control .ba-ack { transform-origin: 50% 50%; animation: ba-ack 2.8s forwards; }
.boot-control .ba-ghost path { fill: none; stroke: #c0392b; stroke-width: 9; stroke-dasharray: 26 18; }
.boot-control .ba-ghost { animation: ba-ghost 2.8s forwards; }
.boot-control .ba-t { transform-origin: 50% 100%; animation: ba-t 2.8s forwards; }
.boot-control .ba-cursor { transform-origin: 0 0; animation: ba-cursor 2.8s forwards; }
@keyframes ba-mon { 0%, 76% { opacity: 1; } 90%, 100% { opacity: 0; } }
@keyframes ba-alarm { 0% { opacity: 1; } 8% { opacity: .5; } 16% { opacity: 1; } 24% { opacity: .5; } 32% { opacity: 1; } 40% { opacity: .5; } 43%, 100% { opacity: 0; } }
@keyframes ba-ok { 0%, 42% { opacity: 0; } 46%, 100% { opacity: 1; } }
@keyframes ba-ack { 0%, 39% { transform: scale(1); } 42% { transform: scale(.9); } 46%, 100% { transform: scale(1); } }
@keyframes ba-ghost { 0% { opacity: 1; } 10% { opacity: .3; } 20% { opacity: 1; } 30% { opacity: .3; } 40% { opacity: 1; } 46%, 100% { opacity: 0; } }
@keyframes ba-t { 0%, 46% { opacity: 0; transform: translateY(-90px) scale(1.1); animation-timing-function: cubic-bezier(.55,0,1,.45); }
  55% { opacity: 1; transform: translateY(0) scale(1); } 59% { transform: translateY(0) scale(1.05, .9); } 63%, 100% { opacity: 1; transform: translateY(0) scale(1); } }
@keyframes ba-cursor { 0%, 8% { transform: translate(1260px, 1110px); opacity: 1; animation-timing-function: cubic-bezier(.3,.6,.3,1); }
  36% { transform: translate(870px, 912px) scale(1); } 40% { transform: translate(870px, 912px) scale(.82); } 44% { transform: translate(870px, 912px) scale(1); }
  56% { transform: translate(870px, 912px); opacity: 1; animation-timing-function: ease-in; } 70%, 100% { transform: translate(1300px, 640px); opacity: 0; } }

/* V1.44 6 - The rock breaker: three knocks on a boulder, it cracks, splits in two like a geode, and the T is inside */
.boot-breaker .br-breaker { animation: br-breaker 2.8s forwards; }
.boot-breaker .br-rock { animation: br-shake 2.8s forwards; }
.boot-breaker .br-c { fill: none; stroke: #3f3b35; stroke-width: 8; stroke-linejoin: round; stroke-linecap: round; stroke-dasharray: 100 100; }
.boot-breaker .br-c1 { animation: br-c1 2.8s forwards; } .boot-breaker .br-c2 { animation: br-c2 2.8s forwards; } .boot-breaker .br-c3 { animation: br-c3 2.8s forwards; }
.boot-breaker .br-glint { fill: none; stroke: #E0BF3F; stroke-width: 20; stroke-linejoin: round; animation: br-glint 2.8s forwards; }
.boot-breaker .br-cracks { animation: br-cracks 2.8s forwards; }
.boot-breaker .br-left { transform-origin: 0% 100%; animation: br-left 2.8s forwards; }
.boot-breaker .br-right { transform-origin: 100% 100%; animation: br-right 2.8s forwards; }
.boot-breaker .br-chips polygon { opacity: 0; animation: 2.8s forwards; }
.boot-breaker .br-chips .br-ch1 { animation-name: br-ch1; } .boot-breaker .br-chips .br-ch2 { animation-name: br-ch2; } .boot-breaker .br-chips .br-ch3 { animation-name: br-ch3; }
.boot-breaker .br-s { transform-origin: 50% 50%; opacity: 0; animation: br-star 2.8s forwards; }
.boot-breaker .boot-bubble { left: 166px; top: 10px; border-radius: 12px 12px 2px 12px; background: #F08C1A; animation: br-knock 2.8s forwards; }
@keyframes br-breaker { 0% { transform: translate(760px, -380px); } 14%, 20% { transform: translate(0, -90px); animation-timing-function: ease-in; }
  23% { transform: translate(0, 0); } 27%, 33% { transform: translate(0, -90px); animation-timing-function: ease-in; } 36% { transform: translate(0, 0); }
  40%, 46% { transform: translate(0, -90px); animation-timing-function: ease-in; } 49% { transform: translate(0, 0); } 54% { transform: translate(0, -100px); animation-timing-function: ease-in; }
  68%, 100% { transform: translate(760px, -420px); } }
@keyframes br-shake { 0%, 22% { transform: translate(0, 0); } 23% { transform: translate(-6px, 3px); } 24% { transform: translate(6px, -2px); } 25%, 35% { transform: translate(0, 0); }
  36% { transform: translate(-8px, 3px); } 37% { transform: translate(8px, -2px); } 38%, 48% { transform: translate(0, 0); } 49% { transform: translate(-10px, 4px); } 50% { transform: translate(10px, -3px); } 51%, 100% { transform: translate(0, 0); } }
@keyframes br-c1 { 0%, 23% { stroke-dashoffset: 100; } 26%, 100% { stroke-dashoffset: 0; } }
@keyframes br-c2 { 0%, 36% { stroke-dashoffset: 100; } 39%, 100% { stroke-dashoffset: 0; } }
@keyframes br-c3 { 0%, 49% { stroke-dashoffset: 100; } 51%, 100% { stroke-dashoffset: 0; } }
@keyframes br-glint { 0%, 50% { opacity: 0; } 53%, 100% { opacity: 1; } }
@keyframes br-cracks { 0%, 55% { opacity: 1; } 59%, 100% { opacity: 0; } }
@keyframes br-left { 0%, 55% { transform: translate(0, 0) rotate(0); opacity: 1; animation-timing-function: ease-in; } 62% { transform: translate(-200px, 100px) rotate(-18deg); opacity: 1; }
  68%, 100% { transform: translate(-330px, 180px) rotate(-30deg); opacity: 0; } }
@keyframes br-right { 0%, 55% { transform: translate(0, 0) rotate(0); opacity: 1; animation-timing-function: ease-in; } 62% { transform: translate(200px, 100px) rotate(18deg); opacity: 1; }
  68%, 100% { transform: translate(330px, 180px) rotate(30deg); opacity: 0; } }
@keyframes br-ch1 { 0%, 49% { opacity: 0; transform: translate(0, 0) rotate(0); } 50% { opacity: 1; } 60%, 100% { opacity: 0; transform: translate(-190px, -110px) rotate(-120deg); } }
@keyframes br-ch2 { 0%, 49% { opacity: 0; transform: translate(0, 0) rotate(0); } 50% { opacity: 1; } 60%, 100% { opacity: 0; transform: translate(150px, -150px) rotate(140deg); } }
@keyframes br-ch3 { 0%, 49% { opacity: 0; transform: translate(0, 0) rotate(0); } 50% { opacity: 1; } 60%, 100% { opacity: 0; transform: translate(260px, -40px) rotate(90deg); } }
@keyframes br-star { 0%, 60% { transform: scale(0) rotate(0); opacity: 0; } 66% { transform: scale(1.25) rotate(45deg); opacity: 1; } 72% { transform: scale(1) rotate(70deg); opacity: 1; } 80%, 100% { transform: scale(0) rotate(90deg); opacity: 0; } }
@keyframes br-knock { 0%, 22% { opacity: 0; transform: scale(.5); } 24% { opacity: 1; transform: scale(1.15); } 29%, 35% { opacity: 0; transform: scale(.8); }
  37% { opacity: 1; transform: scale(1.2); } 42%, 48% { opacity: 0; transform: scale(.8); } 50% { opacity: 1; transform: scale(1.35); } 56%, 100% { opacity: 0; transform: scale(1); } }

/* ---- Design system 1.0 (Source\Docs\Design system\Design system.md 6.4): scenes 13 to 18 and the pour. Played once,
   each ends on the whole logo; colours from the --boot- tokens of tokens.css section 7 (light and dark). ---- */
.boot-scene.bl-svg *, .boot-scene.tb-svg .tb-tag, .boot-scene.tb-svg .tb-tt, .boot-scene.tb-svg .tb-glove, .boot-mill .bm-lift, .boot-mill .bm-lift * { transform-box: view-box; }

/* 13 - The cap lamp (Refined's implementation): the pool of light sweeps the drift, swings back to the T, "Click!", lights on */
.boot-lamp .bl-night { fill: var(--boot-night); animation: bl-night 2.8s linear forwards; }
.boot-lamp .bl-rocks path { fill: var(--boot-rock); }
.boot-lamp .bl-rocks path:first-child { fill: var(--boot-rock-2); opacity: .55; }
.boot-lamp .bl-dim { opacity: .16; }
.boot-lamp .bl-rocks { animation: bl-rocks 2.8s linear forwards; }
.boot-lamp .bl-pool { animation: bl-beam 2.8s linear forwards; }
.boot-lamp .bl-beam { animation: bl-beam-g 2.8s linear forwards; }
.boot-lamp .bl-glow-a { stop-color: var(--boot-beam); stop-opacity: .9; }
.boot-lamp .bl-glow-b { stop-color: var(--boot-beam); stop-opacity: 0; }
.boot-lamp .bl-mote { fill: var(--boot-beam); opacity: 0; transform-box: fill-box; animation: bl-mote 2.8s linear forwards; }
.boot-lamp .boot-bubble { transform-origin: 0 100%; animation: bl-bubble 2.8s forwards; }
@keyframes bl-night { 0%, 62% { opacity: 1; } 76%, 100% { opacity: 0; } }
@keyframes bl-rocks { 0%, 66% { opacity: 1; } 82%, 100% { opacity: 0; } }
@keyframes bl-beam {
  0% { cx: -420px; cy: 640px; r: 300px; animation-timing-function: cubic-bezier(.45,0,.55,1); } 6% { cx: -420px; cy: 640px; }
  22% { cx: 250px; cy: 560px; } 34% { cx: 820px; cy: 720px; } 44% { cx: 1180px; cy: 600px; animation-timing-function: cubic-bezier(.34,1.4,.64,1); }
  56% { cx: 500px; cy: 500px; r: 300px; animation-timing-function: cubic-bezier(.4,0,.2,1); } 62% { cx: 500px; cy: 500px; r: 330px; }
  76%, 100% { cx: 500px; cy: 500px; r: 1500px; } }
@keyframes bl-beam-g {
  0% { cx: -420px; cy: 640px; opacity: .4; animation-timing-function: cubic-bezier(.45,0,.55,1); } 6% { cx: -420px; cy: 640px; }
  22% { cx: 250px; cy: 560px; } 34% { cx: 820px; cy: 720px; } 44% { cx: 1180px; cy: 600px; animation-timing-function: cubic-bezier(.34,1.4,.64,1); }
  56% { cx: 500px; cy: 500px; opacity: .4; } 64% { opacity: .5; } 76%, 100% { cx: 500px; cy: 500px; opacity: 0; } }
@keyframes bl-bubble { 0%, 60% { opacity: 0; transform: scale(.4); } 64% { opacity: 1; transform: scale(1.08); } 67% { transform: scale(1); } 86% { opacity: 1; } 92%, 100% { opacity: 0; } }
@keyframes bl-mote { 0%, 62% { opacity: 0; transform: translateY(0); } 70% { opacity: .7; } 86% { opacity: 0; transform: translateY(-120px); } 100% { opacity: 0; } }

/* 14 - The canary (Lode's scene) */
.boot-canary .cn-frame { fill: #E0BF3F; }
.boot-canary .cn-bars line { stroke: var(--boot-rail); stroke-width: 2.2; stroke-linecap: round; }
.boot-canary .cn-hook { fill: none; stroke: var(--boot-rail); stroke-width: 2.4; stroke-linecap: round; }
.boot-canary .cn-floor { stroke: var(--boot-rail); stroke-width: 3; stroke-linecap: round; }
.boot-canary .cn-swing line { stroke: var(--boot-rail); stroke-width: 1.4; }
.boot-canary .cn-swing .perch { stroke: #8A6A3A; stroke-width: 3; stroke-linecap: round; }
.boot-canary .cn-body { fill: var(--boot-bird); } .boot-canary .cn-wing { fill: var(--boot-wing); } .boot-canary .cn-beak { fill: var(--boot-beak); }
.boot-canary .cn-eye { fill: #2E2E2E; }
.boot-canary .cn-legs { stroke: var(--boot-beak); stroke-width: 1.4; stroke-linecap: round; }
.boot-canary .cn-note { fill: var(--os-logo-ink); stroke: var(--os-logo-ink); stroke-width: 1.3; opacity: 0; }
/* the note heads keep their rotate(-20 cx cy) attribute about their own centre: the view box, not the fill box */
.boot-canary .cn-note ellipse { transform-box: view-box; }
.boot-canary .cn-ground { fill: var(--boot-ground); animation: cn-cage 2.8s forwards; }
.boot-canary .cn-spark { fill: #E0BF3F; opacity: 0; }
.boot-canary .cn-bars, .boot-canary .cn-hook, .boot-canary .cn-floor { animation: cn-cage 2.8s var(--os-ease-standard) forwards; }
.boot-canary .cn-swing { transform-origin: 50% 0%; animation: cn-swing 2.8s ease-in-out forwards; }
.boot-canary .cn-bird { animation: cn-bird 2.8s var(--os-ease-standard) forwards; }
.boot-canary .cn-head { transform-origin: 30% 70%; animation: cn-head 2.8s ease-in-out forwards; }
.boot-canary .cn-wing { transform-origin: 20% 30%; animation: cn-flap 2.8s linear forwards; }
.boot-canary .cn-chest { transform-origin: 50% 50%; animation: cn-puff 2.8s ease-in-out forwards; }
.boot-canary .boot-bubble { transform-origin: 0 100%; animation: cn-bubble 2.8s var(--os-ease-spring) forwards; }
.boot-canary .cn-n1 { animation: cn-note 2.8s ease-out forwards; } .boot-canary .cn-n2 { animation: cn-note2 2.8s ease-out forwards; }
.boot-canary .cn-n3 { animation: cn-note3 2.8s ease-out forwards; }
.boot-canary .cn-ttop { transform-origin: 50% 50%; animation: cn-ttop 2.8s var(--os-ease-spring) forwards; }
.boot-canary .cn-tbase { animation: cn-tbase 2.8s var(--os-ease-spring) forwards; }
.boot-canary .cn-spark { transform-origin: 50% 50%; animation: cn-spark 2.8s ease-out forwards; }
@keyframes cn-cage { 0% { opacity: 0; } 8%, 55% { opacity: 1; } 63%, 100% { opacity: 0; } }
@keyframes cn-swing { 0% { transform: rotate(0); opacity: 1; } 6% { transform: rotate(8deg); } 13% { transform: rotate(-7deg); } 20% { transform: rotate(5deg); }
  27% { transform: rotate(-3deg); } 34% { transform: rotate(2deg); } 40% { transform: rotate(0); opacity: 1; } 46%, 100% { opacity: 0; transform: rotate(0); } }
@keyframes cn-bird {
  0% { transform: translate(0, 0) rotate(0); opacity: 1; } 6% { transform: translate(0, 0) rotate(8deg); } 13% { transform: translate(0, 0) rotate(-7deg); }
  20% { transform: translate(0, 0) rotate(5deg); } 27% { transform: translate(0, 0) rotate(-3deg); } 40% { transform: translate(0, 0) rotate(0); }
  44% { transform: translate(10px, -34px) rotate(-12deg); } 48% { transform: translate(18px, -26px) rotate(0); } 50% { transform: translate(18px, -24px) scale(1.05, .92); }
  53%, 62% { transform: translate(18px, -26px) rotate(0); opacity: 1; } 66% { transform: translate(70px, -70px) rotate(-14deg) scale(.85); opacity: 1; }
  72%, 100% { transform: translate(160px, -120px) rotate(-18deg) scale(.6); opacity: 0; } }
@keyframes cn-head { 0%, 8% { transform: rotate(0); } 12% { transform: rotate(-14deg); } 17% { transform: rotate(12deg); } 22%, 100% { transform: rotate(0); } }
@keyframes cn-puff { 0%, 22% { transform: scale(1); } 26% { transform: scale(1.12); } 32%, 100% { transform: scale(1); } }
@keyframes cn-flap { 0%, 40% { transform: scaleY(1); } 42% { transform: scaleY(.3); } 44% { transform: scaleY(1); } 46% { transform: scaleY(.3); } 48%, 62% { transform: scaleY(1); }
  64% { transform: scaleY(.3); } 66% { transform: scaleY(1); } 68% { transform: scaleY(.3); } 70%, 100% { transform: scaleY(1); } }
@keyframes cn-bubble { 0%, 27% { opacity: 0; transform: scale(.5); } 31%, 40% { opacity: 1; transform: scale(1); } 44%, 100% { opacity: 0; transform: scale(.9); } }
@keyframes cn-note { 0%, 27% { opacity: 0; transform: translate(0, 0); } 30% { opacity: 1; } 42%, 100% { opacity: 0; transform: translate(-8px, -36px); } }
@keyframes cn-note2 { 0%, 30% { opacity: 0; transform: translate(0, 0); } 33% { opacity: 1; } 45%, 100% { opacity: 0; transform: translate(6px, -40px); } }
@keyframes cn-note3 { 0%, 33% { opacity: 0; transform: translate(0, 0); } 36% { opacity: 1; } 48%, 100% { opacity: 0; transform: translate(-2px, -44px); } }
@keyframes cn-ttop { 0%, 38% { transform: translate(0, 166px) scaleY(.6); opacity: 0; } 40% { opacity: 1; transform: translate(0, 166px) scaleY(.6); }
  46% { transform: translate(0, -25px) scaleY(1.05); } 49%, 100% { transform: translate(0, 0) scaleY(1); opacity: 1; } }
@keyframes cn-tbase { 0%, 44% { transform: translate(0, 431px); opacity: 0; } 45% { opacity: 1; } 51% { transform: translate(0, -25px); } 54%, 100% { transform: translate(0, 0); opacity: 1; } }
@keyframes cn-spark { 0%, 66% { opacity: 0; transform: scale(.2) rotate(0); } 72% { opacity: 1; transform: scale(1) rotate(45deg); } 82%, 100% { opacity: 0; transform: scale(.4) rotate(90deg); } }

/* 15 - The core tray: the gold interval of the core becomes the frame, "Eureka!" */
.boot-core .ct-tray { fill: var(--boot-wood); stroke: var(--boot-wood-line); stroke-width: 2; }
.boot-core .ct-slot { fill: var(--boot-wood-line); opacity: .55; }
.boot-core .ct-traygrp { animation: ct-tray 2.8s var(--os-ease-out) forwards; }
.boot-core .ct-core { fill: var(--boot-core); stroke: color-mix(in srgb, var(--boot-core) 70%, #000); stroke-width: .8; animation: ct-core 2.8s var(--os-ease-out) both; }
.boot-core .ct-core.r1 { animation-delay: .1s; } .boot-core .ct-core.r3 { animation-delay: .3s; } .boot-core .ct-core.r4 { animation-delay: .4s; }
.boot-core .ct-g { transform-origin: center; animation: ct-gold-mid 2.8s var(--os-ease-standard) both; }
.boot-core .ct-g.l { animation-name: ct-gold-left; } .boot-core .ct-g.r { animation-name: ct-gold-right; }
.boot-core .ct-assay { font: 600 7.5px/1 "Cascadia Mono", Consolas, monospace; fill: var(--os-text-3); animation: ct-assay 2.8s ease-out both; }
.boot-core .ct-assay.hi { fill: var(--os-ai-text); font-weight: 600; }
.boot-core .ct-frame { fill: #E0BF3F; animation: ct-frame 2.8s ease-out forwards; }
.boot-core .ct-t1 { animation: ct-t1 2.8s var(--os-ease-spring) forwards; } .boot-core .ct-t2 { animation: ct-t2 2.8s var(--os-ease-spring) forwards; }
.boot-core .boot-bubble { transform-origin: 0 100%; animation: ct-bub 2.8s var(--os-ease-spring) forwards; }
.boot-core .ct-spk { fill: #E0BF3F; transform-origin: center; opacity: 0; animation: ct-spk 2.8s ease-out forwards; }
@keyframes ct-tray { 0% { transform: translateX(-290px); } 9% { transform: translateX(6px); } 12%, 58% { transform: translateX(0); opacity: 1; } 70%, 100% { transform: translateY(70px); opacity: 0; } }
@keyframes ct-core { 0%, 10% { transform: translateX(240px); opacity: 0; } 11% { opacity: 1; } 20% { transform: translateX(-2px); } 22%, 50% { transform: translateX(0); opacity: 1; } 56%, 100% { opacity: .25; transform: translateX(0); } }
@keyframes ct-assay { 0%, 26% { opacity: 0; transform: translateY(3px); } 31%, 58% { opacity: 1; transform: none; } 66%, 100% { opacity: 0; } }
@keyframes ct-gold-mid { 0%, 10% { transform: translateX(240px); fill: var(--boot-core); opacity: 0; } 11% { opacity: 1; } 20% { transform: translateX(-2px); }
  22%, 40% { transform: none; fill: var(--boot-core); } 46%, 56% { transform: none; fill: #E0BF3F; } 68%, 74% { transform: translate(0, -79px) scale(1, 1.38); fill: #E0BF3F; opacity: 1; }
  80%, 100% { transform: translate(0, -79px) scale(1, 1.38); fill: #E0BF3F; opacity: 0; } }
@keyframes ct-gold-left { 0%, 10% { transform: translateX(240px); fill: var(--boot-core); opacity: 0; } 11% { opacity: 1; } 20% { transform: translateX(-2px); }
  22%, 40% { transform: none; fill: var(--boot-core); } 46%, 56% { transform: none; fill: #E0BF3F; } 68%, 74% { transform: translate(29px, -43px) rotate(90deg) scale(1.4, 1.4); fill: #E0BF3F; opacity: 1; }
  80%, 100% { transform: translate(29px, -43px) rotate(90deg) scale(1.4, 1.4); fill: #E0BF3F; opacity: 0; } }
@keyframes ct-gold-right { 0%, 10% { transform: translateX(240px); fill: var(--boot-core); opacity: 0; } 11% { opacity: 1; } 20% { transform: translateX(-2px); }
  22%, 40% { transform: none; fill: var(--boot-core); } 46%, 56% { transform: none; fill: #E0BF3F; } 68%, 74% { transform: translate(-31px, -43px) rotate(90deg) scale(1.4, 1.4); fill: #E0BF3F; opacity: 1; }
  80%, 100% { transform: translate(-31px, -43px) rotate(90deg) scale(1.4, 1.4); fill: #E0BF3F; opacity: 0; } }
@keyframes ct-frame { 0%, 72% { opacity: 0; } 78%, 100% { opacity: 1; } }
@keyframes ct-t1 { 0%, 76% { opacity: 0; transform: translateY(-60px); } 77% { opacity: 1; } 82% { transform: translateY(6px) scaleY(.94); } 85%, 100% { opacity: 1; transform: none; } }
@keyframes ct-t2 { 0%, 79% { opacity: 0; transform: translateY(70px); } 80% { opacity: 1; } 85% { transform: translateY(-5px); } 88%, 100% { opacity: 1; transform: none; } }
@keyframes ct-bub { 0%, 82% { opacity: 0; transform: scale(.5); } 86% { opacity: 1; transform: scale(1.06); } 88%, 95% { opacity: 1; transform: scale(1); } 99%, 100% { opacity: 0; } }
@keyframes ct-spk { 0%, 44% { opacity: 0; transform: scale(.2); } 48% { opacity: 1; transform: scale(1) rotate(45deg); } 54%, 100% { opacity: 0; transform: scale(.4) rotate(90deg); } }

/* 16 - The lamp-room tag board (Precision's idea): the TT tag goes OUT to IN, "IN!", the brass tags tile the logo */
.boot-tagboard .tb-board { fill: var(--boot-board); stroke: var(--boot-hook); stroke-width: 2; animation: tb-board 2.8s ease-in-out forwards; }
.boot-tagboard .tb-boardtx { font: 600 9px/1 var(--os-font-display); fill: var(--os-text-3); letter-spacing: .08em; animation: tb-board 2.8s ease-in-out forwards; }
.boot-tagboard .tb-div { stroke: var(--boot-hook); stroke-width: 1.2; stroke-dasharray: 3 3; animation: tb-board 2.8s ease-in-out forwards; }
.boot-tagboard .tb-hook { fill: var(--boot-hook); animation: tb-board 2.8s ease-in-out forwards; }
.boot-tagboard .tb-tag { animation: tb-fly 2.8s var(--os-ease-standard) both; }
.boot-tagboard .tb-sw { transform-box: fill-box; transform-origin: 50% 0%; animation: tb-swing 2.8s ease-in-out forwards; }
.boot-tagboard .tb-tag:nth-of-type(2n) .tb-sw { animation-delay: -.25s; }
.boot-tagboard .tb-plate { fill: var(--boot-brass); stroke: var(--boot-brass-rim); stroke-width: 1.2; }
.boot-tagboard .tb-hole { fill: var(--boot-board); }
.boot-tagboard .tb-num { font: 600 6.5px/1 "Cascadia Mono", Consolas, monospace; fill: #4B3F14; text-anchor: middle; }
.boot-tagboard .tb-tt { animation: tb-tt 2.8s var(--os-ease-standard) both; }
.boot-tagboard .tb-tt .tb-plate { fill: var(--os-logo-ink); stroke: var(--boot-brass-rim); }
.boot-tagboard .tb-tt .tb-num { fill: #E0BF3F; }
.boot-tagboard .tb-ttflip { transform-box: fill-box; transform-origin: 50% 50%; animation: tb-flip 2.8s linear forwards; }
.boot-tagboard .tb-glove { animation: tb-glove 2.8s var(--os-ease-standard) both; }
.boot-tagboard .tb-glove path, .boot-tagboard .tb-glove ellipse { fill: var(--boot-glove); }
.boot-tagboard .tb-glove rect { fill: color-mix(in srgb, var(--boot-glove) 70%, #000); }
.boot-tagboard .tb-frame { fill: #E0BF3F; animation: tb-frame 2.8s ease-out forwards; }
.boot-tagboard .tb-t1 { animation: ct-t1 2.8s var(--os-ease-spring) forwards; } .boot-tagboard .tb-t2 { animation: ct-t2 2.8s var(--os-ease-spring) forwards; }
.boot-tagboard .boot-bubble { transform-origin: 0 100%; animation: tb-bub 2.8s var(--os-ease-spring) forwards; }
@keyframes tb-board { 0%, 56% { opacity: 1; } 66%, 100% { opacity: 0; } }
@keyframes tb-swing { 0% { transform: rotate(0); } 8% { transform: rotate(6deg); } 16% { transform: rotate(-5deg); } 24% { transform: rotate(3deg); } 32% { transform: rotate(-2deg); } 40%, 100% { transform: rotate(0); } }
@keyframes tb-fly { 0%, 56% { transform: translate(var(--x), var(--y)); opacity: 1; } 68%, 74% { transform: translate(var(--fx), var(--fy)); opacity: 1; } 80%, 100% { transform: translate(var(--fx), var(--fy)); opacity: 0; } }
@keyframes tb-tt { 0%, 36% { transform: translate(50px, 62px); opacity: 1; } 40% { transform: translate(50px, 54px); } 50% { transform: translate(190px, 54px); } 53%, 58% { transform: translate(190px, 62px); }
  70% { transform: translate(150px, 66px) scale(1.5); opacity: 1; } 78%, 100% { transform: translate(150px, 66px) scale(2.2); opacity: 0; } }
@keyframes tb-flip { 0%, 41% { transform: scaleX(1); } 43% { transform: scaleX(-1); } 45% { transform: scaleX(1); } 47% { transform: scaleX(-1); } 49%, 100% { transform: scaleX(1); } }
@keyframes tb-glove { 0%, 28% { transform: translate(330px, 30px); } 36%, 38% { transform: translate(62px, 58px); } 40% { transform: translate(62px, 50px); } 50% { transform: translate(202px, 50px); }
  54% { transform: translate(202px, 56px); } 62%, 100% { transform: translate(330px, 20px); } }
@keyframes tb-frame { 0%, 70% { opacity: 0; } 78%, 100% { opacity: 1; } }
@keyframes tb-bub { 0%, 50% { opacity: 0; transform: scale(.5); } 53% { opacity: 1; transform: scale(1.08); } 55%, 64% { opacity: 1; transform: scale(1); } 68%, 100% { opacity: 0; } }

/* 17 - The SAG mill: it turns, the charge tumbles, the readout climbs, "Grrr!", gold fines fill the frame, the T drops in */
.boot-mill .bm-mill { animation: bm-mill 3s ease-out forwards; }
.boot-mill .bm-shell { fill: var(--boot-steel); }
.boot-mill .bm-inside { fill: var(--boot-night); }
.boot-mill .bm-lift { fill: var(--boot-steel); transform-origin: 500px 560px; animation: bm-turn 3s cubic-bezier(.45,0,.55,1) forwards; }
.boot-mill .bm-chute { fill: var(--boot-rock-2); }
.boot-mill .bm-trommel rect { fill: var(--boot-steel); } .boot-mill .bm-trommel path { stroke: var(--boot-night); stroke-width: 10; opacity: .5; }
.boot-mill .bm-r { fill: var(--boot-rock); transform-box: fill-box; transform-origin: center; animation: bm-tumble 3s ease-in-out both; }
.boot-mill .bm-b { fill: #7D8288; transform-box: fill-box; transform-origin: center; animation: bm-tumble 3s ease-in-out both; }
.boot-mill .bm-gold { fill: #E0BF3F; }
.boot-mill .bm-level { animation: bm-level 3s forwards; }
.boot-mill .bm-t { transform-origin: 50% 100%; animation: bm-t 3s forwards; }
.boot-mill .bm-lcd { position: absolute; left: 214px; top: 8px; width: 80px; height: 26px; border-radius: 6px; background: #2E2E2E; box-shadow: inset 0 0 0 2px #8d7f56;
  color: #8fe3a0; font: 600 0.8rem "Cascadia Mono", Consolas, monospace; animation: bm-lcd 3s forwards; }
.boot-mill .bm-lcd span { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; opacity: 0; animation: 3s forwards; }
.boot-mill .bm-lcd .bm-w0 { animation-name: bm-w0; } .boot-mill .bm-lcd .bm-w1 { animation-name: bm-w1; }
.boot-mill .bm-lcd .bm-w2 { animation-name: bm-w2; } .boot-mill .bm-lcd .bm-w3 { animation-name: bm-w3; color: #E0BF3F; }
.boot-mill .boot-bubble { left: 18px; top: 8px; border-radius: 12px 12px 2px 12px; transform-origin: 100% 100%; animation: bm-grrr 3s forwards; }
@keyframes bm-mill { 0% { opacity: 0; transform: scale(.94); } 13% { opacity: 1; transform: scale(1); } 70% { opacity: 1; } 82%, 100% { opacity: 0; } }
@keyframes bm-turn { 0%, 13% { transform: rotate(0); } 60% { transform: rotate(540deg); animation-timing-function: ease-out; } 75%, 100% { transform: rotate(600deg); } }
@keyframes bm-tumble { 0%, 13% { transform: translate(0, 0) rotate(0) scale(1); } 22% { transform: translate(-120px, -330px) rotate(90deg) scale(.95); }
  30% { transform: translate(90px, 20px) rotate(200deg) scale(.85); } 38% { transform: translate(-110px, -300px) rotate(290deg) scale(.75); }
  46% { transform: translate(80px, 10px) rotate(400deg) scale(.6); } 54% { transform: translate(-90px, -260px) rotate(480deg) scale(.5); }
  60%, 100% { transform: translate(40px, 0) rotate(540deg) scale(.4); } }
@keyframes bm-level { 0%, 58% { transform: translateY(800px); animation-timing-function: cubic-bezier(.4,0,.6,1); } 76%, 100% { transform: translateY(0); } }
@keyframes bm-t { 0%, 76% { transform: translateY(-860px) scale(1, 1); opacity: 0; animation-timing-function: cubic-bezier(.55,0,1,.45); } 77% { opacity: 1; }
  85% { transform: translateY(0) scale(1.04, .9); } 89%, 100% { transform: translateY(0) scale(1, 1); opacity: 1; } }
@keyframes bm-lcd { 0%, 82% { opacity: 1; } 92%, 100% { opacity: 0; } }
@keyframes bm-w0 { 0%, 14% { opacity: 1; } 15%, 100% { opacity: 0; } }
@keyframes bm-w1 { 0%, 14% { opacity: 0; } 15%, 29% { opacity: 1; } 30%, 100% { opacity: 0; } }
@keyframes bm-w2 { 0%, 29% { opacity: 0; } 30%, 44% { opacity: 1; } 45%, 100% { opacity: 0; } }
@keyframes bm-w3 { 0%, 44% { opacity: 0; } 45%, 100% { opacity: 1; } }
@keyframes bm-grrr { 0%, 55% { opacity: 0; transform: scale(.5) rotate(6deg); } 59% { opacity: 1; transform: scale(1.2) rotate(-3deg); } 62%, 72% { opacity: 1; transform: scale(1) rotate(0); } 78%, 100% { opacity: 0; } }

/* 18 - The survey: contours draw, the total station shoots each corner, the plan joins the points and fills, "Check!" */
.boot-survey .bv-c { fill: none; stroke: var(--os-accent-brand); stroke-width: 4; opacity: .3; stroke-dasharray: 1000; stroke-dashoffset: 1000; animation: bv-c 3s ease-out both; }
.boot-survey .bv-contours { animation: bv-fade 3s forwards; }
.boot-survey .bv-tripod { animation: bv-tripod 3s ease-in forwards; }
.boot-survey .bv-legs { fill: none; stroke: var(--boot-rail); stroke-width: 12; stroke-linecap: round; }
.boot-survey .bv-head { fill: #F2C230; } .boot-survey .bv-eye { fill: var(--boot-bezel); }
.boot-survey .bv-l { stroke: #E5484D; stroke-width: 3; stroke-dasharray: 6 6; opacity: 0; animation: bv-laser .5s ease-out both; }
.boot-survey .bv-p { fill: var(--boot-rail); transform-box: fill-box; transform-origin: center; animation: bv-prism 3s ease-out both; }
.boot-survey .bv-out { fill: none; stroke: #E0BF3F; stroke-width: 6; stroke-dasharray: 1000; stroke-dashoffset: 1000; animation: bv-out 3s ease-in-out both; }
.boot-survey .bv-fill { opacity: 0; animation: bv-fill 3s ease-out forwards; }
.boot-survey .bv-lcd { position: absolute; left: 200px; top: 8px; width: 94px; height: 26px; border-radius: 6px; background: #2E2E2E; box-shadow: inset 0 0 0 2px #8d7f56;
  color: #8fe3a0; font: 600 0.72rem "Cascadia Mono", Consolas, monospace; }
.boot-survey .bv-lcd span { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; gap: 3px; opacity: 0; animation: 3s forwards; white-space: nowrap; }
.boot-survey .bv-lcd svg { width: 12px; height: 12px; fill: none; stroke: #8fe3a0; stroke-width: 3; stroke-linecap: round; stroke-linejoin: round; }
.boot-survey .bv-lcd .bv-d0 { animation-name: bv-d0; } .boot-survey .bv-lcd .bv-d1 { animation-name: bv-d1; } .boot-survey .bv-lcd .bv-d2 { animation-name: bv-d2; }
.boot-survey .bv-lcd .bv-d3 { animation-name: bv-d3; } .boot-survey .bv-lcd .bv-d4 { animation-name: bv-d4; color: #E0BF3F; }
.boot-survey .boot-bubble { left: 18px; top: 8px; border-radius: 12px 12px 2px 12px; transform-origin: 100% 100%; animation: bv-bub 3s forwards; }
@keyframes bv-c { 0% { stroke-dashoffset: 1000; } 20%, 100% { stroke-dashoffset: 0; } }
@keyframes bv-fade { 0%, 80% { opacity: 1; } 94%, 100% { opacity: 0; } }
@keyframes bv-tripod { 0%, 80% { transform: translateX(0); opacity: 1; } 94%, 100% { transform: translateX(-320px); opacity: 0; } }
@keyframes bv-laser { 0% { opacity: 0; } 20% { opacity: 1; } 70% { opacity: 1; } 100% { opacity: 0; } }
@keyframes bv-prism { 0%, 18% { opacity: 1; fill: var(--boot-rail); transform: scale(1); } 24% { fill: #E0BF3F; transform: scale(1.4); } 30%, 72% { fill: #E0BF3F; transform: scale(1); opacity: 1; } 80%, 100% { opacity: 0; } }
@keyframes bv-out { 0%, 60% { stroke-dashoffset: 1000; opacity: 1; } 78% { stroke-dashoffset: 0; opacity: 1; } 86%, 100% { stroke-dashoffset: 0; opacity: 0; } }
@keyframes bv-fill { 0%, 72% { opacity: 0; } 84%, 100% { opacity: 1; } }
@keyframes bv-d0 { 0%, 20% { opacity: 0; } 21%, 30% { opacity: 1; } 31%, 100% { opacity: 0; } }
@keyframes bv-d1 { 0%, 30% { opacity: 0; } 31%, 40% { opacity: 1; } 41%, 100% { opacity: 0; } }
@keyframes bv-d2 { 0%, 40% { opacity: 0; } 41%, 50% { opacity: 1; } 51%, 100% { opacity: 0; } }
@keyframes bv-d3 { 0%, 50% { opacity: 0; } 51%, 79% { opacity: 1; } 80%, 100% { opacity: 0; } }
@keyframes bv-d4 { 0%, 80% { opacity: 0; } 82%, 100% { opacity: 1; } }
@keyframes bv-bub { 0%, 72% { opacity: 0; transform: scale(.5); } 76% { opacity: 1; transform: scale(1.1); } 79%, 88% { opacity: 1; transform: scale(1); } 94%, 100% { opacity: 0; } }

/* The pour (celebrations only, 1.2 s): gold rises in the dashed mould, the T drops in with a squash, three sparkles */
.boot-pour .bo-level { animation: bo-level 1.2s forwards; }
.boot-pour .bo-mold { stroke: var(--boot-rail); animation: bo-mold 1.2s forwards; }
.boot-pour .bo-t { transform-origin: 50% 100%; animation: bo-t 1.2s forwards; }
.boot-pour .bo-spark { transform-origin: 50% 50%; opacity: 0; animation: bo-spark 1.2s forwards; }
@keyframes bo-level { 0% { transform: translateY(800px); animation-timing-function: cubic-bezier(.4,0,.6,1); } 60%, 100% { transform: translateY(0); } }
@keyframes bo-mold { 0%, 55% { opacity: 1; } 65%, 100% { opacity: 0; } }
@keyframes bo-t { 0%, 55% { transform: translateY(-860px) scale(1, 1); animation-timing-function: cubic-bezier(.55,0,1,.45); } 72% { transform: translateY(0) scale(1.06, .88); }
  80%, 100% { transform: translateY(0) scale(1, 1); } }
@keyframes bo-spark { 0%, 70% { transform: scale(0) rotate(0); opacity: 0; } 82% { transform: scale(1.2) rotate(45deg); opacity: 1; } 100% { transform: scale(0) rotate(90deg); opacity: 0; } }

/* ---- Design system 1.0, the start-up screen (Design system.md 6.1): on the shell's skeleton (the hand-off is shell -> shell),
   above every MudBlazor layer (--os-z-boot). Fast path: the still logo and a 160 ms fade; the scene only after 350 ms not
   ready; the morning show plays to the end ("Click or Esc to skip"); the first visit's progress after 3 s, the slow line
   after 10 s; the landing: the logo flies to the top bar's while the screen fades. ---- */
.boot { z-index: var(--os-z-boot); }
.boot-shell { position: absolute; inset: 0; pointer-events: none; }
.boot-shell .bs-vein { height: var(--os-vein-h); background: linear-gradient(90deg, #E0BF3F 0, var(--os-vein) 28%, var(--os-accent-brand) 62%, transparent 100%); }
.boot-shell .bs-top { display: flex; align-items: center; height: var(--os-topbar-h); padding: 0 var(--os-page-x); border-bottom: 1px solid var(--os-border-subtle); background: var(--os-surface); }
/* Wave 0.7: the top bar's logo spot (28 px, where the scene's logo lands): its gold frame, as the shell draws it */
.boot-shell .bs-logo { width: 28px; height: 28px; background: url("ttech-logo.svg") center / contain no-repeat; }
:root[data-theme="dark"] .boot-shell .bs-logo { background-image: url("ttech-logo-dark.svg"); }
.boot-shell .bs-app { height: var(--os-appbar-h); border-bottom: 1px solid var(--os-border-subtle); background: var(--os-surface); }
.boot-shell .bs-page { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 16px; padding: 24px var(--os-page-x); opacity: .7; }
.boot-shell .bs-page i { height: 120px; border-radius: var(--os-radius-lg); background: var(--os-surface-sunken); }
.boot-shell .bs-page i.w { grid-column: span 4; height: 300px; } .boot-shell .bs-page i.n { grid-column: span 2; height: 300px; }
.boot-shell::after { content: ""; position: absolute; left: 50%; top: 45%; width: min(640px, 100vw); height: 460px; transform: translate(-50%, -50%);
  background: radial-gradient(closest-side, var(--os-canvas) 55%, transparent); }
.boot > :not(.boot-shell) { position: relative; }
.boot-pct, .boot-slowline, .boot-skip { display: none; color: var(--os-text-3); font: 400 13px/18px var(--os-font-ui); letter-spacing: 0; text-align: center; }
.boot-pct i { display: block; width: 160px; height: 4px; margin: 6px auto 0; border-radius: 2px; background: var(--os-surface-sunken); overflow: hidden; }
.boot-pct i b { display: block; height: 100%; width: var(--pct, 0%); border-radius: 2px; background: var(--os-accent); transition: width .2s; }
.boot.boot-progress .boot-pct, .boot.boot-slow .boot-slowline, .boot.boot-can-skip .boot-skip { display: block; }
/* The UI did not start after 30 s (App.razor's watchdog): an honest line and Reload, instead of the slow-connection line */
.boot-stuck { display: none; max-width: 420px; color: var(--os-text-2); font: 400 13px/18px var(--os-font-ui); letter-spacing: 0; text-align: center; }
.boot.boot-giveup .boot-stuck { display: block; }
.boot.boot-giveup .boot-pct, .boot.boot-giveup .boot-slowline { display: none; }
.boot-reload { margin-left: 6px; height: 28px; padding: 0 12px; border: 1px solid var(--os-border); border-radius: var(--os-radius-sm); background: var(--os-surface);
  color: var(--os-text); font: 500 13px/1 var(--os-font-ui); cursor: pointer; }
/* Blazor's error bar (#blazor-error-ui, app.css .error-bar) above the start-up screen: its Reload is never hidden; the boot
   script also takes the screen away when the bar shows */
.error-bar { z-index: calc(var(--os-z-boot) + 10); }
.boot.boot-can-skip { cursor: pointer; }
.boot.boot-ff .boot-line { animation: none; opacity: 1; }
.boot.boot-ff .boot-bubble { visibility: hidden; }
.boot.boot-landing { background: transparent; transition: background .24s ease; }
.boot.boot-landing .boot-shell, .boot.boot-landing .boot-line, .boot.boot-landing > span, .boot.boot-landing .boot-pct, .boot.boot-landing .boot-skip { opacity: 0; transition: opacity .24s ease; }
.boot.boot-landing .boot-stage { visibility: hidden; }
.boot-fly { position: fixed; z-index: calc(var(--os-z-boot) + 1); transform-origin: 0 0; pointer-events: none; transition: transform .42s var(--os-ease-out); }
.boot-fly .ink { fill: var(--os-logo-ink); }

/* ---- The scenes outside the start-up screen: a page's loading stage (Client\Shared\Os\LoadingStage.razor) and the celebration
   of a toast (the pour): the same drawing at 1:1, played once, the logo held still; the --boot- colours there too ---- */
.os-scene { position: relative; width: 300px; height: 184px; }
.os-scene .boot-stage { animation: none; }
.os-scene.boot-blast .boot-stage { animation: bb-shake 2.8s forwards; }
.os-scene--still .boot-stage { animation: none; }
.os-scene--small { transform: scale(.4); transform-origin: 0 0; }
.os-stage, .os-celebrate, .os-scenetile { --boot-ground: #ebe5d6; --boot-shaft: #d9cfb6; --boot-layer: #ddd2b8; --boot-layer-2: #d3c6a6; --boot-dust: #ddd3bd; --boot-rail: #a99f82;
  --boot-belt: #4a463f; --boot-tread: #7a7466; --boot-grid: #e4dece; --boot-trend: #3f7fbf; --boot-tank: #ebe7dc; --boot-slurry: #bcc2be; --boot-slurry-2: #a9b1ad;
  --boot-screen: #dfe2e4; --boot-bezel: #2E2E2E; }
:root[data-theme="dark"] .os-stage, :root[data-theme="dark"] .os-celebrate, :root[data-theme="dark"] .os-scenetile { --boot-ground: #2a2620; --boot-shaft: #3a352c; --boot-layer: #3a352c; --boot-layer-2: #332f28; --boot-dust: #4a4338; --boot-rail: #7f796d;
  --boot-belt: #5a554c; --boot-tread: #8c8577; --boot-grid: #3a352c; --boot-trend: #6fa3d8; --boot-tank: #2c2924; --boot-slurry: #565d59; --boot-slurry-2: #4a504c;
  --boot-screen: #3a3f44; --boot-bezel: #4d4840; }

@media (prefers-reduced-motion: reduce) {
  .boot-stage, .boot-stage *, .boot-line, .os-scene, .os-scene * { animation: none !important; }
  .boot-fly { transition: none; }
}