/* ============================================================ NEXUS VORTEX — ANIMATIONS Trois familles seulement : reveal, mask reveal, scale subtil. Les etats initiaux ne s'appliquent que si JavaScript est actif (classe .nv-js posee sur ), afin que le site reste entierement lisible sans JavaScript. ============================================================ */ /* ============================================================ 1. REVEAL — opacite + translation verticale legere ============================================================ */ .nv-js .nv-reveal{ opacity:0; transform:translateY(28px); transition:opacity var(--nv-slow) var(--nv-ease-soft), transform var(--nv-slow) var(--nv-ease-soft); transition-delay:calc(var(--i,0) * 90ms); } .nv-js .nv-reveal.is-in{ opacity:1; transform:none; } /* ============================================================ 2. MASK REVEAL — pour les grands titres et les images ============================================================ */ .nv-js .nv-mask{ display:block; overflow:hidden; } .nv-js .nv-mask > *{ display:block; transform:translateY(105%); transition:transform var(--nv-slow) var(--nv-ease-soft); transition-delay:calc(var(--i,0) * 110ms); } .nv-js .nv-mask.is-in > *{transform:translateY(0)} /* Titre du hero : une ligne apres l'autre (decalage 110ms) */ .nv-hero__line{display:block;overflow:hidden} .nv-js .nv-hero__line > span{ display:block; transform:translateY(105%); transition:transform 900ms var(--nv-ease-soft); transition-delay:calc(var(--i,0) * 110ms); } .nv-js .nv-hero.is-in .nv-hero__line > span{transform:translateY(0)} /* ============================================================ 3. SCALE SUBTIL — pour les visuels ============================================================ */ .nv-js .nv-scale{ overflow:hidden; } .nv-js .nv-scale > img, .nv-js .nv-scale > svg{ transform:scale(1.04); transition:transform 1200ms var(--nv-ease-soft); } .nv-js .nv-scale.is-in > img, .nv-js .nv-scale.is-in > svg{transform:scale(1)} /* ============================================================ SYMBOLE NEXUS Introduction : apparition + rotation tres faible jusqu'a la position officielle. Puis derive continue quasi imperceptible. Le trace du symbole n'est jamais modifie. ============================================================ */ .nv-js .nv-hero__symbol{ opacity:0; transform:translate(0,-50%) rotate(-9deg) scale(.94); transition:opacity 1600ms var(--nv-ease-soft), transform 1800ms var(--nv-ease-soft); } .nv-js .nv-hero.is-in .nv-hero__symbol{ opacity:.16; transform:translate(0,-50%) rotate(0deg) scale(1); } /* Derive lente : l'utilisateur ne doit pas la remarquer, seulement la ressentir */ .nv-js .nv-hero.is-in .nv-hero__symbol{ animation:nv-drift 22s var(--nv-ease-inout) 2s infinite; } @keyframes nv-drift{ 0%,100%{transform:translate(0,-50%) rotate(0deg) scale(1)} 50% {transform:translate(0,-50%) rotate(4deg) scale(1.012)} } /* ============================================================ MOTIF DU HERO — les deux formes convergent a l'ouverture Etape 1 de la sequence : elles apparaissent legerement ecartees puis rejoignent leur position. ============================================================ */ .nv-js .nv-hero-motif{opacity:0;transition:opacity 1400ms var(--nv-ease-soft)} .nv-js .nv-hero.is-in .nv-hero-motif{opacity:.15} .nv-js .nv-hero-motif polygon{ transition:transform 1700ms var(--nv-ease-soft); } .nv-js .nv-hero-motif .nv-motif-a{transform:rotate(-11deg) scale(.93)} .nv-js .nv-hero-motif .nv-motif-b{transform:rotate(11deg) scale(1.07)} .nv-js .nv-hero.is-in .nv-hero-motif .nv-motif-a, .nv-js .nv-hero.is-in .nv-hero-motif .nv-motif-b{transform:none} /* Derive continue, volontairement a la limite du perceptible */ .nv-js .nv-hero.is-in .nv-hero-motif{ animation:nv-drift-motif 26s var(--nv-ease-inout) 2.4s infinite; } @keyframes nv-drift-motif{ 0%,100%{transform:rotate(0deg)} 50% {transform:rotate(3deg)} } /* Le symbole du header apparait au chargement */ .nv-js .nv-header .nv-brand, .nv-js .nv-header .nv-nav{ opacity:0; transform:translateY(-10px); animation:nv-header-in 700ms var(--nv-ease) forwards; } .nv-js .nv-header .nv-brand{animation-delay:120ms} .nv-js .nv-header .nv-nav{animation-delay:280ms} @keyframes nv-header-in{to{opacity:1;transform:translateY(0)}} /* ============================================================ PARALLAX TRES LEGER (desktop uniquement, pilote en JS) ============================================================ */ .nv-parallax{will-change:transform} /* ============================================================ REDUCED MOTION Contenus affiches directement, aucune animation non essentielle. ============================================================ */ @media (prefers-reduced-motion:reduce){ html{scroll-behavior:auto} .nv-js .nv-reveal, .nv-js .nv-mask > *, .nv-js .nv-hero__line > span, .nv-js .nv-scale > img, .nv-js .nv-scale > svg{ opacity:1!important; transform:none!important; transition:none!important; } .nv-js .nv-hero__symbol{ opacity:.16!important; transform:translate(0,-50%)!important; transition:none!important; animation:none!important; } .nv-js .nv-hero-motif{ opacity:.15!important; transform:none!important; transition:none!important; animation:none!important; } .nv-js .nv-hero-motif polygon{ transform:none!important; transition:none!important; } .nv-journey__fill{transition:none!important} .nv-js .nv-header .nv-brand, .nv-js .nv-header .nv-nav{ opacity:1!important; transform:none!important; animation:none!important; } .nv-menu.is-open .nv-menu__link{ opacity:1!important; transform:none!important; animation:none!important; } .nv-parallax{transform:none!important} *,*::before,*::after{ animation-duration:.01ms!important; animation-iteration-count:1!important; transition-duration:.01ms!important; } }