.game-bg {
	--scroll-progress: 0;
}
.game-bg,
.animated {
	--delay: 0;
	animation-duration: 1s;
	animation-delay: calc((var(--scroll-progress) - var(--delay)) * -1s);
	animation-play-state: paused;

	position: relative;
}

.animated > *,
.bg {
	position: absolute;
	top: 0;
	bottom: 0;
	left: 0;
	right: 0;
}

.animated-img {
	width: 100%;
	height: 100%;
	background-size: contain;
	background-repeat: no-repeat;

	animation-timing-function: linear;
	animation-duration: 2s;
	animation-iteration-count: infinite;

    animation-timing-function: step-end;
}

.about-zap {
	width: 200px;
	height: 200px;
	position: absolute;

	animation-name: about-zap-in;
	transform: scale(0);

	--zap-opacity: 0;

	--zap-url: url("../Art/about-me-1-zap.png");
	--normal-url: url("../Art/about-me-1-normal.png");
}

@keyframes about-zap-in {
	from {
		transform: scale(0);
		--zap-opacity: 1;
	}
	20% {
		transform: scale(1);
		--zap-opacity: 1;
	}
	30%, 100% {
		transform: scale(1);
		--zap-opacity: 0;
	}
}

.about-zap .zapped {
	animation: about-zapping 0.1s linear 0s infinite;
	background-image: var(--zap-url);
	background-size: contain;
	background-repeat: no-repeat;
	background-position: center;

	opacity: var(--zap-opacity);
}

@keyframes about-zapping {
	0% {
		transform: rotate(-5deg);
	}
	50% {
		transform: rotate(5deg);
	}
	100% {
		transform: rotate(-5deg);
	}
}

.about-zap .normal {
	background-image: var(--normal-url);
	background-size: contain;
	background-repeat: no-repeat;
	background-position: center;

	opacity: calc(1 - var(--zap-opacity));
}

.about-zap-1 {
	right: 10px;
	top: 20px;

	--zap-url: url("../Art/about-me-1-zap.png");
	--normal-url: url("../Art/about-me-1-normal.png");

	--delay: 0.15;
}
.about-zap-2 {
	right: 150px;
	bottom: 20px;

	--zap-url: url("../Art/about-me-2-zap.png");
	--normal-url: url("../Art/about-me-2-normal.png");

	--delay: 0.17;
}
.about-zap-3 {
	left: 20px;
	top: 20px;

	--zap-url: url("../Art/about-me-3-zap.png");
	--normal-url: url("../Art/about-me-3-normal.png");

	--delay: 0.2;
}
.about-zap-4 {
	left: 170px;
	bottom: 30px;

	--zap-url: url("../Art/about-me-4-zap.png");
	--normal-url: url("../Art/about-me-4-normal.png");

	--delay: 0.22;
}



.clash-card {
    position: absolute;
    max-width: 130px;
	width: 50%;
    height: 160px;

    background-image: url("../Art/clash-card.png");
    background-size: contain;
    background-repeat: no-repeat;

    filter: drop-shadow(0px 0px 5px rgba(0, 0, 0, 0.384));
    transform: scale(0);
    animation-name: clash-card-scale;
}

.left-bg .clash-card.card-1 {
    --delay: 0.15;
    --rotation: 2deg;
    background-image: url("../Art/clash-card-flip.png");
}
.left-bg .clash-card.card-2 {
    --delay: 0.2;
    --rotation: -2deg;
    background-image: url("../Art/clash-card-up.png");
}
.right-bg .clash-card.card-1 {
    --delay: 0.3;
    --rotation: -2deg;
    background-image: url("../Art/clash-card-attack.png");
}
.right-bg .clash-card.card-2 {
    --delay: 0.35;
    --rotation: 2deg;
    background-image: url("../Art/clash-card-switch.png");
}

@keyframes clash-card-scale {
    0% {
        transform: scale(0) rotate(calc(0deg - var(--rotation) * 5));
    }

    25% {
        transform: scale(1) translateY(20px) rotate(var(--rotation));
    }

    100% {
        transform: scale(1) translateY(20px) rotate(var(--rotation));
    }
}



@keyframes whirlwarp-whirl {
    from {
        background-image: url("../Art/whirl-me-1.png");
    }

    50% {
        background-image: url("../Art/whirl-me-2.png");
    }

    to {
        background-image: url("../Art/whirl-me-1.png");
    }
}

.whirlwarp-guy {
    position: absolute;
    bottom: 200px;

    width: 150px;
    height: 350px;

    z-index: -1;
    animation-timing-function: linear, step-end;
    animation-duration: 1s, 0.1s;
    animation-iteration-count: infinite, infinite;

    background-image: url("../Art/whirl-me-1.png");
    background-size: contain;
    background-repeat: no-repeat;
    background-position: bottom;

    filter: hue-rotate(35deg) brightness(120%);
}

.left-bg .whirlwarp-guy {
    animation-name: whirlwarp-run-left, whirlwarp-whirl;
    animation-direction: reverse, normal;
    right: 600px;
    --delay: 0;
}

.right-bg .whirlwarp-guy {
    animation-name: whirlwarp-run-right, whirlwarp-whirl;
    animation-direction: reverse, normal;
    left: -200px;
    --delay: 0.25;
}

.whirlwarp-guy:nth-child(2) {
    --delay: .2;
    height: 450px;
    filter: hue-rotate(335deg) ;
}
.whirlwarp-guy:nth-child(3) {
    --delay: .3;
    height: 250px;
    filter: hue-rotate(135deg) ;
}
.whirlwarp-guy:nth-child(4) {
    --delay: 0.4;
    height: 300px;
    filter: hue-rotate(275deg);
}





.fjord-boat {
    z-index: -2;
    background-image: url("../Art/ship.png");
    background-size: contain;
    background-repeat: no-repeat;
    width: 200px;
    height: 200px;

    position: absolute;

    animation-name: fjord-boat-move, fjord-jiggle;
    animation-timing-function: linear;

	animation-duration: 1s, 0.1s;
}

@keyframes fjord-boat-move {
    0%, 30% {
        right: 100%;
    }
    50% {
        right: 60%;
    }
    51% {
        right: 40%;
    }
    100% {
        right: -50%;
    }
}

@keyframes fjord-jiggle {
	from {
        transform: rotate(-15deg);
	}
	50% {
        transform: rotate(15deg);
	}
	to {
        transform: rotate(-15deg);
	}
}







.wilderfeast-walk-guy {
    position: absolute;

    width: 200px;
    height: 200px;

    bottom: 100px;

    z-index: -1;
}

.right-bg .wilderfeast-walk-guy {
    animation-name: wilderfeast-walk-right;
    right: -100px;
    animation-timing-function: linear;
}

@keyframes wilderfeast-walk-right {
    0%, 30% {
        right: -200px;
    }
    40%, 100% {
        right: 100%;
    }
}

.left-bg .wilderfeast-walk-guy {
    animation-name: wilderfeast-walk-left;
    left: 100%;

    width: 500px;
    height: 500px;
    bottom: 0px;
}

@keyframes wilderfeast-walk-left {
    from, 40% {
        left: 100%;
        transform: scale(0);
    }
    60% {
        left: 10%;
        transform: scale(1);
    }
    80%, 100% {
        left: 10%;
        transform: scale(1);
    }
}

.left-bg .wilderfeast-walk-guy .animated-img {
    background-image: url("../Art/wilderfeast-guys.png");
    background-size: contain;
    background-position: right;
}
.right-bg .wilderfeast-walk-guy .animated-img {
    background-image: url("../Art/wilderfeast-run-01.png");
    animation-name: wilderfeast-run;
    animation-duration: 0.5s;
}

@keyframes wilderfeast-run {
    0% {
        background-image: url("../Art/wilderfeast-run-01.png");
    }
    25% {
        background-image: url("../Art/wilderfeast-run-02.png");
    }
    50% {
        background-image: url("../Art/wilderfeast-run-01.png");
    }
    75% {
        background-image: url("../Art/wilderfeast-run-02.png");
    }
    100% {
        background-image: url("../Art/wilderfeast-run-01.png");
    }
}