:root {
    /* OPTIONAL: Sticky background controls */
    --ejk-anim-ms: 300ms;
    --ejk-sticky-bg: hsla(0, 100%, 5.1%, 0.7);
    --ejk-sticky-blur: 8px;
    --ejk-sticky-border: 2px solid hsla(0, 100%, 19%, 0.7);
    --ejk-sticky-radius: 15px;
    /*--ejk-sticky-shadow: 0 10px 30px rgba(18, 22, 30, 0.05);*/
    --ejk-sticky-shadow: 0 10px 30px hsla(0, 100%, 10%, 1);
}

.ejk-no-trans {
    transition: none !important;
}

/* Sticky behavior */
#ejk-header-section.ejk-is-sticky {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: 9999;
    transform: translateY(-150%);
    transition: transform var(--ejk-anim-ms) ease;
    will-change: transform;
}

#ejk-header-section.ejk-is-sticky.ejk-show {
    transform: translateY(50px);
}

#ejk-header-section.ejk-is-sticky {
   .header-container {
        background: var(--ejk-sticky-bg);
        backdrop-filter: blur(var(--ejk-sticky-blur));
        box-shadow: var(--ejk-sticky-shadow);
        border: var(--ejk-sticky-border);
        border-radius: var(--ejk-sticky-radius);
    }
}

#ejk-header-section.ejk-is-sticky.ejk-show .hdr-inner-container {
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    background-color: rgba(0, 0, 0, 0.2);
}
