@view-transition {
    navigation: auto;
}

:root {
    --page-transition-duration: 280ms;
    --page-transition-duration-soft: 420ms;
    --page-transition-ease: cubic-bezier(0.22, 1, 0.36, 1);
    --page-transition-offset: 18px;
}

body.front-page {
    opacity: 1;
    transform: translate3d(0, 0, 0);
}

body.front-page.is-page-ready {
    opacity: 1;
    transform: translate3d(0, 0, 0);
    transition:
        opacity var(--page-transition-duration) var(--page-transition-ease),
        transform var(--page-transition-duration-soft) var(--page-transition-ease);
}

body.front-page.is-page-leaving {
    opacity: 0.92;
    transform: translate3d(0, -8px, 0);
}

::view-transition-old(root),
::view-transition-new(root) {
    animation-duration: var(--page-transition-duration);
    animation-timing-function: var(--page-transition-ease);
}

::view-transition-old(root) {
    animation-name: page-root-out;
}

::view-transition-new(root) {
    animation-name: page-root-in;
}

@keyframes page-root-in {
    from {
        opacity: 0;
        transform: translate3d(0, var(--page-transition-offset), 0) scale(0.992);
    }

    to {
        opacity: 1;
        transform: translate3d(0, 0, 0) scale(1);
    }
}

@keyframes page-root-out {
    from {
        opacity: 1;
        transform: translate3d(0, 0, 0) scale(1);
    }

    to {
        opacity: 0;
        transform: translate3d(0, -10px, 0) scale(0.994);
    }
}

[data-verification-send-button].is-loading {
    pointer-events: none;
}

[data-verification-send-button].is-loading::before {
    content: '';
    width: 0.95rem;
    height: 0.95rem;
    margin-right: 0.55rem;
    border-radius: 999px;
    border: 2px solid currentColor;
    border-right-color: transparent;
    animation: verification-button-spin 0.8s linear infinite;
}

@keyframes verification-button-spin {
    from {
        transform: rotate(0deg);
    }

    to {
        transform: rotate(360deg);
    }
}

@media (max-width: 767px) {
    :root {
        --page-transition-duration: 240ms;
        --page-transition-duration-soft: 320ms;
        --page-transition-offset: 12px;
    }
}

@media (prefers-reduced-motion: reduce) {
    body.front-page,
    body.front-page.is-page-ready,
    body.front-page.is-page-leaving,
    ::view-transition-old(root),
    ::view-transition-new(root) {
        animation: none !important;
        transform: none !important;
        transition: none !important;
    }
}