/*
 * WFUN Classic motion: blocks that rise in as you scroll, numbers that count up, buttons that lift, cards that rise on hover,
 * a hero whose words arrive one after another, a celebration on the Thank You page.
 *
 * The rules (same as the 2026 build):
 *  - Everything waits for html.wfun-motion, which a script in <head> sets only when the visitor has NOT asked their device for
 *    reduced motion. Those visitors, and any visit where a script fails, get the plain finished page.
 *  - CSS never hides content by itself: classic-motion.js tags what it reveals, and only below the fold.
 *  - Only transform and opacity animate, so nothing reflows.
 */

@media (prefers-reduced-motion: no-preference) {

	html.wfun-motion { scroll-behavior: smooth; }

	/* The stagger index rides on an attribute (see wfun-motion.js), turned into the number the delays use. */
	html.wfun-motion [data-wfun-i="0"] { --i: 0; }
	html.wfun-motion [data-wfun-i="1"] { --i: 1; }
	html.wfun-motion [data-wfun-i="2"] { --i: 2; }
	html.wfun-motion [data-wfun-i="3"] { --i: 3; }
	html.wfun-motion [data-wfun-i="4"] { --i: 4; }
	html.wfun-motion [data-wfun-i="5"] { --i: 5; }
	html.wfun-motion [data-wfun-i="6"] { --i: 6; }
	html.wfun-motion [data-wfun-i="7"] { --i: 7; }
	html.wfun-motion [data-wfun-i="8"] { --i: 8; }

	/* ---------- Scroll reveal ---------- */
	html.wfun-motion [data-wfun-reveal] {
		opacity: 0;
		transform: translate3d(0, 30px, 0);
		transition: opacity .85s cubic-bezier(.2, .7, .2, 1), transform .85s cubic-bezier(.2, .7, .2, 1);
		transition-delay: calc(var(--i, 0) * 95ms);
	}
	html.wfun-motion [data-wfun-reveal].is-in { opacity: 1; transform: none; }

	/* ---------- The top of every page: its words arrive one after another (no script needed, so no flash) ---------- */
	html.wfun-motion main > .elementor > .e-con:first-child .elementor-widget { animation: wfun-rise .9s cubic-bezier(.2, .7, .2, 1) both; animation-delay: .1s; }
	html.wfun-motion main > .elementor > .e-con:first-child .elementor-widget:nth-child(2) { animation-delay: .2s; }
	html.wfun-motion main > .elementor > .e-con:first-child .elementor-widget:nth-child(3) { animation-delay: .3s; }
	html.wfun-motion main > .elementor > .e-con:first-child .elementor-widget:nth-child(4) { animation-delay: .4s; }
	html.wfun-motion main > .elementor > .e-con:first-child .elementor-widget:nth-child(n+5) { animation-delay: .5s; }
	@keyframes wfun-rise {
		from { opacity: 0; transform: translate3d(0, 26px, 0); }
		to { opacity: 1; transform: none; }
	}

	/* ---------- Buttons: lift when pointed at, press when pressed, and the arrow leans in ---------- */
	html.wfun-motion .elementor-button, html.wfun-motion .wfun-contact button[type="submit"], html.wfun-motion .wfun-newsletter button {
		transition: transform .22s cubic-bezier(.2, .7, .2, 1), box-shadow .22s ease, background-color .22s ease, color .22s ease, border-color .22s ease;
	}
	@media (hover: hover) {
		html.wfun-motion .elementor-button:hover, html.wfun-motion .wfun-contact button[type="submit"]:hover, html.wfun-motion .wfun-newsletter button:hover { transform: translate3d(0, -2px, 0); }
	}
	html.wfun-motion .elementor-button:active, html.wfun-motion .wfun-contact button[type="submit"]:active, html.wfun-motion .wfun-newsletter button:active { transform: scale(.97); transition-duration: .08s; }
	html.wfun-motion .elementor-button i.ph-arrow-right, html.wfun-motion .elementor-button .elementor-button-icon { display: inline-block; transition: transform .25s cubic-bezier(.2, .7, .2, 1); }
	@media (hover: hover) {
		html.wfun-motion .elementor-button:hover i.ph-arrow-right, html.wfun-motion .elementor-button:hover .elementor-button-icon { transform: translate3d(4px, 0, 0); }
	}

	/* The choices on the Donate form answer a press at once. */
	html.wfun-motion [data-wfun-amt], html.wfun-motion [data-wfun-cause], html.wfun-motion [data-wfun-pay], html.wfun-motion [data-wfun-freq] {
		transition: background-color .2s ease, border-color .2s ease, box-shadow .2s ease, color .2s ease, transform .15s ease;
	}
	html.wfun-motion [data-wfun-amt]:active, html.wfun-motion [data-wfun-cause]:active, html.wfun-motion [data-wfun-pay]:active { transform: scale(.96); }

	/* ---------- Cards with a shadow rise when pointed at ---------- */
	html.wfun-motion [data-wfun-lift] { transition: transform .35s cubic-bezier(.2, .7, .2, 1), box-shadow .35s ease; }
	@media (hover: hover) {
		html.wfun-motion [data-wfun-lift]:hover { transform: translate3d(0, -5px, 0); box-shadow: 0 26px 60px rgba(20, 24, 31, .16); }
	}

	/* ---------- Menus ---------- */
	html.wfun-motion .wfun-drawer { animation: wfun-slide-in .28s cubic-bezier(.2, .7, .2, 1) both; }
	@keyframes wfun-slide-in {
		from { opacity: 0; transform: translate3d(28px, 0, 0); }
		to { opacity: 1; transform: none; }
	}

	/* ---------- Form results arrive, they do not just appear ---------- */
	html.wfun-motion .wfun-notice { animation: wfun-rise .55s cubic-bezier(.2, .7, .2, 1) both; }

	/* ---------- Thank You: the gift card settles in, and there is confetti ---------- */
	html.wfun-motion .wfun-gift { animation: wfun-rise .9s cubic-bezier(.2, .7, .2, 1) .25s both; }
	html.wfun-motion .wfun-confetti { position: fixed; inset: 0; width: 100%; height: 100%; z-index: 90; pointer-events: none; }

	/* ---------- The total on the Donate form gives a small pop when it changes ---------- */
	html.wfun-motion .wfun-pop { display: inline-block; animation: wfun-tick .38s cubic-bezier(.3, 1.6, .5, 1); }
	@keyframes wfun-tick { 0% { transform: scale(1); } 40% { transform: scale(1.12); } 100% { transform: scale(1); } }

	/* ---------- Pages cross-fade into one another (browsers that support it; the rest just navigate) ---------- */
	@view-transition { navigation: auto; }
	::view-transition-old(root), ::view-transition-new(root) { animation-duration: .24s; }
}

/* Printing shows the finished page, whatever has or has not scrolled into view. */
@media print {
	html.wfun-motion [data-wfun-reveal] { opacity: 1 !important; transform: none !important; transition: none !important; }
	html.wfun-motion .wfun-confetti { display: none !important; }
}