/* ============================================================================ animations.css — couche d'animations sobres (architecte web). Progressive enhancement : - l'état masqué n'est appliqué que si (ajouté par un script inline UNIQUEMENT si IntersectionObserver dispo + motion autorisé) ; - JS absent ou échoué → la classe est retirée → tout reste visible ; - tout est neutralisé sous prefers-reduced-motion. Easing maison : cubic-bezier(.16,1,.3,1) (sortie douce, "architectural"). ============================================================================ */ @media (prefers-reduced-motion: no-preference) { /* ── Apparition au scroll ──────────────────────────────────────────────── */ html.has-anim :is( .axe-card, .project-card, .price-card, .step, .symptom, .faq__item, .stats-band__grid > div, .callout, .split__body, .split__media, .project-hero-image, .section > .container > h2, .section > .container > .lead ) { opacity: 0; transform: translateY(20px); transition: opacity .7s cubic-bezier(.16, 1, .3, 1), transform .7s cubic-bezier(.16, 1, .3, 1); transition-delay: var(--reveal-delay, 0ms); } html.has-anim .is-in { opacity: 1 !important; transform: none !important; } /* ── Entrée du hero au chargement (au-dessus de la ligne de flottaison) ──── */ html.has-anim :is( .home-hero__topbar, .home-hero__eyebrow, .home-hero__title, .home-hero__lead, .home-hero__cta-row, .home-hero__bottombar ) { opacity: 0; animation: cedricHeroIn .8s cubic-bezier(.16, 1, .3, 1) forwards; } html.has-anim .home-hero__topbar { animation-delay: .05s; } html.has-anim .home-hero__eyebrow { animation-delay: .18s; } html.has-anim .home-hero__title { animation-delay: .28s; } html.has-anim .home-hero__lead { animation-delay: .42s; } html.has-anim .home-hero__cta-row { animation-delay: .54s; } html.has-anim .home-hero__bottombar { animation-delay: .66s; } /* ── Micro-interactions au survol ──────────────────────────────────────── */ /* Zoom doux du mockup dans les cartes projet (clip via overflow:hidden). */ .project-card__image { transition: transform .55s cubic-bezier(.16, 1, .3, 1); } .project-card:hover .project-card__image { transform: scale(1.045); } /* Cartes : lévitation fluide (ajoute transform aux transitions existantes). */ .project-card, .axe-card { transition: border-color var(--transition-base), box-shadow var(--transition-base), transform var(--transition-base); } .axe-card:hover { transform: translateY(-3px); } /* Boutons : léger soulèvement. */ .btn { transition: background var(--transition-fast), color var(--transition-fast), border-color var(--transition-fast), transform var(--transition-fast), box-shadow var(--transition-fast); } .btn--primary:hover, .btn--secondary:hover { transform: translateY(-2px); box-shadow: var(--shadow-sm); } /* Lien-flèche : la flèche avance au survol. */ .btn--link::after { transition: transform var(--transition-fast); } .btn--link:hover::after { transform: translateX(4px); } } @keyframes cedricHeroIn { from { opacity: 0; transform: translateY(16px); } to { opacity: 1; transform: none; } }