/* HTMX styles for the indicators and the fade in animation for the quote */

.htmx-indicator {
	opacity: 0;
	transition: opacity 500ms ease-in;
}
.htmx-request .htmx-indicator {
	opacity: 1;
}
.htmx-request.htmx-indicator {
	opacity: 1;
}

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

@keyframes fade-out {
	to {
		opacity: 0;
	}
}

@keyframes slide-from-right {
	from {
		transform: translateX(90px);
	}
}

@keyframes slide-to-left {
	to {
		transform: translateX(-90px);
	}
}

#quote {
	view-transition-name: quote;
}

::view-transition-old(quote) {
	animation:
		180ms cubic-bezier(0.4, 0, 1, 1) both fade-out,
		600ms cubic-bezier(0.4, 0, 0.2, 1) both slide-to-left;
}
::view-transition-new(quote) {
	animation:
		420ms cubic-bezier(0, 0, 0.2, 1) 90ms both fade-in,
		600ms cubic-bezier(0.4, 0, 0.2, 1) both slide-from-right;
}