/* Futuristic base styles */ html { scroll-behavior: smooth; background-color: #0f172a; } body { background: radial-gradient(circle at 10% 20%, rgba(15, 23, 42, 0.9) 0%, rgba(15, 23, 42, 1) 90%); color: #e2e8f0; } /* Glow effects */ .glow-effect { box-shadow: 0 0 15px rgba(16, 185, 129, 0.5); transition: box-shadow 0.3s ease; } .glow-effect:hover { box-shadow: 0 0 25px rgba(16, 185, 129, 0.8); } /* Futuristic borders */ .futuristic-border { position: relative; } .futuristic-border::after { content: ''; position: absolute; inset: 0; border-radius: inherit; padding: 1px; background: linear-gradient(135deg, #10b981, #6366f1); -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0); -webkit-mask-composite: xor; mask-composite: exclude; pointer-events: none; } /* Custom animations */ @keyframes fadeIn { from { opacity: 0; transform: translateY(20px); } to { opacity: 1; transform: translateY(0); } } @keyframes pulse-slow { 0%, 100% { opacity: 0.2; } 50% { opacity: 0.3; } } .animate-pulse-slow { animation: pulse-slow 6s infinite ease-in-out; } from { opacity: 0; transform: translateY(20px); } to { opacity: 1; transform: translateY(0); } } .animate-fade-in { animation: fadeIn 0.8s ease-out forwards; } /* Delay animations for staggered effect */ .delay-100 { animation-delay: 0.1s; } .delay-200 { animation-delay: 0.2s; } .delay-300 { animation-delay: 0.3s; } .delay-400 { animation-delay: 0.4s; } /* Custom hover effects */ .hover-scale { transition: transform 0.3s ease; } .hover-scale:hover { transform: scale(1.03); } /* Gradient text */ .text-gradient { background-clip: text; -webkit-background-clip: text; color: transparent; background-image: linear-gradient(to right, #10b981, #6366f1); } /* Custom shadows */ .shadow-soft { box-shadow: 0 10px 30px -15px rgba(0, 0, 0, 0.1); } /* Section spacing */ .section-py { padding-top: 5rem; padding-bottom: 5rem; } /* Custom transition */ .transition-all-300 { transition: all 0.3s ease; }