@keyframes motion-rise {
    from { opacity: 0; transform: translateY(18px); }
    to { opacity: 1; transform: none; }
}

@keyframes login-bg-drift {
    from { background-position: 0% 0%; }
    to { background-position: 12% 6%; }
}

.motion-ok .motion-rise {
    opacity: 0;
}

.motion-ok.is-ready .motion-rise {
    animation: motion-rise 0.7s ease both;
}

.motion-ok .motion-rise.is-shown {
    animation: none;
    opacity: 1;
    transform: none;
}

.motion-ok.is-ready .motion-delay {
    animation-delay: 0.18s;
}

.motion-ok.is-ready .login-stage {
    animation: login-bg-drift 22s ease-in-out infinite alternate;
}

.motion-ok .motion-item,
.motion-ok .step-intro,
.motion-ok .step-card {
    opacity: 0;
    transform: translateY(22px);
    transition: opacity 0.55s ease, transform 0.55s ease, box-shadow 0.25s ease;
    transition-delay: calc(var(--step, 0) * 90ms);
}

.motion-ok .motion-item.is-shown,
.motion-ok .step-intro.is-shown,
.motion-ok .step-card.is-shown {
    opacity: 1;
    transform: none;
}

.motion-ok .motion-item.is-shown:hover,
.motion-ok .step-card.is-shown:hover {
    transform: translateY(-6px);
}

.form-control,
.custom-select {
    transition: box-shadow 0.2s ease, border-color 0.2s ease;
}

.btn {
    transition: transform 0.15s ease, box-shadow 0.15s ease;
}

.btn:not(.dropdown-toggle):not(.btn-camo):hover {
    transform: translateY(-1px);
}

.btn:active {
    transform: translateY(0);
}

@media (prefers-reduced-motion: reduce) {
    .motion-ok .motion-rise,
    .motion-ok .motion-item,
    .motion-ok .step-intro,
    .motion-ok .step-card,
    .motion-ok.is-ready .login-stage,
    .btn {
        animation: none;
        opacity: 1;
        transform: none;
        transition: none;
    }
}