/* Movimiento visible y suave para las banderas. */
@keyframes flagBreezeVisible {
  0%, 100% { transform: perspective(700px) translateX(-4px) translateY(1px) rotateY(4deg) rotateZ(-1.1deg); }
  50% { transform: perspective(700px) translateX(7px) translateY(-4px) rotateY(-9deg) rotateZ(1.1deg); }
}
@keyframes flagClothSway {
  0%, 100% { transform: translateY(1px) rotateZ(-0.18deg); }
  50% { transform: translateY(-2px) rotateZ(0.18deg); }
}
.flag-stage img,
.pv3-reference img,
.mw-flag-card img,
.search-card img,
.album-card.open img {
  transform-origin: left center;
  animation: flagBreezeVisible 2.8s ease-in-out infinite !important;
}
/* Las banderas principales suman una ondulación de tela sin ocultar ningún borde. */
.flag-stage img,
.pv3-reference img,
.mw-flag-card img {
  filter: url("#flag-cloth-wave") drop-shadow(0 12px 14px rgba(0,0,0,.28));
  animation: flagClothSway 2.8s ease-in-out infinite !important;
}
:root[data-motion="reduced"] .flag-stage img,
:root[data-motion="reduced"] .pv3-reference img,
:root[data-motion="reduced"] .mw-flag-card img,
:root[data-motion="reduced"] .search-card img,
:root[data-motion="reduced"] .album-card.open img {
  animation: none !important;
  transform: none !important;
}
:root[data-motion="reduced"] .flag-stage img,
:root[data-motion="reduced"] .pv3-reference img,
:root[data-motion="reduced"] .mw-flag-card img {
  filter: none !important;
}
/* El prototipo de tela queda exclusivamente en Trivia; los demás modos esperan su propia adaptación WebGL. */
#modo-pintar .pv3-reference img,
#map-screen .mw-flag-card img,
#buscador .search-card img,
#album .album-card.open img {
  animation: none !important;
  transform: none !important;
  filter: none !important;
}