/* Loader.css — Ultra Neon Boot */ .loader { position:fixed; inset:0; background: #020008; display:flex; align-items:center; justify-content:center; z-index:9999; overflow:hidden; } .loader-scan { position:absolute; inset:0; background: linear-gradient(180deg, transparent 0%, rgba(0,255,238,0.04) 50%, transparent 100%); animation: scanLine 2s linear infinite; } @keyframes scanLine { from { transform:translateY(-100%); } to { transform:translateY(100vh); } } .loader-grid { position:absolute; inset:0; background-image: linear-gradient(rgba(124,58,237,0.05) 1px, transparent 1px), linear-gradient(90deg, rgba(124,58,237,0.05) 1px, transparent 1px); background-size:60px 60px; animation: gridPulse 2s ease-in-out infinite alternate; } @keyframes gridPulse { from { opacity:0.5; } to { opacity:1; } } .loader-inner { display:flex; flex-direction:column; align-items:center; gap:24px; position:relative; z-index:1; animation: loaderIn 0.6s cubic-bezier(0.19,1,0.22,1) forwards; } @keyframes loaderIn { from { opacity:0; transform:translateY(30px) scale(0.9); } to { opacity:1; transform:none; } } .loader-logo { width:90px; height:90px; border-radius:28px; background: linear-gradient(135deg, #7c3aed, #06b6d4, #10b981); background-size: 200% 200%; display:flex; align-items:center; justify-content:center; animation: logoSpin 3s ease-in-out infinite, gradFlow 3s ease infinite; box-shadow: 0 0 40px rgba(124,58,237,0.8), 0 0 80px rgba(0,255,238,0.3); position:relative; } @keyframes logoSpin { 0%,100% { border-radius:28px; transform:rotate(0deg); } 25% { border-radius:50%; transform:rotate(5deg); } 75% { border-radius:20px; transform:rotate(-5deg); } } @keyframes gradFlow { 0% { background-position:0% 50%; } 50% { background-position:100% 50%; } 100%{ background-position:0% 50%; } } .loader-logo::before { content:''; position:absolute; inset:-3px; border-radius:inherit; background: linear-gradient(135deg, #00ffee, #bf00ff, #ff0080, #00ffee); background-size:300% 300%; border-radius:30px; z-index:-1; animation: borderSpin 2s linear infinite; padding:3px; } @keyframes borderSpin { 0% { background-position:0% 50%; } 100%{ background-position:200% 50%; } } .loader-logo span { font-family:'Orbitron',monospace; font-size:42px; font-weight:900; color:#fff; text-shadow: 0 0 20px rgba(255,255,255,0.8); z-index:1; } .loader-name { font-family:'Orbitron',monospace; font-size:11px; font-weight:700; letter-spacing:0.6em; color:rgba(0,255,238,0.7); text-shadow:0 0 20px rgba(0,255,238,0.5); animation: namePulse 1.5s ease-in-out infinite alternate; } @keyframes namePulse { from { opacity:0.5; letter-spacing:0.5em; } to { opacity:1; letter-spacing:0.7em; } } .loader-bar-wrap { width:220px; height:3px; background:rgba(255,255,255,0.06); border-radius:3px; overflow:hidden; box-shadow: 0 0 10px rgba(124,58,237,0.3); } .loader-bar { height:100%; background: linear-gradient(90deg, #7c3aed, #00ffee, #bf00ff); background-size:200% 100%; border-radius:3px; transition:width 0.1s linear; animation:barGlow 1s ease-in-out infinite alternate; box-shadow:0 0 8px rgba(0,255,238,0.6); } @keyframes barGlow { from { box-shadow:0 0 8px rgba(0,255,238,0.4); } to { box-shadow:0 0 16px rgba(0,255,238,0.9), 0 0 30px rgba(0,255,238,0.4); } } .loader-text { font-family:'Rajdhani',sans-serif; font-size:12px; color:rgba(255,255,255,0.3); letter-spacing:0.15em; animation: textBlink 1.2s step-end infinite; } @keyframes textBlink { 50% { opacity:0.2; } }