@keyframes pulse { 0%, 100% { opacity: 1; } 50% { opacity: 0.7; } } @keyframes float { 0%, 100% { transform: translateY(0px); } 50% { transform: translateY(-15px); } } @keyframes spin { from { transform: rotate(0deg); } to { transform: rotate(360deg); } } @keyframes glitch { 0% { clip-path: inset(80% 0 0 0); transform: translate(-2px, 2px); } 20% { clip-path: inset(10% 0 60% 0); transform: translate(2px, -2px); } 40% { clip-path: inset(40% 0 20% 0); transform: translate(2px, 2px); } 60% { clip-path: inset(5% 0 75% 0); transform: translate(-2px, -2px); } 80% { clip-path: inset(70% 0 5% 0); transform: translate(-2px, 2px); } 100% { clip-path: inset(80% 0 0 0); transform: translate(2px, -2px); } } @keyframes scanline { 0% { transform: translateY(-100%); } 100% { transform: translateY(100%); } } @keyframes radialBreath { 0%, 100% { box-shadow: 0 0 25px 5px rgba(88, 101, 242, 0.7), 0 0 50px 15px rgba(88, 101, 242, 0.5), 0 0 75px 25px rgba(88, 101, 242, 0.3); } 50% { box-shadow: 0 0 20px 5px rgba(88, 101, 242, 0.6), 0 0 40px 10px rgba(88, 101, 242, 0.4), 0 0 60px 15px rgba(88, 101, 242, 0.2); } } @keyframes border-flow { 0% { background-position: 0% 50%; } 50% { background-position: 100% 50%; } 100% { background-position: 0% 50%; } } .text-glow { text-shadow: 0 0 15px rgba(88, 101, 242, 0.8), 0 0 30px rgba(88, 101, 242, 0.4); } .radial-glow { animation: radialBreath 4s ease-in-out infinite; } .noise { position: fixed; top: 0; left: 0; width: 100%; height: 100%; pointer-events: none; opacity: 0.035; z-index: 100; background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noiseFilter'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.65' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noiseFilter)'/%3E%3C/svg%3E"); } .scanline { position: absolute; top: 0; left: 0; width: 100%; height: 8px; background: linear-gradient(to bottom, rgba(88, 101, 242, 0.2) 0%, rgba(88, 101, 242, 0.1) 50%, rgba(88, 101, 242, 0) 100%); opacity: 0.6; z-index: 101; animation: scanline 8s linear infinite; } .animate-pulse-slow { animation: pulse 3s cubic-bezier(0.4, 0, 0.6, 1) infinite; } .animate-float { animation: float 6s ease-in-out infinite; } .rotate-slow { animation: spin 10s linear infinite; } .glitch-effect { position: relative; } .glitch-effect::before, .glitch-effect::after { content: attr(data-text); position: absolute; top: 0; left: 0; width: 100%; height: 100%; } .glitch-effect::before { color: #ff00ff; animation: glitch 3s infinite linear alternate-reverse; z-index: -2; opacity: 0.3; } .glitch-effect::after { color: #00ffff; animation: glitch 2s infinite linear alternate-reverse; z-index: -1; opacity: 0.3; } .bg-hex-grid { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='28' height='49' viewBox='0 0 28 49'%3E%3Cg fill-rule='evenodd'%3E%3Cg id='hexagons' fill='%235865F2' fill-opacity='0.07' fill-rule='nonzero'%3E%3Cpath d='M13.99 9.25l13 7.5v15l-13 7.5L1 31.75v-15l12.99-7.5zM3 17.9v12.7l10.99 6.34 11-6.35V17.9l-11-6.34L3 17.9zM0 15l12.98-7.5V0h-2v6.35L0 12.69v2.3zm0 18.5L12.98 41v8h-2v-6.85L0 35.81v-2.3zM15 0v7.5L27.99 15H28v-2.31h-.01L17 6.35V0h-2zm0 49v-8l12.99-7.5H28v2.31h-.01L17 42.15V49h-2z'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E"); } .glass-effect { background: rgba(23, 25, 35, 0.7); backdrop-filter: blur(12px); border-radius: 1rem; position: relative; } .glass-effect::before { content: ''; position: absolute; top: 0; left: 0; right: 0; bottom: 0; border-radius: 1rem; padding: 2px; background: linear-gradient(90deg, #5865F2, #8B5CF6, #5865F2); background-size: 200% 200%; animation: border-flow 4s linear infinite; -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0); -webkit-mask-composite: xor; mask-composite: exclude; } .particles { position: absolute; top: 0; left: 0; width: 100%; height: 100%; overflow: hidden; z-index: -1; } .particle { position: absolute; background-color: rgba(88, 101, 242, 0.7); border-radius: 50%; opacity: 0.3; } .status-ring { position: relative; width: 85px; height: 85px; } .status-ring::before { content: ''; position: absolute; top: 0; left: 0; width: 100%; height: 100%; border-radius: 50%; border: 4px solid rgba(88, 101, 242, 0.2); } .status-ring::after { content: ''; position: absolute; top: 0; left: 0; width: 100%; height: 100%; border-radius: 50%; border: 4px solid transparent; border-top-color: #5865F2; animation: spin 1.5s linear infinite; } .progress-pulse::after { content: ''; position: absolute; top: 50%; left: 80%; width: 12px; height: 12px; background-color: #5865F2; border-radius: 50%; transform: translate(-50%, -50%); box-shadow: 0 0 10px 2px rgba(88, 101, 242, 0.6); } .grid-dots { background-image: radial-gradient(rgba(88, 101, 242, 0.2) 1px, transparent 1px); background-size: 20px 20px; background-position: -10px -10px; }