/* ========================================================================== Animations - Reveal effects, hover states, micro-interactions ========================================================================== */ /* ======================================== REVEAL ANIMATIONS (on scroll) - Only apply when .js-ready class is on - This ensures content is visible if JS fails ======================================== */ .js-ready [data-reveal] { opacity: 0; transform: translateY(40px); transition: opacity 0.9s var(--ease-out), transform 0.9s var(--ease-out); will-change: opacity, transform; } .js-ready [data-reveal].is-visible { opacity: 1; transform: translateY(0); } /* Reveal variants */ .js-ready [data-reveal="fade"] { transform: translateY(0); } .js-ready [data-reveal="left"] { transform: translateX(-40px); } .js-ready [data-reveal="left"].is-visible { transform: translateX(0); } .js-ready [data-reveal="right"] { transform: translateX(40px); } .js-ready [data-reveal="right"].is-visible { transform: translateX(0); } .js-ready [data-reveal="scale"] { transform: scale(0.94); } .js-ready [data-reveal="scale"].is-visible { transform: scale(1); } /* RTL-aware */ body[dir="rtl"].js-ready [data-reveal="left"], .js-ready body[dir="rtl"] [data-reveal="left"] { transform: translateX(40px); } body[dir="rtl"].js-ready [data-reveal="left"].is-visible, .js-ready body[dir="rtl"] [data-reveal="left"].is-visible { transform: translateX(0); } body[dir="rtl"].js-ready [data-reveal="right"], .js-ready body[dir="rtl"] [data-reveal="right"] { transform: translateX(-40px); } body[dir="rtl"].js-ready [data-reveal="right"].is-visible, .js-ready body[dir="rtl"] [data-reveal="right"].is-visible { transform: translateX(0); } /* Staggered reveals */ .js-ready [data-reveal-stagger] > * { opacity: 0; transform: translateY(30px); transition: opacity 0.8s var(--ease-out), transform 0.8s var(--ease-out); } .js-ready [data-reveal-stagger].is-visible > *:nth-child(1) { transition-delay: 0.05s; } .js-ready [data-reveal-stagger].is-visible > *:nth-child(2) { transition-delay: 0.15s; } .js-ready [data-reveal-stagger].is-visible > *:nth-child(3) { transition-delay: 0.25s; } .js-ready [data-reveal-stagger].is-visible > *:nth-child(4) { transition-delay: 0.35s; } .js-ready [data-reveal-stagger].is-visible > *:nth-child(5) { transition-delay: 0.45s; } .js-ready [data-reveal-stagger].is-visible > *:nth-child(6) { transition-delay: 0.55s; } .js-ready [data-reveal-stagger].is-visible > *:nth-child(7) { transition-delay: 0.65s; } .js-ready [data-reveal-stagger].is-visible > *:nth-child(8) { transition-delay: 0.75s; } .js-ready [data-reveal-stagger].is-visible > * { opacity: 1; transform: translateY(0); } /* ======================================== TEXT REVEAL (mask-based) ======================================== */ .text-reveal { display: inline-block; overflow: hidden; } .text-reveal-inner { display: inline-block; transform: translateY(110%); transition: transform 1s var(--ease-out); } .text-reveal.is-visible .text-reveal-inner { transform: translateY(0); } /* ======================================== PULSE / FLOAT (for decorative elements) ======================================== */ @keyframes float-gentle { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-8px); } } .float-gentle { animation: float-gentle 4s ease-in-out infinite; } /* ======================================== REDUCED MOTION RESPECT ======================================== */ @media (prefers-reduced-motion: reduce) { [data-reveal], [data-reveal-stagger] > *, .text-reveal-inner { opacity: 1 !important; transform: none !important; transition: none !important; } .hero-bg-orb { animation: none !important; } .clients-track { animation-duration: 0s !important; } }