/*
 * 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 bee-shake {
  0%, 100% { transform: translateX(0); }
  20% { transform: translateX(-8px) rotate(-5deg); }
  40% { transform: translateX(8px) rotate(5deg); }
  60% { transform: translateX(-5px) rotate(-3deg); }
  80% { transform: translateX(5px) rotate(3deg); }
}

.bee-hit {
  animation: bee-shake 0.4s ease-in-out;
}

@keyframes letter-pop {
  0% { transform: scale(1); }
  50% { transform: scale(1.4); color: #D97706; }
  100% { transform: scale(1); }
}

.letter-reveal {
  animation: letter-pop 0.3s ease-out;
}