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.
 *
 * Without a default slot it renders the footer alone, for a layout whose page
 * content comes before it as a sibling (a <main> the page's layout renders):
 * the footer still sticks and waits underneath, and the content in front
 * brings its own z-index and ground.
 */
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(';');
---
{
  Astro.slots.has('default') ? (
    <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>
  ) : (
    <footer class:list={['ma-fr__footer', className]} data-alone style={vars} {...rest}><slot name="footer" /></footer>
  )
}

<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) {
      /* a hook: relative (or static) where the reveal cannot work, say on a screen shorter than the footer */
      position: var(--ma-fr-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. It keeps the position
       hook: a page that set --ma-fr-position lost it under reduced motion, where this rule wrote sticky back */
    @media (prefers-reduced-motion: reduce) {
      :where(.ma-fr__footer) {
        position: var(--ma-fr-position, sticky);
      }
    }
  }
</style>