/* =================================================================== ANIMATIONS — sutiles, elegantes, premium =================================================================== */ /* Content is visible by default. JS adds ".js-ready" to only after it has successfully set up the IntersectionObserver, and only THEN do these elements get hidden and wait to be revealed. This way, if JS fails to run for any reason, all text and content stays fully visible. */ .fade-up, .fade-left, .fade-right { opacity: 1; transform: none; transition: opacity 0.9s var(--ease), transform 0.9s var(--ease); will-change: opacity, transform; } .js-ready .fade-up, .js-ready .fade-left, .js-ready .fade-right { opacity: 0; } .js-ready .fade-up { transform: translateY(28px); } .js-ready .fade-left { transform: translateX(-32px); } .js-ready .fade-right { transform: translateX(32px); } .js-ready .fade-up.in-view, .js-ready .fade-left.in-view, .js-ready .fade-right.in-view { opacity: 1; transform: translate(0, 0); } /* Stagger children within a revealed grid */ .grid .fade-up:nth-child(1) { transition-delay: 0s; } .grid .fade-up:nth-child(2) { transition-delay: 0.08s; } .grid .fade-up:nth-child(3) { transition-delay: 0.16s; } .grid .fade-up:nth-child(4) { transition-delay: 0.24s; } .grid .fade-up:nth-child(5) { transition-delay: 0.32s; } .grid .fade-up:nth-child(6) { transition-delay: 0.4s; } .grid .fade-up:nth-child(7) { transition-delay: 0.48s; } .grid .fade-up:nth-child(8) { transition-delay: 0.56s; } /* Floating cards - gentle continuous drift */ .float-slow { animation: floatSlow 6s ease-in-out infinite; } .floating-card--2.float-slow { animation-delay: 1.2s; } @keyframes floatSlow { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-14px); } } /* Counter number pop when animated by JS */ .stat-card__number.counted { animation: numberPop 0.5s var(--ease); } @keyframes numberPop { 0% { transform: scale(0.9); opacity: 0.5; } 100% { transform: scale(1); opacity: 1; } } /* Reduced motion: respect user preference */ @media (prefers-reduced-motion: reduce) { .fade-up, .fade-left, .fade-right { transition: none !important; opacity: 1 !important; transform: none !important; } .float-slow { animation: none !important; } .scroll-cue span { animation: none !important; } }