/*
 * Entrance animations (fleet-page-editor#43) — Elementor's "Motion Effects ▸
 * Entrance Animation", without Elementor.
 *
 *   <div data-ff-animate="fadeInUp" data-ff-animate-delay="200" data-ff-animate-duration="fast">
 *
 * Measured on parlayrentals.com (Elementor 4.2.1), 2026-09-26, and copied here
 * exactly so a rebuilt page moves the way the Elementor page did:
 *
 *   durations   .animated 1.25s   .animated-slow 2s   .animated-fast .75s
 *   timing      the browser default (ease); no fill-mode
 *   keyframes   assets/lib/animations/styles/<name>.min.css (animate.css, MIT)
 *   hidden      .elementor-invisible{visibility:hidden} until the element enters
 *               the viewport (+ its delay), then `animated <name>` is added
 *
 * The keyframe NAMES are Elementor's own (fadeInUp, not ff-fadeInUp) so that a
 * computed animation-name on a rebuilt page reads the same as on the original.
 * Their bodies are identical to Elementor's, so a page that also loads
 * Elementor's copy gets the same motion whichever sheet wins.
 *
 * ONE DIFFERENCE, DELIBERATE. Elementor prints `elementor-invisible` in the
 * server HTML, so with JavaScript off (or its bundle failing) those widgets stay
 * invisible for good. Here the hidden state needs `html.ff-js`, which only the
 * inline head script sets: no script, no hiding — the content simply shows.
 *
 * An unknown name, or "none", is not hidden-forever either: the script still
 * adds .ff-animated, and there is simply no animation-name rule for it.
 */

html.ff-js [data-ff-animate]:not(.ff-animated) {
	visibility: hidden;
}

[data-ff-animate].ff-animated {
	animation-duration: 1.25s;
}
[data-ff-animate][data-ff-animate-duration="slow"].ff-animated {
	animation-duration: 2s;
}
[data-ff-animate][data-ff-animate-duration="fast"].ff-animated {
	animation-duration: .75s;
}

[data-ff-animate="fadeIn"].ff-animated { animation-name: fadeIn; }
[data-ff-animate="fadeInUp"].ff-animated { animation-name: fadeInUp; }
[data-ff-animate="fadeInDown"].ff-animated { animation-name: fadeInDown; }
[data-ff-animate="fadeInLeft"].ff-animated { animation-name: fadeInLeft; }
[data-ff-animate="fadeInRight"].ff-animated { animation-name: fadeInRight; }
[data-ff-animate="zoomIn"].ff-animated { animation-name: zoomIn; }
[data-ff-animate="slideInUp"].ff-animated { animation-name: slideInUp; }
[data-ff-animate="slideInDown"].ff-animated { animation-name: slideInDown; }
[data-ff-animate="slideInLeft"].ff-animated { animation-name: slideInLeft; }
[data-ff-animate="slideInRight"].ff-animated { animation-name: slideInRight; }

@keyframes fadeIn{from{opacity:0}to{opacity:1}}
@keyframes fadeInUp{from{opacity:0;transform:translate3d(0,100%,0)}to{opacity:1;transform:none}}
@keyframes fadeInDown{from{opacity:0;transform:translate3d(0,-100%,0)}to{opacity:1;transform:none}}
@keyframes fadeInLeft{from{opacity:0;transform:translate3d(-100%,0,0)}to{opacity:1;transform:none}}
@keyframes fadeInRight{from{opacity:0;transform:translate3d(100%,0,0)}to{opacity:1;transform:none}}
@keyframes zoomIn{from{opacity:0;transform:scale3d(.3,.3,.3)}50%{opacity:1}}
@keyframes slideInUp{from{transform:translate3d(0,100%,0);visibility:visible}to{transform:translate3d(0,0,0)}}
@keyframes slideInDown{from{transform:translate3d(0,-100%,0);visibility:visible}to{transform:translate3d(0,0,0)}}
@keyframes slideInLeft{from{transform:translate3d(-100%,0,0);visibility:visible}to{transform:translate3d(0,0,0)}}
@keyframes slideInRight{from{transform:translate3d(100%,0,0);visibility:visible}to{transform:translate3d(0,0,0)}}

/*
 * Reduced motion: nothing hidden, nothing moves. Same selector as the hiding
 * rule and later in the sheet, so it wins on order at equal specificity.
 * (Elementor: `.animated{animation:none!important}` under the same query.)
 */
@media (prefers-reduced-motion: reduce) {
	html.ff-js [data-ff-animate]:not(.ff-animated) {
		visibility: visible;
	}
	[data-ff-animate] {
		animation: none !important;
	}
}