/* Slick Header – Morph (add-on)
 * Only the width of the marked inner element is animated. The Slick Header
 * slide animation is left alone unless the element carries
 * data-slick-anim="none" (option "Show / hide animation: None").
 */

.slick-header.slick-morph {
    --slick-morph-dur: 400ms;
    --slick-morph-ease: cubic-bezier(.16, 1, .3, 1);
}

/* Keep Elementor's own container transitions and add width. */
.slick-header.slick-morph .slick-morph-target {
    transition:
        background var(--background-transition, .3s),
        border var(--border-transition, .3s),
        box-shadow var(--border-transition, .3s),
        transform var(--e-con-transform-transition-duration, .4s),
        width var(--slick-morph-dur) var(--slick-morph-ease),
        max-width var(--slick-morph-dur) var(--slick-morph-ease);
}

@media (prefers-reduced-motion: reduce) {
    .slick-header.slick-morph .slick-morph-target {
        transition: none !important;
    }
}

/* ---------- "None": no slide, header just appears in place ---------- */
/* Overrides `.slick-header.slick-show { animation: … !important }` (0,2,0)
 * with a 0,3,0 selector, and drops Elementor's own transform transition on
 * the container so the header cannot slide by accident. */
.slick-header[data-slick-anim="none"] {
    transition:
        background var(--background-transition, .3s),
        border var(--border-transition, .3s),
        box-shadow var(--border-transition, .3s);
}
.slick-header[data-slick-anim="none"].slick-show {
    animation: none !important;
    transform: none !important;
}
.slick-header[data-slick-anim="none"].slick-hide {
    animation: none !important;
    transform: translateY(-100%) !important;
}