@layer utilities {

@property --link-underline-color {
    syntax: "<color>";
    inherits: false;
    initial-value: transparent;
}

/* ── Underline (instant) ── */
.text-hover--underline {
    text-decoration: none;
}

:is(.text-hover--underline:hover, .text-hover-parent:hover .stretched-link.text-hover--underline) {
    text-decoration: underline;
    text-underline-offset: var(--th-offset, 3px);
    text-decoration-thickness: var(--th-thickness, auto);
    text-decoration-color: var(--th-ul-color, currentColor);
}

/* ── Underline (fade) ── */
.text-hover--underline-fade {
    text-decoration: underline;
    text-underline-offset: var(--th-offset, 3px);
    text-decoration-thickness: var(--th-thickness, auto);
    text-decoration-color: transparent;
    transition:
        text-decoration-color var(--th-fade-speed, 200ms) var(--th-easing, ease-out),
        color var(--transition-speed);
}

:is(.text-hover--underline-fade:hover, .text-hover-parent:hover .stretched-link.text-hover--underline-fade) {
    text-decoration-color: var(--th-ul-color, currentColor);
}

/* ── Link effect (animated background underline) ── */
.text-hover--link-effect {
    text-decoration: none;
    background-image: linear-gradient(var(--link-underline-color), var(--link-underline-color));
    background-repeat: no-repeat;
    background-position: left var(--th-pos-y, 100%);
    background-size: 0% var(--th-thickness, 2px);
    padding-block: var(--th-offset, 2px);
    transition:
        background-size var(--th-grow-speed, 250ms) var(--th-easing, ease-out),
        --link-underline-color var(--th-fade-speed, 200ms) var(--th-easing, ease-out),
        background-position var(--th-slide-speed, 0ms) var(--th-easing, ease-out),
        color var(--transition-speed);
}

:is(.text-hover--link-effect:hover, .text-hover-parent:hover .stretched-link.text-hover--link-effect) {
    --link-underline-color: var(--th-color, currentColor);
    background-size: 100% var(--th-thickness, 2px);
    background-position: left 100%;
}

/* Grow direction */
.text-hover--grow-left {
    background-position-x: right;
}

.text-hover--grow-center {
    background-position-x: center;
}

/* No grow — full width from start, fade only */
.text-hover--grow-none {
    background-size: 100% var(--th-thickness, 2px);
}

/* Grow as height increase */
.text-hover--grow-height {
    --link-underline-color: var(--th-color, currentColor);
    background-size: 100% 1px;
    background-position: left 100%;
}

:is(.text-hover--grow-height:hover, .text-hover-parent:hover .stretched-link.text-hover--grow-height) {
    background-size: 100% var(--th-thickness, 3px);
}

/* ── Color ── */
.text-hover--color {
    transition: color var(--transition-speed);
}

:is(.text-hover--color:hover, .text-hover-parent:hover .stretched-link.text-hover--color) {
    color: var(--th-hover-color, var(--color-primary));
}

}