/*
 * Brand Refresh -- process-flow diagram only (homepage's 7-step section
 * and /how-can-we-help/advice-process/). Split out of refresh.css
 * (2026-09-07) so pages without this diagram don't ship its CSS --
 * Lighthouse flagged refresh.css's unused-byte percentage, and this is
 * the single largest page-specific chunk of it. Loaded only when
 * generate.py sets front matter `hasProcessFlow: true` (see base.njk).
 */

/* No content box any more (Christa 2026-09-07: "more visual rather
   than 7 steps in boxes") -- the icon node is the visual focal point
   now, so it gets the hover treatment instead of a card. */
body.refresh .process-flow__row {
  transition: transform 0.15s ease;
}
body.refresh .process-flow__node {
  transition: transform 0.15s ease, box-shadow 0.15s ease;
}
body.refresh .process-flow__row:hover .process-flow__node {
  transform: scale(1.08);
  box-shadow: 0 0 0 6px var(--color-bg, #fff), 0 4px 14px rgba(31, 61, 43, 0.25);
}

/* .scroll-reveal-item (2026-09-07, Christa on the process diagram:
   "would be nice to have the scrolling function like other pages
   where the text appears as you scroll"). Independent of any parent
   .row.scroll-reveal -- each item gets its own IntersectionObserver
   entry in base.njk, so a tall multi-part section like the 7-step
   process reveals one step at a time as the visitor actually scrolls
   down through it, instead of the whole row fading in as one block
   the moment it first appears. transition-delay is set inline per
   item (build_process_flow_html) for a little extra stagger (brief
   section 3: "stagger related items slightly"). Currently only used
   by the process-flow steps, hence living in this file rather than
   the core stylesheet. */
body.refresh.js-scroll-ready .scroll-reveal-item {
  opacity: 0;
  transform: translateY(16px);
  transition: opacity 0.5s ease, transform 0.5s ease;
}
body.refresh.js-scroll-ready .scroll-reveal-item.is-visible {
  opacity: 1;
  transform: none;
}
@media (prefers-reduced-motion: reduce) {
  body.refresh.js-scroll-ready .scroll-reveal-item {
    opacity: 1;
    transform: none;
    transition: none;
  }
}