/*
 * This is a manifest file that'll be compiled into application.css.
 *
 * With Propshaft, assets are served efficiently without preprocessing steps. You can still include
 * application-wide styles in this file, but keep in mind that CSS precedence will follow the standard
 * cascading order, meaning styles declared later in the document or manifest will override earlier ones,
 * depending on specificity.
 *
 * Consider organizing styles into separate files for maintainability.
 */

@keyframes attention-megaphone-shake {
  0%,
  9%,
  100% {
    transform: rotate(0deg) scale(1);
  }

  1% {
    transform: rotate(-10deg) scale(1.05);
  }

  2% {
    transform: rotate(8deg) scale(1.05);
  }

  3% {
    transform: rotate(-7deg) scale(1.04);
  }

  4% {
    transform: rotate(5deg) scale(1.03);
  }

  5% {
    transform: rotate(-3deg) scale(1.02);
  }

  6% {
    transform: rotate(2deg) scale(1.01);
  }

  7% {
    transform: rotate(-1deg) scale(1.01);
  }

  8% {
    transform: rotate(0.5deg) scale(1.01);
  }
}

.attention-megaphone {
  animation: attention-megaphone-shake 10s ease-in-out infinite;
  transform-origin: center;
}