/* ========================================================================== BH² Group — Animations Une seule temporalité cohérente : 250-300ms ease-out (interactions courtes), 500-700ms (révélations de section). Respecte prefers-reduced-motion (base.css). ========================================================================== */ @keyframes fade-in-up { from { opacity: 0; transform: translateY(18px); } to { opacity: 1; transform: translateY(0); } } @keyframes badge-pop { 0% { transform: scale(1); } 35% { transform: scale(1.35); } 100% { transform: scale(1); } } @keyframes soft-pulse { 0%, 100% { box-shadow: 0 0 0 0 rgba(193, 63, 145, 0.45); } 50% { box-shadow: 0 0 0 14px rgba(193, 63, 145, 0); } } @keyframes whatsapp-attention { 0%, 88%, 100% { transform: scale(1) rotate(0deg); } 91% { transform: scale(1.12) rotate(-8deg); } 94% { transform: scale(1.12) rotate(8deg); } 97% { transform: scale(1.04) rotate(-3deg); } } .reveal-on-load { animation: fade-in-up var(--duration-section) var(--ease-standard) both; } .reveal-on-load--delay-1 { animation-delay: 90ms; } .reveal-on-load--delay-2 { animation-delay: 180ms; } .reveal-on-load--delay-3 { animation-delay: 270ms; } /* Révélation au scroll (activée en JS via IntersectionObserver, reveal.js). N'applique l'état masqué que si JS a pu poser la classe "js" sur : si un script échoue à charger (connexion instable), le contenu statique (ex. titres de section) reste visible plutôt que bloqué à opacity:0. */ .js [data-reveal] { opacity: 0; transform: translateY(20px); transition: opacity var(--duration-section) var(--ease-standard), transform var(--duration-section) var(--ease-standard); } [data-reveal].is-visible { opacity: 1; transform: translateY(0); } .cart-badge.is-bumped { animation: badge-pop var(--duration-fast) var(--ease-standard); } .btn-whatsapp-float { animation: soft-pulse 2.4s ease-out infinite, whatsapp-attention 6s ease-in-out infinite; } @media (prefers-reduced-motion: reduce) { .btn-whatsapp-float { animation: none; } }