/* ============================================================
   OVINIS · Mouvements des boutons de landing (par bouton)
   Chaque bouton reçoit une classe .maeu-mv-<effet> choisie dans
   l'éditeur de landing. Cible : le bouton lui-même (.ovl-btn sur
   le front, .b sur la scène de l'éditeur = aperçu live).
   ============================================================ */

@property --mcang{syntax:'<angle>';initial-value:0deg;inherits:false}

/* ---------- Keyframes ---------- */
@keyframes mc-glow{0%,100%{box-shadow:0 16px 40px rgba(0,0,0,.32),0 0 0 0 rgba(95,201,176,0)}50%{box-shadow:0 16px 40px rgba(0,0,0,.34),0 0 30px 5px rgba(95,201,176,.6)}}
@keyframes mc-breath{0%,100%{box-shadow:0 16px 40px rgba(0,0,0,.32),0 0 10px rgba(95,201,176,.18)}50%{box-shadow:0 16px 40px rgba(0,0,0,.32),0 0 26px rgba(95,201,176,.46)}}
@keyframes mc-ring{0%{box-shadow:0 0 0 0 rgba(95,201,176,.5)}70%,100%{box-shadow:0 0 0 16px rgba(95,201,176,0)}}
@keyframes mc-ring2{0%{box-shadow:0 0 0 0 rgba(95,201,176,.5),0 0 0 0 rgba(95,201,176,.3)}100%{box-shadow:0 0 0 14px rgba(95,201,176,0),0 0 0 26px rgba(95,201,176,0)}}
@keyframes mc-sweep{to{left:135%}}
@keyframes mc-shim{0%{left:-130%}55%,100%{left:140%}}
@keyframes mc-grad{0%{background-position:0% 50%}50%{background-position:100% 50%}100%{background-position:0% 50%}}
@keyframes mc-ang{to{--mcang:360deg}}
@keyframes mc-float{0%,100%{transform:translateY(0)}50%{transform:translateY(-7px)}}
@keyframes mc-beat{0%,100%{transform:scale(1)}50%{transform:scale(1.06)}}
@keyframes mc-bounce{0%,100%{transform:translateY(0)}30%{transform:translateY(-11px)}55%{transform:translateY(0)}75%{transform:translateY(-5px)}}
@keyframes mc-wobble{0%,100%{transform:rotate(0)}25%{transform:rotate(-2.2deg)}75%{transform:rotate(2.2deg)}}
@keyframes mc-swing{0%,100%{transform:rotate(0)}20%{transform:rotate(4deg)}40%{transform:rotate(-3deg)}60%{transform:rotate(2deg)}80%{transform:rotate(-1deg)}}
@keyframes mc-tada{0%{transform:scale(1) rotate(0)}10%,20%{transform:scale(.92) rotate(-3deg)}30%,50%,70%,90%{transform:scale(1.08) rotate(3deg)}40%,60%,80%{transform:scale(1.08) rotate(-3deg)}100%{transform:scale(1) rotate(0)}}
@keyframes mc-hb{0%{transform:scale(1)}14%{transform:scale(1.11)}28%{transform:scale(1)}42%{transform:scale(1.11)}70%{transform:scale(1)}}
@keyframes mc-rubber{0%,100%{transform:scale(1,1)}30%{transform:scale(1.14,.86)}40%{transform:scale(.9,1.12)}50%{transform:scale(1.06,.94)}65%{transform:scale(.98,1.02)}}
@keyframes mc-hop{0%,100%{transform:translateY(0)}14%{transform:translateY(-14px)}28%{transform:translateY(0)}42%{transform:translateY(-6px)}56%{transform:translateY(0)}}
@keyframes mc-buzz{0%,86%,100%{transform:rotate(0)}88%{transform:rotate(1.6deg)}90%{transform:rotate(-1.6deg)}92%{transform:rotate(1.6deg)}94%{transform:rotate(-1.6deg)}96%{transform:rotate(1deg)}98%{transform:rotate(-1deg)}}
@keyframes mc-pop{0%,68%,100%{transform:scale(1)}78%{transform:scale(1.12)}88%{transform:scale(.97)}}
@keyframes mc-nod{0%,82%,100%{transform:translateY(0)}86%{transform:translateY(-5px)}90%{transform:translateY(0)}94%{transform:translateY(-5px)}98%{transform:translateY(0)}}
@keyframes mc-orbit{0%,100%{transform:translate(0,0)}25%{transform:translate(5px,-5px)}50%{transform:translate(0,-7px)}75%{transform:translate(-5px,-5px)}}
@keyframes mc-shake{0%,90%,100%{transform:translateX(0)}91%{transform:translateX(-3px)}92%{transform:translateX(3px)}93%{transform:translateX(-3px)}94%{transform:translateX(3px)}95%{transform:translateX(-2px)}96%{transform:translateX(2px)}97%{transform:translateX(-1px)}}
@keyframes mc-jelly{0%,100%{transform:scale(1,1)}25%{transform:scale(1.14,.86)}40%{transform:scale(.9,1.12)}60%{transform:scale(1.04,.96)}80%{transform:scale(.98,1.02)}}
@keyframes mc-bob{0%,100%{transform:translateX(0)}50%{transform:translateX(6px)}}
@keyframes mc-rip{to{transform:scale(1);opacity:0}}

/* Les effets à reflet/lumière ont besoin de rogner le pseudo-élément. */
.maeu-mv-shine,.maeu-mv-shimmer,.maeu-mv-spotlight,.maeu-mv-border,.maeu-mv-gold,.maeu-mv-sheen,.maeu-mv-ripple{overflow:hidden}

/* 01 · Halo pulsé */
.maeu-mv-glow{animation:mc-glow 2.2s ease-in-out infinite}
/* 02 · Reflet balayage (survol) */
.maeu-mv-shine::before{content:"";position:absolute;top:0;left:-130%;width:60%;height:100%;background:linear-gradient(100deg,transparent,rgba(255,255,255,.55),transparent);transform:skewX(-18deg);pointer-events:none;z-index:2}
.maeu-mv-shine:hover::before{animation:mc-sweep .85s ease}
/* 03 · Scintillement auto */
.maeu-mv-shimmer::before{content:"";position:absolute;top:0;left:-130%;width:55%;height:100%;background:linear-gradient(100deg,transparent,rgba(255,255,255,.5),transparent);transform:skewX(-18deg);pointer-events:none;z-index:2;animation:mc-shim 3.2s ease-in-out infinite}
/* 04 · Dégradé vivant */
.maeu-mv-gradient{background:linear-gradient(120deg,#06342d,#0d735f,#63d1ba,#0d735f,#06342d)!important;background-size:280% 100%!important;color:#fff!important;animation:mc-grad 5s ease infinite}
/* 05 · Liseré lumineux */
.maeu-mv-border::before{content:"";position:absolute;inset:0;border-radius:inherit;padding:2px;background:conic-gradient(from var(--mcang,0deg),transparent 0 62%,#5FC9B0 78%,#EAFBF5 84%,transparent 92%);-webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);-webkit-mask-composite:xor;mask-composite:exclude;pointer-events:none;z-index:2;animation:mc-ang 2.6s linear infinite}
/* 06 · Respiration néon */
.maeu-mv-breath{animation:mc-breath 3.4s ease-in-out infinite}
/* 07 · Projecteur curseur (survol, JS) */
.maeu-mv-spotlight::before{content:"";position:absolute;inset:0;border-radius:inherit;background:radial-gradient(120px circle at var(--mx,50%) var(--my,50%),rgba(255,255,255,.55),transparent 60%);opacity:0;transition:opacity .3s;pointer-events:none;z-index:2}
.maeu-mv-spotlight:hover::before{opacity:1}
/* 08 · Lévitation */
.maeu-mv-float{animation:mc-float 2.6s ease-in-out infinite}
/* 09 · Battement */
.maeu-mv-pulse{animation:mc-beat 1.6s ease-in-out infinite}
/* 10 · Rebond (survol) */
.maeu-mv-bounce:hover{animation:mc-bounce .6s ease}
/* 11 · Bascule (survol) */
.maeu-mv-wobble:hover{animation:mc-wobble .6s ease}
/* 12 · Flèche glissante (survol) */
.maeu-mv-arrow::after{content:"\2192";position:static;inset:auto;width:auto;height:auto;background:none;transform:translateX(0);margin-inline-start:6px;font-weight:900;transition:transform .3s ease}
.maeu-mv-arrow:hover::after{transform:translateX(6px)}
/* 13 · Bouton 3D (clic) */
.maeu-mv-depth{box-shadow:0 8px 0 #0a3b31,0 18px 30px rgba(0,0,0,.34);transition:transform .08s ease,box-shadow .08s ease}
.maeu-mv-depth:active{transform:translateY(6px);box-shadow:0 2px 0 #0a3b31,0 8px 16px rgba(0,0,0,.34)}
/* 14 · Aimant curseur (survol, JS) */
.maeu-mv-magnetic{transition:transform .18s ease,box-shadow .18s ease}
/* 15 · Vibration */
.maeu-mv-shake{animation:mc-shake 3s ease-in-out infinite}
/* 16 · Gélatine (clic) */
.maeu-mv-jelly:active{animation:mc-jelly .55s ease}
/* 17 · Onde radar */
.maeu-mv-ring{animation:mc-ring 1.9s ease-out infinite}
/* 18 · Ondulation au clic (JS ajoute .mc-rip) */
.maeu-mv-ripple .mc-rip{position:absolute;border-radius:50%;background:rgba(255,255,255,.55);transform:scale(0);animation:mc-rip .65s ease-out;pointer-events:none;z-index:2}
/* 19 · Satin premium (survol) */
.maeu-mv-sheen{transition:transform .35s cubic-bezier(.2,.7,.2,1),box-shadow .35s ease}
.maeu-mv-sheen::before{content:"";position:absolute;top:0;left:-130%;width:58%;height:100%;background:linear-gradient(100deg,transparent,rgba(255,255,255,.4),transparent);transform:skewX(-18deg);pointer-events:none;z-index:2}
.maeu-mv-sheen:hover{transform:translateY(-3px)}
.maeu-mv-sheen:hover::before{animation:mc-sweep 1.1s ease}
/* 20 · Soulignement or (survol) */
.maeu-mv-gold::before{content:"";position:absolute;left:14%;right:14%;bottom:8px;height:2px;border-radius:2px;background:linear-gradient(90deg,#d8bd86,#f0e2be,#d8bd86);transform:scaleX(0);transform-origin:left;transition:transform .4s ease;pointer-events:none;z-index:2}
.maeu-mv-gold:hover{transform:translateY(-2px)}
.maeu-mv-gold:hover::before{transform:scaleX(1)}
/* 21 · Balancier */
.maeu-mv-swing{transform-origin:top center;animation:mc-swing 2.6s ease-in-out infinite}
/* 22 · Tada */
.maeu-mv-tada{animation:mc-tada 2.8s ease infinite}
/* 23 · Double battement */
.maeu-mv-heartbeat{animation:mc-hb 1.7s ease-in-out infinite}
/* 24 · Élastique */
.maeu-mv-rubber{animation:mc-rubber 2.4s ease infinite}
/* 25 · Saut */
.maeu-mv-hop{animation:mc-hop 2.1s ease-in-out infinite}
/* 26 · Buzz */
.maeu-mv-buzz{animation:mc-buzz 2.8s ease-in-out infinite}
/* 27 · Flèche qui appelle */
.maeu-mv-callarrow::after{content:"\2192";position:static;inset:auto;width:auto;height:auto;background:none;margin-inline-start:6px;font-weight:900;animation:mc-bob 1s ease-in-out infinite}
/* 28 · Pop rebond */
.maeu-mv-pop{animation:mc-pop 2.4s ease-in-out infinite}
/* 29 · Onde double */
.maeu-mv-ring2{animation:mc-ring2 2s ease-out infinite}
/* 30 · Halo + battement */
.maeu-mv-attn{animation:mc-beat 1.6s ease-in-out infinite,mc-glow 2.2s ease-in-out infinite}
/* 31 · Signe de tête */
.maeu-mv-nod{animation:mc-nod 3s ease-in-out infinite}
/* 32 · Dérive orbitale */
.maeu-mv-orbit{animation:mc-orbit 3s ease-in-out infinite}

/* ---------- Accessibilité ---------- */
@media (prefers-reduced-motion:reduce){
  [class*="maeu-mv-"],[class*="maeu-mv-"]::before,[class*="maeu-mv-"]::after{animation:none!important;transition:none!important}
}