/* Enhanced Animations for SmartSolTech */ /* Gradient Animation */ @keyframes gradient-x { 0%, 100% { background-position: 0% 50%; } 50% { background-position: 100% 50%; } } .animate-gradient-x { background-size: 200% 200%; animation: gradient-x 4s ease infinite; } /* Enhanced Blob Animation */ @keyframes blob { 0% { transform: translate(0px, 0px) scale(1); } 33% { transform: translate(30px, -50px) scale(1.1); } 66% { transform: translate(-20px, 20px) scale(0.9); } 100% { transform: translate(0px, 0px) scale(1); } } .animate-blob { animation: blob 7s infinite; } .animation-delay-2000 { animation-delay: 2s; } .animation-delay-4000 { animation-delay: 4s; } .animation-delay-6000 { animation-delay: 6s; } /* Pulse Animation with Delay */ @keyframes pulse-delayed { 0%, 100% { opacity: 1; } 50% { opacity: 0.5; } } .animate-pulse-delayed { animation: pulse-delayed 2s cubic-bezier(0.4, 0, 0.6, 1) infinite; } /* Floating Animation */ @keyframes float { 0%, 100% { transform: translateY(0px); } 50% { transform: translateY(-10px); } } .animate-float { animation: float 3s ease-in-out infinite; } /* Card Hover Effects */ .card-hover { transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1); } .card-hover:hover { transform: translateY(-8px); box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.25); } /* Background Pattern */ .bg-pattern { background-image: radial-gradient(circle at 1px 1px, rgba(59, 130, 246, 0.15) 1px, transparent 0); background-size: 20px 20px; } /* Glowing Effect */ .glow { box-shadow: 0 0 20px rgba(59, 130, 246, 0.5); } .glow-purple { box-shadow: 0 0 20px rgba(139, 92, 246, 0.5); } .glow-green { box-shadow: 0 0 20px rgba(16, 185, 129, 0.5); } .glow-orange { box-shadow: 0 0 20px rgba(251, 146, 60, 0.5); } /* Hero Section Specific */ .hero-section { position: relative; overflow: hidden; } .hero-section::before { content: ''; position: absolute; top: 0; left: 0; right: 0; bottom: 0; background: radial-gradient(1200px 600px at 10% -10%, rgba(99, 102, 241, 0.35), transparent 60%), radial-gradient(1000px 500px at 110% 10%, rgba(168, 85, 247, 0.35), transparent 60%); pointer-events: none; z-index: 1; } /* Glass Effect */ .glass-effect { backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px); background: rgba(255, 255, 255, 0.1); border: 1px solid rgba(255, 255, 255, 0.2); } /* Smooth Transitions */ .smooth-transition { transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1); } /* Text Shimmer Effect */ @keyframes shimmer { 0% { background-position: -200% center; } 100% { background-position: 200% center; } } .text-shimmer { background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.8), transparent); background-size: 200% 100%; animation: shimmer 2s infinite; background-clip: text; -webkit-background-clip: text; } /* Button Hover Effects */ .btn-enhanced { position: relative; overflow: hidden; transition: all 0.3s ease; } .btn-enhanced::before { content: ''; position: absolute; top: 0; left: -100%; width: 100%; height: 100%; background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.2), transparent); transition: left 0.5s; } .btn-enhanced:hover::before { left: 100%; } /* Responsive Adjustments */ @media (max-width: 768px) { .animate-blob { animation-duration: 10s; } .card-hover:hover { transform: translateY(-4px); } } /* Dark Mode Adjustments */ .dark .glass-effect { background: rgba(0, 0, 0, 0.1); border: 1px solid rgba(255, 255, 255, 0.1); } .dark .bg-pattern { background-image: radial-gradient(circle at 1px 1px, rgba(59, 130, 246, 0.1) 1px, transparent 0); }