/* Base Animations */ @keyframes fadeIn { from { opacity: 0; transform: translateY(20px); } to { opacity: 1; transform: translateY(0); } } @keyframes fadeInLeft { from { opacity: 0; transform: translateX(-20px); } to { opacity: 1; transform: translateX(0); } } @keyframes fadeInRight { from { opacity: 0; transform: translateX(20px); } to { opacity: 1; transform: translateX(0); } } @keyframes scaleIn { from { opacity: 0; transform: scale(0.9); } to { opacity: 1; transform: scale(1); } } @keyframes spin { to { transform: rotate(360deg); } } /* Loading Spinner */ @keyframes spinnerRotate { 0% { transform: rotate(0deg); } 100% { transform: rotate(360deg); } } /* Shooting Star Animation */ @keyframes shootingStar { 0% { transform: translateX(-100%) translateY(0) rotate(-45deg); opacity: 1; } 100% { transform: translateX(200%) translateY(300%) rotate(-45deg); opacity: 0; } } /* Stars Twinkling */ @keyframes twinkle { 0%, 100% { opacity: 1; } 50% { opacity: 0.3; } } /* Scroll Progress */ @keyframes progressGrow { from { transform: scaleX(0); } to { transform: scaleX(1); } } /* Button Hover Effect */ @keyframes buttonPulse { 0% { box-shadow: 0 0 0 0 rgba(21, 52, 209, 0.4); } 70% { box-shadow: 0 0 0 10px rgba(21, 52, 209, 0); } 100% { box-shadow: 0 0 0 0 rgba(21, 52, 209, 0); } } /* Service Card Hover */ @keyframes cardFloat { 0% { transform: translateY(0); } 50% { transform: translateY(-10px); } 100% { transform: translateY(0); } } /* Icon Animations */ @keyframes iconBounce { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.2); } } /* Form Success Animation */ @keyframes checkmark { 0% { transform: scale(0); } 50% { transform: scale(1.2); } 100% { transform: scale(1); } } /* Cookie Consent Slide */ @keyframes slideUp { from { transform: translateY(100%); } to { transform: translateY(0); } } /* Animation Classes */ .animate-in { opacity: 0; animation: fadeIn 0.6s var(--transition-base) forwards; } .delay-1 { animation-delay: 0.2s; } .delay-2 { animation-delay: 0.4s; } .delay-3 { animation-delay: 0.6s; } /* Scroll Animations */ .fade-in-scroll { opacity: 0; transform: translateY(20px); transition: opacity 0.6s ease, transform 0.6s ease; } .fade-in-scroll.visible { opacity: 1; transform: translateY(0); } /* Loading States */ .loading-spinner { display: none; width: 20px; height: 20px; border: 2px solid var(--text-color); border-top-color: transparent; border-radius: 50%; animation: spinnerRotate 0.8s linear infinite; } /* Interactive Elements */ .service-card { transition: transform var(--transition-base); } .service-card:hover { animation: cardFloat 2s ease-in-out infinite; } .service-icon i { transition: transform var(--transition-base); } .service-card:hover .service-icon i { animation: iconBounce 0.5s ease-in-out; } /* Stars Background */ .stars { position: absolute; width: 100%; height: 100%; pointer-events: none; } .star { position: absolute; background: white; border-radius: 50%; animation: twinkle 1.5s infinite; } .shooting-star { position: absolute; width: 100px; height: 2px; background: linear-gradient(90deg, white, transparent); animation: shootingStar 2s linear infinite; animation-delay: 1s; } /* Scroll Progress Bar */ .scroll-progress { position: fixed; top: 0; left: 0; width: 100%; height: 3px; background: var(--accent-color); transform-origin: left; z-index: var(--z-maximum); }