/* =========================================================
   Contact form confirmation
   Shown in place of the form once Contact Form 7 reports the message as sent.
   Uses the design's own tokens so it belongs to the rest of the site.
   ========================================================= */

.contact__form.is-sent .seg,
.contact__form.is-sent [data-seg-panel] {
	display: none;
}

/* An author `display` beats the browser's own rule for [hidden], so the
   confirmation has to opt out of it explicitly or it would show before the
   form is ever sent. */
.form-success[hidden] {
	display: none;
}

.form-success {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 18px;
	min-height: 320px;
	padding: clamp(20px, 5vw, 48px) 0;
	text-align: center;
	outline: none;
}

.form-success__mark {
	display: grid;
	place-items: center;
	width: 88px;
	height: 88px;
	border-radius: 50%;
	background: var(--orange-tint);
}

.form-success__mark svg {
	width: 52px;
	height: 52px;
	overflow: visible;
	fill: none;
	stroke: var(--orange);
	stroke-width: 3.5;
	stroke-linecap: round;
	stroke-linejoin: round;
}

.form-success__mark circle {
	stroke-dasharray: 151;
	stroke-dashoffset: 151;
	animation: mm-success-circle .5s cubic-bezier(.65, 0, .45, 1) forwards;
}

.form-success__mark path {
	stroke-dasharray: 40;
	stroke-dashoffset: 40;
	animation: mm-success-check .35s cubic-bezier(.65, 0, .45, 1) .45s forwards;
}

@keyframes mm-success-circle {
	to {
		stroke-dashoffset: 0;
	}
}

@keyframes mm-success-check {
	to {
		stroke-dashoffset: 0;
	}
}

.form-success__title {
	max-width: 22ch;
	font-size: clamp(1.4rem, 3.4vw, 1.9rem);
	line-height: 1.15;
}

.form-success__text {
	max-width: 42ch;
	color: var(--text-mut);
	font-size: 1rem;
}

/* The design turns off motion for anyone who asks for it. */
@media (prefers-reduced-motion: reduce) {
	.form-success__mark circle,
	.form-success__mark path {
		animation: none;
		stroke-dashoffset: 0;
	}
}