/* ======================================== FADE-IN ON SCROLL Elements are visible by default. JS adds .js-ready to to enable animations. ======================================== */ .js-ready .fade-in { opacity: 0; transform: translateY(30px); transition: opacity 0.7s cubic-bezier(0.22, 1, 0.36, 1), transform 0.7s cubic-bezier(0.22, 1, 0.36, 1); } .js-ready .fade-in.is-visible { opacity: 1; transform: translateY(0); } /* ======================================== DASHBOARD VITALS BAR ANIMATION ======================================== */ .dashboard-preview.is-visible .vital-card__fill { transition: width 1.5s cubic-bezier(0.22, 1, 0.36, 1) 0.3s; } /* ======================================== SUBTLE HOVER LIFT (utility) ======================================== */ .hover-lift { transition: transform 0.3s ease, box-shadow 0.3s ease; } .hover-lift:hover { transform: translateY(-4px); box-shadow: var(--shadow-lg); } /* ======================================== PREFERS REDUCED MOTION ======================================== */ @media (prefers-reduced-motion: reduce) { .js-ready .fade-in { opacity: 1; transform: none; transition: none; } .connector-arrow { animation: none; } .timeline__item--active .timeline__dot { animation: none; } .partner-graphic::before { animation: none; } * { transition-duration: 0.01ms !important; animation-duration: 0.01ms !important; } }