/*
	Elements:
		<div id="contaminant-1" class="contaminant"></div>
		<div id="contaminant-2" class="contaminant"></div>
		<div id="contaminant-3" class="contaminant"></div>
		<div id="lure"></div>
	
	States:
	start, touch1, touch2, touch3, complete
	
	They are inside a 450x960 #BLOCK-CONTAMINATION.mini-game container.
	
	The minigame modifies the "state" property of the contaminants
	to "arrived" or "deflected".
	
*/

.BLOCK-CONTAMINATION {

	.contaminant {
		position: absolute;
		left: calc( 50% - 125px);
		top: -300px;
		width: 250px;
		height: 300px;
		
		background-image:
			url("../images/minigames/BLOCK-CONTAMINATION-BEEF.png");
		background-size:100%;
		animation-iteration-count: 1;
		animation-fill-mode: forwards;
		animation-direction: normal;
	}
	.contaminant.arrived {
		animation: BLOCK-CONTAMINATION-ARRIVING 1s normal forwards;
	}
	.contaminant.arrived.deflected {
		animation: BLOCK-CONTAMINATION-DEFLECTED-LEFT 1s normal forwards;
	}
	#contaminant-2.contaminant.arrived.deflected {
		animation: BLOCK-CONTAMINATION-DEFLECTED-RIGHT 1s normal forwards;
	}
	
	&#BLOCK-CONTAMINATION-BEEF .contaminant {
		background-image:
			url("../images/minigames/BLOCK-CONTAMINATION-BEEF.png");
	}
	&#BLOCK-CONTAMINATION-CHICKEN .contaminant {
		background-image:
			url("../images/minigames/BLOCK-CONTAMINATION-CHICKEN.png");
	}
	&#BLOCK-CONTAMINATION-PORK .contaminant {
		background-image:
			url("../images/minigames/BLOCK-CONTAMINATION-PORK.png");
	}
	
	&#BLOCK-CONTAMINATION-HANDS .contaminant {
		aspect-ratio:1 / 1;
		width: 44.4%;
		height:auto;
		left: 27.8%;
		background-image:
			url("../images/minigames/BLOCK-CONTAMINATION-HAND1.png");
		&.deflected {
			background-image:
			url("../images/minigames/BLOCK-CONTAMINATION-HAND1FLIP.png");
		}
		&#contaminant-2 {
			background-image:
				url("../images/minigames/BLOCK-CONTAMINATION-HAND2.png");
			&.deflected {
				background-image:
				url("../images/minigames/BLOCK-CONTAMINATION-HAND2FLIP.png");
			}
		}
	}

	#lure {
		position: absolute;
		aspect-ratio: 450 / 263 ;
		width: 100%;
		height: auto;
		left: 0px;
		bottom: 0px;
		background-image:
			url("../images/minigames/BLOCK-CONTAMINATION-LURE.png");
		background-size:100%;
		background-repeat: no-repeat;
	}
	
}

@keyframes BLOCK-CONTAMINATION-ARRIVING {
	0% {
		top: -300px; /*-300px; , 31% of 960 */
	}
	100% {
		top: 150px; /* 250px; */
	}
}

@keyframes BLOCK-CONTAMINATION-DEFLECTED-LEFT {
	0% {
		top: 150px;
	}
	10% {
		top: 200px;
	}
	100% {
		top: -300px;
		left: -200px;
		transform:rotate( 60deg );
	}
}

@keyframes BLOCK-CONTAMINATION-DEFLECTED-RIGHT {
	0% {
		top: 150px;
	}
	10% {
		top: 200px;
	}
	100% {
		top: -300px;
		left: 400px;
		transform:rotate( -60deg );
	}
}