/* =========================================================================
   Poto — animation SCAN (lecture / analyse)                     module autonome
   -------------------------------------------------------------------------
   Pose cible   : poto-2-scan.svg.
   Déclencheur  : classe racine  .poto-anim-scan  sur <svg class="poto">
                  (ou un ancêtre). Rien ne fuit hors de cette classe.
   Durées       : yeux translateX ±1,6 px, 1,6 s ease-in-out en boucle ;
                  inclinaison du corps ±1,5°, 1,6 s ; respiration 3,5 s ;
                  étincelles pulsées 1,6 s, décalées (-0,53 s / -1,06 s) ;
                  carte menthe → sakura → beurre, 3,6 s par paliers.
   Calques      : l'élément porteur de la classe (posture : inclinaison),
                  #poto (respiration), #poto-oeil-g/d, [id^="poto-etincelle"],
                  #poto-carte (aplat de la carte).
   Deux étages pour ne jamais poser deux `transform` sur le même élément :
   la POSTURE sur l'élément racine, la VITALITÉ sur #poto.
   ========================================================================= */

.poto-anim-scan { display: block; overflow: visible; transform-origin: 50% 86%; }

@keyframes poto-scan-corps { 0%, 100% { transform: rotate(-1.5deg); }
                             50%      { transform: rotate( 1.5deg); } }
@keyframes poto-scan-respire {
  0%, 100% { transform: scaleY(1)    scaleX(1); }
  50%      { transform: scaleY(.985) scaleX(1.004); }
}
@keyframes poto-scan-oeil  { 0%, 100% { transform: translateX(-1.6px); }
                             50%      { transform: translateX( 1.6px); } }
@keyframes poto-scan-etincelle { 0%, 100% { opacity: .30; transform: scale(.80); }
                                 50%      { opacity: 1;   transform: scale(1.08); } }
@keyframes poto-scan-carte { 0%, 32%   { fill: #9ED3C0; }
                             34%, 65%  { fill: #F4A7B9; }
                             67%, 100% { fill: #F8D57E; } }

.poto-anim-scan { animation: poto-scan-corps 1.6s ease-in-out infinite; }
.poto-anim-scan #poto { transform-origin: 60px 103px;
                        animation: poto-scan-respire 3.5s ease-in-out infinite; }
.poto-anim-scan #poto-oeil-g,
.poto-anim-scan #poto-oeil-d { animation: poto-scan-oeil 1.6s ease-in-out infinite; }
.poto-anim-scan [id^="poto-etincelle"] { transform-box: fill-box; transform-origin: 50% 50%;
                                         animation: poto-scan-etincelle 1.6s ease-in-out infinite; }
.poto-anim-scan [id^="poto-etincelle"]:nth-of-type(2n)   { animation-delay: -.53s; }
.poto-anim-scan [id^="poto-etincelle"]:nth-of-type(3n+1) { animation-delay: -1.06s; }
.poto-anim-scan #poto-carte path { animation: poto-scan-carte 3.6s steps(1, end) infinite; }

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