.come-in {
    animation: come-in .8s ease forwards
}
.slide-in {
    transform: translateY(10%);
    opacity: 0;
}
.slide-in.left {
    transform: translateY(0%);
    transform: translateX(-10%);
}
.slide-in.right {
    transform: translateY(0%);
    transform: translateX(10%);
}
@media(min-width: 1200px) {
    .come-in.slower {
        animation: come-in .8s ease .2s forwards
    }
    .come-in.slow {
        animation: come-in .8s ease .4s forwards
    }
}
@keyframes come-in {
    to {
        transform: translateY(0);
        opacity: 1;
    }
}

.hover-blur {
    height: 400px;
    position: relative;
    overflow: hidden;
}
.hover-blur.verkoopautomaten::before {
    background: linear-gradient(rgb(0 0 0 / 70%), rgb(37 153 60 / 60%)), url(/assets/images/about/verkoopautomaten.webp) no-repeat;
    background-size: cover;
    background-position: center;
    pointer-events: none;
}
.hover-blur.plantenwinkel::before {
    background: linear-gradient(rgb(0 0 0 / 70%), rgb(37 153 60 / 60%)), url(/assets/images/about/plantenwinkel.webp) no-repeat;
    background-size: cover;
    background-position: center;
    pointer-events: none;
}
.hover-blur.aardbeien::before {
    background: linear-gradient(rgb(0 0 0 / 70%), rgb(37 153 60 / 60%)), url(/assets/images/about/aardbeien.webp) no-repeat;
    background-size: cover;
    background-position: center;
    pointer-events: none;
}
.hover-blur::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 0;
    transition: filter .2s ease, transform .2s ease;
    pointer-events: none;
}
.hover-blur:hover::before {
    filter: blur(3px);
    transform: scale(1.05);
}
.hover-blur .content {
    position: relative;
    z-index: 1;
}

.slider-wrapper {
    position: relative;
    overflow: hidden;
    background: black;
}

.slider-bg {
    position: absolute;
    inset: 0;
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    opacity: 0;
    z-index: 1;
}

.slider-overlay {
    position: absolute;
    inset: 0;
    z-index: 3;
    background: #1e3e3380;
    pointer-events: none;
}

.slider-wrapper .container {
    position: relative;
    z-index: 4;
}

.wave-separator {
    position: relative;
    z-index: -1;
}

.wave-separator svg {
    display: block;
    width: 100%;
    height: clamp(56px, 8vw, 120px);
}

.hero-fade {
    will-change: opacity, transform;
    transition: opacity 0.12s linear, transform 0.12s linear;
}

/* (optioneel): iets compacter op mobiel */
@media (max-width: 576px) {
    .hero-fade { transition-duration: 0.08s; }
}