/* blocks_highlights — marker-style highlight devices.
   Wrap a phrase in <span data-highlight="purple|yellow"> inside a heading.
   Optional:
     data-highlight-bleed = right (default) | left | both | none
*/

[data-highlight] {
    position: relative;
    /* No isolation: mix-blend-mode needs the page backdrop to blend against. */
}

[data-highlight="purple"] { --hl-color: oklch(0.72 0.32 295); }
[data-highlight="yellow"] { --hl-color: hsl(53, 100%, 60%); }

[data-highlight]::before {
    content: "";
    position: absolute;
    pointer-events: none;
    z-index: -1;
    bottom: 0.08em;
    height: 0.55em;
    left: 0;
    right: -20%;                    /* default bleed: right, just past last char */
    mix-blend-mode: multiply;
    opacity: 0;
    transition: opacity 600ms ease 80ms;
    /* Solid first half, then a gentle curved fade out (intermediate alpha
       stop softens the linear ramp so the fade feels gradual, not harsh) */
    background: linear-gradient(
        to right,
        var(--hl-color) 0%,
        var(--hl-color) 50%,
        color-mix(in srgb, var(--hl-color) 50%, transparent) 75%,
        transparent 100%
    );
}

[data-highlight][data-highlight-bleed="left"]::before {
    left: -20%;
    right: 0;
    background: linear-gradient(
        to left,
        var(--hl-color) 0%,
        var(--hl-color) 50%,
        color-mix(in srgb, var(--hl-color) 50%, transparent) 75%,
        transparent 100%
    );
}

[data-highlight][data-highlight-bleed="both"]::before {
    left: -20%;
    right: -20%;
    background: linear-gradient(
        to right,
        transparent 0%,
        color-mix(in srgb, var(--hl-color) 50%, transparent) 25%,
        var(--hl-color) 50%,
        color-mix(in srgb, var(--hl-color) 50%, transparent) 75%,
        transparent 100%
    );
}

[data-highlight][data-highlight-bleed="none"]::before {
    left: 0;
    right: 0;
    background: var(--hl-color);
}

/* Screen-edge bleed: bar starts beyond the viewport's left/right edge,
   solid through the text. The fade region straddles the screen edge so
   you see a soft entry. */
[data-highlight][data-highlight-bleed="screen-left"]::before {
    left: -40vw;
    right: 0;
    background: linear-gradient(
        to right,
        transparent 0,
        color-mix(in srgb, var(--hl-color) 50%, transparent) 20vw,
        var(--hl-color) 40vw,
        var(--hl-color) 100%
    );
}
[data-highlight][data-highlight-bleed="screen-right"]::before {
    left: 0;
    right: -40vw;
    background: linear-gradient(
        to left,
        transparent 0,
        color-mix(in srgb, var(--hl-color) 50%, transparent) 20vw,
        var(--hl-color) 40vw,
        var(--hl-color) 100%
    );
}

[data-highlight="purple"].in-view::before { opacity: 0.2; }
[data-highlight="yellow"].in-view::before { opacity: 0.45; }

@media (prefers-reduced-motion: reduce) {
    [data-highlight]::before { transition: none; }
}