/* =============================================================================
   footer-01 : the sticky reveal mechanism

   Reused from the Arix capability library
   (~/.claude/capability-library/design-system/footer-01). Only section 1 of
   the component's styles.css is taken: the reveal mechanism. The component's
   own footer surface, link columns, badge row and base line are not used here,
   because the revealed block is this site's existing closing section and keeps
   its own design.

   ADAPTATION FROM UPSTREAM. In the component the sticky element is the page's
   <footer> and the last thing in the document. Here it is the closing CTA
   section, and the green closing footer still flows after it. The mechanism is
   unchanged and the two hard requirements still hold: the cover is the sticky
   element's immediately preceding sibling, and it paints an opaque ground.
   What pins the element is its position inside [data-ft01-root], not its being
   last in the document, so content after the root simply arrives once the
   reveal has finished. The attribute is `data-ft01-sticky` rather than
   `data-footer-01` to say plainly that the revealed thing is not a footer.

   The reveal is LAYOUT. footer-01.js only adds the scrubbed fade on top, so
   with no JavaScript at all the section is still revealed, at full opacity.
   ============================================================================= */

/* The wrapper only has to be a positioned box, so the sticky section resolves
   against the page rather than against whatever the host nests it in. */
[data-ft01-root] { position: relative; }

/* The cover is the whole trick. It holds the rest of the page, paints an
   opaque ground and sits at a higher stacking level than the section, so the
   section is hidden underneath it until the page scrolls far enough to slide
   the cover up off it. A transparent cover means no reveal at all: the section
   shows through from the first pixel and nothing ever gets uncovered.

   `isolation: isolate` is not decoration. It gives the cover its own stacking
   context, which is what lets a full-bleed background layer inside it paint
   below the content without falling behind the sticky section. */
[data-ft01-cover] {
  position: relative;
  z-index: 2;
  background: var(--ivory, #f9f5ed);
  isolation: isolate;
}

[data-ft01-sticky] {
  position: sticky;
  bottom: 0;
  z-index: 0;
}

/* The guard. A sticky element taller than the viewport pins its bottom to the
   viewport bottom and pushes its own top off the top of the screen, where the
   cover hides it: scrolling on only moves it further up, so that top is never
   readable. footer-01.js sets this class whenever the section is taller than
   the viewport and the section falls back to the normal flow, trading the
   reveal for the content. This is layout rather than motion, so it applies
   under prefers-reduced-motion and with no GSAP present too. */
[data-ft01-sticky].is-ft01-tall {
  position: relative;
  bottom: auto;
}