.card-motion {
    opacity: 0;
    transform: translateY(10px) scale(0.995);
    transition:
        opacity 0.45s ease var(--card-delay, 0ms),
        transform 0.55s cubic-bezier(0.2, 0.7, 0.2, 1) var(--card-delay, 0ms);
    will-change: opacity, transform;
}

.card-motion.is-visible {
    opacity: 1;
    transform: translateY(0) scale(1);
}

.division-bar {
    position: absolute;
    left: 0;
    right: 0;
    top: 100%;
    opacity: 0;
    transform: translate3d(0, -10px, 0);
    visibility: hidden;
    pointer-events: none;
    transition: opacity 0.25s ease, transform 0.25s ease, visibility 0s linear 0.25s;
    will-change: opacity, transform;
}

.division-bar.is-visible {
    opacity: 1;
    transform: translate3d(0, 0, 0);
    visibility: visible;
    pointer-events: auto;
    transition: opacity 0.3s ease, transform 0.3s ease;
}

@media (prefers-reduced-motion: reduce) {
    .card-motion {
        opacity: 1 !important;
        transform: none !important;
        transition: none !important;
    }

    .division-bar {
        transition: none !important;
    }
}