/*
 * Contact motion: focus rule, validation shake, sending and sent states, and
 * the floating back-to-top control with its scroll progress ring.
 */

.field-group label {
    position: relative;
    transition: color 200ms ease;
}

.field-group label::after {
    position: absolute;
    right: 0;
    bottom: -4px;
    left: 0;
    height: 1px;
    background: var(--gold-light);
    transform: scaleX(0);
    transform-origin: 0 50%;
    transition: transform 360ms var(--motion-ease-out);
    content: '';
}

.field-group:focus-within label {
    color: var(--gold-light);
}

.field-group:focus-within label::after {
    transform: scaleX(1);
}

.field-group.is-shaking,
.form-captcha.is-shaking {
    animation: field-shake 420ms var(--motion-ease-out);
}

@keyframes field-shake {
    20% {
        transform: translate3d(-6px, 0, 0);
    }
    40% {
        transform: translate3d(5px, 0, 0);
    }
    60% {
        transform: translate3d(-4px, 0, 0);
    }
    80% {
        transform: translate3d(2px, 0, 0);
    }
}

.contact-form[aria-busy='true'] .button-gold i {
    animation: arrow-nudge 900ms ease-in-out infinite;
}

@keyframes arrow-nudge {
    50% {
        transform: translate3d(4px, 0, 0);
    }
}

.button-gold.is-sent {
    border-color: #cce9ce;
    background: #cce9ce;
}

.button-gold.is-sent i {
    animation: sent-pop 480ms var(--motion-ease-out);
}

@keyframes sent-pop {
    from {
        opacity: 0;
        transform: scale(0.4);
    }
    to {
        opacity: 1;
        transform: scale(1);
    }
}

.back-to-top-float {
    position: fixed;
    z-index: 35;
    right: 24px;
    bottom: 24px;
    display: grid;
    width: 52px;
    height: 52px;
    place-items: center;
    border-radius: 50%;
    color: var(--ink);
    background: var(--paper);
    box-shadow: 0 8px 28px #132e2926;
    opacity: 0;
    visibility: hidden;
    transform: translate3d(0, 12px, 0);
    transition: opacity 260ms ease, visibility 260ms ease, transform 320ms var(--motion-ease-out), color 180ms ease, background-color 180ms ease;
}

.back-to-top-float.is-visible {
    opacity: 1;
    visibility: visible;
    transform: translate3d(0, 0, 0);
}

.back-to-top-float:hover {
    color: var(--paper);
    background: var(--ink);
}

.back-to-top-ring {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    transform: rotate(-90deg);
    pointer-events: none;
}

.back-to-top-ring circle {
    fill: none;
    stroke-width: 1.5;
}

.back-to-top-ring .ring-track {
    stroke: var(--line);
}

.back-to-top-ring .ring-progress {
    stroke: var(--gold);
    stroke-dasharray: 100;
    stroke-dashoffset: calc(100 - var(--scroll-ratio, 0) * 100);
    stroke-linecap: round;
}

.back-to-top-float .bi {
    position: relative;
    font-size: 16px;
}