/* Win98-style boot overlay: BIOS POST screen → Windows 98 splash → fade to desktop. Placed in base.njk as the first child of so it renders before any JS runs. Visible by default; boot.js removes it (or hides instantly for reduced-motion / return visits). */ .boot-overlay { position: fixed; inset: 0; z-index: 9999999; /* above taskbar (99999), CRT (99998), start-menu (999999) */ background: #000; color: #c0c0c0; font-family: 'Courier New', 'Consolas', monospace; font-size: 14px; line-height: 1.35; overflow: hidden; pointer-events: auto; } /* By default the overlay is visible; .booted on hides it instantly. We put the class on via an inline script in so we never flash. */ html.booted .boot-overlay { display: none; } /* ---- POST (BIOS) screen ---- */ .boot-post { position: absolute; inset: 0; padding: 16px 20px; background: #000; color: #c0c0c0; white-space: pre-wrap; overflow: hidden; } .boot-post .post-line { opacity: 0; animation: boot-post-line 10ms linear forwards; } @keyframes boot-post-line { to { opacity: 1; } } /* Blinking cursor after the last POST line */ .boot-post .post-cursor { display: inline-block; width: 8px; background: #c0c0c0; color: #c0c0c0; animation: boot-cursor 600ms steps(2, end) infinite; } @keyframes boot-cursor { 0%, 50% { opacity: 1; } 51%,100% { opacity: 0; } } /* ---- Splash (Starting Windows 98) ---- */ .boot-splash { position: absolute; inset: 0; display: none; align-items: center; justify-content: center; /* Classic blue-sky-with-clouds approximation */ background: radial-gradient(ellipse at 20% 80%, rgba(255,255,255,0.65) 0%, rgba(255,255,255,0) 40%), radial-gradient(ellipse at 75% 25%, rgba(255,255,255,0.55) 0%, rgba(255,255,255,0) 45%), radial-gradient(ellipse at 60% 70%, rgba(255,255,255,0.45) 0%, rgba(255,255,255,0) 50%), radial-gradient(ellipse at 30% 40%, rgba(255,255,255,0.35) 0%, rgba(255,255,255,0) 50%), linear-gradient(180deg, #4a8fd6 0%, #77b3e3 55%, #a9cfeb 100%); } .boot-splash-inner { text-align: center; color: #fff; font-family: 'Pixelated MS Sans Serif', Arial, sans-serif; text-shadow: 2px 2px 0 rgba(0,0,0,0.35); } .boot-splash-title { font-size: 48px; font-weight: bold; letter-spacing: 1px; } .boot-splash-sub { font-size: 20px; margin-top: 6px; font-style: italic; opacity: 0.95; } .boot-overlay[data-stage="splash"] .boot-post { display: none; } .boot-overlay[data-stage="splash"] .boot-splash { display: flex; } /* ---- Skip hint ---- */ .boot-skip-hint { position: absolute; bottom: 10px; right: 14px; font-family: 'Courier New', 'Consolas', monospace; font-size: 12px; color: rgba(255, 255, 255, 0.75); text-shadow: 1px 1px 0 rgba(0,0,0,0.5); pointer-events: none; } .boot-overlay[data-stage="post"] .boot-skip-hint { color: #909090; text-shadow: none; } /* ---- Fade-out ---- */ .boot-overlay.boot-fade { opacity: 0; transition: opacity 300ms ease-out; } /* Reduced-motion: skip entirely */ @media (prefers-reduced-motion: reduce) { .boot-overlay { display: none; } }