/* ============================================== ANIMATIONS & SPECIAL EFFECTS ============================================== */ /* Keyframe Animations */ @keyframes fadeInUp { from { opacity: 0; transform: translateY(30px); } to { opacity: 1; transform: translateY(0); } } @keyframes float { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-10px); } } @keyframes twinkle { 0% { opacity: 0.5; transform: scale(1); } 50% { opacity: 1; transform: scale(1.2); } 100% { opacity: 0.5; transform: scale(1); } } @keyframes shimmer { 0% { background-position: -200% 0; } 100% { background-position: 200% 0; } } @keyframes pulse { 0% { box-shadow: 0 0 0 0 rgba(184, 155, 95, 0.4); } 70% { box-shadow: 0 0 0 10px rgba(184, 155, 95, 0); } 100% { box-shadow: 0 0 0 0 rgba(184, 155, 95, 0); } } @keyframes snowfall { 0% { transform: translateY(-10px) rotate(0deg); opacity: 1; } 100% { transform: translateY(100vh) rotate(360deg); opacity: 0; } } @keyframes glow { 0%, 100% { text-shadow: 0 0 5px var(--antique-gold), 0 0 10px var(--antique-gold), 0 0 15px var(--antique-gold); } 50% { text-shadow: 0 0 10px var(--antique-gold), 0 0 20px var(--antique-gold), 0 0 30px var(--antique-gold); } } @keyframes sparkle { 0%, 100% { opacity: 0; transform: scale(0); } 50% { opacity: 1; transform: scale(1); } } @keyframes bounce { 0%, 20%, 53%, 80%, 100% { transform: translate3d(0, 0, 0); } 40%, 43% { transform: translate3d(0, -15px, 0); } 70% { transform: translate3d(0, -7px, 0); } 90% { transform: translate3d(0, -2px, 0); } } /* Festive Cursor Effect */ .festive-cursor { position: fixed; pointer-events: none; z-index: 9999; width: 20px; height: 20px; background: radial-gradient(circle, var(--antique-gold), transparent); border-radius: 50%; animation: sparkle 2s infinite; } /* Smooth Scroll Enhancement */ html { scroll-behavior: smooth; } /* Loading Animation */ .loading { display: inline-block; width: 20px; height: 20px; border: 3px solid rgba(184, 155, 95, 0.3); border-radius: 50%; border-top-color: var(--antique-gold); animation: spin 1s ease-in-out infinite; } @keyframes spin { to { transform: rotate(360deg); } } /* Form Validation Animations */ .form-group input:invalid:not(:placeholder-shown), .form-group textarea:invalid:not(:placeholder-shown) { border-color: var(--muted-red); animation: shake 0.3s ease-in-out; } @keyframes shake { 0%, 100% { transform: translateX(0); } 25% { transform: translateX(-5px); } 75% { transform: translateX(5px); } } .form-group input:valid:not(:placeholder-shown), .form-group textarea:valid:not(:placeholder-shown) { border-color: var(--muted-blue); } /* Success Animation */ .success-message { background: rgba(95, 135, 184, 0.1); color: var(--muted-blue); padding: var(--spacing-sm); border-radius: var(--radius-sm); margin-top: var(--spacing-sm); animation: slideDown 0.3s ease-out; } @keyframes slideDown { from { opacity: 0; transform: translateY(-10px); } to { opacity: 1; transform: translateY(0); } } /* Parallax Effect */ .parallax { transform: translateZ(0); will-change: transform; } /* Interactive Elements */ .interactive { cursor: pointer; transition: var(--transition-smooth); } .interactive:hover { transform: translateY(-2px); } /* Service Card Hover Enhancements */ .service-card::before { content: ''; position: absolute; top: 0; left: 0; right: 0; bottom: 0; background: linear-gradient(135deg, rgba(184, 155, 95, 0.1) 0%, rgba(42, 75, 58, 0.1) 100%); opacity: 0; transition: var(--transition-smooth); border-radius: var(--radius-lg); pointer-events: none; } .service-card:hover::before { opacity: 1; } /* Section Reveal Animation */ .section-reveal { opacity: 0; transform: translateY(50px); transition: var(--transition-smooth); } .section-reveal.revealed { opacity: 1; transform: translateY(0); } /* Festive Border Animation */ .festive-border { position: relative; overflow: hidden; } .festive-border::before { content: ''; position: absolute; top: 0; left: -100%; width: 100%; height: 100%; background: linear-gradient(90deg, transparent, rgba(184, 155, 95, 0.3), transparent); animation: borderShine 3s infinite; } @keyframes borderShine { 0% { left: -100%; } 100% { left: 100%; } } /* Snowflake Animation */ .snowflake { position: absolute; color: var(--antique-gold); font-size: 14px; animation: snowfall linear infinite; pointer-events: none; } /* Countdown Number Animation */ .countdown-number { animation: countdownPulse 1s infinite; } @keyframes countdownPulse { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.05); text-shadow: 0 0 10px var(--antique-gold); } } /* Logo Glow Effect */ .logo-glow { filter: drop-shadow(0 0 10px rgba(184, 155, 95, 0.5)); animation: logoShimmer 4s infinite; } @keyframes logoShimmer { 0%, 100% { filter: drop-shadow(0 0 5px rgba(184, 155, 95, 0.3)); } 50% { filter: drop-shadow(0 0 15px rgba(184, 155, 95, 0.8)); } } /* Header Scroll Effect */ .header.scrolled { background: rgba(253, 253, 252, 0.98); box-shadow: 0 2px 20px rgba(184, 155, 95, 0.1); } /* Navigation Active State */ .nav-link.active { color: var(--antique-gold); } .nav-link.active::after { width: 100%; } /* Button Click Effect */ .submit-btn::after { content: ''; position: absolute; top: 50%; left: 50%; width: 0; height: 0; background: rgba(255, 255, 255, 0.3); border-radius: 50%; transform: translate(-50%, -50%); transition: width 0.6s, height 0.6s; } .submit-btn:active::after { width: 300px; height: 300px; } /* Form Focus Enhancement */ .form-group input:focus + label, .form-group textarea:focus + label { color: var(--antique-gold); transform: translateY(-2px); transition: var(--transition-fast); } /* Mobile Optimizations */ @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; scroll-behavior: auto !important; } } /* Performance Optimizations */ .service-card, .stat-item, .submit-btn { will-change: transform; } /* High Performance Animations */ .countdown-number { will-change: transform, text-shadow; } .service-icon { will-change: transform, background-color; } /* Accessibility */ @media (prefers-reduced-motion: reduce) { .hero-logo { animation: none; } .countdown-number { animation: none; } .snowflake { display: none; } } /* Print Styles */ @media print { .theme-toggle, #snowCanvas, .festive-cursor { display: none !important; } * { animation: none !important; transition: none !important; } }