/* =========================================================================
   Poto — animation HÉLICO (vol stationnaire)                    module autonome
   -------------------------------------------------------------------------
   Pose cible   : poto-6-livraison.svg.
   Déclencheur  : classe racine  .poto-anim-helico  sur <svg class="poto">
                  (ou un ancêtre). Rien ne fuit hors de cette classe.
   Durées       : pales 0,35 s linear en boucle (scaleX 1 → .15 → 1) ;
                  vol stationnaire 3 s ease-in-out en boucle (translateY
                  0 → -4px → 0) ; ombre en contre-respiration sur les mêmes
                  3 s (scale 1 → .92 → 1), phase alignée sur le vol.
   Calques      : #poto-pales  (les pales + le moyeu, sous-groupe de
                  #poto-accessoire — ce dernier porte déjà un `transform`
                  d'échelle et ne doit PAS être animé, CSS l'écraserait),
                  #poto        (le personnage entier, ombre exclue),
                  #poto-ombre  (ellipse au sol, calque séparé).
   Pivot        : une hélice vue de profil ne tourne pas à l'écran, c'est son
                  écrasement horizontal qui fait l'illusion. L'axe de l'hélice
                  (x du moyeu, unités du viewBox) est --poto-hub-x ; il vaut
                  61.35px sur poto-6-livraison.svg (= le translate() porté par
                  #poto-accessoire). À ajuster si la pose est regénérée.
   Fallback     : si le battement ne convainc pas à l'œil, remplacer la classe
                  racine par  .poto-anim-helico.poto-anim-helico--vibre  :
                  micro-rotation ±8° des pales + souffles pulsés en décalé.
   ========================================================================= */

.poto-anim-helico { display: block; overflow: visible; --poto-hub-x: 61.35px; }

/* --- pales : battement par écrasement horizontal autour du moyeu ---------- */
@keyframes poto-helico-pales { 0%   { transform: scaleX(1); }
                               50%  { transform: scaleX(.15); }
                               100% { transform: scaleX(1); } }
.poto-anim-helico #poto-pales {
  transform-box: view-box;
  transform-origin: var(--poto-hub-x) 0px;   /* seule l'abscisse compte pour scaleX */
  animation: poto-helico-pales .35s linear infinite;
}

/* --- vol stationnaire : le personnage entier ------------------------------ */
@keyframes poto-helico-vol { 0%, 100% { transform: translateY(0); }
                             50%      { transform: translateY(-4px); } }
.poto-anim-helico #poto { animation: poto-helico-vol 3s ease-in-out infinite; }

/* --- ombre : contre-respiration, même horloge que le vol ------------------ */
@keyframes poto-helico-ombre { 0%, 100% { transform: scale(1); }
                               50%      { transform: scale(.92); } }
.poto-anim-helico #poto-ombre {
  transform-box: fill-box; transform-origin: 50% 50%;
  animation: poto-helico-ombre 3s ease-in-out infinite;
}

/* --- fallback « vibre » : rotation ±8° + souffles pulsés ------------------ */
@keyframes poto-helico-vibre { 0%, 100% { transform: rotate(-8deg); }
                               50%      { transform: rotate(8deg); } }
@keyframes poto-helico-souffle { 0%, 100% { opacity: .25; } 50% { opacity: 1; } }
.poto-anim-helico--vibre #poto-pales {
  transform-box: fill-box; transform-origin: 50% 50%;
  animation: poto-helico-vibre .18s ease-in-out infinite;
}
.poto-anim-helico--vibre [id^="poto-souffle"] { animation: poto-helico-souffle .7s ease-in-out infinite; }
.poto-anim-helico--vibre #poto-souffle-2 { animation-delay: -.35s; }

/* --- accessibilité : tout s'arrête ---------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  .poto-anim-helico, .poto-anim-helico * { animation: none !important; transition: none !important; }
}