/* ======================================== Full Pack AUS — Animation Layer Applies on top of styles.css No edits to base styles needed. ======================================== */ /* --- Hero: entrance on load (above fold) --- */ @keyframes fp-fadeUp { from { opacity: 0; transform: translateY(22px); } to { opacity: 1; transform: translateY(0); } } @keyframes fp-fadeIn { from { opacity: 0; } to { opacity: 1; } } .hero h1 { animation: fp-fadeUp 0.72s cubic-bezier(0.16,1,0.32,1) 0.05s both; } .hero-subtitle { animation: fp-fadeUp 0.72s cubic-bezier(0.16,1,0.32,1) 0.18s both; } .hero-actions { animation: fp-fadeUp 0.72s cubic-bezier(0.16,1,0.32,1) 0.28s both; } .hero-guarantee { animation: fp-fadeUp 0.65s cubic-bezier(0.16,1,0.32,1) 0.38s both; } .hero-trust { animation: fp-fadeUp 0.65s cubic-bezier(0.16,1,0.32,1) 0.44s both; } .hero-visual { animation: fp-fadeIn 0.90s cubic-bezier(0.16,1,0.32,1) 0.08s both; } /* --- Scroll-reveal base --- The `.js` class on activates hidden state. Without JS the elements stay visible (no animation, content readable). */ .js [data-anim] { opacity: 0; transform: translateY(22px); transition: opacity 0.65s cubic-bezier(0.16,1,0.32,1), transform 0.65s cubic-bezier(0.16,1,0.32,1); } .js [data-anim="scale"] { transform: translateY(14px) scale(0.97); } .js [data-anim="left"] { transform: translateX(-20px); } .js [data-anim].in { opacity: 1; transform: translateY(0) scale(1) translateX(0); } /* Stagger delays */ [data-delay="1"] { transition-delay: 80ms; } [data-delay="2"] { transition-delay: 160ms; } [data-delay="3"] { transition-delay: 240ms; } [data-delay="4"] { transition-delay: 320ms; } [data-delay="5"] { transition-delay: 80ms; } [data-delay="6"] { transition-delay: 160ms; } [data-delay="7"] { transition-delay: 240ms; } /* --- Reduced motion: no animations, no opacity games --- */ @media (prefers-reduced-motion: reduce) { .hero h1, .hero-subtitle, .hero-actions, .hero-guarantee, .hero-trust, .hero-visual { animation: none; } .js [data-anim] { opacity: 1; transform: none; transition: none; } }