:root {
    --motion-duration-fast: 350ms;
    --motion-duration-standard: 430ms;
    --motion-duration-image: 470ms;
    --motion-ease-out: cubic-bezier(0.22, 1, 0.36, 1);
}

.motion-reveal {
    opacity: 1;
    transform: none;
}

.motion-reveal--ready:not(.motion-reveal--visible) {
    opacity: 0;
    transform: translateY(22px);
}

.motion-reveal--section {
    transition: opacity var(--motion-duration-standard) var(--motion-ease-out),
        transform var(--motion-duration-standard) var(--motion-ease-out);
}

.motion-reveal--image {
    transition: opacity var(--motion-duration-image) var(--motion-ease-out),
        transform var(--motion-duration-image) var(--motion-ease-out);
}

.motion-reveal--hero {
    transition: opacity var(--motion-duration-standard) var(--motion-ease-out),
        transform var(--motion-duration-standard) var(--motion-ease-out);
}

.motion-reveal--section.motion-reveal--ready {
    opacity: 1;
    transform: none;
}

.motion-step {
    opacity: 1;
    transform: none;
    transition: opacity var(--motion-duration-standard) var(--motion-ease-out),
        transform var(--motion-duration-standard) var(--motion-ease-out);
}

.motion-reveal--section.motion-reveal--ready:not(.motion-reveal--visible) .motion-step {
    opacity: 0;
    transform: translateY(22px);
}

.motion-step--label {
    transition-delay: 0ms;
}

.motion-step--headline {
    transition-delay: 55ms;
}

.motion-step--copy {
    transition-delay: 105ms;
}

@media (prefers-reduced-motion: reduce) {
    .motion-reveal,
    .motion-reveal--ready:not(.motion-reveal--visible),
    .motion-step,
    .motion-reveal--section.motion-reveal--ready:not(.motion-reveal--visible) .motion-step {
        opacity: 1;
        transform: none;
        transition: none;
    }
}