/* ============================================================================
   QZR vNext — Mascotte « mouvements signature » (chorégraphies festives)
   ----------------------------------------------------------------------------
   Couche STRICTEMENT ADDITIVE et OPT-IN, par-dessus vnext-mascot.css ET
   vnext-mascot-amp.css. Rien ne change tant que l'hôte de la mascotte ne porte
   pas [data-qzr-move="..."] :

     - moonwalk : Parcours / chemin validé          (le mouvement vedette)
     - jump     : montée de niveau                    (saut poing levé)
     - flip     : badge débloqué / Boss vaincu        (salto 360 membres déployés)
     - bow      : fin de session                      (révérence)
     - capeland : victoire en compétition             (atterrissage de super-héros)
     - slump    : série de mauvaises réponses         (dépit comique)

   Le corps entier est animé via `.qzr-m-root` (groupe qui enveloppe tout SAUF
   l'ombre `.qzr-m-shadow`, restée au sol) — ajouté au SVG source unique
   (window.qzrMascotSvg), donc présent partout. Les keyframes portent le préfixe
   `qzrMv*` : AUCUNE keyframe de base ou « amp » n'est réécrite.

   BONUS expressivité (piloté par l'amplification existante, pas un mouvement) :
     - cœurs qui montent DES YEUX + rougeur, sur [data-qzr-amp][data-qzr-expr=love]
       (moment « sans-faute » déjà câblé — s'active donc tout seul).

   À charger APRÈS vnext-mascot-amp.css. Respecte prefers-reduced-motion.
   ============================================================================ */

/* Accessoires de mouvement : cachés par défaut (aussi posés inline opacity=0
   dans le SVG, donc auto-masqués même si cette CSS manque). */
.qzr-m-fx-eyehearts .ehp { transform-box: fill-box; transform-origin: center; }

/* ════════════════════════════════════════════════════════════════════════
   🕺 MOONWALK — Parcours / chemin validé (LE mouvement vedette)
   Le corps glisse dans un sens pendant que les pieds « avancent » : l'illusion.
   Penché arrière signature + main gantée levée + fedora + traînées de vitesse.
   ════════════════════════════════════════════════════════════════════════ */
[data-qzr-move="moonwalk"] .qzr-m-root  { transform-origin: 100px 210px; animation: qzrMvGlide 2.8s cubic-bezier(.37,0,.63,1) infinite; }
[data-qzr-move="moonwalk"] .qzr-m-leg-l { transform-origin: 85px 200px;  animation: qzrMvStepL 1.4s ease-in-out infinite; }
[data-qzr-move="moonwalk"] .qzr-m-leg-r { transform-origin: 115px 200px; animation: qzrMvStepR 1.4s ease-in-out infinite; }
[data-qzr-move="moonwalk"] .qzr-m-arm-r { transform-origin: 128px 120px; animation: qzrMvArmUp 2.8s ease-in-out infinite; }
[data-qzr-move="moonwalk"] .qzr-m-arm-l { transform-origin: 72px 120px;  animation: qzrMvArmSwing 1.4s ease-in-out infinite; }
[data-qzr-move="moonwalk"] .qzr-m-cape  { transform-origin: 75px 120px;  animation: qzrMvCape .7s ease-in-out infinite alternate; }
[data-qzr-move="moonwalk"] .qzr-m-shadow{ animation: qzrMvShadow 2.8s cubic-bezier(.37,0,.63,1) infinite; }
[data-qzr-move="moonwalk"] .qzr-m-fx-hat,
[data-qzr-move="moonwalk"] .qzr-m-fx-glove { opacity: 1; }
[data-qzr-move="moonwalk"] .qzr-m-fx-streak { opacity: 1; animation: qzrMvStreak 1.4s ease-out infinite; }

@keyframes qzrMvGlide {
  0%      { transform: translateX(24px) rotate(-7deg); }
  50%     { transform: translateX(-24px) rotate(-7deg); }
  50.01%  { transform: translateX(-24px) rotate(7deg) scaleX(-1); }
  100%    { transform: translateX(24px) rotate(7deg) scaleX(-1); }
}
@keyframes qzrMvStepL { 0% { transform: translate(-9px,0); } 45% { transform: translate(7px,-7px); } 55% { transform: translate(7px,0); } 100% { transform: translate(-9px,0); } }
@keyframes qzrMvStepR { 0% { transform: translate(7px,0); } 45% { transform: translate(-9px,0); } 55% { transform: translate(-9px,-7px); } 100% { transform: translate(7px,-1px); } }
@keyframes qzrMvArmUp { 0%, 100% { transform: rotate(-26deg); } 50% { transform: rotate(-34deg); } }
@keyframes qzrMvArmSwing { 0%, 100% { transform: rotate(18deg); } 50% { transform: rotate(-8deg); } }
@keyframes qzrMvCape { 0% { transform: skewX(-10deg) rotate(-3deg); } 100% { transform: skewX(8deg) rotate(2deg); } }
@keyframes qzrMvStreak { 0% { opacity: 0; transform: translateX(6px); } 30% { opacity: .9; } 100% { opacity: 0; transform: translateX(-16px); } }
@keyframes qzrMvShadow { 0%, 100% { transform: translateX(22px) scaleX(1.05); } 50% { transform: translateX(-22px) scaleX(1.05); } }

/* ════════════════════════════════════════════════════════════════════════
   🚀 JUMP — montée de niveau. Anticipation (accroupi) → détente, squash & stretch.
   ════════════════════════════════════════════════════════════════════════ */
[data-qzr-move="jump"] .qzr-m-root  { transform-origin: 100px 210px; animation: qzrMvJump 1s cubic-bezier(.5,-0.4,.3,1.6) infinite; }
[data-qzr-move="jump"] .qzr-m-arm-r { transform-origin: 128px 120px; animation: qzrMvJumpArmR 1s ease infinite; }
[data-qzr-move="jump"] .qzr-m-arm-l { transform-origin: 72px 120px;  animation: qzrMvJumpArmL 1s ease infinite; }
[data-qzr-move="jump"] .qzr-m-shadow{ animation: qzrMvJumpShadow 1s cubic-bezier(.5,-0.4,.3,1.6) infinite; }
@keyframes qzrMvJump {
  0%   { transform: translateY(0) scaleY(1); }
  18%  { transform: translateY(4px) scaleY(.86) scaleX(1.08); }
  45%  { transform: translateY(-34px) scaleY(1.12) scaleX(.93); }
  70%  { transform: translateY(0) scaleY(.94) scaleX(1.05); }
  100% { transform: translateY(0) scaleY(1); }
}
@keyframes qzrMvJumpArmR { 0%, 18% { transform: rotate(0); } 45% { transform: rotate(-58deg); } 100% { transform: rotate(0); } }
@keyframes qzrMvJumpArmL { 0%, 18% { transform: rotate(0); } 45% { transform: rotate(40deg); } 100% { transform: rotate(0); } }
@keyframes qzrMvJumpShadow { 0%, 100% { transform: scaleX(1); } 45% { transform: scaleX(.7); opacity: .1; } }

/* ════════════════════════════════════════════════════════════════════════
   🤸 FLIP — badge débloqué / Boss vaincu. Salto 360 : bras & jambes se replient
   à l'apex puis se déploient pour « poser » l'atterrissage.
   ════════════════════════════════════════════════════════════════════════ */
[data-qzr-move="flip"] .qzr-m-root  { transform-origin: 100px 150px; animation: qzrMvFlip 1.4s cubic-bezier(.55,.06,.3,1) infinite; }
[data-qzr-move="flip"] .qzr-m-arm-l { transform-origin: 72px 120px;  animation: qzrMvFlipArmL 1.4s ease-in-out infinite; }
[data-qzr-move="flip"] .qzr-m-arm-r { transform-origin: 128px 120px; animation: qzrMvFlipArmR 1.4s ease-in-out infinite; }
[data-qzr-move="flip"] .qzr-m-leg-l { transform-origin: 88px 172px;  animation: qzrMvFlipLegL 1.4s ease-in-out infinite; }
[data-qzr-move="flip"] .qzr-m-leg-r { transform-origin: 112px 172px; animation: qzrMvFlipLegR 1.4s ease-in-out infinite; }
[data-qzr-move="flip"] .qzr-m-cape  { transform-origin: 75px 120px;  animation: qzrMvFlipCape 1.4s ease-in-out infinite; }
[data-qzr-move="flip"] .qzr-m-shadow{ animation: qzrMvFlipShadow 1.4s ease infinite; }
@keyframes qzrMvFlip {
  0%, 10% { transform: translateY(0) rotate(0); }
  30%     { transform: translateY(-18px) rotate(-90deg); }
  55%     { transform: translateY(-30px) rotate(-220deg); }
  80%     { transform: translateY(-6px) rotate(-330deg); }
  92%, 100% { transform: translateY(0) rotate(-360deg); }
}
@keyframes qzrMvFlipArmL { 0%,10% { transform: rotate(0); } 30% { transform: rotate(-75deg); } 55% { transform: rotate(-130deg); } 80% { transform: rotate(30deg); } 100% { transform: rotate(0); } }
@keyframes qzrMvFlipArmR { 0%,10% { transform: rotate(0); } 30% { transform: rotate(75deg); } 55% { transform: rotate(130deg); } 80% { transform: rotate(-30deg); } 100% { transform: rotate(0); } }
@keyframes qzrMvFlipLegL { 0%,10% { transform: rotate(0) translateY(0); } 30% { transform: rotate(38deg) translateY(-4px); } 55% { transform: rotate(70deg) translateY(-9px); } 80% { transform: rotate(-14deg) translateY(0); } 100% { transform: rotate(0); } }
@keyframes qzrMvFlipLegR { 0%,10% { transform: rotate(0) translateY(0); } 30% { transform: rotate(-38deg) translateY(-4px); } 55% { transform: rotate(-70deg) translateY(-9px); } 80% { transform: rotate(14deg) translateY(0); } 100% { transform: rotate(0); } }
@keyframes qzrMvFlipCape { 0%, 100% { transform: skewX(0); } 40% { transform: skewX(20deg) rotate(10deg); } 70% { transform: skewX(-16deg); } }
@keyframes qzrMvFlipShadow { 0%, 100% { transform: scaleX(1); } 55% { transform: scaleX(.55); opacity: .1; } }

/* ════════════════════════════════════════════════════════════════════════
   🎩 BOW — fin de session. La mascotte salue le public.
   ════════════════════════════════════════════════════════════════════════ */
[data-qzr-move="bow"] .qzr-m-root  { transform-origin: 100px 205px; animation: qzrMvBow 2.4s ease-in-out infinite; }
[data-qzr-move="bow"] .qzr-m-arm-l { transform-origin: 72px 120px;  animation: qzrMvBowArm 2.4s ease-in-out infinite; }
[data-qzr-move="bow"] .qzr-m-head  { transform-origin: 100px 100px; animation: qzrMvBowHead 2.4s ease-in-out infinite; }
@keyframes qzrMvBow { 0%, 100% { transform: rotate(0) translateY(0); } 40%, 60% { transform: rotate(20deg) translateY(6px); } }
@keyframes qzrMvBowArm { 0%, 100% { transform: rotate(0); } 40%, 60% { transform: rotate(-70deg); } }
@keyframes qzrMvBowHead { 0%, 100% { transform: rotate(0); } 40%, 60% { transform: rotate(12deg); } }

/* ════════════════════════════════════════════════════════════════════════
   🦸 CAPELAND — victoire en compétition. Atterrissage de super-héros : chute
   + squash, cape qui claque, bras au sol.
   ════════════════════════════════════════════════════════════════════════ */
[data-qzr-move="capeland"] .qzr-m-root  { transform-origin: 100px 210px; animation: qzrMvLand 2s ease-in-out infinite; }
[data-qzr-move="capeland"] .qzr-m-cape  { transform-origin: 75px 120px;  animation: qzrMvLandCape 2s ease-in-out infinite; }
[data-qzr-move="capeland"] .qzr-m-arm-l { transform-origin: 72px 120px;  animation: qzrMvLandArmL 2s ease-in-out infinite; }
[data-qzr-move="capeland"] .qzr-m-arm-r { transform-origin: 128px 120px; animation: qzrMvLandArmR 2s ease-in-out infinite; }
[data-qzr-move="capeland"] .qzr-m-shadow{ animation: qzrMvLandShadow 2s ease-in-out infinite; }
@keyframes qzrMvLand {
  0%   { transform: translateY(-28px) scaleY(1.08); }
  22%  { transform: translateY(0) scaleY(.82) scaleX(1.12); }   /* impact */
  38%  { transform: translateY(0) scaleY(1.03) scaleX(.99); }
  100% { transform: translateY(-28px) scaleY(1.08); }
}
@keyframes qzrMvLandCape { 0% { transform: skewX(-14deg) translateY(-4px); } 22% { transform: skewX(10deg); } 60% { transform: skewX(-4deg); } 100% { transform: skewX(-14deg) translateY(-4px); } }
@keyframes qzrMvLandArmL { 0%, 100% { transform: rotate(-30deg); } 22% { transform: rotate(35deg); } }
@keyframes qzrMvLandArmR { 0%, 100% { transform: rotate(30deg); } 22% { transform: rotate(-35deg); } }
@keyframes qzrMvLandShadow { 0% { transform: scaleX(.6); opacity: .08; } 22% { transform: scaleX(1.15); opacity: .22; } 100% { transform: scaleX(.6); opacity: .08; } }

/* ════════════════════════════════════════════════════════════════════════
   🤦 SLUMP — série de mauvaises réponses. Épaules qui tombent, tête basse.
   ════════════════════════════════════════════════════════════════════════ */
[data-qzr-move="slump"] .qzr-m-root { transform-origin: 100px 200px; animation: qzrMvSlump .9s ease-out both; }
[data-qzr-move="slump"] .qzr-m-head { transform-origin: 100px 100px; animation: qzrMvSlumpHead .9s ease-out both; }
[data-qzr-move="slump"] .qzr-m-arm-l { transform-origin: 72px 120px;  animation: qzrMvSlumpArm .9s ease-out both; }
[data-qzr-move="slump"] .qzr-m-arm-r { transform-origin: 128px 120px; animation: qzrMvSlumpArm .9s ease-out both; }
@keyframes qzrMvSlump { 0% { transform: translateY(0); } 60% { transform: translateY(6px) scaleY(.95); } 100% { transform: translateY(4px) scaleY(.97); } }
@keyframes qzrMvSlumpHead { 0% { transform: rotate(0); } 100% { transform: rotate(8deg) translateY(3px); } }
@keyframes qzrMvSlumpArm { 0% { transform: rotate(0); } 100% { transform: rotate(-8deg) translateY(3px); } }

/* ════════════════════════════════════════════════════════════════════════
   ⚽ JUGGLE — numéro de jonglage (mouvement signature « foot »). LE ballon
   .qzr-m-fx-ball n'apparaît QUE pendant ce mouvement. La boucle enchaîne des
   VARIATIONS de contrôle — pied droit → pied gauche → genou → tête → pied droit —
   avec des hauteurs qui varient, pendant que le ballon tourne sur lui-même.
   ════════════════════════════════════════════════════════════════════════ */
[data-qzr-move="juggle"] .qzr-m-fx-ball      { opacity: 1; animation: qzrMvBallJuggle 3.6s cubic-bezier(.45,0,.55,1) infinite; }
/* Ball drawn at r=11; scaled ×2 around its own centre (also the static size when
   the spin animation is disabled under reduced-motion). */
[data-qzr-move="juggle"] .qzr-m-fx-ball-spin { transform-box: fill-box; transform-origin: center; transform: scale(2); animation: qzrMvBallSpin 1.6s linear infinite; }
[data-qzr-move="juggle"] .qzr-m-root   { transform-origin: 100px 210px; animation: qzrMvJuggleBob 3.6s ease-in-out infinite; }
[data-qzr-move="juggle"] .qzr-m-leg-r  { transform-origin: 112px 168px; animation: qzrMvJuggleLegR 3.6s ease-in-out infinite; }
[data-qzr-move="juggle"] .qzr-m-leg-l  { transform-origin: 88px 168px;  animation: qzrMvJuggleLegL 3.6s ease-in-out infinite; }
[data-qzr-move="juggle"] .qzr-m-head   { transform-origin: 100px 100px; animation: qzrMvJuggleHead 3.6s ease-in-out infinite; }
[data-qzr-move="juggle"] .qzr-m-arm-l  { transform-origin: 72px 120px;  animation: qzrMvJuggleArmL 1.8s ease-in-out infinite; }
[data-qzr-move="juggle"] .qzr-m-arm-r  { transform-origin: 128px 120px; animation: qzrMvJuggleArmR 1.8s ease-in-out infinite; }
[data-qzr-move="juggle"] .qzr-m-shadow { animation: qzrMvJuggleShadow 3.6s ease-in-out infinite; }

/* Trajectoire du ballon (translate depuis son repos sur le pied droit 118,198).
   Chaque « touche » est une variation : 30% pied gauche, 55% genou, ~74% tête. */
@keyframes qzrMvBallJuggle {
  0%   { transform: translate(0,0); }
  8%   { transform: translate(-6px,-58px); }
  16%  { transform: translate(-20px,-84px); }
  26%  { transform: translate(-34px,-22px); }
  30%  { transform: translate(-36px,2px); }      /* touche pied gauche */
  40%  { transform: translate(-24px,-72px); }
  47%  { transform: translate(-11px,-96px); }
  55%  { transform: translate(-6px,-33px); }      /* touche genou droit */
  63%  { transform: translate(-11px,-108px); }
  74%  { transform: translate(-18px,-152px); }     /* coup de tête */
  77%  { transform: translate(-18px,-146px); }
  86%  { transform: translate(-9px,-80px); }
  94%  { transform: translate(-3px,-34px); }
  100% { transform: translate(0,0); }
}
@keyframes qzrMvBallSpin { from { transform: rotate(0) scale(2); } to { transform: rotate(360deg) scale(2); } }

@keyframes qzrMvJuggleBob {
  0%, 100% { transform: translateY(0) rotate(0); }
  30%      { transform: translateY(1px) rotate(-2deg); }
  55%      { transform: translateY(-1px) rotate(1.5deg); }
  74%      { transform: translateY(-4px) rotate(0); }
}
@keyframes qzrMvJuggleLegR {
  0%, 100%  { transform: rotate(0) translateY(0); }
  5%        { transform: rotate(-11deg) translateY(-2px); }   /* flick pied droit */
  50%, 58%  { transform: rotate(-23deg) translateY(-10px); }  /* montée du genou */
  70%       { transform: rotate(0) translateY(0); }
}
@keyframes qzrMvJuggleLegL {
  0%, 22%, 100% { transform: rotate(0) translateY(0); }
  30%           { transform: rotate(13deg) translateY(-3px); } /* flick pied gauche */
  40%           { transform: rotate(0) translateY(0); }
}
@keyframes qzrMvJuggleHead {
  0%, 60%, 100% { transform: rotate(0) translateY(0); }
  74%           { transform: rotate(-3deg) translateY(-4px); } /* coup de tête */
  82%           { transform: rotate(1.5deg) translateY(1px); }
}
@keyframes qzrMvJuggleArmL { 0%, 100% { transform: rotate(0); } 50% { transform: rotate(-18deg); } }
@keyframes qzrMvJuggleArmR { 0%, 100% { transform: rotate(0); } 50% { transform: rotate(18deg); } }
@keyframes qzrMvJuggleShadow { 0%, 100% { transform: scaleX(1); opacity: .18; } 30% { transform: scaleX(.93); } 74% { transform: scaleX(.88); opacity: .13; } }

/* ════════════════════════════════════════════════════════════════════════
   💗 BONUS EXPRESSIVITÉ — cœurs qui montent DES YEUX + rougeur.
   Piloté par l'amplification « sans-faute » DÉJÀ câblée
   ([data-qzr-amp="on"][data-qzr-expr="love"]) → s'active tout seul.
   ════════════════════════════════════════════════════════════════════════ */
[data-qzr-amp="on"][data-qzr-expr="love"] .qzr-m-fx-eyehearts { opacity: 1; }
[data-qzr-amp="on"][data-qzr-expr="love"] .qzr-m-blush { opacity: .4; }
[data-qzr-amp="on"][data-qzr-expr="love"] .qzr-m-fx-eyehearts .ehp { animation: qzrMvEyeHeart 1.9s ease infinite; }
[data-qzr-amp="on"][data-qzr-expr="love"] .qzr-m-fx-eyehearts .eh2 { animation-delay: .4s; }
[data-qzr-amp="on"][data-qzr-expr="love"] .qzr-m-fx-eyehearts .eh3 { animation-delay: .9s; }
[data-qzr-amp="on"][data-qzr-expr="love"] .qzr-m-fx-eyehearts .eh4 { animation-delay: 1.3s; }
@keyframes qzrMvEyeHeart { 0% { opacity: 0; transform: translateY(4px) scale(.3); } 18% { opacity: 1; } 70% { opacity: 1; } 100% { opacity: 0; transform: translateY(-48px) scale(1.15); } }

/* ── Accessibilité : pas de chorégraphie animée ni d'accessoires en mouvement ─ */
@media (prefers-reduced-motion: reduce) {
  [data-qzr-move] .qzr-m-root,
  [data-qzr-move] .qzr-m-head,
  [data-qzr-move] .qzr-m-arm-l,
  [data-qzr-move] .qzr-m-arm-r,
  [data-qzr-move] .qzr-m-leg-l,
  [data-qzr-move] .qzr-m-leg-r,
  [data-qzr-move] .qzr-m-cape,
  [data-qzr-move] .qzr-m-shadow,
  [data-qzr-move] .qzr-m-fx-streak,
  [data-qzr-move="juggle"] .qzr-m-fx-ball,
  [data-qzr-move="juggle"] .qzr-m-fx-ball-spin,
  [data-qzr-amp="on"][data-qzr-expr="love"] .qzr-m-fx-eyehearts .ehp { animation: none !important; }
  /* accessoires posés en statique plutôt qu'animés */
  [data-qzr-move="moonwalk"] .qzr-m-fx-hat,
  [data-qzr-move="moonwalk"] .qzr-m-fx-glove,
  [data-qzr-move="juggle"] .qzr-m-fx-ball,
  [data-qzr-amp="on"][data-qzr-expr="love"] .qzr-m-fx-eyehearts { opacity: 1; }
}