.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;
    }
}

.glass {
    backdrop-filter: blur(2px);
    border: 1px solid #ffffff3b;
}
.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/optimized/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/optimized/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/optimized/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;
    height: 60vh;
}

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

.hero-lcp { position: absolute; inset: 0; z-index: 0; }
.hero-lcp-img { height: 60vh; object-fit: cover; }
.hero-lcp.fade-out { opacity: 0; transition: opacity 600ms ease; }

.slider-overlay {
    position: absolute;
    inset: 0;
    z-index: 3;
    /*background: #0000006b;*/
    pointer-events: none;
    background: radial-gradient(
        circle,
        rgba(0, 0, 0, 0.55) 0%,
        rgba(0, 0, 0, 0.4) 40%,
        rgba(0, 0, 0, 0.35) 70%,
        rgba(0, 0, 0, 0.2) 100%
    )
}

.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;
}

@media (max-width: 576px) {
    .hero-fade { transition-duration: 0.08s; }
}

@media (min-width: 1200px) {
    .slider-wrapper {
        height: 80vh;
    }
    .hero-lcp-img { height: 80vh; }
}