/* ============================================================ Granvo Motion v2 — librairie d'animations réutilisable (drop-in) Style « Obrio » : raffiné, sobre, jamais gadget. CONVENTION RÉUTILISABLE (sites clients du Builder) : - [data-reveal] → fondu + montée au scroll - [data-reveal="left"|"right"|"scale"|"fade"] - [data-count="40"] [data-suffix="+"] → compteur qui monte - .gm-lift → soulèvement au survol - .gm-progress → barre de progression de lecture (transform GPU) Garde-fous : - Ne cache du contenu QUE si (script inline en ). - Respecte prefers-reduced-motion (tout visible, zéro animation). - Sécurité : si le JS ne charge pas, le retire gm-on → contenu visible. - Le H1 du hero (LCP) n'est JAMAIS caché. ============================================================ */ /* ---- Convention générique (à utiliser sur les sites clients) ---- */ html.gm-on [data-reveal] { opacity: 0; transform: translateY(22px); } html.gm-on [data-reveal="fade"] { transform: none; } html.gm-on [data-reveal="left"] { transform: translateX(-26px); } html.gm-on [data-reveal="right"]{ transform: translateX(26px); } html.gm-on [data-reveal="scale"]{ transform: scale(.965); } /* ---- Confort : auto-cible les blocs du site Granvo (pas le H1 hero = LCP) ---- */ html.gm-on .section-head, html.gm-on .hero .eyebrow, html.gm-on .hero .lead, html.gm-on .hero-actions, html.gm-on .hero .trust, html.gm-on .work, html.gm-on .feat .card, html.gm-on .plan, html.gm-on .founder, html.gm-on .step, html.gm-on .reco, html.gm-on .apres-teaser, html.gm-on .after-card, html.gm-on .quote, html.gm-on .faq-item, html.gm-on .tranquillite, html.gm-on .cs-examples, html.gm-on .prose > h2, html.gm-on .prose > p, html.gm-on .prose > ul { opacity: 0; transform: translateY(22px); } /* ---- État révélé (posé par le JS) ---- */ html.gm-on .gm-in { opacity: 1 !important; transform: none !important; transition: opacity .7s cubic-bezier(.16,1,.3,1), transform .7s cubic-bezier(.16,1,.3,1); transition-delay: var(--gm-d, 0ms); } /* ---- Micro-interactions ---- */ .gm-lift { transition: transform .18s ease, box-shadow .22s ease; } .gm-lift:hover { transform: translateY(-4px); } @keyframes gm-pulse { 0%,100% { opacity: 1; } 50% { opacity: .35; } } .gm-pulse { animation: gm-pulse 2s ease-in-out infinite; } /* Barre de progression de lecture — transform GPU (jamais animer width) */ .gm-progress { position: fixed; top: 0; left: 0; height: 3px; width: 100%; z-index: 300; transform: scaleX(0); transform-origin: 0 50%; background: var(--copper, #E07A37); will-change: transform; } /* ---- Accessibilité : aucune animation si réduit ---- */ @media (prefers-reduced-motion: reduce) { html.gm-on [data-reveal], html.gm-on .section-head, html.gm-on .hero .eyebrow, html.gm-on .hero .lead, html.gm-on .hero-actions, html.gm-on .hero .trust, html.gm-on .work, html.gm-on .feat .card, html.gm-on .plan, html.gm-on .founder, html.gm-on .step, html.gm-on .reco, html.gm-on .apres-teaser, html.gm-on .after-card, html.gm-on .quote, html.gm-on .faq-item, html.gm-on .tranquillite, html.gm-on .cs-examples, html.gm-on .prose > h2, html.gm-on .prose > p, html.gm-on .prose > ul { opacity: 1 !important; transform: none !important; } html.gm-on .gm-in { transition: none !important; } .gm-lift, .gm-pulse { transition: none !important; animation: none !important; } }