/**
 * Moose tracks.
 *
 * The track SVGs animate themselves with SMIL on an infinite 9.8s loop. Dropped
 * in with `content: url(...)` they are unreachable from script, so every set on
 * the page runs in lockstep from the moment it loads, mostly off-screen.
 * tracks-animation.js replaces each one with an inline copy it can pause and
 * restart, and marks the section `tracks-anim-ready` once it has.
 *
 * The ::after rules stay as the no-JS fallback and share their offsets with the
 * injected element, so both land in the same place. The injected span is left
 * to size itself the same way the pseudo-element did: an auto-width absolute
 * block shrink-wrapping an inline image.
 */

.tracks-animated-left::after,
.tracks-animated-left > .tracks-anim {
	position: absolute;
	bottom: -39%;
	z-index: 0;
}

.tracks-animated-left::after {
	content: url(/wp-content/uploads/2026/07/Tracks-Left-Animated.svg);
}

.tracks-animated-right::after,
.tracks-animated-right > .tracks-anim {
	position: absolute;
	bottom: 0;
	right: 0;
}

.tracks-animated-right::after {
	content: url(/wp-content/uploads/2026/07/Tracks-Right-Animated.svg);
}

.home-cards.tracks-animated-right::after,
.home-cards.tracks-animated-right > .tracks-anim {
	top: -4%;
}

/* Retire the fallback once the scroll-triggered copy is in the DOM. The
   !important is what beats the same rules in Customizer → Additional CSS,
   which WordPress prints after this stylesheet. */
.tracks-anim-ready::after {
	content: none !important;
}

.tracks-anim {
	pointer-events: none;
}