.start-motion-pending {
    opacity: 0;
    will-change: transform, opacity, filter;
}

[class*="start-motion-in-"],
[class*="start-motion-out-"],
[class*="start-motion-loop-"] {
    animation-duration: var(--start-motion-duration, 600ms);
    animation-delay: var(--start-motion-delay, 0ms);
    animation-fill-mode: both;
    animation-timing-function: cubic-bezier(.22, 1, .36, 1);
}

.start-motion-in-fade-in { animation-name: start-motion-fade-in; }
.start-motion-in-fade-up { animation-name: start-motion-fade-up; }
.start-motion-in-fade-down { animation-name: start-motion-fade-down; }
.start-motion-in-slide-left { animation-name: start-motion-slide-left; }
.start-motion-in-slide-right { animation-name: start-motion-slide-right; }
.start-motion-in-scale-in { animation-name: start-motion-scale-in; }
.start-motion-in-blur-in { animation-name: start-motion-blur-in; }
.start-motion-out-fade-out { animation-name: start-motion-fade-out; }
.start-motion-out-fade-down { animation-name: start-motion-fade-out-down; }
.start-motion-out-slide-left { animation-name: start-motion-out-left; }
.start-motion-out-slide-right { animation-name: start-motion-out-right; }
.start-motion-out-scale-out { animation-name: start-motion-scale-out; }
.start-motion-out-blur-out { animation-name: start-motion-blur-out; }

.start-motion-loop-float {
    animation-name: start-motion-loop-float;
    animation-duration: max(var(--start-motion-duration, 1800ms), 1200ms);
    animation-iteration-count: infinite;
    animation-direction: alternate;
}

.start-motion-loop-pulse {
    animation-name: start-motion-loop-pulse;
    animation-duration: max(var(--start-motion-duration, 1600ms), 1000ms);
    animation-iteration-count: infinite;
}

.start-motion-loop-breathe {
    animation-name: start-motion-loop-breathe;
    animation-duration: max(var(--start-motion-duration, 2200ms), 1400ms);
    animation-iteration-count: infinite;
    animation-direction: alternate;
}

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

@keyframes start-motion-fade-up {
    from { opacity: 0; transform: translate3d(0, var(--start-motion-distance, 24px), 0); }
    to { opacity: 1; transform: none; }
}

@keyframes start-motion-fade-down {
    from { opacity: 0; transform: translate3d(0, calc(-1 * var(--start-motion-distance, 24px)), 0); }
    to { opacity: 1; transform: none; }
}

@keyframes start-motion-slide-left {
    from { opacity: 0; transform: translate3d(calc(-1 * var(--start-motion-distance, 32px)), 0, 0); }
    to { opacity: 1; transform: none; }
}

@keyframes start-motion-slide-right {
    from { opacity: 0; transform: translate3d(var(--start-motion-distance, 32px), 0, 0); }
    to { opacity: 1; transform: none; }
}

@keyframes start-motion-scale-in {
    from { opacity: 0; transform: scale(var(--start-motion-scale, .94)); }
    to { opacity: 1; transform: none; }
}

@keyframes start-motion-blur-in {
    from { opacity: 0; filter: blur(var(--start-motion-blur, 12px)); }
    to { opacity: 1; filter: none; }
}

@keyframes start-motion-fade-out {
    to { opacity: 0; }
}

@keyframes start-motion-fade-out-down {
    to { opacity: 0; transform: translate3d(0, var(--start-motion-distance, 24px), 0); }
}

@keyframes start-motion-out-left {
    to { opacity: 0; transform: translate3d(calc(-1 * var(--start-motion-distance, 32px)), 0, 0); }
}

@keyframes start-motion-out-right {
    to { opacity: 0; transform: translate3d(var(--start-motion-distance, 32px), 0, 0); }
}

@keyframes start-motion-scale-out {
    to { opacity: 0; transform: scale(var(--start-motion-scale, .94)); }
}

@keyframes start-motion-blur-out {
    to { opacity: 0; filter: blur(var(--start-motion-blur, 12px)); }
}

@keyframes start-motion-loop-float {
    from { transform: translate3d(0, 0, 0); }
    to { transform: translate3d(var(--start-motion-x, 0), var(--start-motion-y, -8px), 0); }
}

@keyframes start-motion-loop-pulse {
    0%, 100% { transform: scale(1); }
    50% { transform: scale(calc(1 + (1 - var(--start-motion-scale, .94)) / 2)); }
}

@keyframes start-motion-loop-breathe {
    from { opacity: .82; transform: scale(var(--start-motion-scale, .99)); }
    to { opacity: 1; transform: scale(1.01); }
}

@media (prefers-reduced-motion: reduce) {
    .start-motion-pending { opacity: 1 !important; }
    [class*="start-motion-"] {
        animation: none !important;
        transform: none !important;
        filter: none !important;
    }
}