/* ========================================================================== NEXOM — Pack d'animations « Tier 1 » (DÉMO) Couche additive : apparition au scroll, header dynamique, hero animé, zoom photo au survol. Léger, sans framework. Garde-fous : contenu jamais masqué sans JS (classe .anim-ready), et prefers-reduced-motion désactive tout. Le hero (LCP) n'est PAS animé. ========================================================================== */ /* --- Apparition au scroll ------------------------------------------------- */ /* L'état caché ne s'applique QUE si le JS a posé .anim-ready sur . Sans JS => rien n'est caché (contenu visible, SEO/GEO intact). */ .anim-ready .reveal { opacity: 0; transform: translateY(22px); transition: opacity .6s cubic-bezier(.22,.61,.36,1), transform .6s cubic-bezier(.22,.61,.36,1); will-change: opacity, transform; } .anim-ready .reveal.is-visible { opacity: 1; transform: none; } /* Cascade douce des éléments d'une même grille (effet "stagger") */ .anim-ready .reveal.is-visible { transition-delay: var(--reveal-delay, 0ms); } /* --- Header dynamique au scroll ------------------------------------------- */ /* On ne change PAS la hauteur (zéro layout shift / CLS) : on renforce seulement l'ombre, l'opacité du fond et on réduit légèrement le logo. */ .site-header { transition: box-shadow .25s ease, background .25s ease; } .site-header.scrolled { background: rgba(255, 255, 255, 0.92); box-shadow: 0 6px 24px rgba(14, 17, 22, 0.08); } .site-header .brand { transition: transform .25s ease; transform-origin: left center; } .site-header.scrolled .brand { transform: scale(0.94); } /* --- Hero : léger mouvement de la trame (ambiance, pas le texte) ---------- */ .hero::after { animation: nexom-grid-drift 26s ease-in-out infinite alternate; } @keyframes nexom-grid-drift { from { background-position: 0 0, 0 0; transform: translate3d(0,0,0); } to { background-position: 28px 18px, 28px 18px; transform: translate3d(0,-6px,0); } } /* --- Zoom doux des photos au survol --------------------------------------- */ .split-photo { transition: transform .5s cubic-bezier(.22,.61,.36,1); } .split:hover .split-photo { transform: scale(1.03); } /* --- Carte métier : halo de bordure au survol (raffinement) --------------- */ .feature { transition: border-color .2s ease, background .2s ease, box-shadow .25s ease, transform .2s ease; } .feature:hover { box-shadow: 0 10px 28px rgba(45, 127, 249, 0.10); transform: translateY(-3px); } /* --- Accessibilité : on coupe tout si l'utilisateur le demande ------------ */ @media (prefers-reduced-motion: reduce) { .anim-ready .reveal { opacity: 1 !important; transform: none !important; transition: none !important; } .hero::after { animation: none !important; } .split:hover .split-photo { transform: none !important; } }