/* =========================================================
   BILLIONNAIRE ONLINE -- couche mouvement (motion layer)
   Ajoutee 2026-08-22. Se pose PAR-DESSUS style.css / engine.css :
   aucune regle existante n'est reecrite, tout est additif.
   Regles dures :
   - transform + opacity + filter uniquement (pas de reflow au scroll)
   - tout s'annule sous prefers-reduced-motion
   - aucune police, aucune image, aucun script externe
   ASCII only.
   ========================================================= */

/* ---------- 1. barre de progression de lecture ---------- */
.mo-progress{
  position:fixed;top:0;left:0;height:2px;width:100%;z-index:120;
  transform:scaleX(0);transform-origin:0 50%;
  background:linear-gradient(90deg,var(--mint),var(--violet) 55%,var(--gold));
  box-shadow:0 0 18px rgba(139,124,255,.55);
  will-change:transform;pointer-events:none;
}

/* ---------- 2. aurore de fond, lente et economique ---------- */
.mo-aurora{
  position:fixed;inset:-25vmax;z-index:-2;pointer-events:none;
  filter:blur(90px);opacity:.5;
}
.mo-aurora i{
  position:absolute;display:block;border-radius:50%;
  animation:mo-drift 34s var(--ease) infinite alternate;
}
.mo-aurora i:nth-child(1){
  width:46vmax;height:46vmax;left:4%;top:2%;
  background:radial-gradient(circle,rgba(94,234,212,.30),transparent 65%);
}
.mo-aurora i:nth-child(2){
  width:52vmax;height:52vmax;right:0%;top:12%;
  background:radial-gradient(circle,rgba(139,124,255,.32),transparent 65%);
  animation-duration:44s;animation-delay:-9s;
}
.mo-aurora i:nth-child(3){
  width:38vmax;height:38vmax;left:32%;bottom:-6%;
  background:radial-gradient(circle,rgba(242,193,78,.16),transparent 65%);
  animation-duration:52s;animation-delay:-20s;
}
@keyframes mo-drift{
  from{transform:translate3d(0,0,0) scale(1)}
  to{transform:translate3d(6vmax,-5vmax,0) scale(1.18)}
}

/* ---------- 3. barre de navigation qui se condense ---------- */
.nav{transition:background .45s var(--ease),backdrop-filter .45s var(--ease),
     box-shadow .45s var(--ease),border-color .45s var(--ease)}
body.mo-scrolled .nav{
  background:rgba(8,11,19,.78);
  -webkit-backdrop-filter:saturate(180%) blur(16px);
  backdrop-filter:saturate(180%) blur(16px);
  box-shadow:0 12px 34px -24px rgba(0,0,0,.9);
  border-bottom-color:rgba(94,234,212,.16);
}

/* ---------- 4. reveal enrichi (remplace le simple fondu) ---------- */
.reveal{
  opacity:0;transform:translate3d(0,26px,0);filter:blur(6px);
  transition:opacity .78s var(--ease),transform .78s var(--ease),filter .78s var(--ease);
  will-change:opacity,transform;
}
.reveal.in{opacity:1;transform:none;filter:none}
.reveal[data-mo="left"]{transform:translate3d(-30px,10px,0)}
.reveal[data-mo="right"]{transform:translate3d(30px,10px,0)}
.reveal[data-mo="zoom"]{transform:scale(.94) translate3d(0,14px,0)}

/* ---------- 5. titre du hero, mot par mot ---------- */
.mo-word{
  display:inline-block;opacity:0;
  transform:translate3d(0,.62em,0) rotate(2.2deg);
  filter:blur(8px);
  animation:mo-word-in .82s var(--ease) forwards;
}
@keyframes mo-word-in{
  to{opacity:1;transform:none;filter:none}
}

/* ---------- 6. cartes moteur : halo qui suit la souris + relief ---------- */
.engine-card,.tool-card,.buy-card{
  position:relative;isolation:isolate;
  transition:transform .5s var(--ease),border-color .5s var(--ease),
             box-shadow .5s var(--ease);
}
.engine-card::after,.tool-card::after,.buy-card::after{
  content:"";position:absolute;inset:0;border-radius:inherit;z-index:-1;
  opacity:0;transition:opacity .45s var(--ease);
  background:radial-gradient(340px circle at var(--mx,50%) var(--my,50%),
             rgba(139,124,255,.20),rgba(94,234,212,.09) 42%,transparent 70%);
}
.engine-card:hover,.tool-card:hover,.buy-card:hover{
  transform:translate3d(0,-6px,0);
  border-color:rgba(94,234,212,.34);
  box-shadow:0 34px 66px -34px rgba(0,0,0,.85);
}
.engine-card:hover::after,.tool-card:hover::after,.buy-card:hover::after{opacity:1}

/* lisere anime en haut de carte au survol */
.engine-card::before{
  content:"";position:absolute;left:0;right:0;top:0;height:1px;border-radius:inherit;
  background:var(--grad-brand);transform:scaleX(0);transform-origin:0 50%;
  transition:transform .55s var(--ease);
}
.engine-card:hover::before{transform:scaleX(1)}

/* ---------- 7. boutons : reflet qui traverse ---------- */
.btn{position:relative;overflow:hidden;
     transition:transform .3s var(--ease),box-shadow .3s var(--ease),filter .3s var(--ease)}
.btn::after{
  content:"";position:absolute;top:0;bottom:0;width:44%;left:-60%;
  background:linear-gradient(100deg,transparent,rgba(255,255,255,.30),transparent);
  transform:skewX(-18deg);transition:left .62s var(--ease);pointer-events:none;
}
.btn:hover::after{left:120%}
.btn:hover{transform:translate3d(0,-2px,0)}
.btn:active{transform:translate3d(0,0,0) scale(.985)}

/* ---------- 8. liens de preuve : la fleche avance ---------- */
.proof,.go,.engine-more{transition:color .3s var(--ease)}
.proof .mo-arrow,.go .mo-arrow,.engine-more .mo-arrow{
  display:inline-block;transition:transform .34s var(--ease);
}
.proof:hover .mo-arrow,.go:hover .mo-arrow,.engine-more:hover .mo-arrow{
  transform:translateX(5px);
}

/* ---------- 9. chiffres ---------- */
.mo-count{font-variant-numeric:tabular-nums}

/* ---------- 10. pastille "live" qui respire ---------- */
.live{position:relative}
.live::before{
  content:"";position:absolute;inset:-6px;border-radius:99px;
  border:1px solid rgba(94,234,212,.5);
  animation:mo-pulse 2.4s var(--ease) infinite;pointer-events:none;
}
@keyframes mo-pulse{
  0%{transform:scale(.7);opacity:.9}
  70%{transform:scale(1.25);opacity:0}
  100%{opacity:0}
}

/* ---------- 12. code MCP : curseur qui clignote ---------- */
.mo-caret::after{
  content:"";display:inline-block;width:8px;height:1.05em;margin-left:3px;
  vertical-align:-2px;background:var(--mint);
  animation:mo-blink 1.15s steps(1) infinite;
}
@keyframes mo-blink{0%,49%{opacity:1}50%,100%{opacity:0}}

/* ---------- 13. formulaire : etat d'envoi ---------- */
.email-form button[disabled]{position:relative;color:transparent!important}
.email-form button[disabled]::before{
  content:"";position:absolute;left:50%;top:50%;width:16px;height:16px;margin:-8px 0 0 -8px;
  border:2px solid rgba(8,11,19,.35);border-top-color:#080b13;border-radius:50%;
  animation:mo-spin .7s linear infinite;
}
@keyframes mo-spin{to{transform:rotate(360deg)}}
.form-ok{transition:opacity .45s var(--ease),transform .45s var(--ease)}
.form-ok:not(.show){opacity:0;transform:translate3d(0,6px,0)}
.form-ok.show{opacity:1;transform:none}

/* ---------- 14. ancres : pas de saut sous la barre fixe ---------- */
section[id]{scroll-margin-top:88px}

/* ---------- 15. accessibilite : tout se coupe ---------- */
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{
    animation-duration:.001ms!important;animation-iteration-count:1!important;
    transition-duration:.001ms!important;scroll-behavior:auto!important;
  }
  .reveal{opacity:1;transform:none;filter:none}
  .mo-word{opacity:1;transform:none;filter:none}
  .mo-aurora,.mo-progress{display:none}
}