/* ========================================================== CH NET GUARD — Boot Overlay (Phase 9) ---------------------------------------------------------- Terminal-style "system boot" sequence that covers the page on first visit. Activated by the class set by the pre-paint inline script in main.php. The script boot-sequence.js types the lines, marks each line OK/STABLE, then fades out and removes the class. The overlay is opaque to hide unbooted page content. Once .chng-booted is set (after fade-out), pointer-events are disabled and the overlay is fully transparent. ========================================================== */ /* The overlay is HIDDEN by default — only displays when carries the .chng-booting class. This means non- homepage pages, repeat visits, and reduced-motion users never see the boot screen. */ #chng-boot-overlay { display: none; } .chng-booting #chng-boot-overlay { display: flex; position: fixed; inset: 0; z-index: 10000; /* above EVERYTHING */ background: radial-gradient(ellipse 60% 50% at 50% 45%, #060A14 0%, #03040A 70%), #03040A; align-items: center; justify-content: center; color: var(--accent-teal-2, #14D7C3); font-family: 'JetBrains Mono', Consolas, monospace; cursor: default; user-select: none; overflow: hidden; } /* While booting, the page content underneath is fully hidden so users don't see flashes of unbooted layout. */ .chng-booting body > main, .chng-booting body > .map-stage-fixed, .chng-booting body > .site-nav, .chng-booting body > footer { visibility: hidden; } /* Fade-out class added by JS at the end of the sequence. */ .chng-booting #chng-boot-overlay.is-fading { opacity: 0; transition: opacity 380ms ease-out; pointer-events: none; } /* ---------- Inner layout ---------- */ .boot-overlay-inner { width: min(620px, calc(100% - 48px)); display: flex; flex-direction: column; gap: 20px; } .boot-logo { color: var(--accent-gold, #C9A227); opacity: 0; animation: boot-logo-in 380ms 80ms ease-out forwards, boot-logo-pulse 2.4s 600ms ease-in-out infinite; } @keyframes boot-logo-in { from { opacity: 0; transform: translateY(-6px); } to { opacity: 1; transform: translateY(0); } } @keyframes boot-logo-pulse { 0%, 100% { filter: drop-shadow(0 0 4px rgba(201, 162, 39, 0.4)); } 50% { filter: drop-shadow(0 0 14px rgba(201, 162, 39, 0.85)); } } /* ---------- Terminal ---------- */ .boot-term { display: flex; flex-direction: column; gap: 6px; font-size: 14px; line-height: 1.55; } .boot-term-row { display: flex; align-items: center; gap: 10px; /* Each row appears via JS by removing visibility:hidden */ visibility: hidden; } .boot-term-row.is-typing, .boot-term-row.is-done { visibility: visible; } .boot-prompt { color: var(--accent-gold, #C9A227); font-weight: 600; opacity: 0.85; } .boot-cmd { color: rgba(229, 233, 247, 0.92); flex: 0 1 auto; /* No wrapping — keeps the terminal feel cohesive */ white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } /* Status pill (OK / STABLE) — appears AFTER the line types out */ .boot-status { margin-left: auto; padding: 2px 8px; border-radius: 4px; background: rgba(20, 215, 195, 0.12); border: 1px solid rgba(20, 215, 195, 0.45); color: var(--accent-teal-2, #14D7C3); font-size: 11px; letter-spacing: 0.12em; text-transform: uppercase; opacity: 0; transform: translateX(-4px); transition: opacity 180ms ease-out, transform 180ms ease-out; } .boot-term-row.is-done .boot-status { opacity: 1; transform: translateX(0); } /* Final "System ready" row gets a special treatment */ .boot-term-row--final .boot-cmd { color: var(--accent-teal-2, #14D7C3); font-weight: 600; letter-spacing: 0.04em; } /* The blinking cursor on the currently-typing line */ .boot-cmd.is-typing::after { content: ''; display: inline-block; width: 8px; height: 14px; margin-left: 4px; vertical-align: -2px; background: var(--accent-teal-2, #14D7C3); animation: boot-cursor-blink 580ms steps(1) infinite; } @keyframes boot-cursor-blink { 50% { opacity: 0; } } /* Animated dots used while a step is "in progress" */ .boot-cmd [data-boot-dots]::after { content: ''; } .boot-term-row.is-typing.is-dotting .boot-cmd [data-boot-dots]::after { content: '...'; animation: boot-dots 360ms steps(4) infinite; } @keyframes boot-dots { 0% { content: ''; } 25% { content: '.'; } 50% { content: '..'; } 75% { content: '...'; } 100% { content: ''; } } /* ---------- Skip hint ---------- */ .boot-hint { margin-top: 18px; font-size: 11px; letter-spacing: 0.16em; text-transform: uppercase; color: rgba(229, 233, 247, 0.35); opacity: 0; transition: opacity 320ms ease-out; } .boot-hint.is-visible { opacity: 1; } /* ---------- Subtle scanline overlay for cyber-noir mood ---------- */ .chng-booting #chng-boot-overlay::after { content: ''; position: absolute; inset: 0; pointer-events: none; background: repeating-linear-gradient( 0deg, rgba(255, 255, 255, 0.015) 0px, rgba(255, 255, 255, 0.015) 1px, transparent 1px, transparent 3px ); mix-blend-mode: overlay; } /* ---------- Mobile tuning ---------- */ @media (max-width: 640px) { .boot-term { font-size: 12px; } .boot-cmd { white-space: normal; } /* allow wrap on tiny screens */ .boot-status { font-size: 10px; } } /* ---------- Reduced motion — should never apply but defensive ---------- */ @media (prefers-reduced-motion: reduce) { #chng-boot-overlay, .boot-logo, .boot-cmd.is-typing::after { animation: none !important; } }