@layer hooma-smart-header {
    .hoo-is-hidden,
    .hoo-is-visible {
        will-change: transform, opacity;
        -webkit-transform: translateY(var(--hoo-sh-scroll-y, 0));
        -ms-transform: translateY(var(--hoo-sh-scroll-y, 0));
        transform: translateY(var(--hoo-sh-scroll-y, 0));
        
        -webkit-transition: background-color 0.4s ease, opacity 0.4s ease, height 0.4s ease, margin-top 0.4s ease, top 0.4s ease, -webkit-transform 0.4s ease !important;
        transition: background-color 0.4s ease, opacity 0.4s ease, height 0.4s ease, margin-top 0.4s ease, top 0.4s ease, -webkit-transform 0.4s ease !important;
        -o-transition: background-color 0.4s ease, transform 0.4s ease, opacity 0.4s ease, height 0.4s ease, margin-top 0.4s ease, top 0.4s ease !important;
        transition: background-color 0.4s ease, transform 0.4s ease, opacity 0.4s ease, height 0.4s ease, margin-top 0.4s ease, top 0.4s ease !important;
    }
    
    /* Slide Mode */
    .hoo-anim-slide.hoo-is-hidden {
        --hoo-sh-scroll-y: -100%;
        opacity: 1;
    }

    .hoo-anim-slide.hoo-is-visible {
        --hoo-sh-scroll-y: 0px;
        opacity: 1;
    }

    /* Fade Mode */
    .hoo-anim-fade.hoo-is-hidden {
        opacity: 0 !important;
        --hoo-sh-scroll-y: 0px;
    }

    .hoo-anim-fade.hoo-is-visible {
        opacity: 1;
        --hoo-sh-scroll-y: 0px;
    }

    /* Instant/None */
    .hoo-anim-none    .hoo-is-sticky,
    .hoo-force-fixed {
        position: fixed !important;
        top: 0 !important;
        width: 100% !important;
        z-index: 9999;
    }

    body.hooma-sh-is-forced-fixed {
        padding-top: var(--hoo-header-height, 0);
    }

    .hoo-anim-none.hoo-is-hidden {
        display: none !important;
        opacity: 0 !important;
        -webkit-transition: none !important;
        -o-transition: none !important;
        transition: none !important;
    }

    .hoo-anim-none.hoo-is-visible {
        opacity: 1;
        -webkit-transition: none !important;
        -o-transition: none !important;
        transition: none !important;
    }

    #hoo-sh-placeholder {
        width: 100%;
        display: block;
        background: transparent;
        pointer-events: none;
    }

    /* Logo Transition Helper */
    header img {
        -webkit-transition: opacity 0.2s ease;
        -o-transition: opacity 0.2s ease;
        transition: opacity 0.2s ease;
    }

    body.admin-bar .hoo-is-visible {
        margin-top: 32px;
    }

    @media screen and (max-width: 782px) {
        body.admin-bar .hoo-is-visible {
            margin-top: 46px;
        }
    }
}