/* =============================================================================
   MT - Dual Header Widget — mtfe-dual-header
   ============================================================================= */

.mtfe-dual-header-wrapper {
    margin: 0;
    padding: 0;
}

.mtfe-dual-header-text {
    margin: 0;
    padding: 0;
    line-height: 1.2;
}

.mtfe-dual-header-highlight {
    display: inline-block;
}

/* ── Subtitle ─────────────────────────────────────────────────────────────── */

.mtfe-dual-header-subtitle {
    display: block;
    margin: 0;
    line-height: 1.5;
}

/* =============================================================================
   ENTRANCE ANIMATIONS
   JS IntersectionObserver adds --in-view class to the wrapper.
   ============================================================================= */

/* ── reveal-ltr: clip-path wipe from left to right ───────────────────────── */

.mtfe-dual-header--anim-reveal-ltr .mtfe-dual-header-text,
.mtfe-dual-header--anim-reveal-ltr .mtfe-dual-header-subtitle {
    opacity: 1;
    clip-path: inset(0 100% 0 0);
    transition:
        clip-path var(--dh-duration, 0.8s) cubic-bezier(0.22, 1, 0.36, 1),
        opacity   var(--dh-duration, 0.8s) ease;
}

/* Subtitle gets a stagger delay */
.mtfe-dual-header--anim-reveal-ltr.mtfe-dual-header--subtitle-after .mtfe-dual-header-subtitle {
    transition-delay: var(--dh-stagger, 120ms);
}
.mtfe-dual-header--anim-reveal-ltr.mtfe-dual-header--subtitle-before .mtfe-dual-header-text {
    transition-delay: var(--dh-stagger, 120ms);
}

/* In-view: reveal */
.mtfe-dual-header--anim-reveal-ltr.mtfe-dual-header--in-view .mtfe-dual-header-text,
.mtfe-dual-header--anim-reveal-ltr.mtfe-dual-header--in-view .mtfe-dual-header-subtitle,
.elementor-element-edit-mode .mtfe-dual-header--anim-reveal-ltr .mtfe-dual-header-text,
.elementor-element-edit-mode .mtfe-dual-header--anim-reveal-ltr .mtfe-dual-header-subtitle {
    clip-path: inset(0 0% 0 0);
}

/* ── fade-up: fade + rise ─────────────────────────────────────────────────── */

.mtfe-dual-header--anim-fade-up .mtfe-dual-header-text,
.mtfe-dual-header--anim-fade-up .mtfe-dual-header-subtitle {
    opacity: 0;
    transform: translateY(28px);
    transition:
        opacity    var(--dh-duration, 0.7s) cubic-bezier(0.22, 1, 0.36, 1),
        transform  var(--dh-duration, 0.7s) cubic-bezier(0.22, 1, 0.36, 1);
}

.mtfe-dual-header--anim-fade-up.mtfe-dual-header--subtitle-after .mtfe-dual-header-subtitle {
    transition-delay: var(--dh-stagger, 120ms);
}
.mtfe-dual-header--anim-fade-up.mtfe-dual-header--subtitle-before .mtfe-dual-header-text {
    transition-delay: var(--dh-stagger, 120ms);
}

/* In-view: reveal */
.mtfe-dual-header--anim-fade-up.mtfe-dual-header--in-view .mtfe-dual-header-text,
.mtfe-dual-header--anim-fade-up.mtfe-dual-header--in-view .mtfe-dual-header-subtitle,
.elementor-element-edit-mode .mtfe-dual-header--anim-fade-up .mtfe-dual-header-text,
.elementor-element-edit-mode .mtfe-dual-header--anim-fade-up .mtfe-dual-header-subtitle {
    opacity: 1;
    transform: none;
}
