/* Button SVG Animation */

.btn-svg {
    position: relative;
    overflow: hidden;
}

/* First arrow - visible, centered */
.btn-svg-arrow-1 {
    position: absolute;
    width: 16px;
    height: 16px;
    left: 50%;
    top: 50%;
    margin-left: -8px;
    margin-top: -8px;
}

/* Second arrow - starts off-screen left */
.btn-svg-arrow-2 {
    position: absolute;
    width: 16px;
    height: 16px;
    left: 50%;
    top: 50%;
    margin-left: -32px;
    margin-top: -8px;
}

/* Third arrow - starts off-screen left */
.btn-svg-arrow-3 {
    position: absolute;
    width: 16px;
    height: 16px;
    left: 50%;
    top: 50%;
    margin-left: -32px;
    margin-top: -8px;
}

/* CSS Animations - these run to completion and don't reverse */
@keyframes arrow-1-exit {
    0% {
        transform: translateX(0);
    }
    100% {
        transform: translateX(32px);
    }
}

@keyframes arrow-2-across {
    0% {
        transform: translateX(0);
    }
    100% {
        transform: translateX(64px);
    }
}

@keyframes arrow-3-enter {
    0% {
        transform: translateX(0);
    }
    100% {
        transform: translateX(24px);
    }
}

/* Animated state - triggered by JavaScript */
.btn-svg.animate .btn-svg-arrow-1 {
    animation: arrow-1-exit 0.3s ease-in forwards;
}

.btn-svg.animate .btn-svg-arrow-2 {
    animation: arrow-2-across 0.2s ease-in 0.3s forwards;
}

.btn-svg.animate .btn-svg-arrow-3 {
    animation: arrow-3-enter 0.3s ease-in 0.5s forwards;
}