/* =========================================================
   WML Keyword Highlights
   ========================================================= */

.wml-kh-wrapper {
    --wml-kh-underline-thickness: 20%;
    --wml-kh-hl: #c5e9a4;
    --wml-kh-duration: 900ms;
    --wml-kh-delay: 150ms;
    overflow: hidden;
}

.wml-kh-headline {
    margin: 0;
    font-size: clamp(2.4rem, 7vw, 5.5rem);
    font-weight: 800;
    line-height: 1.08;
    letter-spacing: -0.03em;
}

/* ---- Segment styles ---- */
/* Defaults; overridden by the Italic Accent Typography control. */
.wml-kh-italic {
    font-family: 'Playfair Display', Georgia, serif;
    font-style: italic;
    font-weight: 600;
    letter-spacing: -0.01em;
}

.wml-kh-color {
    /* colour applied inline per segment */
}

/* ---- Highlight (marker / underline) ---- */
/* --wml-kh-hl inherits from .wml-kh-wrapper (global) unless set inline per segment. */
.wml-kh-highlight {
    position: relative;
    display: inline-block;
}

.wml-kh-highlight-text {
    position: relative;
    z-index: 1;
}

.wml-kh-highlight::after {
    content: '';
    position: absolute;
    left: 0;
    bottom: 4%;
    width: 100%;
    height: var(--wml-kh-underline-thickness);
    background-color: var(--wml-kh-hl);
    z-index: 0;
}

/* True-underline variant (when "Behind Text" is off) */
.wml-kh-wrapper:not(.underline-behind) .wml-kh-highlight::after {
    bottom: -0.08em;
    height: calc(var(--wml-kh-underline-thickness) * 0.5);
}

/* =========================================================
   Reveal animations (driven by .wml-kh-in added by JS)
   ========================================================= */

/* Fade up */
.wml-kh-wrapper.anim-fade-up .wml-kh-headline {
    opacity: 0;
    transform: translateY(30px);
    transition: opacity var(--wml-kh-duration) cubic-bezier(0.16, 1, 0.3, 1),
                transform var(--wml-kh-duration) cubic-bezier(0.16, 1, 0.3, 1);
    transition-delay: var(--wml-kh-delay);
}
.wml-kh-wrapper.anim-fade-up.wml-kh-in .wml-kh-headline {
    opacity: 1;
    transform: translateY(0);
}

/* Fade in */
.wml-kh-wrapper.anim-fade-in .wml-kh-headline {
    opacity: 0;
    transition: opacity var(--wml-kh-duration) ease;
    transition-delay: var(--wml-kh-delay);
}
.wml-kh-wrapper.anim-fade-in.wml-kh-in .wml-kh-headline {
    opacity: 1;
}

/* Segments stagger up */
.wml-kh-wrapper.anim-segment-up .wml-kh-unit {
    display: inline-block;
    overflow: hidden;
    vertical-align: top;
    padding-bottom: 0.08em;
    margin-bottom: -0.08em;
}
.wml-kh-wrapper.anim-segment-up .wml-kh-unit-inner {
    display: inline-block;
    transform: translateY(115%);
    opacity: 0;
    transition: transform var(--wml-kh-duration) cubic-bezier(0.16, 1, 0.3, 1),
                opacity var(--wml-kh-duration) cubic-bezier(0.16, 1, 0.3, 1);
}
.wml-kh-wrapper.anim-segment-up.wml-kh-in .wml-kh-unit-inner {
    transform: translateY(0);
    opacity: 1;
}

/* =========================================================
   Highlight draw sweep
   ========================================================= */
.wml-kh-wrapper.underline-draw .wml-kh-highlight::after {
    transform: scaleX(0);
    transform-origin: left center;
    transition: transform var(--wml-kh-duration) cubic-bezier(0.16, 1, 0.3, 1);
    transition-delay: calc(var(--wml-kh-delay) + var(--wml-kh-duration) * 0.4);
}
.wml-kh-wrapper.underline-draw.wml-kh-in .wml-kh-highlight::after {
    transform: scaleX(1);
}

/* Respect reduced-motion preferences. */
@media (prefers-reduced-motion: reduce) {
    .wml-kh-wrapper .wml-kh-headline,
    .wml-kh-wrapper .wml-kh-unit-inner,
    .wml-kh-wrapper .wml-kh-highlight::after {
        transition: none !important;
        transform: none !important;
        opacity: 1 !important;
    }
}