#loader-overlay { position: fixed; inset: 0; z-index: 999999; background: #000; display: flex; justify-content: center; align-items: center; font-family: "Orbitron", sans-serif; transition: opacity 0.6s ease; } #loader-overlay.fade-out { opacity: 0; pointer-events: none; } #matrix-canvas { position: fixed; inset: 0; opacity: 0.18; z-index: 0; } .lo-bg-glow { position: fixed; top: 50%; left: 50%; transform: translate(-50%, -50%); width: 700px; height: 700px; background: radial-gradient( circle, rgba(0, 80, 160, 0.15) 0%, transparent 65% ); z-index: 0; animation: loglowPulse 3s ease-in-out infinite; } @keyframes loglowPulse { 0%, 100% { transform: translate(-50%, -50%) scale(1); opacity: 0.8; } 50% { transform: translate(-50%, -50%) scale(1.1); opacity: 1; } } .lo-wrap { position: relative; z-index: 10; display: flex; flex-direction: column; align-items: center; gap: 24px; text-align: center; } .lo-logo-mark { position: relative; width: 100px; height: 100px; display: flex; align-items: center; justify-content: center; } .lo-ring { position: absolute; inset: 0; border-radius: 50%; border: 1px solid rgba(0, 195, 255, 0.25); animation: loRingSpin 4s linear infinite; } .lo-ring::before { content: ""; position: absolute; top: -3px; left: 50%; transform: translateX(-50%); width: 6px; height: 6px; background: #00c3ff; border-radius: 50%; box-shadow: 0 0 12px #00c3ff, 0 0 24px rgba(0, 195, 255, 0.5); } .lo-ring-2 { position: absolute; inset: 12px; border-radius: 50%; border: 1px solid rgba(255, 255, 255, 0.08); animation: loRingSpin 6s linear infinite reverse; } @keyframes loRingSpin { to { transform: rotate(360deg); } } .lo-icon { font-size: 2.2rem; font-weight: 900; color: #fff; letter-spacing: -2px; text-shadow: 0 0 20px rgba(0, 195, 255, 0.8), 0 0 50px rgba(0, 100, 200, 0.4); animation: loIconPulse 2.5s ease-in-out infinite; } @keyframes loIconPulse { 0%, 100% { text-shadow: 0 0 20px rgba(0, 195, 255, 0.7), 0 0 50px rgba(0, 100, 200, 0.3); } 50% { text-shadow: 0 0 35px rgba(0, 195, 255, 1), 0 0 80px rgba(0, 100, 200, 0.6); } } .lo-brand { font-size: clamp(1.4rem, 4vw, 1.9rem); font-weight: 700; letter-spacing: 6px; color: #fff; opacity: 0; animation: loFadeUp 0.8s 0.4s ease forwards; } .lo-sub { font-family: "Inter", sans-serif; font-size: 0.75rem; letter-spacing: 3.5px; text-transform: uppercase; color: rgba(0, 195, 255, 0.7); opacity: 0; animation: loFadeUp 0.8s 0.7s ease forwards; } @keyframes loFadeUp { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: translateY(0); } } .lo-progress-wrap { width: 220px; opacity: 0; animation: loFadeUp 0.6s 1s ease forwards; } .lo-track { width: 100%; height: 2px; background: rgba(255, 255, 255, 0.06); border-radius: 1px; overflow: hidden; } .lo-fill { height: 100%; width: 0%; background: linear-gradient(90deg, #00c3ff, #0044ff, #00c3ff); background-size: 200% 100%; border-radius: 1px; transition: width 0.06s linear; animation: loShimmer 1.5s linear infinite; } @keyframes loShimmer { from { background-position: 200% 0; } to { background-position: -200% 0; } } .lo-pct { margin-top: 10px; font-size: 0.65rem; letter-spacing: 2px; color: rgba(255, 255, 255, 0.25); text-align: center; } .lo-status { font-family: "Inter", sans-serif; font-size: 0.72rem; letter-spacing: 2px; text-transform: uppercase; color: rgba(255, 255, 255, 0.2); min-height: 1.2em; opacity: 0; animation: loFadeUp 0.6s 1.2s ease forwards; } .lo-corner { position: fixed; width: 40px; height: 40px; opacity: 0.25; } .lo-tl { top: 24px; left: 24px; border-top: 1px solid #fff; border-left: 1px solid #fff; } .lo-tr { top: 24px; right: 24px; border-top: 1px solid #fff; border-right: 1px solid #fff; } .lo-bl { bottom: 24px; left: 24px; border-bottom: 1px solid #fff; border-left: 1px solid #fff; } .lo-br { bottom: 24px; right: 24px; border-bottom: 1px solid #fff; border-right: 1px solid #fff; } .lo-scan { position: fixed; left: 0; right: 0; height: 1px; background: linear-gradient( 90deg, transparent, rgba(0, 195, 255, 0.18), transparent ); animation: loScan 3s linear infinite; z-index: 5; pointer-events: none; } @keyframes loScan { from { top: -1%; } to { top: 101%; } }