---
// ScrollReveal — wraps content and fades/rises it into view on scroll.
// IntersectionObserver island; fully reduced-motion safe (content is shown
// immediately and statically when motion is reduced or JS is absent).
interface Props {
  /** stagger delay in ms (for sequencing sibling reveals) */
  delay?: number;
  /** semantic element to render as (default: div) */
  as?: keyof HTMLElementTagNameMap;
}
const { delay = 0, as = 'div' } = Astro.props;
const Tag = as as any;
---
<Tag class="reveal" data-reveal style={delay ? `--reveal-delay:${delay}ms` : undefined}>
  <slot />
</Tag>

<style>
  /* Default = final/visible state. JS adds .reveal--armed to hide it first,
     so no-JS users always see content. */
  .reveal {
    opacity: 1;
  }

  .reveal--armed {
    opacity: 0;
    transform: translateY(28px);
    transition:
      opacity .7s var(--ease) var(--reveal-delay, 0ms),
      transform .7s var(--ease) var(--reveal-delay, 0ms);
    will-change: opacity, transform;
  }

  .reveal--armed.reveal--in {
    opacity: 1;
    transform: none;
  }

  @media (prefers-reduced-motion: reduce) {
    .reveal,
    .reveal--armed,
    .reveal--armed.reveal--in {
      opacity: 1 !important;
      transform: none !important;
      transition: none !important;
    }
  }
</style>

<script>
  // Guard: only arm when motion is allowed.
  const allowMotion =
    typeof window !== 'undefined' &&
    !window.matchMedia('(prefers-reduced-motion: reduce)').matches;

  function initReveals() {
    if (!allowMotion || !('IntersectionObserver' in window)) return;
    const els = document.querySelectorAll<HTMLElement>('[data-reveal]:not(.reveal--in)');
    if (!els.length) return;

    const io = new IntersectionObserver(
      (entries, obs) => {
        for (const entry of entries) {
          if (entry.isIntersecting) {
            entry.target.classList.add('reveal--in');
            obs.unobserve(entry.target);
          }
        }
      },
      { rootMargin: '0px 0px -10% 0px', threshold: 0.1 }
    );

    els.forEach((el) => {
      el.classList.add('reveal--armed');
      io.observe(el);
    });
  }

  initReveals();
  // Re-arm after Astro View Transitions swap the DOM.
  document.addEventListener('astro:page-load', initReveals);
</script>