/* Enhanced Modern Animations & Effects */ /* Glassmorphism Base */ .glass { background: rgba(255, 255, 255, 0.1); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); border: 1px solid rgba(255, 255, 255, 0.2); } .glass-dark { background: rgba(0, 0, 0, 0.3); backdrop-filter: blur(20px); -webkit-backdrop-filter: blur(20px); border: 1px solid rgba(255, 255, 255, 0.1); } /* Premium Glow Effects */ .glow-blue { box-shadow: 0 0 20px rgba(15, 114, 181, 0.5), 0 0 40px rgba(15, 114, 181, 0.3), 0 0 60px rgba(15, 114, 181, 0.1); } .text-glow { text-shadow: 0 0 10px rgba(15, 114, 181, 0.8), 0 0 20px rgba(15, 114, 181, 0.6), 0 0 30px rgba(15, 114, 181, 0.4); } /* Smooth Fade In Animations */ @keyframes fadeInUp { from { opacity: 0; transform: translateY(30px); } to { opacity: 1; transform: translateY(0); } } @keyframes fadeInScale { from { opacity: 0; transform: scale(0.9); } to { opacity: 1; transform: scale(1); } } @keyframes slideInRight { from { opacity: 0; transform: translateX(-50px); } to { opacity: 1; transform: translateX(0); } } /* Staggered Animation Classes */ .animate-in { opacity: 0; animation: fadeInUp 0.8s cubic-bezier(0.34, 1.56, 0.64, 1) forwards; } .animate-in-scale { opacity: 0; animation: fadeInScale 0.6s cubic-bezier(0.34, 1.56, 0.64, 1) forwards; } .stagger-1 { animation-delay: 0.1s; } .stagger-2 { animation-delay: 0.2s; } .stagger-3 { animation-delay: 0.3s; } .stagger-4 { animation-delay: 0.4s; } .stagger-5 { animation-delay: 0.5s; } /* Floating Animation */ @keyframes float { 0%, 100% { transform: translateY(0px); } 50% { transform: translateY(-20px); } } .floating { animation: float 6s ease-in-out infinite; } /* Pulse Glow Animation */ @keyframes pulseGlow { 0%, 100% { box-shadow: 0 0 5px rgba(15, 114, 181, 0.5), 0 0 10px rgba(15, 114, 181, 0.3); } 50% { box-shadow: 0 0 20px rgba(15, 114, 181, 0.8), 0 0 30px rgba(15, 114, 181, 0.5), 0 0 40px rgba(15, 114, 181, 0.3); } } .pulse-glow { animation: pulseGlow 2s ease-in-out infinite; } /* Gradient Animation */ @keyframes gradientShift { 0% { background-position: 0% 50%; } 50% { background-position: 100% 50%; } 100% { background-position: 0% 50%; } } .gradient-animated { background: linear-gradient( -45deg, #0f72b5, #00406e, #0f72b5, #1e90ff ); background-size: 400% 400%; animation: gradientShift 15s ease infinite; } /* Text Reveal Animation */ @keyframes textReveal { from { clip-path: polygon(0 0, 0 0, 0 100%, 0% 100%); } to { clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%); } } .text-reveal { animation: textReveal 1.5s cubic-bezier(0.77, 0, 0.175, 1) forwards; } /* Typewriter Effect */ @keyframes typewriter { from { width: 0; } to { width: 100%; } } @keyframes blink { 50% { border-color: transparent; } } .typewriter { overflow: hidden; white-space: nowrap; border-right: 3px solid #0f72b5; animation: typewriter 3s steps(40) forwards, blink 0.75s step-end infinite; } /* Morphing Blob Background */ @keyframes morph { 0% { border-radius: 60% 40% 30% 70% / 60% 30% 70% 40%; } 50% { border-radius: 30% 60% 70% 40% / 50% 60% 30% 60%; } 100% { border-radius: 60% 40% 30% 70% / 60% 30% 70% 40%; } } .blob { background: linear-gradient(45deg, #0f72b5, #00406e); animation: morph 8s ease-in-out infinite; filter: blur(40px); opacity: 0.7; } /* Card Hover Effects */ .card-hover-lift { transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1); } .card-hover-lift:hover { transform: translateY(-10px) scale(1.02); box-shadow: 0 20px 40px rgba(0, 0, 0, 0.15), 0 0 20px rgba(15, 114, 181, 0.3); } /* Magnetic Button Effect */ .magnetic-button { position: relative; transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1); } .magnetic-button::before { content: ''; position: absolute; top: 50%; left: 50%; width: 0; height: 0; border-radius: 50%; background: rgba(255, 255, 255, 0.3); transform: translate(-50%, -50%); transition: width 0.6s, height 0.6s; } .magnetic-button:hover::before { width: 300px; height: 300px; } /* Parallax Layers */ .parallax-slow { transform: translateZ(-1px) scale(1.5); } .parallax-medium { transform: translateZ(-2px) scale(2); } .parallax-fast { transform: translateZ(-3px) scale(2.5); } /* Reveal on Scroll */ .reveal { opacity: 0; transform: translateY(50px); transition: all 1s cubic-bezier(0.4, 0, 0.2, 1); } .reveal.active { opacity: 1; transform: translateY(0); } /* Glitch Effect */ @keyframes glitch { 0%, 100% { text-shadow: 0.05em 0 0 rgba(255, 0, 0, 0.75), -0.05em -0.025em 0 rgba(0, 255, 0, 0.75), 0.025em 0.05em 0 rgba(0, 0, 255, 0.75); } 14% { text-shadow: 0.05em 0 0 rgba(255, 0, 0, 0.75), -0.05em -0.025em 0 rgba(0, 255, 0, 0.75), 0.025em 0.05em 0 rgba(0, 0, 255, 0.75); } 15% { text-shadow: -0.05em -0.025em 0 rgba(255, 0, 0, 0.75), 0.025em 0.025em 0 rgba(0, 255, 0, 0.75), -0.05em -0.05em 0 rgba(0, 0, 255, 0.75); } 49% { text-shadow: -0.05em -0.025em 0 rgba(255, 0, 0, 0.75), 0.025em 0.025em 0 rgba(0, 255, 0, 0.75), -0.05em -0.05em 0 rgba(0, 0, 255, 0.75); } 50% { text-shadow: 0.025em 0.05em 0 rgba(255, 0, 0, 0.75), 0.05em 0 0 rgba(0, 255, 0, 0.75), 0 -0.05em 0 rgba(0, 0, 255, 0.75); } 99% { text-shadow: 0.025em 0.05em 0 rgba(255, 0, 0, 0.75), 0.05em 0 0 rgba(0, 255, 0, 0.75), 0 -0.05em 0 rgba(0, 0, 255, 0.75); } } .glitch { animation: glitch 1s linear infinite; } /* Smooth Scroll Indicator */ @keyframes scrollDown { 0% { transform: translateY(0); opacity: 0; } 40% { opacity: 1; } 80% { transform: translateY(20px); opacity: 0; } 100% { opacity: 0; } } .scroll-indicator-animated { animation: scrollDown 2s infinite; } /* Loading Shimmer */ @keyframes shimmer { 0% { background-position: -1000px 0; } 100% { background-position: 1000px 0; } } .shimmer { background: linear-gradient( 90deg, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 0.3) 50%, rgba(255, 255, 255, 0) 100% ); background-size: 1000px 100%; animation: shimmer 2s infinite; } /* Orbit Animation */ @keyframes orbit { from { transform: rotate(0deg) translateX(100px) rotate(0deg); } to { transform: rotate(360deg) translateX(100px) rotate(-360deg); } } .orbit { animation: orbit 20s linear infinite; } /* Perspective Tilt */ .tilt-card { transform-style: preserve-3d; transition: transform 0.5s; } .tilt-card:hover { transform: perspective(1000px) rotateX(10deg) rotateY(-10deg) scale(1.05); } /* Neon Glow Text */ .neon-text { color: #fff; text-shadow: 0 0 7px #fff, 0 0 10px #fff, 0 0 21px #fff, 0 0 42px #0f72b5, 0 0 82px #0f72b5, 0 0 92px #0f72b5, 0 0 102px #0f72b5, 0 0 151px #0f72b5; } /* Water Ripple Effect */ @keyframes ripple { 0% { transform: scale(0); opacity: 1; } 100% { transform: scale(4); opacity: 0; } } .ripple::before { content: ''; position: absolute; border: 1px solid #0f72b5; border-radius: 50%; animation: ripple 1s ease-out; }