/**
 * IV Tours USA Ads — motion.
 *
 * Safety model
 * ------------
 * Content is VISIBLE by default. The hidden starting state is only applied when
 * `.js-anim` is on the <html> element, and that class is added synchronously by
 * animations.js the moment the script starts evaluating. That means:
 *
 *   - JavaScript disabled        -> no .js-anim -> everything visible
 *   - animations.js blocked/404  -> no .js-anim -> everything visible
 *   - animations.js runs and completes normally
 *                                -> the observer and its failsafe timer reveal
 *
 * The one gap that used to exist is animations.js adding `.js-anim` and then
 * failing before it schedules its own failsafe timer. The class would already be
 * on the document, every [data-reveal] would already be at opacity 0, and
 * nothing would ever put it back. That was observed in production: an admin
 * toolbar rendered while the whole landing page stayed invisible.
 *
 * The guard below closes that gap without relying on JavaScript at all. It is a
 * CSS animation, so it runs whenever CSS runs, and it can only ever set the same
 * visible state the reveal already sets. Two seconds is far longer than the
 * observer needs, so a normal visitor never sees it take effect, and a visitor
 * whose scripts break sees the page simply appear rather than a blank screen.
 */

/* Default, no-JS-safe state. */
[data-reveal] {
	opacity: 1;
}

/* Only hide once JavaScript has confirmed it can finish the reveal. */
.js-anim [data-reveal] {
	opacity: 0;
	transform: translateY(20px);
	transition:
		opacity var(--ads-motion-slower) var(--ads-ease, cubic-bezier(0.22, 0.61, 0.36, 1)),
		transform var(--ads-motion-slower) var(--ads-ease, cubic-bezier(0.22, 0.61, 0.36, 1));

	/*
	 * The guard. A zero duration animation with a delay and a forwards fill mode
	 * contributes no value during the delay, so the transition above behaves
	 * exactly as before; at the delay it switches to the visible state and holds
	 * it there. A delayed, zero-length animation is used rather than a real one
	 * so nothing moves and nothing flashes.
	 */
	animation: ads-reveal-guard 0s linear 2s forwards;
}

@keyframes ads-reveal-guard {
	to {
		opacity: 1;
		transform: none;
	}
}

.js-anim [data-reveal].is-revealed {
	opacity: 1;
	transform: none;
}

/* Gentle stagger across grid children, short enough not to delay reading. */
.js-anim .ads-styles__grid [data-reveal]:nth-child(2),
.js-anim .ads-why__grid [data-reveal]:nth-child(2),
.js-anim .ads-packages__grid [data-reveal]:nth-child(2) {
	transition-delay: var(--ads-stagger);
}

.js-anim .ads-styles__grid [data-reveal]:nth-child(3),
.js-anim .ads-why__grid [data-reveal]:nth-child(3),
.js-anim .ads-packages__grid [data-reveal]:nth-child(3) {
	transition-delay: calc(var(--ads-stagger) * 1.5);
}

.js-anim .ads-why__grid [data-reveal]:nth-child(4) {
	transition-delay: var(--ads-stagger);
}

.js-anim .ads-why__grid [data-reveal]:nth-child(5) {
	transition-delay: calc(var(--ads-stagger) * 1.5);
}

.js-anim .ads-why__grid [data-reveal]:nth-child(6) {
	transition-delay: calc(var(--ads-stagger) * 2.25);
}

/* Hero entrance */
.ads-hero__eyebrow,
.ads-hero__title,
.ads-hero__text,
.ads-hero__services,
.ads-hero__actions,
.ads-hero__trust {
	opacity: 0;
	transform: translateY(16px);
	animation: ads-rise var(--ads-motion-enter) var(--ads-ease, cubic-bezier(0.22, 0.61, 0.36, 1)) forwards;
}

.ads-hero__eyebrow {
	animation-delay: var(--ads-stagger);
}

.ads-hero__title {
	animation-delay: calc(var(--ads-stagger) * 2);
}

.ads-hero__text {
	animation-delay: calc(var(--ads-stagger) * 3.5);
}

.ads-hero__services {
	animation-delay: calc(var(--ads-stagger) * 4.5);
}

.ads-hero__actions {
	animation-delay: calc(var(--ads-stagger) * 5.5);
}

.ads-hero__trust {
	animation-delay: calc(var(--ads-stagger) * 6.75);
}

@keyframes ads-rise {
	to {
		opacity: 1;
		transform: none;
	}
}

/* Modal */
.ads-modal__panel {
	animation: ads-modal-in var(--ads-transition-slow) var(--ads-ease, cubic-bezier(0.22, 0.61, 0.36, 1));
}

.ads-modal[open] {
	animation: ads-fade-in var(--ads-transition) var(--ads-ease);
}

@keyframes ads-modal-in {
	from {
		opacity: 0;
		transform: translateY(14px) scale(0.985);
	}
	to {
		opacity: 1;
		transform: none;
	}
}

@keyframes ads-fade-in {
	from {
		opacity: 0;
	}
	to {
		opacity: 1;
	}
}

/* FAQ */
.ads-faq__item[open] .ads-faq__answer {
	animation: ads-faq-open var(--ads-motion-quick) var(--ads-ease, cubic-bezier(0.22, 0.61, 0.36, 1)) both;
}

@keyframes ads-faq-open {
	from {
		opacity: 0;
		transform: translateY(-5px);
	}
	to {
		opacity: 1;
		transform: none;
	}
}

/* Floating WhatsApp */
.ads-floating.is-visible {
	transition:
		opacity var(--ads-motion-slow) var(--ads-ease, cubic-bezier(0.22, 0.61, 0.36, 1)),
		transform var(--ads-motion-slow) var(--ads-ease, cubic-bezier(0.22, 0.61, 0.36, 1)),
		visibility var(--ads-motion-slow);
}

/* -------------------------------------------------------------------------
 * Reduced motion
 * ---------------------------------------------------------------------- */

@media (prefers-reduced-motion: reduce) {
	html {
		scroll-behavior: auto;
	}

	*,
	*::before,
	*::after {
		animation-duration: 0.001ms !important;
		animation-iteration-count: 1 !important;
		transition-duration: 0.001ms !important;
		scroll-behavior: auto !important;
	}

	.js-anim [data-reveal],
	.ads-hero__eyebrow,
	.ads-hero__title,
	.ads-hero__text,
	.ads-hero__services,
	.ads-hero__actions,
	.ads-hero__trust,
	.ads-floating {
		opacity: 1 !important;
		transform: none !important;
		visibility: visible !important;
	}

	.ads-where__hint .ads-icon {
		animation: none;
	}

	.ads-dest:hover,
	.ads-style:hover,
	.ads-pkg:hover,
	.ads-service:hover,
	.ads-vehicle:hover,
	.ads-btn:hover,
	.ads-floating__btn:hover {
		transform: none;
	}
}