/*****************
    ANIMATIONS
 ****************/
:root {
    --anim-y: 24px;
    --anim-dur: .55s;
    --anim-ease: cubic-bezier(.22, .61, .36, 1);
}

@media (min-width: 768px) {
    :root {
        --anim-y: 32px;
        --anim-dur: .6s;
    }
}

.animation,
.animation-2 {
    opacity: 0;
    transform: translate3d(0, var(--anim-y), 0);
    transition: opacity var(--anim-dur) var(--anim-ease),
                transform var(--anim-dur) var(--anim-ease);
    will-change: opacity, transform;
    backface-visibility: hidden;
}

.animation[animation="true"],
.animation-2[animation="true"] {
    opacity: 1;
    transform: translate3d(0, 0, 0);
    will-change: auto;
}

/* Full-bleed Hero-Ebenen: nur Fade, kein Versatz */
.hero-overlay.animation,
.hero-overlay.animation-2,
.bg-image.animation,
.bg-image.animation-2 {
    transform: none !important;
}

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