/*
    moneybag art
*/

@keyframes moneybag-fall {
    0% {
        transform: translateY(-250px);
    }
    85% {
        transform: translateY(0px) scaleY(1);
    }
    90% {
        transform: scaleY(0.4);
    }
    100% {
        transform: scaleY(1);
    }
}

@keyframes moneybag-clouds {
    10% {
        transform: translateX(0px);
        opacity: 1;
    }
    100% {
        transform: translateX(calc(25px * var(--cloud-direction)));
        opacity: 0;
    }
}

@keyframes moneybag-anime-lines-in {
    0% {
        opacity: 1;
        transform: translate(1px, -15px) scaleY(0);
    }
    100% {
        transform: translate(1px, -15px) scaleY(1);
    }
}

@keyframes moneybag-anime-lines-out {
    0% {
        opacity: 1;
        transform: translate(1px, -15px) scaleY(1);
    }
    100% {
        transform: translate(1px, -15px) scaleY(0);
    }
}

.slick-slide:not(.slick-slide[tabindex="-1"]) path.moneybag-bag {
    animation: moneybag-fall 0.6s ease-in forwards;
}

.slick-slide:not(.slick-slide[tabindex="-1"]) path.moneybag-clouds {
    animation: moneybag-clouds 0.5s 0.5s ease-out forwards;
}

.slick-slide:not(.slick-slide[tabindex="-1"]) g.moneybag-anime-lines.in {
    animation: moneybag-anime-lines-in 0.15s 0.4s ease-in;
}

.slick-slide:not(.slick-slide[tabindex="-1"]) g.moneybag-anime-lines.out {
    animation: moneybag-anime-lines-out 0.15s 0.55s ease-in forwards;
}

path.moneybag-bag {
    transform-origin: bottom;
    transform: translateY(-250px);
}

g.moneybag-key {
    transform-origin: center;
}

path.moneybag-clouds~path.moneybag-clouds {
    --cloud-direction: -1;
}

path.moneybag-clouds {
    --cloud-direction: 1;
    opacity: 0;
}

.moneybag-anime-lines.in {
    transform-origin: top;
    transform: translate(1px, -15px) scaleY(0);
    opacity: 0;
}

.moneybag-anime-lines.out {
    transform-origin: bottom;
    transform: translate(1px, -15px) scaleY(1);
    opacity: 0;
}

.fb {
    transform-box: fill-box;
}


/*
    helmets art
*/

@keyframes helmet-fall-2nd {
    0% {
        transform: translateY(-200px);
    }
    60% {
        transform: translateY(-30px) translateX(5px) rotate(15deg);
    }
    100% {
        transform: translate(10px, -25px) rotate(25deg);
    }
}

@keyframes helmet-fall-3rd {
    0% {
        transform: translateY(-230px);
    }
    60% {
        transform: translateY(-60px) translateX(5px) rotate(-5deg);
    }
    100% {
        transform: translate(-5px, -55px) rotate(-15deg);
    }
}

@keyframes helmet-fall-4th {
    0% {
        transform: translateY(-280px);
    }
    60% {
        transform: translateY(-100px) translateX(5px) rotate(15deg);
    }
    100% {
        transform: translate(10px, -85px) rotate(25deg);
    }
}

.solly-cap:not(.first) {
    transform-origin: center;
    transform: translateY(-200px);
    border: 5px black solid;
}

.slick-slide:not(.slick-slide[tabindex="-1"]) .solly-cap.second {
    transform: translateY(-200px);
    animation: helmet-fall-2nd 0.5s ease-in forwards;
    transform-origin: center;
}

.slick-slide:not(.slick-slide[tabindex="-1"]) .solly-cap.third {
    animation: helmet-fall-3rd 0.5s 1s ease-in forwards;
    transform-origin: center;
}

.slick-slide:not(.slick-slide[tabindex="-1"]) .solly-cap.fourth {
    animation: helmet-fall-4th 0.5s 2s ease-in forwards;
    transform-origin: center;
}

g.solly-cap {
    stroke: black;
    paint-order: stroke;
    stroke-width: 5px;
}

g.s-head,
g.s-hat {
    transform: rotateZ(10deg);
    transform-origin: initial;
}

path.s-eyes {
    transform-box: fill-box;
    transform-origin: center;
    animation: eye-rotate 1s infinite linear;
}

path.s-eyes~path.s-eyes {
    animation-direction: reverse;
}

.slick-slide:not(.slick-slide[tabindex="-1"]) g.s-head {
    animation: sway-hat 2s infinite ease-in-out;
}

.slick-slide:not(.slick-slide[tabindex="-1"]) g.s-hat {
    animation: sway-hat 2s 0.2s infinite ease-in-out;
}


/*
    sniper bot art
*/

@keyframes sway {
    0% {
        transform: rotateZ(20deg);
    }
    50% {
        transform: rotateZ(-20deg);
    }
    100% {
        transform: rotateZ(20deg);
    }
}

@keyframes sway-hat {
    0% {
        transform: rotateZ(10deg);
    }
    50% {
        transform: rotateZ(-10deg);
    }
    100% {
        transform: rotateZ(10deg);
    }
}

@keyframes eye-rotate {
    from {
        transform: rotateZ(0deg);
    }
    to {
        transform: rotateZ(360deg);
    }
}


/*
    item exchange art
*/

#shako {
    width: 60px;
}

#shako svg {
    width: 100%;
}

.arrows {
    display: flex;
    height: 70px;
    /* place-content: start; */
    justify-content: center;
}

.arrows~.arrows>svg {
    transform: rotate(180deg);
}

.arrows>svg {
    height: 50%!important;
}

.arrows svg {
    height: 100%;
}

.rotate-item {
    width: 80px;
    height: 80px;
    display: grid;
    place-content: center;
}

.rotate-overlay {
    margin-left: -250px;
    width: 250px;
}

.rotate {
    display: flex;
    align-items: center;
    justify-content: space-around;
    width: 250px;
}

.slick-slide:not(.slick-slide[tabindex="-1"]) .rotate {
    animation: exchange 4s infinite;
    animation-timing-function: ease-in;
}

.slick-slide:not(.slick-slide[tabindex="-1"]) .rotate-item {
    animation: exchange-counter 4s 0.25s infinite;
}

.slick-slide:not(.slick-slide[tabindex="-1"]) .rotate-overlay {
    animation: exchange 4s infinite;
    animation-timing-function: ease-in;
}

@keyframes exchange {
    0% {
        transform: rotate(0deg);
    }
    35% {
        transform: rotate(180deg);
    }
    50% {
        transform: rotate(180deg);
    }
    85% {
        transform: rotate(360deg);
    }
    100% {
        transform: rotate(360deg);
    }
}

@keyframes exchange-counter {
    0% {
        transform: rotate(0deg);
    }
    35% {
        transform: rotate(-180deg);
    }
    50% {
        transform: rotate(-180deg);
    }
    85% {
        transform: rotate(-360deg);
    }
    100% {
        transform: rotate(-360deg);
    }
}


/*
    scrap gain art
*/

path.scrap-arrows~path.scrap-arrows {
    animation-delay: 1s !important;
}

.slick-slide:not(.slick-slide[tabindex="-1"]) path.scrap-arrows {
    animation: arrows 2s infinite;
}

@keyframes arrows {
    0% {
        transform: translateY(0px);
    }
    50% {
        transform: translateY(-20px);
    }
    100% {
        transform: translateY(0px);
    }
}