/* KITE BOOT: "launch into the sky".
   Static port of app/kite/KiteBoot.tsx + app/kite/kite-boot.css. The kite
   climbs into a deepening sky with clouds rolling by, a status line cycling
   Kite's job, a bar filling, then the whole sky lifts away.

   Include in <head>:  <link rel="stylesheet" href="/boot/kite-boot.css">
   The overlay is injected by /boot/kite-boot.js, the first element in <body>,
   so it is on screen at the first paint. */
.kite-boot{
  position:fixed;inset:0;z-index:2147483000;display:flex;flex-direction:column;align-items:center;justify-content:center;overflow:hidden;
  background:linear-gradient(180deg,#f4f9fd 0%,#dceffb 26%,#a9d3f1 52%,#5fa4dd 74%,#2c6ba8 90%,#173f66 100%);
  transition:opacity .6s ease,visibility .6s ease;
  -webkit-tap-highlight-color:transparent;
  /* hard cap: fades on the compositor at 3.9 s even if a 3D compile is
     holding the main thread and the script cannot run */
  animation:kb-cap .6s ease 3.9s forwards;
}
@keyframes kb-cap{to{opacity:0}}
.kite-boot.off{opacity:0;visibility:hidden;pointer-events:none}
.kite-boot *,.kite-boot *::before,.kite-boot *::after{box-sizing:border-box}

/* repeat visit, reduced motion or a crawler: the script never injects it */
html.kite-boot-skip .kite-boot{display:none!important}
@media (prefers-reduced-motion:reduce){.kite-boot{display:none!important}}

/* the page underneath does not scroll while the kite is climbing */
html.kite-boot-on,html.kite-boot-on body{overflow:hidden!important}

/* clouds rolling by (parallax: bigger+faster+brighter = nearer) */
.kb-sky{position:absolute;inset:0;pointer-events:none;overflow:hidden}
.kb-cloud{position:absolute;will-change:transform;opacity:.9}
.kb-cloud b{position:absolute;background:#fff;border-radius:50%;filter:blur(1px)}
.kb-c1{top:16%;transform:scale(1.15);opacity:.95;animation:kb-roll 26s linear infinite}
.kb-c2{top:33%;transform:scale(.8);opacity:.75;animation:kb-roll 38s linear infinite;animation-delay:-12s}
.kb-c3{top:52%;transform:scale(1.4);opacity:.85;animation:kb-roll 20s linear infinite;animation-delay:-6s}
.kb-c4{top:64%;transform:scale(.65);opacity:.6;animation:kb-roll 46s linear infinite;animation-delay:-22s}
@keyframes kb-roll{from{left:-220px}to{left:100%}}
.kb-pa{width:70px;height:70px;left:0;top:14px}
.kb-pb{width:104px;height:104px;left:38px;top:-6px}
.kb-pc{width:76px;height:76px;left:104px;top:10px}
.kb-pd{width:150px;height:34px;left:6px;top:44px;border-radius:24px}

/* the kite flies up */
.kb-stage{position:relative;z-index:2;width:190px;height:210px;margin-bottom:30px}
.kb-kite{position:absolute;left:50%;top:0;width:150px;height:198px;transform:translateX(-50%);transform-origin:50% 18%;
  animation:kb-rise 1.25s cubic-bezier(.16,.72,.24,1) both, kb-fly 4s ease-in-out 1s infinite}
.kb-kite img{width:100%;height:100%;display:block;object-fit:contain;filter:drop-shadow(0 14px 26px rgba(23,63,102,.4))}
@keyframes kb-rise{from{transform:translateX(-50%) translateY(120px) scale(.8);opacity:0}
  to{transform:translateX(-50%) translateY(0) scale(1);opacity:1}}
@keyframes kb-fly{0%{transform:translateX(-50%) translateY(0) rotate(-3.5deg)}
  50%{transform:translateX(-52%) translateY(-10px) rotate(3.5deg)}
  100%{transform:translateX(-50%) translateY(0) rotate(-3.5deg)}}

.kb-word{position:relative;z-index:2;display:flex;align-items:baseline;margin-bottom:18px;opacity:0;animation:kb-fade .6s ease .75s forwards}
.kb-word b{font-weight:820;font-size:34px;line-height:1.1;letter-spacing:-.04em;color:#16283A;font-family:system-ui,-apple-system,"Segoe UI",Roboto,sans-serif}
.kb-word .kb-dot{display:block;width:8px;height:8px;border-radius:50%;background:#1E77C4;margin-left:5px;transform:translateY(-2px)}
@keyframes kb-fade{to{opacity:1}}

.kb-status{position:relative;z-index:2;font-family:ui-monospace,"SF Mono","Cascadia Mono",Consolas,monospace;font-size:11.5px;line-height:14px;letter-spacing:.22em;text-indent:.22em;text-transform:uppercase;
  text-align:center;width:100%;color:#1E77C4;height:14px;white-space:nowrap;opacity:0;animation:kb-fade .6s ease .95s forwards}
/* the three lines of Kite's job, stepped by CSS so a busy main thread cannot
   stall them. The original stepped every 950 ms from t=0 while the line only
   faded in at .95 s, so the first line was never seen; now each is on screen
   while the line is visible (.95 s to 1.6 s, 1.6 s to 2.4 s, then the last
   one stays) */
.kb-status span{position:absolute;left:0;right:0;top:0;opacity:0;animation:kb-slot var(--l) linear var(--d) none}
.kb-status span:last-child{animation-fill-mode:forwards}
@keyframes kb-slot{from{opacity:1}to{opacity:1}}
.kb-bar{position:relative;z-index:2;width:220px;height:3px;border-radius:3px;background:rgba(23,63,102,.18);overflow:hidden;margin-top:15px;
  opacity:0;animation:kb-fade .6s ease .95s forwards}
.kb-bar i{display:block;height:100%;width:0;border-radius:3px;background:linear-gradient(90deg,#bfe0f6,#fff);
  box-shadow:0 0 10px rgba(255,255,255,.8);animation:kb-fill 2.6s cubic-bezier(.5,.1,.2,1) .95s forwards}
@keyframes kb-fill{to{width:100%}}

.kb-by{position:absolute;bottom:calc(30px + env(safe-area-inset-bottom,0px));left:0;right:0;z-index:2;display:flex;flex-direction:column;align-items:center;gap:7px;
  opacity:0;animation:kb-fade .8s ease 1.3s forwards}
.kb-by span{font-family:ui-monospace,"SF Mono",Consolas,monospace;font-size:9.5px;letter-spacing:.28em;text-indent:.28em;text-transform:uppercase;color:rgba(255,255,255,.72)}
.kb-by img{display:block;height:40px;width:auto;opacity:.95}

/* short landscape phones: keep the kite, the word and the bar clear of the byline */
@media (max-height:560px){
  .kb-stage{width:150px;height:160px;margin-bottom:14px}
  .kb-kite{width:118px;height:156px}
  .kb-by{bottom:14px}
}