@theme inline {
  --animate-surf: surf 1s infinite ease-in-out;
  --animate-pulse: pulse 500ms infinite alternate-reverse;
  --animate-pulse-dark: pulse-dark 500ms infinite alternate-reverse;
  --animate-dot-move: dot-move 1.2s infinite ease-in-out 0ms;
  --animate-dot-move-delay-200: dot-move 1.2s infinite ease-in-out 200ms;
  --animate-dot-move-delay-400: dot-move 1.2s infinite ease-in-out 400ms;
  --animate-slide-to-left: slide-to-left 300ms ease-in-out;
  --animate-slide-to-right: slide-to-right 300ms ease-in-out;
  --animate-fade-and-slide-down: fade-and-slide-down 300ms ease-out 400ms
    backwards;

  @keyframes surf {
    0% {
      transform: translate(0, 0);
    }

    25% {
      transform: translate(0, 6px);
    }

    50% {
      transform: translate(0, -6px);
    }

    75% {
      transform: translate(0, 3px);
    }

    100% {
      transform: translate(0, 0);
    }
  }

  @keyframes pulse {
    from {
      background: var(--color-pulse-100);
    }

    to {
      background: var(--color-pulse-200);
    }
  }

  @keyframes pulse-dark {
    from {
      background: var(--color-pulse-300);
    }

    to {
      background: var(--color-pulse-400);
    }
  }

  @keyframes dot-move {
    0% {
      opacity: 0.6;
      transform: translateY(0);
    }

    50% {
      opacity: 1;
      transform: translateY(-3px);
    }

    100% {
      opacity: 0.6;
      transform: translateY(0);
    }
  }

  @keyframes slide-to-left {
    from {
      transform: translateX(100%);
    }

    to {
      transform: translateX(0);
    }
  }

  @keyframes slide-to-right {
    from {
      transform: translateX(-100%);
    }

    to {
      transform: translateX(0);
    }
  }

  @keyframes fade-and-slide-down {
    from {
      grid-template-rows: 0fr;
      opacity: 0;
      padding-block: 0;
      transform: translateY(-100%);
    }

    to {
      grid-template-rows: 1fr;
      opacity: 1;
      padding-block: calc(var(--spacing, 0.25rem) * 3);
      transform: translateY(0);
    }
  }
}
