/* 6.13 The sent panel: an animated confirmation inside the enquiry form once it has gone (form-sent.js). Own classes: fsent-*.
   Colours come from the tokens the form already sits in (the contact section is dark). */
.fsent { position: relative; display: grid; justify-items: start; gap: var(--s-2); padding: var(--s-3) 0 var(--s-2); animation: fsent-in .55s var(--ease) both; }
.form.has-fsent .form__status { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.fsent__mark { position: relative; width: 84px; height: 84px; margin-bottom: var(--s-2); }
.fsent__mark::before { content: ""; position: absolute; inset: -14px; border-radius: 50%; background: radial-gradient(circle, rgba(37, 211, 102, .32), rgba(37, 211, 102, 0) 70%); animation: fsent-halo 1.6s var(--ease) .35s both; }
.fsent__mark svg { position: relative; width: 100%; height: 100%; display: block; fill: none; stroke: var(--c-wa); stroke-width: 3; stroke-linecap: round; stroke-linejoin: round; }
.fsent__ring { stroke-dasharray: 183; stroke-dashoffset: 183; animation: fsent-draw .7s var(--ease) .1s forwards; }
.fsent__tick { stroke-dasharray: 40; stroke-dashoffset: 40; stroke-width: 4; animation: fsent-draw .4s var(--ease) .75s forwards; }
.fsent__h { font-size: var(--fs-3); line-height: 1.2; margin: 0; animation: fsent-rise .5s var(--ease) .55s both; outline: none; }
.fsent__p { margin: 0; color: inherit; opacity: .9; max-width: 52ch; animation: fsent-rise .5s var(--ease) .7s both; }
.fsent__wa { margin: var(--s-2) 0 0; font-weight: 600; max-width: 52ch; animation: fsent-rise .5s var(--ease) .85s both; }
.fsent__btns { display: flex; flex-wrap: wrap; gap: var(--s-2); margin-top: var(--s-2); animation: fsent-rise .5s var(--ease) 1s both; }
.fsent__again { margin-top: var(--s-3); background: none; border: 0; padding: 0; font: inherit; font-size: var(--fs-0); color: inherit; opacity: .7; text-decoration: underline; cursor: pointer; animation: fsent-rise .5s var(--ease) 1.15s both; }
.fsent__again:hover { opacity: 1; }
@keyframes fsent-in { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } }
@keyframes fsent-draw { to { stroke-dashoffset: 0; } }
@keyframes fsent-rise { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }
@keyframes fsent-halo { 0% { transform: scale(.4); opacity: 0; } 45% { opacity: 1; } 100% { transform: scale(1.35); opacity: 0; } }
@media (prefers-reduced-motion: reduce) {
	.fsent, .fsent__h, .fsent__p, .fsent__wa, .fsent__btns, .fsent__again { animation: none; }
	.fsent__ring, .fsent__tick { animation: none; stroke-dashoffset: 0; }
	.fsent__mark::before { animation: none; opacity: .6; transform: none; }
}