/* Shared CTA icon animations. */

.re-animated-arrow-button .re-button__icon {
    position: relative;
    overflow: hidden;
}

.re-animated-arrow-button .re-button__icon::before,
.re-animated-arrow-button .re-button__icon::after {
    content: "";
    position: absolute;
    inset: 0;
    display: block;
    background: currentColor;
    opacity: 0;
    pointer-events: none;
    will-change: transform, opacity;
    -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cpath d='M4 10h11.2M11.4 5.8 15.6 10l-4.2 4.2' fill='none' stroke='%23000' stroke-linecap='round' stroke-linejoin='round' stroke-width='2.4'/%3E%3C/svg%3E") center / contain no-repeat;
    mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cpath d='M4 10h11.2M11.4 5.8 15.6 10l-4.2 4.2' fill='none' stroke='%23000' stroke-linecap='round' stroke-linejoin='round' stroke-width='2.4'/%3E%3C/svg%3E") center / contain no-repeat;
}

.re-animated-arrow-button .re-button__icon::before {
    transform: translate3d(0, 0, 0);
}

.re-animated-arrow-button .re-button__icon::after {
    transform: translate3d(-145%, 0, 0);
}

.re-animated-arrow-button .re-svg-icon {
    transition: opacity 80ms linear;
}

.re-animated-arrow-button:hover .re-svg-icon,
.re-animated-arrow-button:focus-visible .re-svg-icon {
    opacity: 0;
}

.re-animated-arrow-button:hover .re-button__icon::before,
.re-animated-arrow-button:focus-visible .re-button__icon::before {
    animation: re-cta-arrow-out 1.45s cubic-bezier(0.55, 0, 0.2, 1) infinite;
}

.re-animated-arrow-button:hover .re-button__icon::after,
.re-animated-arrow-button:focus-visible .re-button__icon::after {
    animation: re-cta-arrow-in 1.45s cubic-bezier(0.55, 0, 0.2, 1) infinite;
}

.re-animated-cogs-button .re-svg-icon .re-cog {
    transform-box: fill-box;
    transform-origin: center;
}

.re-animated-cogs-button:hover .re-svg-icon .re-cog--large,
.re-animated-cogs-button:focus-visible .re-svg-icon .re-cog--large {
    animation: re-cta-cog-large 1.6s linear infinite;
}

.re-animated-cogs-button:hover .re-svg-icon .re-cog--small,
.re-animated-cogs-button:focus-visible .re-svg-icon .re-cog--small {
    animation: re-cta-cog-small 0.8s linear infinite;
}

@keyframes re-cta-arrow-out {
    0%,
    18% {
        opacity: 1;
        transform: translate3d(0, 0, 0);
    }

    52% {
        opacity: 1;
        transform: translate3d(145%, 0, 0);
    }

    52.01% {
        opacity: 0;
        transform: translate3d(145%, 0, 0);
    }

    82% {
        opacity: 0;
        transform: translate3d(0, 0, 0);
    }

    90%,
    100% {
        opacity: 1;
        transform: translate3d(0, 0, 0);
    }
}

@keyframes re-cta-arrow-in {
    0%,
    18% {
        opacity: 0;
        transform: translate3d(-145%, 0, 0);
    }

    18.01% {
        opacity: 1;
        transform: translate3d(-145%, 0, 0);
    }

    52%,
    82% {
        opacity: 1;
        transform: translate3d(0, 0, 0);
    }

    90% {
        opacity: 0;
        transform: translate3d(0, 0, 0);
    }

    100% {
        opacity: 0;
        transform: translate3d(-145%, 0, 0);
    }
}

@keyframes re-cta-cog-large {
    to {
        transform: rotate(360deg);
    }
}

@keyframes re-cta-cog-small {
    to {
        transform: rotate(-360deg);
    }
}

@media (prefers-reduced-motion: reduce) {
    .re-animated-arrow-button:hover .re-svg-icon,
    .re-animated-arrow-button:focus-visible .re-svg-icon,
    .re-animated-arrow-button:hover .re-button__icon::before,
    .re-animated-arrow-button:focus-visible .re-button__icon::before,
    .re-animated-arrow-button:hover .re-button__icon::after,
    .re-animated-arrow-button:focus-visible .re-button__icon::after,
    .re-animated-cogs-button:hover .re-svg-icon .re-cog,
    .re-animated-cogs-button:focus-visible .re-svg-icon .re-cog {
        animation: none;
    }

    .re-animated-arrow-button:hover .re-svg-icon,
    .re-animated-arrow-button:focus-visible .re-svg-icon {
        opacity: 1;
    }

    .re-animated-arrow-button:hover .re-button__icon::before,
    .re-animated-arrow-button:hover .re-button__icon::after,
    .re-animated-arrow-button:focus-visible .re-button__icon::before,
    .re-animated-arrow-button:focus-visible .re-button__icon::after {
        opacity: 0;
    }
}