/* ================================================================ Anna Marini — motion & 3D Charge uniquement par /anna-marini. Tout est scope par .am-page pour ne jamais toucher au reste du site. Deux regles de fond : 1. On n'anime que transform et opacity. Ce sont les deux seules proprietes que le navigateur peut traiter sur le GPU : animer top, left, width ou box-shadow provoque un recalcul de mise en page a chaque image et fait chuter le nombre d'images/seconde sur telephone. 2. Rien ne demarre avant que le JS ait pose la classe .am-mo sur . Si le JS ne s'execute pas (erreur, vieux navigateur, robot d'indexation), la page reste parfaitement lisible et aucun contenu n'est cache. C'est le point critique : une animation d'apparition mal faite rend le texte invisible pour Google. ================================================================ */ /* ---------- 1. Apparitions au defilement ---------- */ html.am-mo .am-page [data-mo]{ opacity:0; will-change:transform,opacity; transition:opacity .74s cubic-bezier(.22,.61,.36,1), transform .74s cubic-bezier(.22,.61,.36,1); transition-delay:var(--mo-d,0ms); } html.am-mo .am-page [data-mo="up"] {transform:translate3d(0,32px,0)} html.am-mo .am-page [data-mo="left"] {transform:translate3d(-38px,0,0)} html.am-mo .am-page [data-mo="right"]{transform:translate3d(38px,0,0)} html.am-mo .am-page [data-mo="zoom"] {transform:scale(.93)} /* Une carte qui arrive legerement inclinee dans l'espace : c'est ce qui donne la sensation de profondeur, plus qu'un simple fondu. */ html.am-mo .am-page [data-mo="tilt"] {transform:perspective(1200px) rotateX(9deg) translate3d(0,40px,0);transform-origin:50% 100%} html.am-mo .am-page [data-mo].mo-in{opacity:1;transform:none} /* Sur petit ecran, une apparition qui vient de la gauche ou de la droite decale l'element hors de la fenetre AVANT de se jouer. Le document devient alors plus large que l'ecran et le telephone affiche une barre de defilement horizontale — mesure : 404 px de contenu pour 390 px de fenetre. On remplace donc le mouvement lateral par un mouvement vertical en dessous de 900 px, ou il n'y a de toute facon pas la place pour qu'un deplacement horizontal se remarque. */ @media (max-width:900px){ html.am-mo .am-page [data-mo="left"], html.am-mo .am-page [data-mo="right"]{transform:translate3d(0,26px,0)} } /* Une fois l'animation jouee on relache will-change : le laisser en permanence reserve de la memoire GPU pour rien. */ html.am-mo .am-page [data-mo].mo-done{will-change:auto} /* ---------- 2. Hero : entree en cascade ---------- */ html.am-mo .am-page .phero .breadcrumb, html.am-mo .am-page .phero .badge-70, html.am-mo .am-page .phero p, html.am-mo .am-page .phero .cta{ opacity:0;transform:translate3d(0,26px,0); animation:amRise .82s cubic-bezier(.22,.61,.36,1) forwards} html.am-mo .am-page .phero .breadcrumb{animation-delay:.06s} html.am-mo .am-page .phero .badge-70 {animation-delay:.16s} html.am-mo .am-page .phero p {animation-delay:.62s} html.am-mo .am-page .phero .cta {animation-delay:.76s} @keyframes amRise{to{opacity:1;transform:none}} /* La signature apparait comme si elle s'ecrivait : un masque en degrade balaye l'image de gauche a droite. L'image reste une image (donc nette et legere) — seul le masque bouge. */ html.am-mo .am-page .phero .am-signature img{ -webkit-mask-image:linear-gradient(100deg,#000 0 35%,rgba(0,0,0,.25) 46%,transparent 56%); mask-image:linear-gradient(100deg,#000 0 35%,rgba(0,0,0,.25) 46%,transparent 56%); -webkit-mask-size:280% 100%;mask-size:280% 100%; -webkit-mask-position:180% 0;mask-position:180% 0; animation:amInk 1.5s cubic-bezier(.5,.05,.2,1) .3s forwards} @keyframes amInk{to{-webkit-mask-position:0 0;mask-position:0 0}} /* Le voile du hero respire tres lentement — quelques pixels, juste assez pour que l'image ne paraisse pas figee. */ html.am-mo .am-page .phero.has-img::before{ animation:amBreathe 22s ease-in-out infinite alternate} @keyframes amBreathe{from{transform:scale(1.02)}to{transform:scale(1.09)}} /* ---------- 3. Parallaxe ---------- */ /* Le decalage est calcule en JS et injecte dans --mo-y. */ html.am-mo .am-page [data-par]{will-change:transform; transform:translate3d(0,var(--mo-y,0px),0)} /* ---------- 4. Cartes en 3D au survol ---------- */ @media (hover:hover) and (pointer:fine){ html.am-mo .am-page #prestations .card{ transform-style:preserve-3d; transition:transform .34s cubic-bezier(.22,.61,.36,1), box-shadow .34s ease} html.am-mo .am-page #prestations .card.mo-tilt, html.am-mo .am-page #prestations .card[data-mo].mo-in.mo-tilt{ transform:perspective(900px) rotateX(var(--tx,0deg)) rotateY(var(--ty,0deg)) translate3d(0,-6px,0); box-shadow:0 30px 60px rgba(58,36,23,.26)} /* Un reflet qui suit le curseur : c'est lui qui vend la 3D. */ html.am-mo .am-page #prestations .card::after{ content:"";position:absolute;inset:0;border-radius:inherit; pointer-events:none;opacity:0;transition:opacity .34s ease; background:radial-gradient(320px circle at var(--mx,50%) var(--my,50%), rgba(255,255,255,.55),transparent 62%)} html.am-mo .am-page #prestations .card.mo-tilt::after{opacity:1} /* Boutons magnetiques : ils viennent un peu vers le curseur. */ html.am-mo .am-page .btn-gold{transition:transform .3s cubic-bezier(.22,.61,.36,1), background .25s ease,color .25s ease,border-color .25s ease} html.am-mo .am-page .btn-gold.mo-mag{ transform:translate3d(var(--gx,0px),var(--gy,0px),0) scale(1.035)} } /* ---------- 5. Marguerites ---------- */ html.am-mo .daisy-band .daisy{ animation:amSpin var(--sp,17s) linear infinite; transform-origin:50% 50%} html.am-mo .daisy-band .daisy:nth-of-type(2n){animation-direction:reverse} @keyframes amSpin{to{transform:rotate(360deg)}} /* ---------- 6. Galerie ---------- */ /* Sur grand ecran chaque photo se souleve legerement au survol. */ @media (hover:hover) and (pointer:fine) and (min-width:901px){ html.am-mo .am-page .am-gallery img{ transition:transform .5s cubic-bezier(.22,.61,.36,1), box-shadow .5s ease} html.am-mo .am-page .am-gallery img:hover{ transform:translate3d(0,-8px,0) scale(1.022); box-shadow:0 26px 54px rgba(58,36,23,.30)} } /* ---------- 7. Le trait sunburst se deroule ---------- */ html.am-mo .sunburst{transform:scaleX(0);transform-origin:0 50%; transition:transform 1.1s cubic-bezier(.22,.61,.36,1)} html.am-mo .sunburst.mo-in{transform:scaleX(1)} /* ---------- 8. Respect du reglage systeme ---------- */ /* Certaines personnes desactivent les animations parce qu'elles leur donnent le vertige (troubles vestibulaires). Dans ce cas on ne ralentit pas : on supprime, et surtout on rend tout visible. */ @media (prefers-reduced-motion:reduce){ html.am-mo .am-page [data-mo], html.am-mo .am-page .phero .breadcrumb, html.am-mo .am-page .phero .badge-70, html.am-mo .am-page .phero p, html.am-mo .am-page .phero .cta{ opacity:1!important;transform:none!important;animation:none!important} html.am-mo .am-page .phero .am-signature img{ -webkit-mask-image:none!important;mask-image:none!important;animation:none!important} html.am-mo .am-page .phero.has-img::before, html.am-mo .daisy-band .daisy{animation:none!important} html.am-mo .am-page [data-par]{transform:none!important} html.am-mo .sunburst{transform:none!important;transition:none!important} } /* ================================================================ 9. Profondeur 3D du hero L'image de fond, la signature et le texte sont places sur trois plans differents en Z. Quand la souris bouge, chaque plan se deplace d'une quantite differente : c'est la parallaxe qui cree la sensation de volume, exactement comme au theatre avec des decors superposes. Le conteneur porte la perspective, les plans ne portent que leur translation. ================================================================ */ html.am-mo .am-page .phero{perspective:1000px;perspective-origin:50% 45%} html.am-mo .am-page .phero.has-img::before{ will-change:transform; transform:scale(1.06) translate3d(var(--hx,0px),var(--hy,0px),0)} html.am-mo .am-page .phero .wrap{ transform:translate3d(var(--wx,0px),var(--wy,0px),0); transition:transform .5s cubic-bezier(.22,.61,.36,1)} html.am-mo .am-page .phero .am-signature{ transform:translate3d(var(--sx,0px),var(--sy,0px),0); transition:transform .45s cubic-bezier(.22,.61,.36,1);will-change:transform} /* La souris pilote : on coupe la transition pendant le mouvement sinon le suivi paraît mou et en retard. */ html.am-mo .am-page .phero.mo-live .wrap, html.am-mo .am-page .phero.mo-live .am-signature{transition:none} /* ================================================================ 10. Galerie en volume (grand ecran) Chaque photo pivote legerement selon sa position dans l'ecran : inclinee vers le fond quand elle arrive, de face au centre. On obtient un mur de photos qui se redresse au defilement. ================================================================ */ @media (min-width:1000px){ html.am-mo .am-page #am-gallery-sec .wrap{perspective:1400px} html.am-mo .am-page .am-gallery{transform-style:preserve-3d} html.am-mo .am-page #am-gallery-sec .am-gallery img, html.am-mo .am-page #am-gallery-sec .am-gallery img[data-mo].mo-in{ transform:translate3d(0,var(--mo-y,0px),0) rotateY(var(--gy,0deg)) rotateX(var(--gx,0deg)); transform-origin:50% 50%; transition:box-shadow .5s ease} /* Le survol reprend la main : on annule la rotation liee au defilement pour que la photo se presente bien a plat. */ html.am-mo .am-page #am-gallery-sec .am-gallery img:hover, html.am-mo .am-page #am-gallery-sec .am-gallery img[data-mo].mo-in:hover{ transform:translate3d(0,var(--mo-y,0px),0) scale(1.03); box-shadow:0 30px 60px rgba(58,36,23,.34);z-index:2;position:relative} } @media (prefers-reduced-motion:reduce){ html.am-mo .am-page .phero.has-img::before, html.am-mo .am-page .phero .wrap, html.am-mo .am-page .phero .am-signature, html.am-mo .am-page .am-gallery img{transform:none!important} }