@media (prefers-reduced-motion: no-preference) {
    .auth-entry .auth-dither .dither-canvas {
        transform-origin: 50% 45%;
        animation: auth-background-in 1.9s cubic-bezier(.16, 1, .3, 1) both;
    }

    .auth-entry .auth-brand,
    .auth-entry .auth-title,
    .auth-entry .auth-description,
    .auth-entry .auth-content > .alert,
    .auth-entry .auth-services,
    .auth-entry .auth-service {
        animation: auth-content-in .85s cubic-bezier(.16, 1, .3, 1) both;
    }

    .auth-entry .auth-brand {
        animation-delay: .08s;
    }

    .auth-entry .auth-title {
        animation-delay: .18s;
    }

    .auth-entry .auth-description {
        animation-delay: .28s;
    }

    .auth-entry .auth-description:nth-of-type(2) {
        animation-delay: .35s;
    }

    .auth-entry .auth-description:nth-of-type(3) {
        animation-delay: .42s;
    }

    .auth-entry .auth-content > .alert,
    .auth-entry .auth-services {
        animation-delay: .36s;
    }

    .auth-entry .auth-service {
        animation-duration: .7s;
        animation-delay: .48s;
    }

    .auth-entry .auth-service:nth-child(2) {
        animation-delay: .57s;
    }

    .auth-entry .auth-service:nth-child(3) {
        animation-delay: .66s;
    }

    .auth-entry .auth-content:focus-within .auth-services,
    .auth-entry .auth-service:focus-visible {
        animation: none;
    }

    @keyframes auth-background-in {
        from {
            opacity: 0;
            transform: scale(1.06);
        }
        to {
            opacity: 1;
            transform: none;
        }
    }

    @keyframes auth-content-in {
        from {
            opacity: 0;
            translate: 0 18px;
        }
        to {
            opacity: 1;
            translate: none;
        }
    }
}