/* Party flags (js/flags.js): a small flag beside a party's name, waving gently from the pole. */

.flag {
  display: inline-block;
  width: 2.4em;
  height: auto;
  aspect-ratio: 3 / 2;
  vertical-align: middle;
  transform-origin: 0 50%; /* the left edge, where the flag meets the pole */
  animation: flag-wave 3s ease-in-out infinite;
}

@keyframes flag-wave {
  0%, 100% { transform: perspective(12em) rotateY(8deg) skewY(2deg); }
  50% { transform: perspective(12em) rotateY(-8deg) skewY(-2deg); }
}

@media (prefers-reduced-motion: reduce) {
  .flag { animation: none; }
}