/* Cross-browser text fallback: important text must never rely on transparent fill. */
.animated-heading .title-main,
.animated-heading .title-sub {
    background: none !important;
    background-clip: border-box !important;
    -webkit-background-clip: border-box !important;
    color: #d8c99f !important;
    -webkit-text-fill-color: currentColor !important;
}

:root[data-theme="light"] .animated-heading .title-main,
:root[data-theme="light"] .animated-heading .title-sub {
    color: #12243a !important;
}

.animated-heading .title-main > span,
.animated-heading .title-sub > span {
    position: relative;
    z-index: 1;
    color: inherit !important;
    -webkit-text-fill-color: currentColor !important;
}

.gradient-text-svg {
    position: absolute;
    z-index: 2;
    inset: 0 auto auto 0;
    display: block;
    width: 100%;
    height: 100%;
    pointer-events: none;
    overflow: visible;
}

.animated-underline-text.has-svg-gradient > span {
    visibility: hidden;
}

.cascade-text__char {
    background: none !important;
    background-clip: border-box !important;
    -webkit-background-clip: border-box !important;
    color: var(--cascade-to) !important;
    -webkit-text-fill-color: currentColor !important;
}

.cascade-text__char:nth-child(3n + 1) { color: var(--cascade-from) !important; }
.cascade-text__char:nth-child(3n + 2) {
    color: color-mix(in srgb, var(--cascade-from) 46%, var(--cascade-to)) !important;
}

.cascade-text__char::after {
    -webkit-text-fill-color: var(--cascade-accent) !important;
}

@supports not (color: color-mix(in srgb, #000 50%, #fff)) {
    .cascade-text__char:nth-child(3n + 2) { color: var(--cascade-to) !important; }
}

/* The lower slogan may use CSS clipping; its real text remains solid otherwise. */
@supports ((-webkit-background-clip: text) and (-webkit-text-fill-color: transparent)) or
          ((background-clip: text) and (color: transparent)) {
    .cascade-text__char {
        background: linear-gradient(112deg, var(--cascade-from), var(--cascade-to)) !important;
        background-clip: text !important;
        -webkit-background-clip: text !important;
        color: transparent !important;
        -webkit-text-fill-color: transparent !important;
    }
}