/* ============================================================
   Jexi Dual Heading Pro — Styles
   ============================================================ */

/* ── Wrapper ──────────────────────────────────────────────── */
.jexi-dhp {
    position: relative;
}

/* ── Eyebrow ──────────────────────────────────────────────── */
.jexi-dhp__eyebrow-wrap {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
}

/* Centre-aligned: centre the eyebrow row */
.jexi-dhp[style*="text-align:center"] .jexi-dhp__eyebrow-wrap,
.jexi-dhp[style*="text-align: center"] .jexi-dhp__eyebrow-wrap,
[class*="elementor-align-center"] .jexi-dhp__eyebrow-wrap {
    justify-content: center;
}

/* Right-aligned */
[class*="elementor-align-right"] .jexi-dhp__eyebrow-wrap {
    justify-content: flex-end;
}

.jexi-dhp__eyebrow-line {
    display: inline-block;
    height: 2px;
    border-radius: 2px;
    flex-shrink: 0;
}

.jexi-dhp__eyebrow {
    display: inline-block;
    font-size: 13px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 2px;
    line-height: 1.4;
}

/* ── Main Heading ─────────────────────────────────────────── */
.jexi-dhp__heading {
    margin: 0;
    padding: 0;
    font-size: 48px;
    font-weight: 700;
    line-height: 1.15;
}

/* ── Gradient Highlight ───────────────────────────────────── */
.jexi-dhp__highlight {
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    color: transparent; /* fallback for Firefox */
    display: inline;
    position: relative;
}

/* Animated gradient */
.jexi-dhp__highlight--animated {
    background-size: 200% 200%;
    animation: jexiGradShift var(--jexi-grad-speed, 4s) ease infinite;
}

@keyframes jexiGradShift {
    0%   { background-position: 0% 50%; }
    50%  { background-position: 100% 50%; }
    100% { background-position: 0% 50%; }
}

/* ── Stroke Text ──────────────────────────────────────────── */
.jexi-dhp__heading--stroke {
    -webkit-text-fill-color: transparent;
    color: transparent;
    paint-order: stroke fill;
}

/* Ensure highlight words inside a stroke heading stay filled with gradient */
.jexi-dhp__heading--stroke .jexi-dhp__highlight {
    -webkit-text-fill-color: transparent; /* keeps gradient visible */
    -webkit-text-stroke-width: 0;         /* remove stroke from gradient word */
}

/* ── Entrance Animations ──────────────────────────────────── */

/* --- Fade Up --- */
.jexi-dhp[data-jexi-anim="fade-up"] .jexi-dhp__eyebrow-wrap,
.jexi-dhp[data-jexi-anim="fade-up"] .jexi-dhp__heading {
    opacity: 0;
    transform: translateY(30px);
    transition: opacity var(--jexi-dur, 700ms) cubic-bezier(.22,1,.36,1),
                transform var(--jexi-dur, 700ms) cubic-bezier(.22,1,.36,1);
}
.jexi-dhp[data-jexi-anim="fade-up"].jexi-dhp--visible .jexi-dhp__eyebrow-wrap {
    opacity: 1;
    transform: translateY(0);
}
.jexi-dhp[data-jexi-anim="fade-up"].jexi-dhp--visible .jexi-dhp__heading {
    opacity: 1;
    transform: translateY(0);
    transition-delay: 120ms;
}

/* --- Split Words --- */
.jexi-dhp[data-jexi-anim="split-words"] .jexi-dhp__heading .jexi-word {
    display: inline-block;
    opacity: 0;
    transform: translateY(30px) rotateX(-40deg);
    transition: opacity var(--jexi-dur, 700ms) cubic-bezier(.22,1,.36,1),
                transform var(--jexi-dur, 700ms) cubic-bezier(.22,1,.36,1);
    transform-origin: center bottom;
}
.jexi-dhp[data-jexi-anim="split-words"] .jexi-dhp__eyebrow-wrap {
    opacity: 0;
    transform: translateY(20px);
    transition: opacity 500ms ease, transform 500ms ease;
}
.jexi-dhp[data-jexi-anim="split-words"].jexi-dhp--visible .jexi-dhp__eyebrow-wrap {
    opacity: 1;
    transform: translateY(0);
}
.jexi-dhp[data-jexi-anim="split-words"].jexi-dhp--visible .jexi-dhp__heading .jexi-word {
    opacity: 1;
    transform: translateY(0) rotateX(0deg);
}

/* --- Split Lines --- */
.jexi-dhp[data-jexi-anim="split-lines"] .jexi-dhp__heading .jexi-line {
    display: block;
    opacity: 0;
    transform: translateY(100%);
    transition: opacity var(--jexi-dur, 700ms) cubic-bezier(.22,1,.36,1),
                transform var(--jexi-dur, 700ms) cubic-bezier(.22,1,.36,1);
}
.jexi-dhp[data-jexi-anim="split-lines"] .jexi-dhp__eyebrow-wrap {
    opacity: 0;
    transition: opacity 500ms ease;
}
.jexi-dhp[data-jexi-anim="split-lines"].jexi-dhp--visible .jexi-dhp__eyebrow-wrap {
    opacity: 1;
}
.jexi-dhp[data-jexi-anim="split-lines"].jexi-dhp--visible .jexi-dhp__heading .jexi-line {
    opacity: 1;
    transform: translateY(0);
}
/* Overflow clip for line reveals */
.jexi-dhp[data-jexi-anim="split-lines"] .jexi-dhp__heading {
    overflow: hidden;
}

/* --- Clip Reveal --- */
.jexi-dhp[data-jexi-anim="clip"] .jexi-dhp__heading {
    clip-path: inset(0 100% 0 0);
    transition: clip-path var(--jexi-dur, 700ms) cubic-bezier(.77,0,.175,1);
}
.jexi-dhp[data-jexi-anim="clip"] .jexi-dhp__eyebrow-wrap {
    opacity: 0;
    transition: opacity 500ms ease;
}
.jexi-dhp[data-jexi-anim="clip"].jexi-dhp--visible .jexi-dhp__eyebrow-wrap {
    opacity: 1;
}
.jexi-dhp[data-jexi-anim="clip"].jexi-dhp--visible .jexi-dhp__heading {
    clip-path: inset(0 0 0 0);
}

/* --- Blur In --- */
.jexi-dhp[data-jexi-anim="blur-in"] .jexi-dhp__eyebrow-wrap,
.jexi-dhp[data-jexi-anim="blur-in"] .jexi-dhp__heading {
    opacity: 0;
    filter: blur(12px);
    transform: scale(0.96);
    transition: opacity var(--jexi-dur, 700ms) ease,
                filter var(--jexi-dur, 700ms) ease,
                transform var(--jexi-dur, 700ms) ease;
}
.jexi-dhp[data-jexi-anim="blur-in"].jexi-dhp--visible .jexi-dhp__eyebrow-wrap,
.jexi-dhp[data-jexi-anim="blur-in"].jexi-dhp--visible .jexi-dhp__heading {
    opacity: 1;
    filter: blur(0);
    transform: scale(1);
}
.jexi-dhp[data-jexi-anim="blur-in"].jexi-dhp--visible .jexi-dhp__heading {
    transition-delay: 100ms;
}

/* ── Editor: keep everything visible while editing ────────── */
.elementor-editor-active .jexi-dhp[data-jexi-anim] .jexi-dhp__eyebrow-wrap,
.elementor-editor-active .jexi-dhp[data-jexi-anim] .jexi-dhp__heading,
.elementor-editor-active .jexi-dhp[data-jexi-anim] .jexi-dhp__heading .jexi-word,
.elementor-editor-active .jexi-dhp[data-jexi-anim] .jexi-dhp__heading .jexi-line {
    opacity: 1 !important;
    transform: none !important;
    filter: none !important;
    clip-path: none !important;
}