/* Readable hero heading with a restrained, morphing underline. */
.animated-heading {
    --underline-start: #1b628f;
    --underline-middle: #2c83bd;
    --underline-end: #2aa795;
    width: fit-content;
    max-width: 100%;
}

[data-theme="dark"] .animated-heading {
    --underline-start: #d8c99f;
    --underline-middle: #739ed2;
    --underline-end: #62cdb8;
}

.animated-underline-text {
    position: relative;
    width: fit-content;
    max-width: 100%;
}

.animated-underline-text > span {
    position: relative;
    z-index: 1;
}

.animated-underline {
    position: absolute;
    z-index: 0;
    left: 1%;
    bottom: -0.13em;
    width: 98%;
    height: 0.22em;
    min-height: 8px;
    overflow: visible;
    pointer-events: none;
    filter: drop-shadow(0 3px 5px color-mix(in srgb, var(--underline-middle) 22%, transparent));
}

.animated-underline path {
    fill: none;
    stroke: url(#hero-underline-gradient);
    stroke-width: 4;
    stroke-linecap: round;
    stroke-dasharray: 1;
    stroke-dashoffset: 1;
    opacity: 0.76;
    transition:
        d 1.15s cubic-bezier(0.22, 1, 0.36, 1),
        stroke-dashoffset 850ms cubic-bezier(0.22, 1, 0.36, 1),
        opacity 250ms ease;
}

.animated-underline-text:hover .animated-underline path,
.animated-underline-text.is-underline-active .animated-underline path,
.animated-heading:focus-within .animated-underline path {
    d: path("M 2,8 Q 75,15 150,8 Q 225,1 298,8");
    stroke-dashoffset: 0;
    opacity: 1;
}

.animated-underline-text--sub .animated-underline {
    bottom: -0.28em;
    height: 0.28em;
}

.animated-underline-text--sub .animated-underline path {
    stroke-width: 3;
    opacity: 0.48;
}

.animated-heading .title-main {
    margin-bottom: 0.18em;
}

.animated-heading .title-sub {
    margin-bottom: 0.75em;
}

@media (prefers-reduced-motion: reduce) {
    .animated-underline {
        display: none;
    }
}