/* =================================================================== BLUEVISA : ANIMATIONS AU DÉFILEMENT (scroll-reveal) Chargé par toutes les pages marketing (landing, hubs, dispositifs). Le script scripts/scroll-reveal.js pose .is-in / .is-on ; le balisage des pages est produit par scripts/build-motion.js (voir son en-tête). Vocabulaire (attributs posés dans le HTML) : - data-mv="reveal|scale|from-left|from-right|line" : l'élément apparaît en entrant dans l'écran - data-mv-group[="tight|rise"] : les enfants directs apparaissent en cascade - data-mv-pop / data-mv-late / data-mv-badge / data-mv-stars : descendants déclenchés par l'ancêtre .is-in - data-mv-count : compteur 0 -> valeur (le texte d'origine fait foi) - data-mv-scenario + data-mv-at="ms" (+ data-mv-bar, data-mv-bubble) : séquence de la démo plateforme - data-mv-glow : halo qui respire - data-mv-parallax-speed="0.08" : parallaxe de l'image du héros (desktop) L'état masqué n'existe que si porte .mv-js (script inline en tête de page) ; .mv-fallback (4 s sans initialisation) et prefers-reduced-motion affichent tout. =================================================================== */ :root { --mv-ease: cubic-bezier(.22, 1, .36, 1); --mv-spring: cubic-bezier(.34, 1.45, .64, 1); /* Intensité « Marqué » (retenue). Alternative « Sobre » : --mv-y: 14px; --mv-x: 28px; --mv-dur: 520ms; --mv-dur-slow: 760ms; --mv-stagger: 70ms; --mv-stagger-list: 0ms; --mv-count: 1100ms; */ --mv-y: 30px; --mv-x: 48px; --mv-dur: 720ms; --mv-dur-slow: 980ms; --mv-stagger: 110ms; --mv-stagger-list: 45ms; --mv-count: 1500ms; } /* --- État initial (JS actif uniquement) et arrivée --- */ .mv-js [data-mv], .mv-js [data-mv-group] > * { opacity: 0; transform: translate3d(0, var(--mv-y), 0); transition: opacity var(--mv-dur) var(--mv-ease) var(--mv-delay, 0ms), transform var(--mv-dur) var(--mv-ease) var(--mv-delay, 0ms); } .mv-js [data-mv-group="rise"] > * { transform: translate3d(0, calc(var(--mv-y) * 1.8), 0); transition-duration: var(--mv-dur-slow); } .mv-js [data-mv="scale"] { transform: translate3d(0, var(--mv-y), 0) scale(.965); transition-duration: var(--mv-dur-slow); } .mv-js [data-mv="from-left"] { transform: translate3d(calc(-1 * var(--mv-x)), 0, 0); } .mv-js [data-mv="from-right"] { transform: translate3d(var(--mv-x), 0, 0); } .mv-js [data-mv="line"] { opacity: 1; transform: scaleX(0); transform-origin: left center; transition-duration: var(--mv-dur-slow); } .mv-js [data-mv].is-in, .mv-js [data-mv-group].is-in > * { opacity: 1; transform: none; } @media (max-width: 767px) { .mv-js [data-mv="from-left"], .mv-js [data-mv="from-right"] { transform: translate3d(0, var(--mv-y), 0); } } /* --- Descendants déclenchés par l'ancêtre .is-in --- */ .mv-js [data-mv-pop] { opacity: 0; transform: scale(.6); transition: opacity 420ms var(--mv-spring) calc(var(--mv-delay, 0ms) + 140ms), transform 420ms var(--mv-spring) calc(var(--mv-delay, 0ms) + 140ms), background-color .3s, color .3s, border-color .3s; } .mv-js .is-in [data-mv-pop] { opacity: 1; transform: none; } .mv-js [data-mv-late] { opacity: 0; transition: opacity var(--mv-dur) var(--mv-ease) calc(var(--mv-delay, 0ms) + 240ms), background-color .15s; } .mv-js .is-in [data-mv-late] { opacity: 1; } .mv-js [data-mv-badge] { opacity: 0; transform: translate3d(24px, -6px, 0); transition: opacity 420ms var(--mv-ease) calc(var(--mv-delay, 0ms) + var(--mv-dur)), transform 420ms var(--mv-ease) calc(var(--mv-delay, 0ms) + var(--mv-dur)); } .mv-js .is-in [data-mv-badge] { opacity: 1; transform: none; } .mv-js [data-mv-stars] > * { opacity: 0; transform: scale(.3) rotate(-25deg); transition: opacity 360ms var(--mv-spring) calc(var(--mv-delay, 0ms) + 320ms + var(--k, 0) * 70ms), transform 360ms var(--mv-spring) calc(var(--mv-delay, 0ms) + 320ms + var(--k, 0) * 70ms); } .mv-js .is-in [data-mv-stars] > * { opacity: 1; transform: none; } /* --- Scénario séquencé (démo plateforme) --- */ .mv-js [data-mv-at] { opacity: 0; transform: translate3d(0, 8px, 0); transition: opacity 460ms var(--mv-ease), transform 460ms var(--mv-ease); } .mv-js [data-mv-bubble="right"] { transform: translate3d(14px, 6px, 0) scale(.94); transform-origin: right bottom; } .mv-js [data-mv-bubble="left"] { transform: translate3d(-14px, 6px, 0) scale(.94); transform-origin: left bottom; } .mv-js [data-mv-at].is-on { opacity: 1; transform: none; } .mv-js [data-mv-at].is-on.opacity-50 { opacity: .5; } .mv-js [data-mv-bar] { transition: width 1000ms var(--mv-ease); } /* --- Halos, barre de progression, FAQ, timeline --- */ @keyframes mv-breathe { 0%, 100% { opacity: 1; } 50% { opacity: .5; } } .mv-js [data-mv-glow] { animation: mv-breathe 7s ease-in-out infinite; } .mv-progress { position: fixed; top: 0; left: 0; width: 100%; height: 3px; background: #06A0F7; transform-origin: left center; transform: scaleX(0); z-index: 60; pointer-events: none; } @keyframes mv-open { from { opacity: 0; transform: translate3d(0, -6px, 0); } } .mv-js details[open] > summary + div { animation: mv-open 300ms var(--mv-ease); } @keyframes mv-pop-box { 0% { transform: scale(1); } 45% { transform: scale(1.14); } 100% { transform: scale(1); } } .mv-js .step-box.border-brand-500 { animation: mv-pop-box 480ms var(--mv-ease); } /* --- Filet de sécurité (script non initialisé) et préférence système --- */ .mv-fallback [data-mv], .mv-fallback [data-mv-group] > *, .mv-fallback [data-mv-pop], .mv-fallback [data-mv-late], .mv-fallback [data-mv-badge], .mv-fallback [data-mv-stars] > *, .mv-fallback [data-mv-at] { opacity: 1 !important; transform: none !important; transition: none !important; } .mv-fallback [data-mv-at].opacity-50 { opacity: .5 !important; } @media (prefers-reduced-motion: reduce) { .mv-js [data-mv], .mv-js [data-mv-group] > *, .mv-js [data-mv-pop], .mv-js [data-mv-late], .mv-js [data-mv-badge], .mv-js [data-mv-stars] > *, .mv-js [data-mv-at] { opacity: 1 !important; transform: none !important; transition: none !important; } .mv-js [data-mv-at].opacity-50 { opacity: .5 !important; } .mv-js [data-mv-glow], .mv-js .step-box, .mv-js details[open] > summary + div { animation: none !important; } .mv-js [data-mv-bar] { transition: none !important; } .mv-progress { display: none; } }