/* =========================================================================
   FOOTER GLOW — blurred gradient band pinned to the bottom of the viewport,
   rising to full height exactly as the visitor reaches the end of the page.

   Vanilla port of the "gradient footer" pattern (one inline <svg>, no canvas,
   no scroll spacer). Original reference implementation was a React/TSX
   component; this project is single-file HTML + Tailwind CDN + vanilla JS per
   CLAUDE.md §3, so the band is built and driven by scripts/footer-glow.js.

   Palette is our own — LOCKED tokens from CLAUDE.md §7 only (navy accent
   #010155, burgundy #9E1B32, burgundy-dark #6B0F1A, alt bg #F1F2F2). The
   reference component's rainbow (electric blue → yellow → magenta) is NOT
   used anywhere. Stop colours live in footer-glow.js.

   Loaded on every page; the band is injected into <footer class="site-footer">.
   ========================================================================= */

:root {
  /* Height of the glow band AND the room reserved for it under the footer
     content. Doubles as the scroll distance the reveal takes. */
  --footer-glow-height: 38vh;
  /* Resting height as a fraction of the band — a thin flat strip of colour
     along the bottom edge before the scroll reveal begins. */
  --footer-glow-rest: 0.045;
}

/* Reserve the band's height beneath the footer content so the glow has a
   place to land instead of washing over the copyright line.
   Selector is `footer.site-footer` (element + class) so it outranks each
   page's inline `.site-footer { padding: 72px 0 0 }` on specificity rather
   than relying on stylesheet order — the inline <style> block sits after
   this <link> on some pages and before it on others. */
footer.site-footer {
  position: relative;
  padding-bottom: var(--footer-glow-height);
}

/* The band is fixed to the viewport, so it must not sit inside a transformed
   or filtered ancestor (that would capture it). .site-footer is a plain
   containing block — do not add transform/filter/backdrop-filter to it. */
.footer-glow {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  height: var(--footer-glow-height);
  pointer-events: none;
  transform-origin: bottom;
  transform: scaleY(var(--footer-glow-progress, var(--footer-glow-rest)));
  will-change: transform;
  /* Above page content (max z-index in use is 10) but below the site header
     (40), the mobile drawer (60) and the welcome card (1000). */
  z-index: 20;
}

.footer-glow svg {
  display: block;
  width: 100%;
  height: 100%;
}

/* Footer content reads first — lift it over the band. */
.site-footer > .container-main {
  position: relative;
  z-index: 21;
}

/* Reduced motion: no scroll-driven reveal. The band drops out of the fixed
   layer and simply sits at the bottom of the footer at full height, so it is
   a static piece of colour rather than something that follows the viewport. */
.footer-glow--static {
  position: absolute;
  transform: none;
  will-change: auto;
}

@media (max-width: 768px) {
  :root {
    --footer-glow-height: 30vh;
  }
}