/* ============================================ ANIMATIONS — AOS safe-loading + custom ============================================ */ /* ---- AOS safe fallback ---- AOS CDN CSS hides [data-aos] elements (opacity:0). If AOS JS hasn't loaded/initialized yet, pages go blank. Fix: When AOS JS has NOT yet initialized (no .aos-init class on ), force all [data-aos] elements visible. Once AOS JS runs and adds .aos-init, this fallback stops matching and AOS takes FULL control — no !important fights. */ html:not(.aos-init) [data-aos] { opacity: 1 !important; transform: none !important; transition: none !important; pointer-events: auto !important; } /* Custom AOS type: fade-in-slow (opacity only, no transform) */ [data-aos="fade-in-slow"] { transition-property: opacity; } /* ---- Custom Keyframe Animations ---- */ /* Fade in from bottom */ @keyframes fadeInUp { from { opacity: 0; transform: translateY(30px); } to { opacity: 1; transform: translateY(0); } } /* Fade in */ @keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } } /* Slide in from left */ @keyframes slideInLeft { from { opacity: 0; transform: translateX(-40px); } to { opacity: 1; transform: translateX(0); } } /* Slide in from right */ @keyframes slideInRight { from { opacity: 0; transform: translateX(40px); } to { opacity: 1; transform: translateX(0); } } /* Scale in */ @keyframes scaleIn { from { opacity: 0; transform: scale(0.9); } to { opacity: 1; transform: scale(1); } } /* Gold line draw */ @keyframes lineGrow { from { width: 0; } to { width: 60px; } } /* Pulse glow */ @keyframes pulseGlow { 0%, 100% { box-shadow: 0 0 0 0 rgba(201, 168, 76, 0.2); } 50% { box-shadow: 0 0 20px 5px rgba(201, 168, 76, 0.1); } } /* Counter reveal */ @keyframes counterReveal { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: translateY(0); } } /* Shimmer effect for loading */ @keyframes shimmer { 0% { background-position: -200% center; } 100% { background-position: 200% center; } } /* Gentle float */ @keyframes float { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-8px); } } /* ---- Animation Utilities ---- */ .animate-fade-in { animation: fadeIn var(--duration-slow) var(--ease-out) both; } .animate-fade-in-up { animation: fadeInUp var(--duration-slow) var(--ease-out) both; } .animate-slide-left { animation: slideInLeft var(--duration-slow) var(--ease-out) both; } .animate-slide-right { animation: slideInRight var(--duration-slow) var(--ease-out) both; } .animate-scale-in { animation: scaleIn var(--duration-slow) var(--ease-out) both; } /* Stagger delays */ .delay-1 { animation-delay: 100ms; } .delay-2 { animation-delay: 200ms; } .delay-3 { animation-delay: 300ms; } .delay-4 { animation-delay: 400ms; } .delay-5 { animation-delay: 500ms; } .delay-6 { animation-delay: 600ms; } /* ---- Hover Micro-interactions ---- */ .hover-lift { transition: transform var(--transition-base), box-shadow var(--transition-base); } .hover-lift:hover { transform: translateY(-3px); box-shadow: var(--shadow-lg); } .hover-glow { transition: box-shadow var(--transition-base); } .hover-glow:hover { box-shadow: var(--shadow-gold); } /* ---- Entrance animations for elements in view ---- */ .reveal { opacity: 0; transform: translateY(20px); transition: opacity var(--duration-slower) var(--ease-out), transform var(--duration-slower) var(--ease-out); } .reveal.is-visible { opacity: 1; transform: translateY(0); } /* ---- Page transition ---- */ .page-enter { animation: fadeInUp 600ms var(--ease-out) both; }