/*
 * The arrival screen (src/arrival.ts drives it; index.html holds its one markup, #boot).
 *
 * Every page starts on it, before any script of ours has run, so a slow phone never
 * sees a black or white canvas: in "plain" mode it is the theme's background and,
 * after a moment, a thin line moving at the top. A new hire's page turns it into the
 * full screen ("arrive"): the sky of the business's hour, a desk being set up, one
 * heading, three steps and a line, from "Create your employee" on the platform until
 * the employee says hello on its own computer. The platform's last frame and the
 * employee's first are the same, so the hop between the two sites never shows.
 *
 * Self-contained on purpose: it paints before the app's stylesheet and fonts. The sky
 * here is the workspace's (workspace.css .ws-sky, Sky.tsx); server/arrival.test.ts
 * keeps the two in step. House motion: the ease (0.2, 0, 0, 1), transform and opacity
 * only, no springs, no blur in motion.
 */
html { background: oklch(0.955 0.007 85); }
html[data-theme="dark"] { background: oklch(0.17 0.006 250); }

.boot {
  --b-ink: oklch(0.2 0.012 255);
  --b-muted: oklch(0.4 0.012 255);
  --b-track: oklch(0.2 0.012 255 / 0.12);
  --b-screen: oklch(1 0 0 / 0.55);
  --b-glow: oklch(0.56 0.2 258 / 0.16);
  --b-accent: oklch(0.56 0.2 258);
  --b-glass: oklch(1 0 0 / 0.5);
  --b-glass-edge: oklch(1 0 0 / 0.68);
  --b-ease: cubic-bezier(0.2, 0, 0, 1);
  position: fixed; inset: 0; z-index: 900;
  display: grid; place-items: center;
  padding: max(24px, env(safe-area-inset-top)) 20px max(24px, env(safe-area-inset-bottom));
  overflow-y: auto; overscroll-behavior: contain;
  color: var(--b-ink);
  font-family: "General Sans", ui-sans-serif, -apple-system, "Segoe UI", sans-serif;
  -webkit-font-smoothing: antialiased;
}
html[data-theme="dark"] .boot {
  --b-ink: oklch(0.95 0.004 255);
  --b-muted: oklch(0.74 0.01 255);
  --b-track: oklch(1 0 0 / 0.14);
  --b-screen: oklch(0.25 0.014 260 / 0.7);
  --b-glow: oklch(0.68 0.17 258 / 0.22);
  --b-accent: oklch(0.68 0.17 258);
  --b-glass: oklch(0.24 0.014 260 / 0.55);
  --b-glass-edge: oklch(1 0 0 / 0.1);
}
.boot[hidden] { display: none; }
.boot:focus { outline: none; }

/* ---------------------------------------------------------------- plain: the theme's background, then a line at the top */

.boot[data-mode="plain"] { background: oklch(0.955 0.007 85); }
html[data-theme="dark"] .boot[data-mode="plain"] { background: oklch(0.17 0.006 250); }
.boot[data-mode="plain"] > .boot-sky, .boot[data-mode="plain"] > .boot-main { display: none; }
/* a page that stands on the sky (an employee, the team) waits on it, and past two seconds the desk comes, working */
.boot[data-mode="plain"][data-sky] > .boot-sky { display: block; }
.boot[data-mode="plain"][data-sky] > .boot-main { display: grid; opacity: 0; animation: boot-in 0.4s 2s ease forwards; }
.boot[data-mode="plain"] > .boot-main > :not(.boot-art) { display: none; }
.boot-bar { position: fixed; top: 0; left: 0; right: 0; height: 2px; overflow: hidden; opacity: 0; }
.boot[data-mode="plain"] > .boot-bar { animation: boot-in 0.3s 1.2s ease forwards; }
.boot[data-mode="arrive"] > .boot-bar { display: none; }
.boot-bar i { position: absolute; top: 0; bottom: 0; left: 0; width: 40%; border-radius: 2px; background: var(--b-accent); animation: boot-run 1.4s var(--b-ease) infinite; }

/* ---------------------------------------------------------------- the sky (a copy of workspace.css .ws-sky; arrival.test.ts compares them) */

.boot-sky { position: fixed; inset: 0; overflow: hidden; background: linear-gradient(180deg, var(--sky-top) 0%, var(--sky-mid) 55%, var(--sky-low) 100%); }
html[data-theme="dark"] .boot-sky { --sky-top: #0e1322 !important; --sky-mid: #151c31 !important; --sky-low: #202842 !important; --sky-sun: oklch(0.45 0.06 260 / 0.3) !important; }
.boot-sun { position: absolute; width: 70vw; height: 55vh; left: -12vw; top: 16vh; border-radius: 50%; background: var(--sky-sun); filter: blur(90px); }
.boot-haze { position: absolute; width: 60vw; height: 42vh; right: -16vw; top: -12vh; border-radius: 50%; background: oklch(1 0 0 / 0.22); filter: blur(80px); }
html[data-theme="dark"] .boot-haze { background: oklch(0.6 0.05 260 / 0.12); }
.boot-grain { position: absolute; inset: 0; opacity: 0.07; mix-blend-mode: overlay; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E"); }
/* coming over a page (the hire): the sky first, then what is on it */
.boot.enter > .boot-sky { animation: boot-in 0.32s var(--b-ease) both; }
.boot.enter > .boot-main > * { animation: boot-up 0.5s var(--b-ease) both; }
.boot.enter > .boot-main > :nth-child(2) { animation-delay: 0.08s; }
.boot.enter > .boot-main > :nth-child(3) { animation-delay: 0.14s; }
.boot.enter > .boot-main > :nth-child(n + 4) { animation-delay: 0.2s; }

/* ---------------------------------------------------------------- the column */

.boot-main { position: relative; width: min(520px, 100%); display: grid; justify-items: center; text-align: center; }
.boot-art { width: clamp(200px, 30vw, 264px); height: auto; overflow: visible; color: var(--b-ink); }
.boot-h { margin: 22px 0 0; font-family: "Cabinet Grotesk", "General Sans", ui-sans-serif, sans-serif; font-weight: 700; font-size: clamp(28px, 7.2vw, 42px); line-height: 1.08; letter-spacing: -0.03em; text-wrap: balance; }
.boot-steps { list-style: none; margin: 28px 0 0; padding: 0; width: min(420px, 100%); display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.boot-steps li { display: grid; gap: 10px; align-content: start; }
.boot-seg { position: relative; display: block; height: 3px; border-radius: 2px; overflow: hidden; background: var(--b-track); }
.boot-seg::before { content: ""; position: absolute; inset: 0; border-radius: 2px; background: var(--b-ink); transform: scaleX(0); transform-origin: left center; transition: transform 0.42s var(--b-ease); }
.boot-seg::after { content: ""; position: absolute; top: 0; bottom: 0; left: 0; width: 45%; border-radius: 2px; background: var(--b-ink); opacity: 0; }
.boot-word { font-size: 13.5px; line-height: 1.3; font-weight: 500; color: var(--b-muted); transition: color 0.3s ease; text-wrap: balance; }
/* the clock keeps its line even when empty, so nothing moves when it starts counting */
.boot-time { display: block; min-height: 1.3em; margin-top: 2px; font-variant-numeric: tabular-nums; font-weight: 400; color: var(--b-muted); }
.boot-line { margin: 12px 0 0; max-width: 40ch; min-height: 4.5em; font-size: 16px; line-height: 1.5; color: var(--b-muted); text-wrap: pretty; }
.boot-go { margin-top: 22px; display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; }
/* only while a computer is built; kept in the layout otherwise, so a phase change never moves the column */
.boot-go[hidden] { display: flex; visibility: hidden; }
.boot-btn { min-height: 44px; padding: 0 20px; border-radius: 999px; border: 1px solid var(--b-glass-edge); background: var(--b-glass); color: var(--b-ink); font: inherit; font-size: 15px; font-weight: 500; cursor: pointer; transition: transform 0.18s var(--b-ease), opacity 0.18s; }
.boot-btn.primary { border-color: transparent; background: var(--b-ink); color: oklch(0.985 0 0); }
html[data-theme="dark"] .boot-btn.primary { color: oklch(0.19 0.012 260); }
.boot-btn:hover { opacity: 0.88; }
.boot-btn:active { transform: scale(0.98); }
.boot-btn:focus-visible { outline: 2px solid var(--b-accent); outline-offset: 2px; }
.boot-sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* where each phase is: done is filled, now runs, next waits */
.boot-steps li[data-s="done"] .boot-seg::before { transform: scaleX(1); }
.boot-steps li[data-s="done"] + li[data-s="done"] .boot-seg::before { transition-delay: 0.16s; }
.boot-steps li[data-s="now"] .boot-seg::after { opacity: 0.55; animation: boot-run 1.6s var(--b-ease) infinite; }
.boot-steps li[data-s="done"] .boot-word { color: var(--b-ink); }
.boot-steps li[data-s="now"] .boot-word { color: var(--b-ink); font-weight: 600; }

/* ---------------------------------------------------------------- the desk being set up */

.boot-art .ln { fill: none; stroke: currentColor; stroke-width: 1.75; stroke-linecap: round; stroke-linejoin: round; vector-effect: non-scaling-stroke; }
.boot-art .soft { opacity: 0.55; }
.boot-screen { fill: var(--b-screen); transition: fill 0.6s ease; }
.boot-glow { fill: var(--b-glow); opacity: 0; transition: opacity 0.6s ease; }
.boot-run, .boot-type { opacity: 0; transition: opacity 0.3s ease; }
.boot-run-track { fill: var(--b-track); }
.boot-run-bar { fill: var(--b-accent); animation: boot-scan 1.6s var(--b-ease) infinite; }
.boot-type rect { fill: currentColor; opacity: 0.5; transform-box: fill-box; transform-origin: left center; }
/* When it first comes over a page: the desk's line draws itself left to right, then the computer rises onto it whole
   (Roman, Nov 13: a frame caught mid-draw showed a monitor with no left side), then the mug and the plant. Nothing
   draws by halves, and at rest no path carries a dash: the dash lives only in the keyframes. */
.boot.enter .boot-art .draw { animation: boot-draw 0.6s var(--b-ease) backwards; }
.boot.enter .boot-mon { animation: boot-up 0.5s 0.22s var(--b-ease) backwards; }
.boot.enter .boot-props { animation: boot-in 0.4s 0.5s ease backwards; }
/* its own computer: the screen is dark, a bar runs on it while it is made */
.boot[data-phase="building"] .boot-run, .boot[data-phase="computer"] .boot-run { opacity: 1; }
/* starting: the screen comes on, the bar still runs */
.boot[data-phase="starting"] .boot-glow { opacity: 1; }
.boot[data-phase="starting"] .boot-run { opacity: 1; }
/* learning the job: lines write themselves on the lit screen */
.boot[data-phase="learning"] .boot-glow, .boot[data-phase="hello"] .boot-glow { opacity: 1; }
.boot[data-phase="learning"] .boot-type, .boot[data-phase="hello"] .boot-type { opacity: 1; }
.boot[data-phase="learning"] .boot-type rect { animation: boot-write 2.4s var(--b-ease) infinite; }
.boot[data-phase="learning"] .boot-type rect:nth-child(2) { animation-delay: 0.3s; }
.boot[data-phase="learning"] .boot-type rect:nth-child(3) { animation-delay: 0.6s; }

/* ---------------------------------------------------------------- handing over to the hello */

.boot.out > .boot-main { opacity: 0; transform: translateY(-10px); transition: opacity 0.24s ease, transform 0.24s var(--b-ease); }
.boot.gone { opacity: 0; transition: opacity 0.2s ease; pointer-events: none; }
/* while it goes, the page's own sky (workspace.css .ws-sky) is simply there under it, never fading in under the fade */
html.boot-handover .ws-sky { animation: none !important; }

@keyframes boot-in { from { opacity: 0; } to { opacity: 1; } }
@keyframes boot-up { from { opacity: 0; transform: translateY(12px); } }
@keyframes boot-draw { from { stroke-dasharray: 1; stroke-dashoffset: 1; } to { stroke-dasharray: 1; stroke-dashoffset: 0; } }
@keyframes boot-run { from { transform: translateX(-100%); } to { transform: translateX(250%); } }
@keyframes boot-scan { from { transform: translateX(-16px); } to { transform: translateX(48px); } }
@keyframes boot-write { 0% { transform: scaleX(0); } 35%, 85% { transform: scaleX(1); } 100% { transform: scaleX(1); opacity: 0; } }

@media (max-width: 479px) {
  .boot-main { padding-bottom: 8px; }
  .boot-h { margin-top: 18px; }
  .boot-steps { margin-top: 24px; gap: 6px; }
  .boot-word { font-size: 13px; }
  .boot-line { font-size: 15px; margin-top: 10px; }
  .boot-go { width: 100%; flex-direction: column; }
  .boot-btn { width: 100%; }
}

/* Reduced motion: everything is simply there, and nothing runs. */
@media (prefers-reduced-motion: reduce) {
  .boot *, .boot *::before, .boot *::after { animation: none !important; }
  .boot.enter > .boot-sky, .boot.enter > .boot-main > * { animation: boot-in 0.16s ease both !important; }
  .boot-steps li[data-s="now"] .boot-seg::after { opacity: 0.55; width: 50%; transform: none; }
  .boot-run-bar { transform: translateX(16px); }
  .boot-type rect { transform: none; }
  .boot-seg::before { transition-duration: 0.01s; }
  .boot.out > .boot-main { transform: none; transition-duration: 0.12s; }
  .boot[data-mode="plain"] > .boot-bar { animation: boot-in 0.16s 1.2s ease forwards !important; }
  .boot[data-mode="plain"][data-sky] > .boot-main { animation: boot-in 0.16s 2s ease forwards !important; }
  .boot-bar i { left: 30%; }
}