/* ===== Keyframes ===== */ @keyframes hero-fade-in-up { from { opacity: 0; transform: translateY(24px); } to { opacity: 1; transform: translateY(0); } } @keyframes hero-fade-in-scale { from { opacity: 0; transform: scale(0.85); } to { opacity: 1; transform: scale(1); } } /* ===== Hero Entrance ===== */ .hero-logo { opacity: 0; animation: hero-fade-in-scale 1s ease-out 0.1s forwards; } .hero-title { opacity: 0; animation: hero-fade-in-up 0.8s ease-out 0.4s forwards; } .hero-subtitle { opacity: 0; animation: hero-fade-in-up 0.8s ease-out 0.7s forwards; } .hero-cta { opacity: 0; animation: hero-fade-in-up 0.8s ease-out 1s forwards; } /* ===== Scroll Reveal ===== */ .reveal { opacity: 0; transform: translateY(30px); transition: opacity 0.7s ease-out, transform 0.7s ease-out; } .reveal.visible { opacity: 1; transform: translateY(0); } /* ===== Reduced Motion ===== */ @media (prefers-reduced-motion: reduce) { .hero-logo, .hero-title, .hero-subtitle, .hero-cta { animation: none !important; opacity: 1 !important; } .reveal { opacity: 1 !important; transform: none !important; transition: none !important; } }