/* Cascading character reveal for the reliability statement. */
.cascade-text {
    --cascade-from: #f7d39a;
    --cascade-to: #64a9ff;
    --cascade-accent: #63f5d2;
}

.cascade-text__char {
    position: relative;
    display: inline-block;
    color: transparent;
    background: linear-gradient(112deg, var(--cascade-from), var(--cascade-to));
    background-clip: text;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    transform-origin: 50% 100%;
}

.cascade-text__char::after {
    content: attr(data-char);
    position: absolute;
    inset: 0;
    color: var(--cascade-accent);
    -webkit-text-fill-color: var(--cascade-accent);
    clip-path: inset(100% 0 0);
    opacity: 0;
    pointer-events: none;
}

.cascade-text__space {
    width: 0.34em;
}

.slogan:hover .cascade-text__char,
.slogan.is-cascade-active .cascade-text__char {
    animation: cascade-text-lift 680ms cubic-bezier(0.22, 1, 0.36, 1) both;
    animation-delay: calc(var(--cascade-index) * 22ms);
}

.slogan:hover .cascade-text__char::after,
.slogan.is-cascade-active .cascade-text__char::after {
    animation: cascade-text-glint 680ms cubic-bezier(0.22, 1, 0.36, 1) both;
    animation-delay: calc(var(--cascade-index) * 22ms);
}

:root[data-theme="light"] .cascade-text {
    --cascade-from: #12243a;
    --cascade-to: #168cf5;
    --cascade-accent: #00a98f;
}

@keyframes cascade-text-lift {
    0%, 100% {
        transform: translateY(0) scale(1);
    }
    44% {
        transform: translateY(-0.16em) scale(1.025);
    }
}

@keyframes cascade-text-glint {
    0% {
        clip-path: inset(100% 0 0);
        opacity: 0;
    }
    34% {
        clip-path: inset(0 0 0);
        opacity: 1;
    }
    72%, 100% {
        clip-path: inset(0 0 0);
        opacity: 0;
    }
}

@media (hover: none), (pointer: coarse), (prefers-reduced-motion: reduce) {
    .slogan:hover .cascade-text__char,
    .slogan:hover .cascade-text__char::after,
    .slogan.is-cascade-active .cascade-text__char,
    .slogan.is-cascade-active .cascade-text__char::after {
        animation: none;
    }
}