/* Hero text reveal for the homepage and Donate page.

   These hero widgets are exported with Elementor's `elementor-invisible` class (`visibility: hidden`).
   Elementor removes it and plays the entrance animation from a scroll/viewport trigger, which is not
   reliable for content that is already on screen when the page loads: the hero heading and subtitle
   showed as a blank hero until the visitor scrolled or resized.

   This makes the text visible on load and plays the same entrance, reusing Elementor's own keyframes
   (`fadeInDown` / `fadeInUp`, from animations.min.css), names and durations. Using the same animation
   name matters: when Elementor later swaps `elementor-invisible` for `animated fadeInDown`, the browser
   sees an unchanged animation and carries on instead of replaying it (which would make the text vanish
   and fade in a second time). Once Elementor has taken over, `elementor-invisible` is gone and these
   rules simply stop matching.

   Widget ids (unique per page):
     home   c7345d2 heading (fadeInDown, 1.25s), a9fda38 subtitle (fadeInUp, `animated-slow` 2s)
     donate 5abaae7 heading (fadeInDown, 1.25s), 17fe558 subtitle (fadeInUp, 1.25s) */

.elementor-element-c7345d2.elementor-invisible,
.elementor-element-a9fda38.elementor-invisible,
.elementor-element-5abaae7.elementor-invisible,
.elementor-element-17fe558.elementor-invisible {
  visibility: visible;
}

/* Motion is opt-in: visitors who prefer reduced motion just get the text, with no animation. */
@media (prefers-reduced-motion: no-preference) {
  .elementor-element-c7345d2.elementor-invisible,
  .elementor-element-5abaae7.elementor-invisible {
    animation: fadeInDown 1.25s both;
  }
  .elementor-element-17fe558.elementor-invisible {
    animation: fadeInUp 1.25s both;
  }
  .elementor-element-a9fda38.elementor-invisible {
    animation: fadeInUp 2s both;
  }
}