/* ========================================================================= boot.css — first-visit "old PC boot" sequence + widgets popping up from the footer. Everything here is dormant until gets one of .boot-anim / .boot-active (added by the inline gate script in index.php). ========================================================================= */ /* Pre-animation state: hide the hero + widgets so they can be revealed. */ html.boot-anim .hero-container .terminal-window, html.boot-anim .homepage-main .terminal-window.widget { opacity: 0; } /* Lock scrolling while the boot screen is up. */ html.boot-active, html.boot-active body { overflow: hidden; } /* ------------------------------------------------------------------------- The CRT boot screen ------------------------------------------------------------------------- */ #boot-screen { display: none; position: fixed; inset: 0; z-index: 2147483000; padding: 6vh 7vw; background: #05060a; color: #cfe8d4; font-family: 'Consolas', 'Courier New', monospace; font-size: 15px; line-height: 1.55; overflow: hidden; transform-origin: 50% 50%; } html.boot-active #boot-screen { display: flex; flex-direction: column; justify-content: center; align-items: flex-start; } #boot-log { margin: 0; white-space: pre-wrap; word-break: break-word; text-shadow: 0 0 6px rgba(120, 255, 160, 0.35); } #boot-log .ok { color: #4ee36b; } #boot-log .dim { color: #6f8f77; } #boot-log .hi { color: #00d7e0; font-weight: bold; letter-spacing: 0.08em; } #boot-log .art-row { color: #00d7e0; line-height: 1.1; /* ~2:1 char cell, so the traced art reads round */ letter-spacing: 0; white-space: pre; text-shadow: 0 0 8px rgba(0, 215, 224, 0.55); } /* Keep the whole logo splash on screen at any height — the art is the tall part, so scale the log's type to the viewport for that style. */ #boot-screen[data-boot="logo"] #boot-log { font-size: clamp(8px, min(2.4vw, 2.1vh), 15px); } #boot-screen[data-boot="logo"] .boot-bar { display: none; } .boot-cursor { display: inline-block; width: 9px; height: 1.05em; margin-left: 2px; vertical-align: -2px; background: #4ee36b; box-shadow: 0 0 8px #4ee36b; animation: cx-blink 1s step-end infinite; } .boot-bar { margin-top: 16px; width: min(420px, 70vw); height: 12px; border: 1px solid #2c5c3a; background: #0b1410; } .boot-bar > span { display: block; height: 100%; width: 0; background: #4ee36b; box-shadow: 0 0 10px #4ee36b; transition: width 0.9s linear; } .boot-bar.fill > span { width: 100%; } .boot-skip { position: absolute; right: 7vw; bottom: 5vh; font-size: 12px; letter-spacing: 0.12em; text-transform: uppercase; color: #5c7a63; animation: cx-blink 1.4s step-end infinite; } /* Scanlines + phosphor vignette + faint flicker. */ .boot-scan { position: absolute; inset: 0; pointer-events: none; background: repeating-linear-gradient( rgba(0, 0, 0, 0) 0 2px, rgba(0, 0, 0, 0.22) 2px 4px ); } #boot-screen::after { content: ''; position: absolute; inset: 0; pointer-events: none; box-shadow: inset 0 0 160px 45px rgba(0, 0, 0, 0.85); animation: cx-flicker 0.13s steps(2) infinite; } /* ------------------------------------------------------------------------- Reveal — CRT power-off, hero fades in, widgets pop up from the footer ------------------------------------------------------------------------- */ html.boot-reveal #boot-screen { animation: cx-crt-off 0.55s ease-in forwards; } html.boot-done #boot-screen { display: none; } html.boot-anim.boot-reveal .hero-container .terminal-window { animation: cx-hero-in 0.55s cubic-bezier(0.2, 0.7, 0.2, 1) 0.15s both; } html.boot-anim.boot-reveal .homepage-main .terminal-window.widget { animation: cx-pop-from-footer 0.66s cubic-bezier(0.18, 0.9, 0.28, 1.2) both; transform-origin: 50% 100%; } /* Staggered so they open one after another, like windows off a taskbar. Selector deliberately mirrors the rule above (plus the id class) so it out-specifies the `animation` shorthand's delay reset. */ html.boot-anim.boot-reveal .homepage-main .terminal-window.widget.widget-reading { animation-delay: 0.45s; } html.boot-anim.boot-reveal .homepage-main .terminal-window.widget.widget-blog { animation-delay: 0.58s; } html.boot-anim.boot-reveal .homepage-main .terminal-window.widget.widget-stats { animation-delay: 0.71s; } html.boot-anim.boot-reveal .homepage-main .terminal-window.widget.widget-steam { animation-delay: 0.84s; } html.boot-anim.boot-reveal .homepage-main .terminal-window.widget.widget-xbox { animation-delay: 0.97s; } /* Returning visitors (no boot screen) — snappier, starts right away. */ html.boot-anim:not(.boot-active).boot-reveal .hero-container .terminal-window { animation-delay: 0s; } html.boot-anim:not(.boot-active).boot-reveal .homepage-main .terminal-window.widget.widget-reading { animation-delay: 0.05s; } html.boot-anim:not(.boot-active).boot-reveal .homepage-main .terminal-window.widget.widget-blog { animation-delay: 0.15s; } html.boot-anim:not(.boot-active).boot-reveal .homepage-main .terminal-window.widget.widget-stats { animation-delay: 0.25s; } html.boot-anim:not(.boot-active).boot-reveal .homepage-main .terminal-window.widget.widget-steam { animation-delay: 0.35s; } html.boot-anim:not(.boot-active).boot-reveal .homepage-main .terminal-window.widget.widget-xbox { animation-delay: 0.45s; } @keyframes cx-blink { 50% { opacity: 0; } } @keyframes cx-flicker { 0% { opacity: 0.94; } 100% { opacity: 1; } } @keyframes cx-crt-off { 0% { opacity: 1; transform: scaleX(1) scaleY(1); filter: brightness(1); } 45% { opacity: 1; transform: scaleX(1) scaleY(1); filter: brightness(1.7); } 55% { opacity: 1; transform: scaleX(1.3) scaleY(0.006); filter: brightness(6); } 100% { opacity: 0; transform: scaleX(0) scaleY(0.006); filter: brightness(12); } } @keyframes cx-hero-in { 0% { opacity: 0; transform: scale(0.94); filter: blur(6px); } 100% { opacity: 1; transform: scale(1); filter: blur(0); } } @keyframes cx-pop-from-footer { 0% { opacity: 0; transform: translateY(85vh) scale(0.55); } 55% { opacity: 1; } 80% { transform: translateY(-8px) scale(1.02); } 100% { opacity: 1; transform: translateY(0) scale(1); } } @media (max-width: 768px) { #boot-screen { font-size: 12px; padding: 7vh 6vw; } /* Widgets are statically stacked on mobile — rise straight up, shorter. */ @keyframes cx-pop-from-footer { 0% { opacity: 0; transform: translateY(120px) scale(0.85); } 100% { opacity: 1; transform: translateY(0) scale(1); } } } /* Anyone who prefers reduced motion never gets .boot-anim from the gate script, but guard here too so nothing can stay hidden. */ @media (prefers-reduced-motion: reduce) { html.boot-anim .hero-container .terminal-window, html.boot-anim .homepage-main .terminal-window.widget { opacity: 1 !important; animation: none !important; } #boot-screen { display: none !important; } }