/*
 * Manoir à Tiroirs — déco animée du banner des pages internes : des petites
 * clés qui se balancent. UNIQUEMENT la déco : la structure du banner appartient
 * au composant partagé (fichiers-partages-des-jeux/css/banner.css).
 */
.mt-deco {
  position: absolute; top: 24%; width: 22px; height: 10px; opacity: 0; pointer-events: none;
  will-change: transform, opacity;
  background:
    radial-gradient(circle at 5px 5px, transparent 2px, #f0cf8f 2.5px, #f0cf8f 4.5px, transparent 5px) 0 0 / 10px 10px no-repeat,
    linear-gradient(#f0cf8f, #f0cf8f) 9px 4px / 13px 2px no-repeat,
    linear-gradient(#f0cf8f, #f0cf8f) 17px 4px / 2px 5px no-repeat,
    linear-gradient(#f0cf8f, #f0cf8f) 20px 4px / 2px 4px no-repeat;
  transform-origin: 5px 5px;
}
.mt-deco-1 { left: 12%; animation: mt-balance 6s ease-in-out infinite; }
.mt-deco-2 { left: 37%; animation: mt-balance 6s ease-in-out infinite 1.5s; }
.mt-deco-3 { left: 62%; animation: mt-balance 6s ease-in-out infinite 3s; }
.mt-deco-4 { left: 86%; animation: mt-balance 6s ease-in-out infinite 4.5s; }

@keyframes mt-balance {
  0%   { opacity: 0;    transform: rotate(-20deg); }
  20%  { opacity: 0.85; transform: rotate(15deg); }
  50%  { opacity: 0.85; transform: rotate(-10deg); }
  80%  { opacity: 0.85; transform: rotate(6deg); }
  100% { opacity: 0;    transform: rotate(0deg); }
}
@media (prefers-reduced-motion: reduce) { .mt-deco { animation: none; opacity: 0.55; } }
/* Pendant la partie, rien ne bouge autour de la scène : une animation en boucle tient le processeur occupé (rendu 3D à la demande). */
body.mt-en-jeu .mt-deco { animation: none; opacity: 0.55; will-change: auto; }
@media (max-width: 640px) { .mt-deco-3, .mt-deco-4 { display: none; } }