/*!
 * Animated logo loader — styles for the <x-lottie-loader /> Blade component
 * and the full-screen overlays that host it.
 *
 * Loaded by the layout-level loader partials (frontend page-loader partial and
 * the admin _body_loader partial) rather than by the component, so the styles
 * are always in place before the overlay paints.
 */

.araplay-lottie {
	position: relative;
	width: var(--araplay-lottie-width);
	/* The source composition is a 1920x1080 canvas, so the box has to keep 16:9
	   or the logo ends up letterboxed inside dead space. */
	aspect-ratio: 16 / 9;
	max-width: 100%;
	margin-inline: auto;
	line-height: 0;
}

.araplay-lottie--fullscreen {
	--araplay-lottie-width: min(900px, 92vw);
}

.araplay-lottie--inline {
	--araplay-lottie-width: 260px;
}

.araplay-lottie__anim {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
}

.araplay-lottie__anim > svg {
	display: block;
}

/* Full-screen overlay visibility, shared by the frontend and admin overlays. */
[data-lottie-overlay] {
	/* The animation ships its own full-canvas background rectangle (#010310).
	   The overlay has to use the same colour or the 16:9 animation box shows up
	   as a visible card against the page background. */
	--araplay-loader-backdrop: #010310;
	transition: opacity 400ms ease, visibility 400ms ease;
}

/* Beats `.loader.simple-loader { background-color: var(--bs-body-bg) }` from
   hope-ui.css on specificity (0,3,0 vs 0,2,0) — no !important needed. */
.loader.simple-loader[data-lottie-overlay] {
	background-color: var(--araplay-loader-backdrop);
}

[data-lottie-overlay].is-hidden {
	opacity: 0;
	visibility: hidden;
	pointer-events: none;
}

@media (prefers-reduced-motion: reduce) {
	[data-lottie-overlay] {
		transition: none;
	}
}