/* ==========================================================================
   animate.css utility classes — ready-to-use effects
   ==========================================================================
   These build on the @keyframes shipped in assets/vendor/animate/animate.min.css
   (loaded before this file). Instead of stacking animate__animated + animate__<name>
   + animate__infinite + animate__slow every time, apply one class here.

   Loop effects run continuously — reserve for a single small element per
   view (an icon, a badge), never a whole section. Hover effects only fire
   on :hover so they're always safe to use more broadly.
   ========================================================================== */

@media (prefers-reduced-motion: no-preference) {

  /* ---- Continuous "look here" loops -------------------------------------- */
  .anim-tada-loop {
    animation: tada 2.4s ease-in-out infinite;
  }

  .anim-pulse-loop {
    animation: pulse 1.8s ease-in-out infinite;
  }

  .anim-heartbeat-loop {
    animation: heartBeat 1.6s ease-in-out infinite;
  }

  .anim-flash-loop {
    animation: flash 2s ease-in-out infinite;
  }

  /* ---- Hover-triggered ---------------------------------------------------- */
  .anim-shake-hover:hover {
    animation: headShake 0.8s ease-in-out;
  }

  .anim-swing-hover:hover {
    animation: swing 0.9s ease-in-out;
    transform-origin: top center;
  }

  .anim-rubberband-hover:hover {
    animation: rubberBand 0.7s ease-in-out;
  }

  .anim-wobble-hover:hover {
    animation: wobble 0.8s ease-in-out;
  }

  .anim-jello-hover:hover {
    animation: jello 0.8s ease-in-out;
    transform-origin: center;
  }
}

/* prefers-reduced-motion: reduce is the default (no rule needed) — the
   effects above simply never apply, leaving elements static. */