/* =====================================================
   [Halloween] MAINS DE ZOMBIE — à retirer après Halloween
===================================================== */

.op-zombie {
    position: absolute;
    bottom: 0;
    width: var(--z-w, 110px);
    height: calc(var(--z-w, 110px) * 1.5);
    overflow: hidden;
    pointer-events: none;
    z-index: 3;
  }
  .op-zombie svg { display: block; width: 100%; height: auto; }
  
  .op-zombie__rise {
    position: absolute;
    left: 0; right: 0; bottom: 8%;
    transform: translateY(110%);
    animation: opZombieRise var(--z-dur, 8s) ease-in-out var(--z-delay, 0s) infinite both;
    animation-play-state: paused;
  }
  .op-zombie__hand {
    transform-origin: 50% 100%;
    animation: opZombieGrab 1.1s ease-in-out infinite alternate;
  }
  .op-zombie__mound {
    position: absolute;
    left: 0; right: 0; bottom: 0;
    z-index: 2;
    animation: opZombieShake var(--z-dur, 8s) linear var(--z-delay, 0s) infinite both;
    animation-play-state: paused;
  }
  
  /* Ne joue que quand la zone est à l'écran */
  .op-zombie.is-playing .op-zombie__rise,
  .op-zombie.is-playing .op-zombie__mound { animation-play-state: running; }
  
  @keyframes opZombieRise {
    0%, 8%    { transform: translateY(110%); }
    20%       { transform: translateY(10%); }
    24%       { transform: translateY(16%); }
    30%, 68%  { transform: translateY(0); }
    84%, 100% { transform: translateY(110%); }
  }
  @keyframes opZombieGrab {
    from { transform: rotate(-7deg); }
    to   { transform: rotate(6deg); }
  }
  @keyframes opZombieShake {
    0%, 6%, 22%, 100% { transform: translateX(0); }
    9%, 15%           { transform: translateX(-2px); }
    12%, 18%          { transform: translateX(2px); }
  }
  
  @media (prefers-reduced-motion: reduce) {
    .op-zombie { display: none !important; }
  }