/* Support for the Animation panel classes; the motion itself lives in motion.js. */

/* Animated blocks stay hidden until the script takes over (see motionpress_print_pending_flag). */
.motion-pending :is(.motion-reveal, .motion-words, .motion-stagger > :not(.motion-words)) {
	visibility: hidden;
}

/* Waiting for their turn to appear; motion.js removes these classes as blocks scroll into view.
   !important: block styles with their own opacity (a muted lead paragraph) must not show the block too early. */
.motion-is-waiting {
	opacity: 0 !important;
}

/* Words rise out of a mask. The mask's padding keeps descenders (g, y, p) from being clipped at line-height 1. */
.motion-word-mask {
	display: inline-block;
	overflow: clip;
	padding-bottom: 0.15em;
	margin-bottom: -0.15em;
}

.motion-word {
	display: inline-block;
}

.motion-words-waiting .motion-word {
	translate: 0 110%;
	rotate: 4deg;
}

@media (prefers-reduced-motion: no-preference) {
	.motion-float {
		animation: motionpress-float 3s cubic-bezier(0.445, 0.05, 0.55, 0.95) 1.5s infinite alternate;
	}
}

/* The translate property, not transform, so a block's own tilt or scale stays. */
@keyframes motionpress-float {
	to {
		translate: 0 -3%;
	}
}