---
import type { TransitionProps } from '@/types'

type Props = TransitionProps

const { class: className = '' } = Astro.props
const transitionName = 'content'
---

<div transition:name={transitionName} class={className} id="transition-wrapper">
  <slot />
</div>

<style is:inline>
  @supports (view-transition-name: none) {
    @media not (prefers-reduced-motion: reduce) {
      ::view-transition-old(content) {
        animation: fade-out 0.4s cubic-bezier(0.4, 0, 0.2, 1) forwards;
      }

      ::view-transition-new(content) {
        opacity: 0;
        animation: fade-in 0.4s ease 0.2s forwards;
        will-change: filter, opacity, transform;
      }
    }
  }

  @keyframes fade-out {
    0% {
      opacity: 1;
    }
    100% {
      opacity: 0;
    }
  }

  @keyframes fade-in {
    0% {
      opacity: 0;
      filter: blur(8px);
      transform: translateZ(0);
    }
    30% {
      opacity: 0.5;
      filter: blur(4px);
      transform: translateZ(0);
    }
    100% {
      opacity: 1;
      filter: blur(0);
      transform: translateZ(0);
    }
  }
</style>
