/* boot.css: loading screen shown before main.js has built the title (see src/ui/bootSplash.js). Loaded first, outside the layers. */
html[data-booting] body > :not(#bootSplash) { visibility: hidden !important; }
#bootSplash { display: none; }
html[data-booting] #bootSplash { display: grid; position: fixed; inset: 0; z-index: 2147483600; place-items: center; overflow: hidden; }
html[data-booting="out"] #bootSplash { opacity: 0; transition: opacity .42s ease-out; }
#bootSplash .boot-gb, #bootSplash .boot-ps1 { display: none; }

/* ---- GB: the tube warms up, the logo drops in one dot row at a time, a row of blocks fills ---- */
html[data-skin="gb"] #bootSplash { background: #0a0d0c; color: #e6f2ec; }
html[data-skin="gb"][data-gb-palette="amber"] #bootSplash { background: #120a03; color: #ffcf86; }
html[data-skin="gb"][data-gb-palette="terminal"] #bootSplash { background: #020604; color: #a8ffb0; }
html[data-skin="gb"]:is([data-gb-palette="leaf"]) #bootSplash { background: #d6dcab; color: #1d3122; }
html[data-skin="gb"][data-gb-palette="pocket"] #bootSplash { background: #ffffff; color: #000000; }
html[data-skin="gb"][data-gb-palette="dusk"] #bootSplash { background: #e6dfcb; color: #1f1a33; }
html[data-skin="gb"] #bootSplash .boot-gb { display: grid; justify-items: center; gap: 28px; image-rendering: pixelated; }
.boot-gb__logo { width: 240px; height: 48px; background: currentColor; -webkit-mask: url("../../../assets/ui/logo/sleepwell-gb.png") center / 100% 100% no-repeat; mask: url("../../../assets/ui/logo/sleepwell-gb.png") center / 100% 100% no-repeat; image-rendering: pixelated; animation: boot-gb-drop .9s steps(12, end) both; }
.boot-gb__bar { display: grid; grid-template-columns: repeat(8, 8px); gap: 4px; }
.boot-gb__bar i { width: 8px; height: 8px; background: currentColor; opacity: .18; animation: boot-gb-block 1.6s steps(1, end) infinite; }
.boot-gb__bar i:nth-child(2) { animation-delay: .2s; } .boot-gb__bar i:nth-child(3) { animation-delay: .4s; } .boot-gb__bar i:nth-child(4) { animation-delay: .6s; }
.boot-gb__bar i:nth-child(5) { animation-delay: .8s; } .boot-gb__bar i:nth-child(6) { animation-delay: 1s; } .boot-gb__bar i:nth-child(7) { animation-delay: 1.2s; } .boot-gb__bar i:nth-child(8) { animation-delay: 1.4s; }
html[data-skin="gb"] #bootSplash::after { content: ""; position: absolute; inset: 0; pointer-events: none; background: repeating-linear-gradient(to bottom, transparent 0 2px, rgb(0 0 0 / .22) 2px 3px); }
@keyframes boot-gb-drop { from { transform: translateY(-96px); } to { transform: translateY(0); } }
@keyframes boot-gb-block { 0% { opacity: .18; } 12% { opacity: 1; } 60% { opacity: 1; } 61% { opacity: .18; } }

/* ---- PS1: the notebook at night — a crescent slowly turns, the name sits on a paper strip, a pencil line draws under it ---- */
html[data-skin="ps1"] #bootSplash { background: radial-gradient(ellipse at 50% 42%, #1a2044 0, #0b0f22 55%, #05070f 100%); color: #efe2c4; }
html[data-skin="ps1"] #bootSplash .boot-ps1 { display: grid; justify-items: center; gap: 22px; }
.boot-ps1__moon { width: 54px; height: 54px; border-radius: 50%; box-shadow: inset 11px -6px 0 0 #efe2c4; filter: drop-shadow(0 0 10px rgb(255 226 160 / .45)); animation: boot-ps1-moon 3.2s ease-in-out infinite; }
.boot-ps1__name { font-family: "SW Mincho", "Shippori Mincho", serif; font-size: 30px; letter-spacing: .16em; padding: .1em .6em .15em .76em; color: #25221d; background: #e9ddc5; box-shadow: 0 2px 10px rgb(0 0 0 / .45); transform: rotate(-1.2deg); }
.boot-ps1__line { width: 150px; height: 2px; background: linear-gradient(90deg, #8f2f24 0 50%, rgb(143 47 36 / .15) 50%) 0 0 / 200% 100%; animation: boot-ps1-line 1.8s linear infinite; }
.boot-ps1__label { font: 12px/1 "SW Type", "Courier Prime", monospace; letter-spacing: .3em; color: rgb(239 226 196 / .6); }
@keyframes boot-ps1-moon { 0%, 100% { transform: rotate(-14deg); } 50% { transform: rotate(10deg); } }
@keyframes boot-ps1-line { from { background-position: 100% 0; } to { background-position: -100% 0; } }

@media (prefers-reduced-motion: reduce) { #bootSplash *, #bootSplash { animation: none !important; transition: none !important; } }