/* Empower Mississippi homepage — motion layer.
   Scroll reveals and page entrance. Consumes tokens/motion.css only; adds
   no new tokens and edits no upstream file.

   Progressive enhancement contract (same as js/nav.js): every start-state
   below is nested under [data-reveal="on"], which js/reveal.js sets as its
   first statement. If that script never loads, nothing is ever hidden and
   the page renders exactly as it did before this layer existed. */

[data-reveal="on"] [data-reveal]{
  opacity:0;
  transition:opacity var(--dur-reveal) var(--ease-entrance),
             transform var(--dur-reveal) var(--ease-entrance),
             clip-path var(--dur-reveal) var(--ease-entrance);
  transition-delay:calc(var(--reveal-i, 0) * 70ms);
}

[data-reveal="on"] [data-reveal="rise"]{transform:translateY(20px)}
[data-reveal="on"] [data-reveal="slide-l"]{transform:translateX(-24px)}
[data-reveal="on"] [data-reveal="slide-r"]{transform:translateX(24px)}
/* clip-path is applied to the photo variant only — an inset(0) on every
   revealed element would also clip card shadows to the border box. */
[data-reveal="on"] [data-reveal="clip"]{clip-path:inset(0 0 14% 0);transform:scale(1.04)}

[data-reveal="on"] [data-reveal].is-revealed{opacity:1;transform:none}
[data-reveal="on"] [data-reveal="clip"].is-revealed{clip-path:inset(0 0 0 0)}

/* The 1.04 above is measured from the element's centre, so a band drawn the
   full width of the window hangs 2% off each side of the document until it
   reveals — and the page carries a horizontal scrollbar for as long as that
   lasts. Clip it at the section that owns the band.

   overflow-x:clip, NOT hidden: hidden makes a scroll container, which breaks
   position:sticky for anything inside and would take the sticky header with
   it. clip does not. Where :has() is missing the rule simply does not apply
   and the behaviour is what it was before this block existed. */
[data-reveal="on"] section:has([data-reveal="clip"]){overflow-x:clip}

@media (prefers-reduced-motion: reduce){
  [data-reveal="on"] [data-reveal],
  [data-reveal="on"] [data-reveal].is-revealed{
    opacity:1;transform:none;clip-path:none;
    transition:none;transition-delay:0s;
  }
}