/*
 * Animation layer: scroll reveals, sticky header, preloader, back-to-top,
 * WhatsApp float. Everything collapses gracefully under
 * prefers-reduced-motion (see base.css global rule).
 */

/* ------------------------------------------------------- scroll reveals */

@media (prefers-reduced-motion: no-preference) {
	.asli-reveal {
		opacity: 0;
		translate: 0 min(100%, 120px);
		transition:
			opacity var(--asli-duration-reveal) ease,
			translate var(--asli-duration-reveal) ease;
	}

	.asli-reveal.is-visible {
		opacity: 1;
		translate: 0 0;
	}
}

/* -------------------------------------------------------- sticky header */

.asli-header--fallback[data-sticky] .asli-header__bar {
	transition: box-shadow var(--asli-duration) var(--asli-ease);
}

.asli-header--fallback.is-stuck .asli-header__bar {
	position: fixed;
	top: 0;
	inset-inline: 0;
	z-index: 9000;
	box-shadow: var(--asli-shadow-card-hover);
	animation: asli-header-drop 300ms var(--asli-ease);
}

/* Keep layout height stable when the bar detaches. */
.asli-header--fallback.is-stuck {
	padding-block-end: var(--asli-header-height, 76px);
}

@keyframes asli-header-drop {
	from {
		translate: 0 -100%;
	}

	to {
		translate: 0 0;
	}
}

@media (prefers-reduced-motion: reduce) {
	.asli-header--fallback.is-stuck .asli-header__bar {
		animation: none;
	}
}

/* ------------------------------------------------------------ preloader */

.asli-preloader {
	position: fixed;
	inset: 0;
	z-index: 99999;
	display: flex;
	align-items: center;
	justify-content: center;
	background: var(--asli-blue);
	transition: opacity 350ms var(--asli-ease), visibility 0s linear 350ms;
}

.asli-preloader.is-done {
	opacity: 0;
	visibility: hidden;
}

.asli-preloader__ring {
	position: relative;
	width: 110px;
	height: 110px;
	border-radius: var(--asli-radius-pill);
	border: 1px solid;
	border-color: transparent var(--asli-text-on-dark) transparent var(--asli-text-on-dark);
	display: flex;
	align-items: center;
	justify-content: center;
	animation: asli-preloader-spin 1s linear infinite;
}

.asli-preloader__chip {
	width: 78px;
	height: 78px;
	border-radius: var(--asli-radius-pill);
	background: var(--asli-surface);
	display: flex;
	align-items: center;
	justify-content: center;
	animation: asli-preloader-spin 1s linear infinite reverse;
}

.asli-preloader__mark {
	width: 42px;
	height: auto;
}

@keyframes asli-preloader-spin {
	to {
		rotate: 360deg;
	}
}

@media (prefers-reduced-motion: reduce) {
	.asli-preloader__ring,
	.asli-preloader__chip {
		animation: none;
	}
}

/* ---------------------------------------------------------- back to top */

.asli-to-top {
	position: fixed;
	inset-inline-end: var(--asli-space-lg);
	bottom: var(--asli-space-lg);
	z-index: 8000;
	width: 3rem;
	height: 3rem;
	display: flex;
	align-items: center;
	justify-content: center;
	border: 0;
	border-radius: var(--asli-radius-pill);
	background: var(--asli-blue);
	color: var(--asli-text-on-dark);
	cursor: pointer;
	opacity: 0;
	visibility: hidden;
	translate: 0 10px;
	transition:
		opacity var(--asli-duration) var(--asli-ease),
		translate var(--asli-duration) var(--asli-ease),
		visibility 0s linear var(--asli-duration);
	box-shadow: var(--asli-shadow-card-hover);
}

.asli-to-top.is-visible {
	opacity: 1;
	visibility: visible;
	translate: 0 0;
	transition-delay: 0s;
}

.asli-to-top:hover {
	background: var(--asli-navy);
	color: var(--asli-yellow);
}

/* ------------------------------------------------------- WhatsApp float */

.asli-wa {
	position: fixed;
	inset-inline-end: var(--asli-space-lg);
	bottom: calc(var(--asli-space-lg) + 3.75rem);
	z-index: 8000;
	width: 3.25rem;
	height: 3.25rem;
	display: flex;
	align-items: center;
	justify-content: center;
	border-radius: var(--asli-radius-pill);
	background: #25d366;
	color: #ffffff;
	box-shadow: var(--asli-shadow-card-hover);
}

.asli-wa:hover {
	background: #128c7e;
	color: #ffffff;
}

.asli-wa svg {
	width: 1.6rem;
	height: 1.6rem;
}