/* ==========================================================================
   Motion layer. Everything here only applies while html.fx-on is set
   (added in <head> before paint; never for "reduce motion"; removed again
   if motion.js doesn't start). Without it the page is simply all there.
   ========================================================================== */

/* ---------- Reveal on scroll ---------- */
.fx-on [data-reveal] {
	opacity: 0;
	transform: translate3d(0, 34px, 0);
	transition: opacity 0.9s var(--ease), transform 1.1s var(--ease), clip-path 1.2s var(--ease), filter 1s var(--ease);
	transition-delay: var(--d, 0s);
	will-change: opacity, transform;
}
.fx-on [data-reveal="left"] { transform: translate3d(-48px, 0, 0); }
.fx-on [data-reveal="right"] { transform: translate3d(48px, 0, 0); }
.fx-on [data-reveal="zoom"] { transform: scale(0.92); }
.fx-on [data-reveal="rise"] { transform: translate3d(0, 90px, 0); filter: blur(6px); }
/* Wipe: the picture inside is clipped, not the box itself — a fully clipped
   box never counts as "on screen" for the observer, so it would never start. */
.fx-on [data-reveal="wipe"] { opacity: 1; transform: none; }
.fx-on [data-reveal="wipe"] > * { clip-path: inset(0 100% 0 0 round 22px); transition: clip-path 1.3s var(--ease); transition-delay: var(--d, 0s); }
.fx-on [data-reveal].is-in { opacity: 1; transform: none; filter: none; }
.fx-on [data-reveal="wipe"].is-in > * { clip-path: inset(0 0 0 0 round 22px); }
/* Parallax elements that also reveal: the reveal runs on a wrapper-free
   transform, so parallax offsets are applied through a variable. */
.fx-on [data-reveal][data-parallax].is-in { transform: translate3d(0, var(--py, 0px), 0); }

/* ---------- Headlines: words rise in ---------- */
.w { display: inline-block; overflow: hidden; vertical-align: top; padding-bottom: 0.06em; margin-bottom: -0.06em; }
.w > span { display: inline-block; }
.fx-on [data-split] .w > span { transform: translate3d(0, 108%, 0) rotate(3deg); transition: transform 1s var(--ease); transition-delay: calc(var(--i, 0) * 70ms + var(--d, 0s)); }
.fx-on [data-split].is-in .w > span { transform: none; }
.fx-on [data-split] .dot { display: inline-block; transform: scale(0); transition: transform 0.6s cubic-bezier(0.34, 1.56, 0.64, 1); transition-delay: calc(var(--i, 0) * 70ms + 0.45s); }
.fx-on [data-split].is-in .dot { transform: none; }

/* Hero title: outline row draws its stroke in */
.fx-on .hero__title .line--outline .w > span { -webkit-text-stroke-color: rgba(255, 255, 255, 0); transition: transform 1s var(--ease), -webkit-text-stroke-color 1.2s ease 0.6s; }
.fx-on .hero__title.is-in .line--outline .w > span { -webkit-text-stroke-color: rgba(255, 255, 255, 0.95); }

/* ---------- Hero entrance ---------- */
/* Banner: a light sweeps across it now and then */
.fx-on .hero__banner.is-in .hero__banner-frame::after { animation: ac-shine 8s ease-in-out 0.9s infinite; }
.fx-on .slash { opacity: 0; transition: opacity 1s ease 0.8s; }
.fx-on .is-ready .slash, .fx-on .page-hero .slash { opacity: 0.9; }
.fx-on .hero .marquee { opacity: 0; transform: rotate(-1.6deg) scale(1.04) translateY(40px); transition: opacity 0.8s ease 0.9s, transform 1s var(--ease) 0.9s; }
.fx-on .hero.is-ready .marquee { opacity: 1; transform: rotate(-1.6deg) scale(1.04); }
.hero__badge { animation: ac-float 6s ease-in-out infinite; }

/* ---------- Marquees ---------- */
[data-marquee] { animation: ac-marquee var(--dur, 30s) linear infinite; }
.strip:hover [data-marquee] { animation-play-state: paused; }
.marquee--tilt { transform-origin: center; }

/* ---------- Tilt / spotlight ---------- */
[data-tilt] { transform-style: preserve-3d; transition: transform 0.6s var(--ease); }
[data-tilt].is-tilting { transition: transform 0.12s linear; }

/* ---------- Page hero entrance ---------- */
.fx-on .page-hero__photo img { transform: scale(1.12); transition: transform 2.4s var(--ease); }
.fx-on .is-ready .page-hero__photo img { transform: none; }

/* ---------- Buttons ---------- */
.btn--donate { animation: ac-glow 3.2s ease-in-out infinite; }
.site-header .btn--donate { animation-delay: 1.5s; }

/* ---------- Elementor editor: show everything, keep it still ---------- */
.elementor-editor-active [data-reveal], .elementor-editor-active [data-split] .w > span { opacity: 1 !important; transform: none !important; clip-path: none !important; filter: none !important; }

/* ---------- Late / no JS: all visible ---------- */
.fx-late [data-reveal] { opacity: 1; transform: none; clip-path: none; }

/* ---------- Keyframes ---------- */
@keyframes ac-marquee { from { transform: translate3d(0, 0, 0); } to { transform: translate3d(-50%, 0, 0); } }
@keyframes ac-float { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-10px); } }
@keyframes ac-shine { 0% { transform: translateX(-120%); } 18%, 100% { transform: translateX(120%); } }
@keyframes ac-glow { 0%, 100% { box-shadow: 0 14px 34px -14px var(--red-glow); } 50% { box-shadow: 0 14px 44px -8px rgba(221, 19, 26, 0.75), 0 0 0 6px rgba(221, 19, 26, 0.12); } }

@media (prefers-reduced-motion: reduce) {
	[data-marquee], .hero__badge, .hero__banner-frame::after, .btn--donate, .ring-btn__text, .seal svg.seal__ring { animation: none !important; }
}