/* Scroll in-view animation base (missing in otterbach-2.0 build). */
[data-animate] {
    will-change: transform;
    transform: translateY(40px);
    transition: none;
}

[data-animate].visible {
    transition: transform 0.6s ease-in-out, opacity 0.8s ease-in-out;
    transform: translateY(0);
}

[data-animate].visible-no-effect {
    transform: translateY(0);
    transition: none;
}

/* Replaces slick for `.slider.fade` with hard slide switching. */
.slider.fade > img:not(:first-child) {
    display: none;
}

.slider.fade.is-hard-switch {
    position: relative;
    overflow: hidden;
    display: block;
    margin: 0 0 3rem 0 !important;
    -webkit-backface-visibility: hidden;
    backface-visibility: hidden;
    -webkit-perspective: 1000px;
    perspective: 1000px;
    /* Own compositor context so inner image layers do not repaint while
       the container itself is sliding in. */
    isolation: isolate;
}

/* Keep scroll-in animation transform, but never fade the whole slider. */
.slider.fade.is-hard-switch[data-animate],
.slider.fade.is-hard-switch[data-animate].visible,
.slider.fade.is-hard-switch[data-animate].visible-no-effect {
    opacity: 1 !important;
}

/* Override the generic [data-animate].visible transition so only transform
   animates on the slider — opacity transitions cause Safari to re-composite
   every inner image layer mid-flight, which shows up as flicker. */
.slider.fade.is-hard-switch[data-animate].visible {
    transition: transform 0.6s ease-in-out !important;
}

.slider.fade.is-hard-switch > img {
    display: block;
    position: absolute;
    top: 0;
    left: 0;
    z-index: 1;
    margin: 0;
    width: 100%;
    height: auto;
    opacity: 0.001;
    pointer-events: none;
    -webkit-backface-visibility: hidden;
    backface-visibility: hidden;
    -webkit-transform: translateZ(0);
    transform: translateZ(0);
    -webkit-transition: none !important;
    transition: none !important;
    -webkit-animation: none !important;
    animation: none !important;
    will-change: auto !important;
}

/* Keep slider height/spacing stable in normal flow. */
.slider.fade.is-hard-switch > img:first-child {
    position: relative;
}

/* Explicitly neutralize animate helpers on slider images. */
.slider.fade.is-hard-switch > img[data-animate],
.slider.fade.is-hard-switch > img[data-animate].visible,
.slider.fade.is-hard-switch > img[data-animate].visible-no-effect {
    -webkit-transform: none !important;
    transform: none !important;
    -webkit-transition: none !important;
    transition: none !important;
    -webkit-animation: none !important;
    animation: none !important;
    will-change: auto !important;
}

.slider.fade.is-hard-switch > img.is-active {
    z-index: 2;
    opacity: 1;
    pointer-events: auto;
}