/* Hayn Header Slideshow 6.2.2
   Real IMG elements are the slideshow layers.
   Desktop: reproduce the original background-attachment: fixed effect.
   Mobile: use the established lighter JS parallax inside the hero.
*/

.wp-block-cover.hero-slideshow,
.wp-block-cover-image.hero-slideshow {
    isolation: isolate;
    overflow: hidden;
}

.wp-block-cover.hero-slideshow > .hhs-bg,
.wp-block-cover-image.hero-slideshow > .hhs-bg {
    position: fixed;
    left: 0;
    top: 0;
    width: 100vw;
    height: 100vh;
    max-width: none;
    display: block;
    z-index: 0;
    pointer-events: none;

    object-fit: cover;
    object-position: center center;

    opacity: 0;
    transition: opacity var(--hhs-fade, 1.2s) ease-in-out;

    transform: translate3d(0, 0, 0);
    will-change: opacity, clip-path;
}

.wp-block-cover.hero-slideshow > .hhs-bg.is-visible,
.wp-block-cover-image.hero-slideshow > .hhs-bg.is-visible {
    opacity: 1;
}

/* Existing Cover overlay/content stays above the slideshow. */
.wp-block-cover.hero-slideshow > .wp-block-cover__background,
.wp-block-cover.hero-slideshow > .wp-block-cover__inner-container,
.wp-block-cover-image.hero-slideshow > .wp-block-cover__inner-container {
    position: relative;
    z-index: 1;
}

/* Ken Burns: fixed desktop image, animated zoom. */
.wp-block-cover.hero-slideshow.hhs-ken-burns > .hhs-bg,
.wp-block-cover-image.hero-slideshow.hhs-ken-burns > .hhs-bg {
    transform-origin: center center;
}

.wp-block-cover.hero-slideshow.hhs-ken-burns > .hhs-bg.hhs-kb-run,
.wp-block-cover-image.hero-slideshow.hhs-ken-burns > .hhs-bg.hhs-kb-run {
    animation: hhs-ken-burns var(--hhs-kb-duration, 5s) ease-in-out forwards;
}

@keyframes hhs-ken-burns {
    from {
        transform: scale(1);
    }
    to {
        transform: scale(var(--hhs-kb-zoom, 1.08));
    }
}

/*
 * Mobile:
 * The fixed desktop technique is deliberately disabled. The image is
 * positioned relative to the hero and made a little taller than the hero,
 * avoiding the "image starts too low / back layer too short" appearance.
 */
@media (max-width: 781px) {
    .wp-block-cover.hero-slideshow > .hhs-bg,
    .wp-block-cover-image.hero-slideshow > .hhs-bg {
        position: absolute;
        top: -8%;
        left: 0;
        width: 100%;
        height: 116%;
        max-width: 100%;
        transform: translate3d(0, var(--hhs-parallax-y, 0px), 0);
        clip-path: none !important;
        will-change: transform, opacity;
    }
}

@media (prefers-reduced-motion: reduce) {
    .wp-block-cover.hero-slideshow > .hhs-bg,
    .wp-block-cover-image.hero-slideshow > .hhs-bg {
        transition: none;
        animation: none !important;
        transform: none !important;
    }
}

/* Start-page navigation: emulate sticky when the navigation reaches the top. */
.hhs-sticky-placeholder {
    display: none;
    width: 100%;
}

.sticky-navi.hhs-sticky-fixed {
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    right: 0 !important;
    width: 100% !important;
    z-index: 99999 !important;
}
