@keyframes enter {
    from {
        opacity: 0;
        transform: translateY(12px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

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

@keyframes settle {
    from {
        transform: translateY(16px);
    }
    to {
        transform: translateY(0);
    }
}

@keyframes float {
    0%, 100% {
        transform: translateY(0);
    }
    50% {
        transform: translateY(-6px);
    }
}

@keyframes form-settle {
    from {
        transform: translateY(6px);
    }
    to {
        transform: translateY(0);
    }
}

@media (prefers-reduced-motion: no-preference) {
    [data-motion="form"] {
        > [data-motion="form-field"] {
            animation: form-settle 450ms ease-out backwards;

            &:nth-child(2) {
                animation-delay: 40ms;
            }

            &:nth-child(3) {
                animation-delay: 80ms;
            }

            &:nth-child(n+4) {
                animation-delay: 120ms;
            }
        }

        input, select, textarea, div.with-icon, div.options > label {
            transition: border-color 180ms ease, background-color 180ms ease;
        }

        div.with-icon {
            svg {
                transition: fill 180ms ease;
            }

            &:focus-within {
                border-color: #506642;
                background-color: var(--background-colour);

                svg {
                    fill: #506642;
                }
            }
        }

        @media (hover: hover) and (pointer: fine) {
            div.options > label:hover {
                border-color: #506642;
                background-color: var(--primary-accent-colour);
            }
        }
    }

    [data-motion="settle"] {
        animation: settle 800ms ease-out var(--motion-delay, 0ms) backwards;

        &:focus-within {
            animation: none;
        }
    }

    [data-motion="float"] {
        animation: float 6s ease-in-out infinite;
    }

    [data-motion].motion-pending {
        opacity: 0;
        transform: translateY(12px);

        &:focus-within {
            opacity: 1;
            transform: none;
        }
    }

    [data-motion].is-entering {
        animation: enter 500ms ease-out var(--motion-delay, 0ms) backwards;

        /* Keep keyboard-focused controls immediately visible. */
        &:focus-within {
            animation: none;
        }
    }

    [data-motion].motion-complete {
        animation: none;
    }

    button, .button {
        transition: background-color 180ms ease, color 180ms ease;
    }

    header div.container div.actions nav a {
        transition: color 180ms ease;

        &:hover, &:focus-visible {
            color: var(--primary-colour);
        }
    }

    @media (hover: hover) and (pointer: fine) {
        article.card.service, article.card.package {
            transition: translate 200ms ease, box-shadow 200ms ease;

            &:hover {
                translate: 0 -3px;
                box-shadow: 0 8px 20px color-mix(in srgb, var(--primary-colour) 16%, transparent);
            }
        }
    }

    @media (max-width: 700px) {
        header.expanded {
            div.actions {
                animation: enter 200ms ease-out;
            }

            div.backdrop {
                animation: fade-in 200ms ease-out;
            }
        }
    }
}

@media (prefers-reduced-motion: reduce) {
    button.loading::after {
        animation: none;
        transform: translate(-50%, -50%);
    }
}