---
import { ClientRouter } from 'astro:transitions';
import BaseLayout from './BaseLayout.astro';

const { title, description } = Astro.props;
---

<BaseLayout title={title} description={description}>
  <ClientRouter fallback="swap" />

  <div transition:animate="slide">
    <slot />
  </div>
</BaseLayout>

<style>
  /* Custom transition styles */
  ::view-transition-old(root) {
    animation: 0.5s cubic-bezier(0.76, 0, 0.24, 1) both slide-to-left;
  }

  ::view-transition-new(root) {
    animation: 0.5s cubic-bezier(0.76, 0, 0.24, 1) both slide-from-right;
  }
</style>