/* Under the screen surface and power-on effect, above the desktop chrome. */
.chunky-boot { position: fixed; inset: 0; z-index: 9998; background: #17191e; color: var(--terminal-text, #dedce4); font: 16px/1.5 var(--simple-font, monospace); }
.chunky-boot[hidden] { display: none; }
.boot-splash { display: none; position: absolute; inset: 64px 20px; place-content: center; justify-items: center; text-align: center; }
/* The source contains two 60 × 89 variants side by side; show the first. */
.boot-logo {
  width: 120px; height: 178px; margin-bottom: 24px;
  background: #fff;
  mask: url('img/vertical-logo.png') left top / 240px 178px no-repeat;
  mask-mode: luminance;
  image-rendering: pixelated; opacity: .5;
}
.boot-name { margin: 0; font: inherit; font-size: 32px; line-height: 1.25; color: var(--terminal-accent); }
.boot-version { margin: 8px 0 28px; color: var(--terminal-muted, #aaa7b0); }
.boot-progress { width: 192px; height: 8px; padding: 2px; border: 1px solid var(--terminal-accent); }
.boot-progress::after { content: ''; display: block; height: 100%; background: var(--terminal-accent); transform-origin: left; animation: chunky-loading 3400ms linear both; }
.boot-label { margin: 12px 0 0; font-size: 12px; color: var(--terminal-muted, #aaa7b0); }
.boot-skip { position: absolute; bottom: max(32px, env(safe-area-inset-bottom)); left: 20px; right: 20px; margin: 0; text-align: center; font: 11px/1.5 ui-monospace, monospace; color: #9999a2; }
[data-boot='splash'] .boot-splash { display: grid; }
[data-boot='splash'] .chunky-boot { background: transparent; }
[data-boot='splash'] .boot-logo {
  animation: chunky-logo-enter 650ms cubic-bezier(.2,.8,.2,1) backwards,
    chunky-logo-breathe 1500ms ease-in-out 650ms 2;
}
[data-boot='splash'] .boot-name { animation: chunky-text-enter 550ms ease-out 200ms backwards; }
[data-boot='splash'] .boot-version { animation: chunky-text-enter 450ms ease-out 340ms backwards; }
[data-boot='splash'] :is(.boot-progress, .boot-label) { animation: chunky-text-enter 400ms ease-out 460ms backwards; }
/* visibility on a parent can be overridden by a visible descendant (the blog
   preview does this). Hide the entire staged subtree until its own entrance. */
[data-boot='splash'] :is(.desktop-panel, .terminal-copyright),
[data-boot='splash'] [data-desktop-window],
[data-boot='splash'] [data-desktop-window] *,
[data-boot] .boot-window-pending,
[data-boot] .boot-window-pending * { visibility: hidden !important; }
[data-boot] .lcd-display-ghosts { display: none !important; }
@keyframes chunky-loading {
  0% { transform: scaleX(0); }
  24%, 40% { transform: scaleX(.32); }
  64%, 78% { transform: scaleX(.72); }
  100% { transform: scaleX(1); }
}
@keyframes chunky-logo-enter {
  from { opacity: 0; transform: translateY(-24px); }
  to { opacity: .5; transform: translateY(0); }
}
@keyframes chunky-logo-breathe {
  0%, 100% { opacity: .5; }
  50% { opacity: .32; }
}
@keyframes chunky-text-enter {
  from { opacity: 0; }
  to { opacity: 1; }
}
@media (prefers-reduced-motion: reduce) {
  .chunky-boot { display: none; }
  .chunky-boot *, .chunky-boot *::after { animation: none !important; }
  [data-boot] [data-desktop-window], [data-boot] [data-desktop-window] *, [data-boot] .desktop-panel, [data-boot] .terminal-copyright { visibility: visible !important; }
}