Footer Reveal

---
/**
 * FooterReveal — the page content slides up and the footer is already
 * there underneath. No timeline, no script: the footer is position: sticky
 * at the bottom of the scrollport with a fixed height, and the content in
 * front carries a higher z-index and its own background, so the only motion
 * is the scroll itself. On a page shorter than the viewport the footer is
 * simply below the content. Reduced motion changes nothing — there is no
 * animation to remove.
 */
import type { HTMLAttributes } from 'astro/types';

interface Props extends HTMLAttributes<'div'> {
  /** Footer height, any CSS length. */
  height?: string;
  /** Background of the content in front — must be opaque. */
  background?: string;
}

const { height = '20rem', background = 'Canvas', class: className, style, ...rest } = Astro.props;
const vars = [`--ma-fr-h:${height}`, `--ma-fr-bg:${background}`, typeof style === 'string' ? style : ''].filter(Boolean).join(';');
---

<div class:list={['ma-fr', className]} style={vars} {...rest}>
  <div class="ma-fr__content"><slot /></div>
  <footer class="ma-fr__footer"><slot name="footer" /></footer>
</div>

<style is:global>
  @layer components {
    :where(.ma-fr) {
      position: relative;
    }
    :where(.ma-fr__content) {
      position: relative;
      z-index: 1;
      background: var(--ma-fr-bg, Canvas);
    }
    :where(.ma-fr__footer) {
      position: sticky;
      bottom: 0;
      z-index: 0;
      height: var(--ma-fr-h, 20rem);
      display: grid;
      align-content: end;
    }
    /* there is no motion to reduce; the rule exists so the audit sees the branch was considered */
    @media (prefers-reduced-motion: reduce) {
      :where(.ma-fr__footer) {
        position: sticky;
      }
    }
  }
</style>