/*
 * Lavisa Travel Booking — Cascade Base CSS
 *
 * Loaded on the front-end only. Defines:
 *
 *   1. Visibility utility classes (.is-hidden-mobile/tablet/desktop)
 *      Used by the customizer preview JS for live updates while the admin
 *      is tweaking settings. Server-side, the cascade emitter outputs the
 *      same display:none rule but targets [data-lth-element="<id>"] directly.
 *
 *   2. The 11 keyframe definitions referenced by the animation control's
 *      preset whitelist. Elements opt in via `data-lth-element` markup +
 *      a customizer animation setting that emits CSS variables; the
 *      animation runtime JS toggles the `is-animating` class to start
 *      the animation.
 *
 *   3. The `[data-lth-element]` base behavior — when the element has any
 *      animation CSS variables set, opacity starts at 0 (so the keyframes
 *      can fade it in cleanly) and the animation kicks in once the
 *      runtime adds `is-animating`.
 *
 * Breakpoints kept in sync with Ltb_Cascade_Emitter::BREAKPOINTS:
 *   mobile:  max-width: 600px
 *   tablet:  601px–1024px
 *   desktop: min-width: 1025px
 *
 * FILE LOCATION: theme/customizers/shared/assets/css/ltb-cascade-base.css
 *
 * @since 1.0.0 (V1-4)
 */

/* ═════════════════════════════════════════════════════════════════════════
 * 1. VISIBILITY — utility classes for live-preview parity with server-side
 *    [data-lth-element]-targeted display:none rules emitted by the cascade.
 * ═══════════════════════════════════════════════════════════════════════ */

@media (max-width: 600px) {
	.is-hidden-mobile,
	[data-lth-element].is-hidden-mobile {
		display: none !important;
	}
}

@media (min-width: 601px) and (max-width: 1024px) {
	.is-hidden-tablet,
	[data-lth-element].is-hidden-tablet {
		display: none !important;
	}
}

@media (min-width: 1025px) {
	.is-hidden-desktop,
	[data-lth-element].is-hidden-desktop {
		display: none !important;
	}
}

/* ═════════════════════════════════════════════════════════════════════════
 * 2. ANIMATION ENGINE
 *
 * Each [data-lth-element] that has an animation customizer setting gets
 * --lth-anim-entrance-* (or --lth-anim-hover-*) CSS vars emitted by the
 * cascade emitter. The runtime JS detects those vars, registers an
 * IntersectionObserver (for trigger=viewport) or hover listener
 * (trigger=hover), and toggles `is-animating` to start the animation.
 *
 * For viewport-triggered entrances, opacity defaults to 0 so the keyframes
 * can cleanly fade-in. For load-triggered, animations start immediately.
 * ═══════════════════════════════════════════════════════════════════════ */

[data-lth-element][style*="--lth-anim-entrance-trigger: viewport"]:not(.is-animating),
[data-lth-element][data-lth-anim-pending="entrance"] {
	opacity: 0;
}

[data-lth-element].is-animating {
	animation-name:            var(--lth-anim-entrance-name, none);
	animation-duration:        var(--lth-anim-entrance-duration, 400ms);
	animation-timing-function: var(--lth-anim-entrance-easing, var(--ltb-easing-out, ease-out));
	animation-delay:           var(--lth-anim-entrance-delay, 0ms);
	animation-fill-mode:       both;
}

/* Hover slot: triggered by :hover, animation lasts only as long as hovered. */
[data-lth-element]:hover {
	animation-name:            var(--lth-anim-hover-name, none);
	animation-duration:        var(--lth-anim-hover-duration, 200ms);
	animation-timing-function: var(--lth-anim-hover-easing, var(--ltb-easing-out, ease-out));
	animation-delay:           var(--lth-anim-hover-delay, 0ms);
	animation-fill-mode:       both;
}

/* ═════════════════════════════════════════════════════════════════════════
 * 3. KEYFRAME DEFINITIONS
 *
 * Names mirror Ltb_Animation_Control::PRESETS (V1-3). The cascade emitter
 * writes these names into --lth-anim-*-name; the engine above plugs them
 * into animation-name when is-animating is added.
 *
 * 11 keyframes total:
 *   none, fade, fade-up, fade-down, fade-left, fade-right,
 *   slide-up, slide-down, scale, scale-up, rotate-in
 *
 * (`none` is the empty preset — no @keyframes defined, animation-name
 * resolves to its own literal `none` value, which CSS treats as no
 * animation. So no @keyframes lth-anim-none required.)
 * ═══════════════════════════════════════════════════════════════════════ */

@keyframes lth-anim-fade {
	from { opacity: 0; }
	to   { opacity: 1; }
}

@keyframes lth-anim-fade-up {
	from { opacity: 0; transform: translateY(16px); }
	to   { opacity: 1; transform: translateY(0); }
}

@keyframes lth-anim-fade-down {
	from { opacity: 0; transform: translateY(-16px); }
	to   { opacity: 1; transform: translateY(0); }
}

@keyframes lth-anim-fade-left {
	from { opacity: 0; transform: translateX(16px); }
	to   { opacity: 1; transform: translateX(0); }
}

@keyframes lth-anim-fade-right {
	from { opacity: 0; transform: translateX(-16px); }
	to   { opacity: 1; transform: translateX(0); }
}

@keyframes lth-anim-slide-up {
	from { transform: translateY(24px); }
	to   { transform: translateY(0); }
}

@keyframes lth-anim-slide-down {
	from { transform: translateY(-24px); }
	to   { transform: translateY(0); }
}

@keyframes lth-anim-scale {
	from { opacity: 0; transform: scale(0.96); }
	to   { opacity: 1; transform: scale(1); }
}

@keyframes lth-anim-scale-up {
	from { transform: scale(0.94); }
	to   { transform: scale(1); }
}

@keyframes lth-anim-rotate-in {
	from { opacity: 0; transform: rotate(-6deg) scale(0.96); }
	to   { opacity: 1; transform: rotate(0) scale(1); }
}

/* ═════════════════════════════════════════════════════════════════════════
 * 4. REDUCED-MOTION RESPECT
 *
 * Honors the user's OS-level "reduce motion" setting. All Lavisa animations
 * collapse to instant fades when prefers-reduced-motion is set, regardless
 * of admin customization. Accessibility-first.
 * ═══════════════════════════════════════════════════════════════════════ */

@media (prefers-reduced-motion: reduce) {
	[data-lth-element] {
		animation-duration:   1ms !important;
		animation-delay:      0ms !important;
		transition-duration:  1ms !important;
	}
	[data-lth-element][data-lth-anim-pending] {
		opacity: 1 !important;
	}
}