/* chikutik: the first screen while the app loads (owner, 11 Oct 2026: "First load should make a nice loading screen. Likewise when we logging in to
   the big whiteboard tv"). Plain markup + CSS, so it shows before any script runs: the five bars of the logo move like the Timeline's rail. app.js
   (bootDone) fades it once the first page is drawn; the screen sign-in (web/auth/screen.js) draws the same picture, so a wall screen goes from
   "Allowed" to the app without a blank page. A slow network gets a line and a Reload link after six seconds (a plain link: no script needed). */
.ck-boot { position: fixed; inset: 0; z-index: 300; display: grid; place-items: center; padding: 24px; background: var(--paper, #fff); color: var(--ink, #111);
  font-family: var(--font, system-ui, sans-serif); transition: opacity .38s ease, visibility .38s; }
.ck-boot.gone { opacity: 0; visibility: hidden; pointer-events: none; }
.ckb-in { display: grid; justify-items: center; gap: 26px; text-align: center; }
.ckb-rail { display: grid; gap: 9px; width: 110px; }
.ckb-rail i { display: block; height: 9px; width: 54px; background: currentColor; transform-origin: left center; transform: scaleX(.5);
  animation: ckbTick 1.8s cubic-bezier(.65, 0, .35, 1) infinite; }
.ckb-rail i:nth-child(2) { animation-delay: .14s; }
.ckb-rail i:nth-child(4) { animation-delay: .42s; }
.ckb-rail i:nth-child(5) { animation-delay: .56s; }
.ckb-rail i.now { position: relative; width: 110px; background: var(--gold, #a8843a); transform: none; animation: ckbNow 1.8s cubic-bezier(.65, 0, .35, 1) infinite; animation-delay: .28s; }
.ckb-rail i.now::after { content: ''; position: absolute; top: 3px; left: 8px; width: 16px; height: 3px; background: var(--paper, #fff); animation: ckbNotch 1.8s cubic-bezier(.65, 0, .35, 1) infinite; animation-delay: .28s; }
@keyframes ckbTick { 0%, 100% { transform: scaleX(.5); } 45% { transform: scaleX(1); } }
@keyframes ckbNow { 0%, 100% { transform: scaleX(.86); } 45% { transform: scaleX(1); } }
@keyframes ckbNotch { 0%, 100% { transform: translateX(0); } 45% { transform: translateX(70px); } }
.ckb-word { font-size: 22px; font-weight: 600; letter-spacing: -.01em; opacity: 0; animation: ckbIn .5s ease .15s forwards; }
.ckb-say { margin: -14px 0 0; font-size: 14px; color: var(--mute, #6b6b6b); min-height: 1.4em; }
/* where the name comes from, and one fact at a time (bootfacts.js) */
.ckb-mean { margin: -18px 0 0; max-width: 46ch; text-wrap: balance; font-size: 13px; line-height: 1.45; color: var(--mute, #6b6b6b); opacity: 0; animation: ckbIn .5s ease .3s forwards; }
.ckb-mean:empty, .ckb-fact:not(.on) { display: none; }
.ckb-fact { margin: -6px 0 0; max-width: 38ch; text-wrap: balance; min-height: 2.9em; font-size: 14px; line-height: 1.45; color: var(--ink, #111); opacity: 0; animation: ckbIn .5s ease .55s forwards; }
.ckb-fact-t { transition: opacity .25s ease; }
.ckb-fact.sw .ckb-fact-t { opacity: 0; }
.ckb-fact-k { display: block; margin-bottom: 2px; font-size: 11px; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; color: var(--mute, #6b6b6b); }
.ckb-slow { margin: 0; font-size: 13px; color: var(--mute, #6b6b6b); opacity: 0; animation: ckbIn .4s ease 6s forwards; }
.ckb-slow a { color: var(--ink, #111); }
@keyframes ckbIn { to { opacity: 1; } }
/* a wall screen: bigger, and a short "allowed" moment before it moves on */
.ck-boot.big .ckb-rail { width: 200px; gap: 16px; } .ck-boot.big .ckb-rail i { height: 16px; width: 98px; } .ck-boot.big .ckb-rail i.now { width: 200px; }
.ck-boot.big .ckb-rail i.now::after { top: 5px; height: 6px; width: 28px; }
.ck-boot.big .ckb-word { font-size: 40px; } .ck-boot.big .ckb-mean, .ck-boot.big .ckb-fact { display: none; } .ck-boot.big .ckb-say { font-size: 22px; margin-top: -8px; }
.ck-boot.big .ckb-ok { width: 64px; height: 64px; border-radius: 50%; background: var(--gold, #a8843a); color: var(--on-gold, #111); display: grid; place-items: center;
  animation: ckbPop .5s cubic-bezier(.2, 1.4, .4, 1) both; }
.ck-boot.big .ckb-ok svg { width: 34px; height: 34px; stroke-dasharray: 30; stroke-dashoffset: 30; animation: ckbDraw .45s ease .25s forwards; }
@keyframes ckbPop { from { transform: scale(.4); opacity: 0; } to { transform: none; opacity: 1; } }
@keyframes ckbDraw { to { stroke-dashoffset: 0; } }
@media (prefers-reduced-motion: reduce) {
  .ckb-rail i, .ckb-rail i.now, .ckb-rail i.now::after, .ck-boot.big .ckb-ok, .ck-boot.big .ckb-ok svg { animation: none; }
  .ckb-rail i { transform: scaleX(.6); } .ck-boot.big .ckb-ok svg { stroke-dashoffset: 0; }
  .ckb-word, .ckb-mean, .ckb-fact { animation: none; opacity: 1; }
}