/* ===========================================================================
   Underline reveal
   =========================================================================== */

.underline-reveal {
    --underline-reveal-width: var(--space-525);
    --underline-reveal-duration: 580ms;
    --underline-reveal-base-delay: 700ms;

    position: relative;

    display: block;

    width: var(--underline-reveal-width);
    height: 2px;

    background: linear-gradient(var(--color-secondary) 0 0) center / 100% var(--flow-line-width) no-repeat;
}

.underline-reveal::before,
.underline-reveal::after {
    content: "";

    position: absolute;
}

.underline-reveal::before {
    inset: 0;

    background-color: var(--color-secondary);

    transform: scaleX(0);
    transform-origin: left center;
}

.underline-reveal::after {
    top: 50%;
    left: calc(var(--signal-dot-size) / -2);

    width: var(--signal-dot-size);
    height: var(--signal-dot-size);

    border-radius: var(--radius-full);

    background-color: var(--signal-dot-color);
    box-shadow:
        0 0 0 var(--signal-dot-ring-size) var(--signal-dot-ring),
        0 0 var(--signal-dot-glow-size) var(--signal-dot-glow);

    opacity: 0;
    transform: translateY(-50%);
}

@keyframes underline-reveal-progress {

    to {
        transform: scaleX(1);
    }

}

@keyframes underline-reveal-dot {

    0%,
    90% {
        opacity: var(--signal-dot-opacity);
    }

    0% {
        transform: translate(0, -50%);
    }

    100% {
        opacity: 0;
        transform: translate(var(--underline-reveal-width), -50%);
    }

}

.underline-reveal-card {
    --underline-reveal-stagger: 0ms;
}

[data-underline-reveal-group] > .underline-reveal-card:nth-child(1) {
    --underline-reveal-stagger: 0ms;
}

[data-underline-reveal-group] > .underline-reveal-card:nth-child(2) {
    --underline-reveal-stagger: 150ms;
}

[data-underline-reveal-group] > .underline-reveal-card:nth-child(3) {
    --underline-reveal-stagger: 300ms;
}

[data-underline-reveal-group] > .underline-reveal-card:nth-child(4) {
    --underline-reveal-stagger: 450ms;
}

[data-underline-reveal-group] > .underline-reveal-card:nth-child(5) {
    --underline-reveal-stagger: 600ms;
}

[data-underline-reveal-group] > .underline-reveal-card:nth-child(6) {
    --underline-reveal-stagger: 750ms;
}

[data-underline-reveal-group] > .underline-reveal-card:nth-child(7) {
    --underline-reveal-stagger: 900ms;
}

[data-underline-reveal-group] > .underline-reveal-card:nth-child(8) {
    --underline-reveal-stagger: 1050ms;
}

[data-underline-reveal-group].is-underline-reveal-visible .underline-reveal::before {
    animation: underline-reveal-progress var(--underline-reveal-duration) var(--ease) calc(var(--underline-reveal-base-delay) + var(--underline-reveal-stagger)) forwards;
}

[data-underline-reveal-group].is-underline-reveal-visible .underline-reveal::after {
    animation: underline-reveal-dot var(--underline-reveal-duration) var(--ease) calc(var(--underline-reveal-base-delay) + var(--underline-reveal-stagger)) forwards;
}

@media (prefers-reduced-motion: reduce) {

    .underline-reveal::before,
    [data-underline-reveal-group].is-underline-reveal-visible .underline-reveal::before {
        transform: scaleX(1);
        animation: none;
    }

    .underline-reveal::after,
    [data-underline-reveal-group].is-underline-reveal-visible .underline-reveal::after {
        opacity: 0;
        animation: none;
    }

}