/* Assembly motion layer.
   Remove this file include and assets/js/assembly-motion.js to disable the effect. */

.assembly-motion {
    --assembly-x: 0px;
    --assembly-y: 18px;
    --assembly-rotate: 0deg;
    opacity: 0;
    transform:
        translate3d(var(--assembly-x), var(--assembly-y), 0)
        rotate(var(--assembly-rotate))
        scale(0.992);
    transition:
        opacity 1.05s cubic-bezier(0.22, 1, 0.36, 1),
        transform 1.18s cubic-bezier(0.16, 1, 0.3, 1);
    transition-delay: calc(var(--assembly-index, 0) * 84ms);
    backface-visibility: hidden;
    will-change: opacity, transform;
}

.assembly-motion.assembly-left {
    --assembly-x: -28px;
    --assembly-y: 10px;
    --assembly-rotate: -0.25deg;
}

.assembly-motion.assembly-right {
    --assembly-x: 28px;
    --assembly-y: 10px;
    --assembly-rotate: 0.25deg;
}

.assembly-motion.assembly-panel {
    --assembly-x: 0px;
    --assembly-y: 20px;
    --assembly-rotate: 0deg;
    transform:
        translate3d(var(--assembly-x), var(--assembly-y), 0)
        rotate(var(--assembly-rotate))
        scale(0.985);
}

.assembly-motion.is-assembled {
    opacity: 1;
    transform: translate3d(0, 0, 0) rotate(0deg) scale(1);
}

.assembly-motion.is-assembled::before,
.assembly-motion.is-assembled::after {
    transition-delay: inherit;
}

.assembly-motion.assembly-done {
    will-change: auto;
}

@media (prefers-reduced-motion: reduce) {
    .assembly-motion,
    .assembly-motion.assembly-left,
    .assembly-motion.assembly-right,
    .assembly-motion.assembly-panel {
        opacity: 1;
        transform: none;
        transition: none;
        will-change: auto;
    }
}