@layer animations {
  @keyframes scroll {
    from { transform: translateX(0); }
    to   { transform: translateX(-50%); }
  }

  @keyframes wiggle {
    0%, 100% { transform: rotate(-2deg); }
    50%       { transform: rotate(2deg); }
  }

  @keyframes floaty {
    0%, 100% { transform: translateY(0); }
    50%       { transform: translateY(-12px); }
  }

  .wiggle {
    animation: wiggle 3s ease-in-out infinite;
    transform-origin: center bottom;

    &.delay-1 { animation-delay: -0.7s; }
    &.delay-2 { animation-delay: -1.4s; }
    &.delay-3 { animation-delay: -2.1s; }
  }

  .float {
    animation: floaty 4s ease-in-out infinite;

    &.d1 { animation-delay: -1s; }
    &.d2 { animation-delay: -2s; }
  }

  /* Respect user's motion preferences */
  @media (prefers-reduced-motion: reduce) {
    .wiggle,
    .float,
    .marquee {
      animation: none;
    }
  }
}