/**
 * Animated form feedback modal — Hesham Saad · https://heshamsaad.com
 */

.hs-form-feedback {
	position: fixed;
	inset: 0;
	z-index: 10050;
	display: none;
	align-items: center;
	justify-content: center;
	padding: 1rem;
	pointer-events: none;
}

.hs-form-feedback:not(.hidden) {
	display: flex;
	pointer-events: auto;
}

.hs-form-feedback__backdrop {
	position: absolute;
	inset: 0;
	background: rgb(0 0 0 / 0.58);
	opacity: 0;
	transition: opacity 0.28s ease;
}

.hs-form-feedback.is-visible .hs-form-feedback__backdrop {
	opacity: 1;
}

.hs-form-feedback__panel {
	opacity: 0;
	transform: scale(0.94) translateY(14px);
	transition:
		opacity 0.32s ease,
		transform 0.38s cubic-bezier(0.22, 1, 0.36, 1);
}

.hs-form-feedback.is-visible .hs-form-feedback__panel {
	opacity: 1;
	transform: scale(1) translateY(0);
}

.hs-form-feedback__icon-shell {
	position: relative;
	width: 4.5rem;
	height: 4.5rem;
}

.hs-form-feedback__icon-ring {
	position: absolute;
	inset: 0;
	border-radius: 9999px;
	opacity: 0;
	transform: scale(0.55);
}

.hs-form-feedback--success .hs-form-feedback__icon-ring {
	background: color-mix(in srgb, var(--color-brand, #f97316) 18%, transparent);
}

.hs-form-feedback--error .hs-form-feedback__icon-ring {
	background: color-mix(in srgb, var(--color-destructive, #dc2626) 16%, transparent);
}

.hs-form-feedback.is-visible .hs-form-feedback__icon-ring {
	animation: hs-form-feedback-ring 0.62s cubic-bezier(0.22, 1, 0.36, 1) forwards;
}

.hs-form-feedback__icon {
	position: absolute;
	inset: 0;
	display: flex;
	align-items: center;
	justify-content: center;
	opacity: 0;
	transform: scale(0.35);
}

.hs-form-feedback__icon svg {
	width: 2.75rem;
	height: 2.75rem;
}

.hs-form-feedback--success .hs-form-feedback__icon {
	color: var(--color-brand, #f97316);
}

.hs-form-feedback--error .hs-form-feedback__icon {
	color: var(--color-destructive, #dc2626);
}

.hs-form-feedback.is-visible .hs-form-feedback__icon {
	animation: hs-form-feedback-icon 0.55s cubic-bezier(0.34, 1.4, 0.64, 1) 0.08s forwards;
}

[data-hs-form-feedback-title],
[data-hs-form-feedback-message] {
	opacity: 0;
	transform: translateY(8px);
}

.hs-form-feedback.is-visible [data-hs-form-feedback-title],
.hs-form-feedback.is-visible [data-hs-form-feedback-message] {
	animation: hs-form-feedback-copy 0.42s ease 0.18s forwards;
}

.hs-form-feedback.is-visible [data-hs-form-feedback-message] {
	animation-delay: 0.26s;
}

@keyframes hs-form-feedback-ring {
	0% {
		opacity: 0;
		transform: scale(0.55);
	}

	65% {
		opacity: 1;
		transform: scale(1.08);
	}

	100% {
		opacity: 1;
		transform: scale(1);
	}
}

@keyframes hs-form-feedback-icon {
	0% {
		opacity: 0;
		transform: scale(0.35);
	}

	70% {
		opacity: 1;
		transform: scale(1.08);
	}

	100% {
		opacity: 1;
		transform: scale(1);
	}
}

@keyframes hs-form-feedback-copy {
	to {
		opacity: 1;
		transform: translateY(0);
	}
}

@media (prefers-reduced-motion: reduce) {
	.hs-form-feedback__backdrop,
	.hs-form-feedback__panel {
		transition: none;
	}

	.hs-form-feedback.is-visible .hs-form-feedback__icon-ring,
	.hs-form-feedback.is-visible .hs-form-feedback__icon,
	.hs-form-feedback.is-visible [data-hs-form-feedback-title],
	.hs-form-feedback.is-visible [data-hs-form-feedback-message] {
		animation: none;
		opacity: 1;
		transform: none;
	}

	.hs-form-feedback__panel {
		opacity: 1;
		transform: none;
	}

	.hs-form-feedback.is-visible .hs-form-feedback__backdrop {
		opacity: 1;
	}
}