---
import type { TransitionAnimationPair, TransitionDirectionalAnimations } from "astro";

const transition: TransitionAnimationPair = {
  old: {
    name: "slide-left-out",
    duration: "0.4s",
    easing: "cubic-bezier(.06,.71,.55,1)",
  },
  new: {
    name: "slide-left-in",
    duration: "0.35s",
    easing: "cubic-bezier(.21,1.02,.73,1)",
  }
}

const animation: TransitionDirectionalAnimations = {
  forwards: transition,
  backwards: transition,
};

---
<div
  class="sm:flat-shadow my-4 h-min bg-neutral-50 p-6 pb-2 shadow-black max-sm:shadow sm:rounded-tl-3xl dark:bg-neutral-900 bg-wave-pattern dark:bg-wave-dark-pattern bg-cover bg-center bg-repeat-x animate-float"
  transition:animate={animation}
>
  <slot />
</div>