@keyframes reveal-up {
    from {
        opacity: 0;
        transform: translateY(2.25rem);
    }
}

@keyframes marquee-scroll {
    to {
        transform: translateX(-50%);
    }
}

@keyframes float-soft {
    50% {
        transform: translateY(-0.75rem);
    }
}

@keyframes drift {
    50% {
        transform: translate3d(1.25rem, -1.5rem, 0) scale(1.06);
    }
}

@keyframes pulse-glow {
    50% {
        opacity: 0.55;
        scale: 1.12;
    }
}

@keyframes caret-blink {
    0%,
    45% {
        opacity: 1;
    }
    55%,
    100% {
        opacity: 0;
    }
}

@keyframes sheen {
    to {
        background-position: 200% 50%;
    }
}

.js [data-reveal] {
    opacity: 0;
    transform: translateY(2.25rem);
    transition: opacity 800ms var(--ease-out), transform 800ms var(--ease-out);
    will-change: opacity, transform;
}

.js [data-reveal="left"] {
    transform: translateX(-2.5rem);
}

.js [data-reveal="right"] {
    transform: translateX(2.5rem);
}

.js [data-reveal="scale"] {
    transform: scale(0.93);
}

.js [data-reveal].is-visible {
    opacity: 1;
    transform: none;
}

.js [data-stagger] > * {
    opacity: 0;
    transform: translateY(1.75rem);
    transition: opacity 700ms var(--ease-out), transform 700ms var(--ease-out);
}

.js [data-stagger].is-visible > * {
    opacity: 1;
    transform: none;
}

.js [data-stagger].is-visible > *:nth-child(2) {
    transition-delay: 90ms;
}

.js [data-stagger].is-visible > *:nth-child(3) {
    transition-delay: 180ms;
}

.js [data-stagger].is-visible > *:nth-child(4) {
    transition-delay: 270ms;
}

.js [data-stagger].is-visible > *:nth-child(5) {
    transition-delay: 360ms;
}

.js [data-stagger].is-visible > *:nth-child(6) {
    transition-delay: 450ms;
}

.marquee__track {
    animation: marquee-scroll 34s linear infinite;
}

.marquee:hover .marquee__track {
    animation-play-state: paused;
}

.hero__glow {
    animation: pulse-glow 9s ease-in-out infinite;
}

.hero__caret {
    animation: caret-blink 1.1s steps(1) infinite;
}

.cta__orb--one {
    animation: drift 16s ease-in-out infinite;
}

.cta__orb--two {
    animation: drift 20s ease-in-out infinite reverse;
}

.button--primary {
    background-image: linear-gradient(110deg, #2d6ee7 0%, #6b4be8 45%, #2d6ee7 100%);
    background-size: 200% 100%;
    animation: sheen 9s linear infinite;
}

@media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
        scroll-behavior: auto !important;
    }

    .js [data-reveal],
    .js [data-stagger] > * {
        opacity: 1;
        transform: none;
    }
}