/* AIGEO motion design (09/10/2026). Décor et transitions seulement ; tout est désactivé si l'utilisateur réduit les animations. */
@property --mo-p{syntax:"<percentage>";inherits:false;initial-value:0%}
@property --mo-a{syntax:"<angle>";inherits:false;initial-value:0deg}

/* 1. Apparition au défilement (activée seulement si le script tourne : classe .mo sur html) */
html.mo .mo-r{opacity:0;transform:translateY(22px);transition:opacity .7s cubic-bezier(.2,.7,.2,1),transform .7s cubic-bezier(.2,.7,.2,1);transition-delay:var(--mo-d,0ms)}
html.mo .mo-r.mo-in{opacity:1;transform:none}

/* 2. Hero vivant : titre en dégradé qui coule, formes qui respirent, halo qui dérive */
.grad{background-size:220% 100%;animation:mo-grad 9s ease-in-out infinite alternate}
@keyframes mo-grad{from{background-position:0% 50%}to{background-position:100% 50%}}
.hero-art img{animation:mo-breathe 16s ease-in-out infinite!important;transform-origin:50% 50%}
.hero-art .a2{animation-duration:21s!important;animation-direction:reverse!important}
@keyframes mo-breathe{0%,100%{translate:0 0;scale:1}33%{translate:0 -16px;scale:1.06 .97}66%{translate:6px 6px;scale:.96 1.05}}
.hero-art::before{content:"";position:absolute;width:60vw;height:60vw;max-width:820px;max-height:820px;left:50%;top:-30%;translate:-50% 0;border-radius:50%;
  background:radial-gradient(closest-side,color-mix(in srgb,var(--g2) 13%,transparent),transparent 70%);animation:mo-drift 18s ease-in-out infinite alternate}
@keyframes mo-drift{from{transform:translate(-8%,0) scale(1)}to{transform:translate(8%,6%) scale(1.12)}}

/* 3. Démo du test : l'anneau se remplit, les entreprises arrivent une à une */
html.mo .test-example .score-ring{--mo-p:0%;background:conic-gradient(var(--accent) 0 var(--mo-p),var(--line) var(--mo-p) 100%);transition:--mo-p 1.4s cubic-bezier(.3,.7,.2,1) .2s}
html.mo .test-example.mo-play .score-ring{--mo-p:33.333%}
html.mo .test-example .example-company,html.mo .test-example .example-action{opacity:0;transform:translateX(-10px);transition:opacity .5s ease,transform .5s ease}
html.mo .test-example.mo-play .example-company,html.mo .test-example.mo-play .example-action{opacity:1;transform:none}
html.mo .test-example.mo-play .example-company:nth-of-type(1){transition-delay:.5s}
html.mo .test-example.mo-play .example-company:nth-of-type(2){transition-delay:.75s}
html.mo .test-example.mo-play .example-company:nth-of-type(3){transition-delay:1s}
html.mo .test-example.mo-play .example-action{transition-delay:1.35s}
.example-company{position:relative}
html.mo .test-example .example-company::after{content:"";position:absolute;left:0;bottom:-1px;height:2px;width:0;border-radius:2px;background:linear-gradient(90deg,var(--g1),var(--g3));transition:width .9s ease}
html.mo .test-example.mo-play .example-company:nth-of-type(1)::after{width:100%;transition-delay:.6s}
html.mo .test-example.mo-play .example-company:nth-of-type(2)::after{width:66%;transition-delay:.85s}
html.mo .test-example.mo-play .example-company:nth-of-type(3)::after{width:33%;transition-delay:1.1s}

/* 4. Micro-interactions */
.card,.plan,.post,.feature,.faq details{transition:transform .25s ease,box-shadow .25s ease,border-color .25s ease}
.card:hover,.plan:hover,.post:hover{transform:translateY(-3px);box-shadow:0 14px 34px -14px color-mix(in srgb,var(--g1) 35%,transparent);border-color:color-mix(in srgb,var(--accent) 35%,var(--line))}
.cta{position:relative;overflow:hidden}
.cta::after{content:"";position:absolute;inset:0;background:linear-gradient(110deg,transparent 30%,rgba(255,255,255,.22) 50%,transparent 70%);transform:translateX(-120%);pointer-events:none}
.cta:hover::after{transform:translateX(120%);transition:transform .7s ease}
.num{transition:background .25s ease}
.card:hover .num{background:linear-gradient(135deg,var(--g1),var(--g3))}
.faq details .rep{overflow:hidden}
.faq summary::after{transition:transform .3s ease,margin .3s ease}

@media (prefers-reduced-motion:reduce){
  html.mo .mo-r{opacity:1!important;transform:none!important;transition:none!important}
  .grad,.hero-art img,.hero-art::before{animation:none!important}
  html.mo .test-example .score-ring{--mo-p:33.333%;transition:none}
  html.mo .test-example .example-company,html.mo .test-example .example-action{opacity:1;transform:none;transition:none}
  html.mo .test-example .example-company::after{display:none}
  .card,.plan,.post,.cta::after{transition:none!important}
  .card:hover,.plan:hover,.post:hover{transform:none}
}
@media print{html.mo .mo-r{opacity:1;transform:none}}

/* 5. Séparateurs de sections : le motif défile lentement de gauche à droite, fondu sur les bords */
section:not(:last-child)::after{width:260px;background-size:107px 18px;background-repeat:repeat-x;background-position:0 50%;
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 30%,#000 70%,transparent);mask-image:linear-gradient(90deg,transparent,#000 30%,#000 70%,transparent);
  animation:mo-sep 7s linear infinite}
@keyframes mo-sep{from{background-position:0 50%}to{background-position:107px 50%}}
@media (prefers-reduced-motion:reduce){section:not(:last-child)::after{animation:none;width:150px;background-size:contain;background-repeat:no-repeat;background-position:center;-webkit-mask-image:none;mask-image:none}}