/* ============================================================ PORTFOLIO PREMIUM — ANIMATIONS GPU-composited : utilise uniquement transform + opacity. Elements visibles par defaut. Animations = bonus progressif. ============================================================ */ /* ======================== SCROLL INDICATOR ======================== */ @keyframes scrollDot { 0% { top: 0; opacity: 0; } 30% { opacity: 1; } 70% { opacity: 1; } 100% { top: 32px; opacity: 0; } } /* ======================== AVAILABILITY PULSE ======================== */ @keyframes pulse { 0%, 100% { box-shadow: 0 0 0 0 rgba(34, 197, 94, 0.4); } 50% { box-shadow: 0 0 0 6px rgba(34, 197, 94, 0); } } /* ======================== SHIMMER (loading) ======================== */ @keyframes shimmer { 0% { background-position: -200% 0; } 100% { background-position: 200% 0; } } /* ======================== FLOAT (decorative) ======================== */ .animate-float { animation: float 6s ease-in-out infinite; } @keyframes float { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-12px); } } /* ======================== STEP FADE IN (calculator) ======================== */ @keyframes fadeInStep { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: translateY(0); } } /* ======================== POP (result icon) ======================== */ @keyframes calcPop { 0% { transform: scale(0); opacity: 0; } 60% { transform: scale(1.15); } 100% { transform: scale(1); opacity: 1; } } /* ======================== SPINNER ======================== */ @keyframes spin { to { transform: rotate(360deg); } } /* ============================================================ SCROLL ANIMATION SYSTEM Strategie : 1. JS ajoute .scroll-animations-ready sur 2. Les elements sont alors caches (pre-animation) 3. JS ajoute .animated quand l'element entre dans le viewport 4. Sans JS → tout reste visible, pas de flash invisible ============================================================ */ /* -- Pre-animation : cache seulement quand JS est pret -- */ .scroll-animations-ready .animate-fade-up { opacity: 0; transform: translateY(30px); will-change: opacity, transform; } .scroll-animations-ready .animate-fade-in { opacity: 0; will-change: opacity; } .scroll-animations-ready .animate-slide-left { opacity: 0; transform: translateX(-40px); will-change: opacity, transform; } .scroll-animations-ready .animate-slide-right { opacity: 0; transform: translateX(40px); will-change: opacity, transform; } .scroll-animations-ready .animate-scale-up { opacity: 0; transform: scale(0.92); will-change: opacity, transform; } /* -- Anime : visible avec transition -- */ .scroll-animations-ready .animate-fade-up.animated { opacity: 1; transform: translateY(0); transition: opacity 0.7s cubic-bezier(0.25, 0.46, 0.45, 0.94), transform 0.7s cubic-bezier(0.25, 0.46, 0.45, 0.94); } .scroll-animations-ready .animate-fade-in.animated { opacity: 1; transition: opacity 0.7s cubic-bezier(0.25, 0.46, 0.45, 0.94); } .scroll-animations-ready .animate-slide-left.animated { opacity: 1; transform: translateX(0); transition: opacity 0.7s cubic-bezier(0.25, 0.46, 0.45, 0.94), transform 0.7s cubic-bezier(0.25, 0.46, 0.45, 0.94); } .scroll-animations-ready .animate-slide-right.animated { opacity: 1; transform: translateX(0); transition: opacity 0.7s cubic-bezier(0.25, 0.46, 0.45, 0.94), transform 0.7s cubic-bezier(0.25, 0.46, 0.45, 0.94); } .scroll-animations-ready .animate-scale-up.animated { opacity: 1; transform: scale(1); transition: opacity 0.7s cubic-bezier(0.25, 0.46, 0.45, 0.94), transform 0.7s cubic-bezier(0.25, 0.46, 0.45, 0.94); } /* ======================== REDUCED MOTION ======================== */ @media (prefers-reduced-motion: reduce) { .scroll-animations-ready .animate-fade-up, .scroll-animations-ready .animate-fade-in, .scroll-animations-ready .animate-slide-left, .scroll-animations-ready .animate-slide-right, .scroll-animations-ready .animate-scale-up { opacity: 1 !important; transform: none !important; transition: none !important; will-change: auto !important; } *, *::before, *::after { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; scroll-behavior: auto !important; } }