diff --git a/public/fonts/Orbitron-Bold.ttf b/public/fonts/Orbitron-Bold.ttf
new file mode 100644
index 0000000..9c8643c
Binary files /dev/null and b/public/fonts/Orbitron-Bold.ttf differ
diff --git a/public/fonts/Orbitron-Medium.ttf b/public/fonts/Orbitron-Medium.ttf
new file mode 100644
index 0000000..1feb3ef
Binary files /dev/null and b/public/fonts/Orbitron-Medium.ttf differ
diff --git a/public/fonts/Orbitron-Regular.ttf b/public/fonts/Orbitron-Regular.ttf
new file mode 100644
index 0000000..ebaece0
Binary files /dev/null and b/public/fonts/Orbitron-Regular.ttf differ
diff --git a/public/pages/boot.html b/public/pages/boot.html
new file mode 100644
index 0000000..c178ebb
--- /dev/null
+++ b/public/pages/boot.html
@@ -0,0 +1,162 @@
+<!DOCTYPE html>
+<html>
+ <head>
+ <meta charset="utf-8">
+ <meta name="viewport" content="width=device-width">
+ <title>FireOS Boot Animation - FP650</title>
+ <meta name="description" content="FireOS Boot Animation" />
+ <meta property="og:title" content="FireOS Boot Animation - FP650" />
+ <meta property="og:type" content="website" />
+ <meta property="og:image" content="https://firepup650.com/favicon.ico" />
+ <meta property="og:image:height" content="512" />
+ <meta property="og:image:width" content="512" />
+ <meta property="og:url" content="https://firepup650.com/boot" />
+ <meta property="og:description" content="FireOS Boot Animation" />
+ <meta property="og:site_name" content="Firepup650's Site" />
+ <meta property="og:locale" content="en_US">
+ <meta property="og:logo" content="https://firepup650.com/favicon.ico" />
+ <link href="/styles/style.css" rel="stylesheet" type="text/css" />
+ <link href="/styles/FireOSBootAnimation.css" rel="stylesheet" type="text/css" />
+ <!-- Using local Orbitron fonts from /fonts directory -->
+ <script>
+ function getVersionNumber() {
+ const startDate = new Date('2006-11-29');
+ const today = new Date();
+
+ // Calculate difference in milliseconds
+ const diffTime = today - startDate;
+
+ // Convert to years with 2 decimal places
+ const diffYears = (diffTime / (1000 * 60 * 60 * 24 * 365.25)).toFixed(2);
+
+ return diffYears;
+ }
+
+ // Update all version numbers when the DOM is loaded
+ document.addEventListener('DOMContentLoaded', function() {
+ const versionNumber = getVersionNumber();
+
+ // Update BIOS header
+ const biosHeader = document.querySelector('.bios-header');
+ if (biosHeader) {
+ biosHeader.textContent = `FIRE_OS BIOS v${versionNumber}`;
+ }
+
+ // Update boot complete message
+ const bootCompleteMessage = document.querySelector('.boot-complete-message');
+ if (bootCompleteMessage) {
+ bootCompleteMessage.textContent = `FireOS v${versionNumber} is fully operational`;
+ }
+
+ // Update logo subtitle if needed
+ const logoSubtitle = document.querySelector('.logo-subtitle');
+ if (logoSubtitle) {
+ logoSubtitle.textContent = `ProtoKitty Operating System v${versionNumber}`;
+ }
+ });
+ </script>
+ </head>
+ <body>
+ <h5 hidden id='Maintenance' class="center"></h5>
+
+ <!-- Fire OS Boot Animation container -->
+ <div id="fire-os-boot-container" class="fire-os-boot-container">
+ <div class="boot-scan-line"></div>
+
+ <div class="boot-visor-frame">
+ <div class="visor-left-ear"></div>
+ <div class="visor-right-ear"></div>
+
+ <div class="boot-visor">
+ <div class="visor-line top"></div>
+ <div class="visor-line bottom"></div>
+
+ <!-- Boot Sequence Content -->
+ <div class="boot-content">
+ <!-- BIOS Check -->
+ <div class="boot-stage boot-stage-2">
+ <div class="bios-header">FIRE_OS BIOS</div>
+ <div class="boot-text-line">Initializing hardware...</div>
+ <div class="boot-text-line">CPU: ProtoCore i9 @ 4.7GHz</div>
+ <div class="boot-text-line">Memory: 16GB NeuralRAM</div>
+ <div class="boot-text-line">Checking system integrity... OK</div>
+ <div class="boot-text-line">Starting boot sequence...</div>
+ </div>
+
+ <!-- System Scan -->
+ <div class="boot-stage boot-stage-3">
+ <div class="scan-header">SYSTEM SCAN</div>
+ <div class="scan-progress-container">
+ <div class="scan-progress-bar"></div>
+ </div>
+ <div class="scan-detail">Checking vital systems...</div>
+ <div class="scan-detail">Initializing neural pathways...</div>
+ <div class="scan-detail">Activating sensory modules...</div>
+ <div class="scan-detail">All systems nominal</div>
+ </div>
+
+ <!-- Module Loading -->
+ <div class="boot-stage boot-stage-4">
+ <div class="module-header">LOADING CORE MODULES</div>
+ <div class="modules-grid">
+ <div class="module-item">
+ <div class="module-icon"></div>
+ <div class="module-name">ProtoKittyCore</div>
+ </div>
+ <div class="module-item">
+ <div class="module-icon"></div>
+ <div class="module-name">NeuralNet</div>
+ </div>
+ <div class="module-item">
+ <div class="module-icon"></div>
+ <div class="module-name">VisorDisplay</div>
+ </div>
+ <div class="module-item">
+ <div class="module-icon"></div>
+ <div class="module-name">KittyTraits</div>
+ </div>
+ </div>
+ </div>
+
+ <!-- Protogen Protocol -->
+ <div class="boot-stage boot-stage-5">
+ <div class="protogen-header">ACTIVATING PROTOGEN PROTOCOLS</div>
+ <div class="protogen-trait">Feline module: Online</div>
+ <div class="protogen-trait">Kitty ears: Calibrated</div>
+ <div class="protogen-trait">Cuteness factor: Maximum</div>
+ <div class="protogen-trait">Mischief subroutines: Loaded</div>
+ <div class="protogen-trait">ProtoKitty integration: Complete</div>
+ </div>
+
+ <!-- Logo Display -->
+ <div class="boot-stage boot-stage-6 logo-display">
+ <div class="fire-os-logo">
+ <span class="logo-fire">Fire</span>
+ <span class="logo-os">OS</span>
+ </div>
+ <div class="logo-subtitle">ProtoKitty Operating System</div>
+ </div>
+
+ <!-- System Ready -->
+ <div class="boot-stage boot-stage-7 system-ready">
+ <div class="ready-status">SYSTEM ACTIVATED</div>
+ <div class="welcome-message">Welcome back, ProtoKitty</div>
+ <div class="boot-complete-message">FireOS is fully operational</div>
+ </div>
+ </div>
+ </div>
+ </div>
+
+ <!-- Skip button -->
+ <button id="skip-boot-button" class="skip-button">
+ SKIP BOOT SEQUENCE
+ </button>
+ </div>
+
+ <!-- No visible content needed since we'll redirect automatically -->
+ <div id="page-content" style="display: none;"></div>
+
+ <script src="/scripts/FireOSBootAnimation.js"></script>
+ <script src="/scripts/script.js"></script>
+ </body>
+</html>
diff --git a/public/pages/index.html b/public/pages/index.html
index 65feeeb..4b76fa5 100644
--- a/public/pages/index.html
+++ b/public/pages/index.html
@@ -23,6 +23,8 @@
<h5 hidden id='Maintenance' class="center"></h5>
<span class=center>
<h5 class="force-color">Welcome to my site!</h5>
+ <a href="/boot" class="cyan">View Boot Animation</a>
+ <br/>
<a href="/maintenance" class="cyan">Go to the Maintenance page</a>
<br/>
<a href="/dvd-screensaver" class="cyan">Go to the DVD Screensaver page</a>
@@ -55,6 +57,7 @@
<br/>
<a href="/neofetches" class="cyan">Go to the Neofetches page</a>
</span>
+ <!-- <script src="/scripts/first-visit.js"></script> -->
<script src="/scripts/script.js"></script>
</body>
</html>
diff --git a/public/scripts/FireOSBootAnimation.js b/public/scripts/FireOSBootAnimation.js
new file mode 100644
index 0000000..3051f2e
--- /dev/null
+++ b/public/scripts/FireOSBootAnimation.js
@@ -0,0 +1,159 @@
+function FireOSBootAnimation(options = {}) {
+ const defaults = {
+ containerId: 'fire-os-boot-container',
+ skipButtonId: 'skip-boot-button',
+ onComplete: null,
+ skipAnimation: false,
+ primaryColor: '#0F0',
+ secondaryColor: '#F05',
+ kittyColor: '#e49'
+ };
+
+ const settings = Object.assign({}, defaults, options);
+ let bootStage = 0;
+ let bootComplete = false;
+ let currentTimeout = null;
+
+ // Initialize boot sequence with proper timing (slightly faster)
+ const bootSequence = [
+ { stage: 1, delay: 500 }, // Initial screen flicker
+ { stage: 2, delay: 2000 }, // BIOS check
+ { stage: 3, delay: 2500 }, // System scan
+ { stage: 4, delay: 2500 }, // Loading modules
+ { stage: 5, delay: 2500 }, // Protogen protocols
+ { stage: 6, delay: 2000 }, // Show logo
+ { stage: 7, delay: 2000 }, // Final activation
+ { stage: 8, delay: 1000 } // Fade out
+ ];
+
+ function init() {
+ const container = document.getElementById(settings.containerId);
+ if (!container) {
+ console.error('FireOS Boot container not found');
+ return;
+ }
+
+ // Set up skip button event listener
+ const skipButton = document.getElementById(settings.skipButtonId);
+ if (skipButton) {
+ skipButton.addEventListener('click', handleSkip);
+ }
+
+ if (settings.skipAnimation) {
+ handleAnimationComplete();
+ } else {
+ // Start boot sequence
+ runNextStage(0);
+ }
+ }
+
+ function runNextStage(currentIndex) {
+ if (currentIndex >= bootSequence.length) {
+ handleAnimationComplete();
+ return;
+ }
+
+ const { stage, delay } = bootSequence[currentIndex];
+
+ // Clear all active stages
+ document.querySelectorAll('.boot-stage').forEach(el => {
+ el.classList.remove('active');
+ });
+
+ // Reset content visibility
+ document.querySelectorAll('.boot-content').forEach(el => {
+ el.classList.remove('active');
+ });
+
+ // Short delay to allow for transition
+ setTimeout(() => {
+ // First ensure boot content is visible
+ document.querySelectorAll('.boot-content').forEach(el => {
+ el.classList.add('active');
+ });
+
+ // Then activate the correct stage
+ bootStage = stage;
+ activateCurrentStage();
+
+ if (stage === 6) {
+ showLogo();
+ } else if (stage === 7) {
+ setBootComplete();
+ }
+ }, 300);
+
+ // Schedule next stage
+ currentTimeout = setTimeout(() => {
+ runNextStage(currentIndex + 1);
+ }, delay);
+ }
+
+ function activateCurrentStage() {
+ const stageEl = document.querySelector(`.boot-stage-${bootStage}`);
+ if (stageEl) {
+ stageEl.classList.add('active');
+ }
+ }
+
+ function showLogo() {
+ const logoEl = document.querySelector('.logo-display');
+ if (logoEl) {
+ logoEl.classList.add('active');
+ }
+ }
+
+ function setBootComplete() {
+ bootComplete = true;
+ const readyEl = document.querySelector('.system-ready');
+ if (readyEl) {
+ readyEl.classList.add('active');
+ }
+ }
+
+ function handleAnimationComplete() {
+ if (currentTimeout) {
+ clearTimeout(currentTimeout);
+ }
+
+ const container = document.getElementById(settings.containerId);
+ if (container) {
+ // Add fade-out class
+ container.classList.add('fade-out');
+
+ // Always redirect back after animation completes
+ setTimeout(() => {
+ container.style.display = 'none';
+
+ // Execute onComplete callback if provided
+ if (typeof settings.onComplete === 'function') {
+ settings.onComplete();
+ }
+
+ // Always redirect back to main page or the saved page
+ const returnPage = localStorage.getItem('returnAfterBoot') || '/';
+ localStorage.removeItem('returnAfterBoot');
+
+ // Redirect back to the original page
+ window.location.href = returnPage;
+ }, 1000);
+ }
+ }
+
+ function handleSkip() {
+ handleAnimationComplete();
+ }
+
+ return {
+ init,
+ handleSkip
+ };
+}
+
+// On document load, initialize the boot animation
+document.addEventListener('DOMContentLoaded', function() {
+ // Initialize and start the boot animation immediately
+ FireOSBootAnimation().init();
+});
+
+
diff --git a/public/scripts/first-visit.js b/public/scripts/first-visit.js
new file mode 100644
index 0000000..1d24dd4
--- /dev/null
+++ b/public/scripts/first-visit.js
@@ -0,0 +1,24 @@
+(function() {
+ // Skip boot animation if coming back from the boot page or if in development mode
+ if (document.referrer.includes('/boot')) {
+ console.log('Skipping boot animation (returning from boot page)');
+ localStorage.setItem('hasVisitedBefore', 'true');
+ return;
+ }
+
+ // Check if this is the first visit
+ if (!localStorage.getItem('hasVisitedBefore')) {
+ // First visit - save the current path and redirect to boot animation
+ localStorage.setItem('hasVisitedBefore', 'true');
+
+ // Store the current page to return to after boot
+ const currentPage = window.location.pathname;
+ localStorage.setItem('returnAfterBoot', currentPage);
+
+ // Redirect to boot animation
+ console.log('First visit detected, redirecting to boot animation');
+ window.location.href = '/boot';
+ } else {
+ console.log('Returning visitor, skipping boot animation');
+ }
+})();
\ No newline at end of file
diff --git a/public/styles/FireOSBootAnimation.css b/public/styles/FireOSBootAnimation.css
new file mode 100644
index 0000000..ec56e61
--- /dev/null
+++ b/public/styles/FireOSBootAnimation.css
@@ -0,0 +1,539 @@
+/* Orbitron font for futuristic boot animation */
+@font-face {
+ font-family: 'Orbitron';
+ src: url('/fonts/orbitron-regular.ttf') format('truetype');
+ font-weight: normal;
+ font-style: normal;
+}
+
+@font-face {
+ font-family: 'Orbitron';
+ src: url('/fonts/orbitron-medium.ttf') format('truetype');
+ font-weight: 500;
+ font-style: normal;
+}
+
+@font-face {
+ font-family: 'Orbitron';
+ src: url('/fonts/orbitron-bold.ttf') format('truetype');
+ font-weight: bold;
+ font-style: normal;
+}
+/* Full screen overlay */
+.fire-os-boot-container {
+ position: fixed;
+ inset: 0;
+ background-color: #000;
+ z-index: 9999;
+ display: flex;
+ align-items: center;
+ justify-content: center;
+ font-family: 'Orbitron', monospace;
+ color: #0F0;
+ overflow: hidden;
+}
+
+.fire-os-boot-container.fade-out {
+ animation: fadeOut 0.8s forwards;
+}
+
+@keyframes fadeOut {
+ from { opacity: 1; }
+ to { opacity: 0; visibility: hidden; }
+}
+
+/* Scanning animation effect */
+.boot-scan-line {
+ position: absolute;
+ left: 0;
+ width: 100%;
+ height: 4px;
+ background: linear-gradient(90deg,
+ rgba(0, 229, 255, 0) 0%,
+ rgba(0, 229, 255, 0.8) 50%,
+ rgba(0, 229, 255, 0) 100%);
+ box-shadow: 0 0 10px rgba(0, 229, 255, 0.8);
+ animation: scanAnimation 3s linear infinite;
+ pointer-events: none;
+}
+
+@keyframes scanAnimation {
+ 0% { top: -10px; }
+ 100% { top: 100vh; }
+}
+
+/* Kitty ear decorations */
+.visor-left-ear,
+.visor-right-ear {
+ position: absolute;
+ width: 40px;
+ height: 40px;
+ background-color: #e49;
+ top: -20px;
+ z-index: 2;
+}
+
+.visor-left-ear {
+ left: calc(50% - 100px);
+ transform: rotate(45deg);
+ border-radius: 0 0 0 20px;
+ transform-origin: bottom right;
+ animation: earTwitch 4s ease-in-out infinite;
+}
+
+.visor-right-ear {
+ right: calc(50% - 100px);
+ transform: rotate(-45deg);
+ border-radius: 0 0 20px 0;
+ transform-origin: bottom left;
+ animation: earTwitchRight 4s ease-in-out infinite;
+}
+
+@keyframes earTwitch {
+ 0%, 100% { transform: rotate(45deg); }
+ 50% { transform: rotate(30deg); }
+}
+
+@keyframes earTwitchRight {
+ 0%, 100% { transform: rotate(-45deg); }
+ 50% { transform: rotate(-30deg); }
+}
+
+/* Main visor frame - more angular for protogen look */
+.boot-visor-frame {
+ position: relative;
+ width: 80%;
+ max-width: 800px;
+ height: 60vh;
+ max-height: 600px;
+ border: 2px solid #0F0;
+ border-radius: 5px;
+ box-shadow: 0 0 20px rgba(0, 255, 0, 0.5);
+ overflow: hidden;
+ background-color: rgba(0, 10, 15, 0.95);
+}
+
+.boot-visor {
+ position: relative;
+ width: 100%;
+ height: 100%;
+ display: flex;
+ align-items: center;
+ justify-content: center;
+ padding: 20px;
+ overflow: hidden;
+}
+
+/* Visor top and bottom glowing lines */
+.visor-line {
+ position: absolute;
+ left: 0;
+ width: 100%;
+ height: 3px;
+ background-color: #0F0;
+ box-shadow: 0 0 10px #0F0;
+ animation: glowPulse 2s ease-in-out infinite;
+}
+
+.visor-line.top {
+ top: 0;
+}
+
+.visor-line.bottom {
+ bottom: 0;
+}
+
+@keyframes glowPulse {
+ 0%, 100% { opacity: 1; box-shadow: 0 0 10px #0F0, 0 0 20px rgba(0, 255, 0, 0.5); }
+ 50% { opacity: 0.7; box-shadow: 0 0 15px #0F0, 0 0 30px rgba(0, 255, 0, 0.7); }
+}
+
+/* Boot content area */
+.boot-content {
+ width: 100%;
+ height: 100%;
+ position: relative;
+ opacity: 0;
+ transition: opacity 0.3s ease;
+ transform: translateY(0);
+}
+
+.boot-content.active {
+ opacity: 1;
+}
+
+/* Common styles for all boot stages */
+.boot-stage {
+ position: absolute;
+ width: 80%;
+ max-width: 600px;
+ left: 50%;
+ top: 50%;
+ transform: translate(-50%, -50%);
+ margin: 0 auto;
+ padding: 20px;
+ background-color: rgba(0, 0, 0, 0.6);
+ border: 1px solid rgba(0, 255, 0, 0.3);
+ border-radius: 5px;
+ opacity: 0;
+ visibility: hidden;
+ display: none;
+ transition: opacity 0.3s ease, visibility 0.3s ease;
+ max-height: 80%;
+ overflow-y: auto;
+ z-index: 1;
+}
+
+.boot-stage.active {
+ opacity: 1;
+ visibility: visible;
+ display: block;
+ z-index: 10;
+}
+
+/* Hide scrollbar but allow scrolling */
+.boot-stage::-webkit-scrollbar {
+ width: 3px;
+}
+
+.boot-stage::-webkit-scrollbar-track {
+ background: rgba(0, 0, 0, 0.2);
+}
+
+.boot-stage::-webkit-scrollbar-thumb {
+ background: rgba(0, 255, 0, 0.3);
+}
+
+/* BIOS Stage */
+.bios-header {
+ font-size: 24px;
+ margin-bottom: 20px;
+ color: #F05;
+ text-align: center;
+ text-shadow: 0 0 10px rgba(255, 0, 92, 0.7);
+}
+
+.boot-text-line {
+ font-family: 'Courier New', monospace;
+ font-size: 14px;
+ margin: 8px 0;
+ color: #8be;
+ white-space: nowrap;
+ overflow: hidden;
+ animation: typeWriter 0.8s steps(50, end);
+}
+
+@keyframes typeWriter {
+ from { width: 0; }
+ to { width: 100%; }
+}
+
+/* System Scan Stage */
+.scan-header {
+ font-size: 20px;
+ margin-bottom: 15px;
+ color: #F05;
+ text-align: center;
+ text-shadow: 0 0 10px rgba(255, 0, 92, 0.7);
+}
+
+.scan-progress-container {
+ width: 100%;
+ height: 10px;
+ background-color: rgba(0, 0, 0, 0.5);
+ border: 1px solid rgba(0, 255, 0, 0.5);
+ border-radius: 5px;
+ margin: 20px 0;
+ overflow: hidden;
+}
+
+.scan-progress-bar {
+ height: 100%;
+ background: linear-gradient(90deg, #0F0, #F05);
+ width: 0;
+ animation: progressFill 1.5s ease-in-out forwards;
+}
+
+@keyframes progressFill {
+ 0% { width: 0; }
+ 100% { width: 100%; }
+}
+
+.scan-detail {
+ font-family: 'Courier New', monospace;
+ font-size: 14px;
+ margin: 8px 0;
+ color: #8be;
+}
+
+/* Module Loading Stage */
+.module-header {
+ font-size: 20px;
+ margin-bottom: 15px;
+ color: #F05;
+ text-align: center;
+ text-shadow: 0 0 10px rgba(255, 0, 92, 0.7);
+}
+
+.modules-grid {
+ display: grid;
+ grid-template-columns: 1fr 1fr;
+ gap: 15px;
+ margin-top: 20px;
+}
+
+.module-item {
+ display: flex;
+ align-items: center;
+ padding: 10px;
+ background-color: rgba(0, 0, 0, 0.3);
+ border: 1px solid rgba(0, 255, 0, 0.2);
+ border-radius: 5px;
+ animation: moduleLoad 0.8s ease forwards;
+ opacity: 0;
+}
+
+.module-item:nth-child(1) { animation-delay: 0.15s; }
+.module-item:nth-child(2) { animation-delay: 0.3s; }
+.module-item:nth-child(3) { animation-delay: 0.45s; }
+.module-item:nth-child(4) { animation-delay: 0.6s; }
+
+@keyframes moduleLoad {
+ 0% { opacity: 0; transform: translateX(-20px); }
+ 100% { opacity: 1; transform: translateX(0); }
+}
+
+.module-icon {
+ width: 20px;
+ height: 20px;
+ border-radius: 50%;
+ background-color: #0F0;
+ margin-right: 10px;
+ animation: iconPulse 2s infinite;
+}
+
+@keyframes iconPulse {
+ 0%, 100% { transform: scale(1); box-shadow: 0 0 5px #0F0; }
+ 50% { transform: scale(1.1); box-shadow: 0 0 10px #0F0; }
+}
+
+.module-name {
+ font-size: 14px;
+ color: #fff;
+}
+
+/* Protogen Protocol Stage */
+.protogen-header {
+ font-size: 20px;
+ margin-bottom: 15px;
+ color: #e49;
+ text-align: center;
+ text-shadow: 0 0 10px rgba(228, 148, 255, 0.7);
+}
+
+.protogen-trait {
+ font-family: 'Courier New', monospace;
+ font-size: 14px;
+ margin: 10px 0;
+ color: #e49;
+ padding-left: 20px;
+ position: relative;
+ opacity: 0;
+ animation: traitAppear 0.4s ease forwards;
+}
+
+.protogen-trait:nth-child(2) { animation-delay: 0.15s; }
+.protogen-trait:nth-child(3) { animation-delay: 0.3s; }
+.protogen-trait:nth-child(4) { animation-delay: 0.45s; }
+.protogen-trait:nth-child(5) { animation-delay: 0.6s; }
+.protogen-trait:nth-child(6) { animation-delay: 0.75s; }
+
+@keyframes traitAppear {
+ 0% { opacity: 0; transform: translateX(-10px); }
+ 100% { opacity: 1; transform: translateX(0); }
+}
+
+.protogen-trait::before {
+ content: '>';
+ position: absolute;
+ left: 0;
+ color: #e49;
+}
+
+/* Logo Display Stage */
+.logo-display {
+ display: flex;
+ flex-direction: column;
+ align-items: center;
+ justify-content: center;
+}
+
+.fire-os-logo {
+ font-size: 48px;
+ font-weight: bold;
+ margin-bottom: 10px;
+ text-align: center;
+ background: linear-gradient(90deg, #e49, #0F0);
+ -webkit-background-clip: text;
+ -webkit-text-fill-color: transparent;
+ background-clip: text;
+ text-fill-color: transparent;
+ text-shadow: 0 0 20px rgba(0, 255, 0, 0.5);
+ opacity: 0;
+ animation: logoAppear 0.8s ease forwards;
+}
+
+.logo-fire {
+ color: #e49;
+}
+
+.logo-os {
+ color: #0F0;
+}
+
+.logo-subtitle {
+ font-size: 16px;
+ color: #fff;
+ opacity: 0;
+ animation: logoAppear 0.8s ease forwards 0.4s;
+ text-align: center;
+}
+
+@keyframes logoAppear {
+ 0% { opacity: 0; transform: scale(0.9); }
+ 100% { opacity: 1; transform: scale(1); }
+}
+
+/* System Ready Stage */
+.system-ready {
+ text-align: center;
+}
+
+.ready-status {
+ font-size: 28px;
+ margin-bottom: 15px;
+ color: #0F0;
+ animation: textPulse 2s infinite;
+}
+
+@keyframes textPulse {
+ 0%, 100% { opacity: 1; }
+ 50% { opacity: 0.7; }
+}
+
+.welcome-message {
+ font-size: 18px;
+ margin-bottom: 5px;
+ color: #fff;
+}
+
+.boot-complete-message {
+ font-size: 14px;
+ color: #8be;
+ margin-top: 20px;
+}
+
+/* Skip button */
+.skip-button {
+ position: absolute;
+ bottom: 40px;
+ left: 50%;
+ transform: translateX(-50%);
+ background-color: rgba(255, 0, 80, 0.3);
+ color: white;
+ border: 1px solid rgba(255, 0, 80, 0.5);
+ border-radius: 5px;
+ padding: 10px 20px;
+ font-family: 'Orbitron', sans-serif;
+ font-size: 14px;
+ font-weight: bold;
+ cursor: pointer;
+ transition: all 0.3s ease;
+ z-index: 100;
+ animation: skipPulse 2s infinite;
+ box-shadow: 0 0 10px rgba(255, 0, 80, 0.3);
+}
+
+.skip-button:hover {
+ background-color: rgba(255, 0, 80, 0.7);
+ color: white;
+ border-color: rgba(255, 0, 80, 0.8);
+ box-shadow: 0 0 15px rgba(255, 0, 80, 0.5);
+ transform: translateX(-50%) scale(1.05);
+}
+
+@keyframes skipPulse {
+ 0%, 100% { opacity: 1; }
+ 50% { opacity: 0.7; }
+}
+
+/* Responsiveness */
+@media (max-width: 768px) {
+ .boot-visor-frame {
+ width: 95%;
+ height: 80vh;
+ }
+
+ .visor-left-ear, .visor-right-ear {
+ width: 30px;
+ height: 30px;
+ top: -15px;
+ }
+
+ .visor-left-ear {
+ left: calc(50% - 70px);
+ }
+
+ .visor-right-ear {
+ right: calc(50% - 70px);
+ }
+
+ .boot-visor {
+ padding: 15px;
+ }
+
+ .boot-stage {
+ width: 90%;
+ padding: 15px;
+ }
+
+ .modules-grid {
+ grid-template-columns: 1fr;
+ }
+
+ .bios-header, .scan-header, .module-header, .protogen-header {
+ font-size: 18px;
+ }
+
+ .fire-os-logo {
+ font-size: 36px;
+ }
+
+ .logo-subtitle {
+ font-size: 14px;
+ }
+
+ .ready-status {
+ font-size: 24px;
+ }
+}
+
+@media (max-width: 480px) {
+ .boot-stage {
+ width: 95%;
+ padding: 10px;
+ }
+
+ .bios-header, .scan-header, .module-header, .protogen-header {
+ font-size: 16px;
+ }
+
+ .boot-text-line, .scan-detail, .protogen-trait {
+ font-size: 12px;
+ }
+
+ .skip-button {
+ padding: 8px 16px;
+ font-size: 12px;
+ }
+}
\ No newline at end of file