/* Scroll animations */ @media (prefers-reduced-motion: no-preference) { html { scroll-behavior: smooth; } } /* Fade in up animation */ @keyframes fadeInUp { from { opacity: 0; transform: translate3d(0, 40px, 0); } to { opacity: 1; transform: translate3d(0, 0, 0); } } /* Fade in animation */ @keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } } /* Slide in from left */ @keyframes slideInLeft { from { opacity: 0; transform: translate3d(-40px, 0, 0); } to { opacity: 1; transform: translate3d(0, 0, 0); } } /* Slide in from right */ @keyframes slideInRight { from { opacity: 0; transform: translate3d(40px, 0, 0); } to { opacity: 1; transform: translate3d(0, 0, 0); } } /* Scale in */ @keyframes scaleIn { from { opacity: 0; transform: scale3d(0.9, 0.9, 0.9); } to { opacity: 1; transform: scale3d(1, 1, 1); } } /* Pulse animation */ @keyframes pulse { 0%, 100% { opacity: 1; } 50% { opacity: 0.5; } } /* Bounce animation */ @keyframes bounce { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-10px); } } /* Glow animation */ @keyframes glow { 0% { box-shadow: 0 0 20px rgba(26, 115, 232, 0.3); } 50% { box-shadow: 0 0 40px rgba(26, 115, 232, 0.6); } 100% { box-shadow: 0 0 20px rgba(26, 115, 232, 0.3); } } /* Shimmer animation */ @keyframes shimmer { 0% { background-position: -1000px 0; } 100% { background-position: 1000px 0; } } /* Scroll-reveal: JS adds .js-ready to first */ .js-ready .reveal, .js-ready .reveal-slow, .js-ready .reveal-fast { opacity: 0; transform: translateY(22px); transition: opacity .65s ease, transform .65s ease; } .js-ready .reveal-slow { transition-duration: 1s; } .js-ready .reveal-fast { transition-duration: .35s; } .js-ready .slide-in-left { opacity: 0; transform: translateX(-30px); transition: opacity .65s ease, transform .65s ease; } .js-ready .slide-in-right { opacity: 0; transform: translateX(30px); transition: opacity .65s ease, transform .65s ease; } .js-ready .scale-in { opacity: 0; transform: scale(0.92); transition: opacity .55s ease, transform .55s ease; } .pulse { animation: pulse 2s ease-in-out infinite; } .bounce { animation: bounce 2s ease-in-out infinite; } .glow { animation: glow 3s ease-in-out infinite; } /* Stagger delays */ .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; } .stagger-6 { animation-delay: 0.6s; } /* Intersection Observer helper */ .observe { opacity: 0; transform: translateY(30px); transition: opacity 0.6s ease-out, transform 0.6s ease-out; } .observe.in-view, .reveal.in-view, .reveal-slow.in-view, .reveal-fast.in-view, .slide-in-left.in-view, .slide-in-right.in-view, .scale-in.in-view { opacity: 1; transform: translateY(0); } @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation: none !important; transition: none !important; scroll-behavior: auto !important; } }