---
/**
 * Reveal — apparition au scroll (fade + léger translate), sobre.
 *
 * Props :
 *  - delay (number, 0) : décalage en ms (pour échelonner une grille)
 *  - class (string)    : classes additionnelles
 *
 * Motion piloté-utilisateur : déclenché par le scroll (IntersectionObserver).
 * Sous prefers-reduced-motion: reduce → contenu visible immédiatement, aucun
 * mouvement. Sans JS → rien n'est masqué (garde html[data-js]).
 */
interface Props {
  delay?: number;
  class?: string;
}

const { delay = 0, class: className } = Astro.props;
---

<div
  class:list={["tf-reveal", className]}
  data-reveal
  style={delay ? `--reveal-delay: ${delay}ms` : undefined}
>
  <slot />
</div>

<style>
  @media (prefers-reduced-motion: no-preference) {
    :global(html[data-js]) .tf-reveal {
      opacity: 0;
      translate: 0 12px;
      transition: opacity var(--dur-slow) var(--ease-out),
        translate var(--dur-slow) var(--ease-out);
      transition-delay: var(--reveal-delay, 0ms);
    }

    :global(html[data-js]) .tf-reveal.is-visible {
      opacity: 1;
      translate: 0 0;
    }
  }
</style>

<script>
  import { initReveal } from "../js/reveal.js";
  initReveal();
</script>