/* ============================================================ calix-motion.css — états initiaux des animations Ne s'applique QUE si est présent. Cette classe est posée par un script inline dans le . Sans JS : rien n'est masqué, le site s'affiche normalement. ============================================================ */ /* Effet 1 — révélation du titre mot par mot */ .motion .m-word { display:inline-block; overflow:hidden; vertical-align:top; } .motion .m-word > span { display:inline-block; will-change:transform; } /* Effet 2 — masque sur les chiffres */ .motion .m-nummask { display:block; overflow:hidden; } /* Effet 4 — ligne cyan sous les H2 */ .motion .m-line { position:relative; display:inline-block; padding-bottom:.38em; } .motion .m-line::after { content:''; position:absolute; bottom:0; left:0; height:3px; width:100%; background:#00FFFF; border-radius:2px; transform:scaleX(0); transform-origin:left; } .motion .m-line.traced::after { transform:scaleX(1); transition:transform .75s cubic-bezier(.16,1,.3,1); } /* Effet 5 — halo au curseur */ .m-glow { position:fixed; top:0; left:0; width:340px; height:340px; border-radius:50%; pointer-events:none; z-index:1; opacity:0; background:radial-gradient(circle, rgba(0,255,255,.11) 0%, rgba(0,255,255,0) 68%); transform:translate(-50%,-50%); transition:opacity .5s; will-change:transform; } @media (max-width:900px) { .m-glow { display:none; } } /* Effet 6 — images : voile qui se lève */ .motion .m-imgwrap { position:relative; overflow:hidden; } .motion .m-imgwrap::after { content:''; position:absolute; inset:0; background:#1F2A44; transform:scaleY(1); transform-origin:bottom; z-index:2; } .motion .m-imgwrap.revealed::after { transform:scaleY(0); transition:transform .95s cubic-bezier(.16,1,.3,1); } /* Accessibilité : respect du réglage système */ @media (prefers-reduced-motion: reduce) { .motion .m-word > span, .motion [data-m] { transform:none !important; opacity:1 !important; } .motion .m-line::after, .motion .m-imgwrap::after { transition:none !important; } .motion .m-line::after { transform:scaleX(1) !important; } .motion .m-imgwrap::after { transform:scaleY(0) !important; } .m-glow { display:none !important; } }