/*
	Elements:
		<div id="dog"></div>
		<div id="lure"></div>
	
	States:
	start, approach, wait, pet, done
	
	They are inside a 450x960 #CURIOUS-DOGS.mini-game container.
	
	The minigame modifies the "state" property of the #dog
	to "approach", "wait", "pet".
	
*/

.CURIOUS-DOGS {

	background-color: rgba( 255, 255, 255, 0.5 ) !important;
	border: 10px solid white;

	#dog {
		left: calc( 50% - 86px );
		position: absolute;
		aspect-ratio: 175 / 275;
		width: 175px;
		height: 275px;
		margin:auto;
		animation: CURIOUS-DOGS-walking 0.75s;
		animation-iteration-count: infinite;
		animation-fill-mode: both;
		animation-direction: normal;
		transition: transform 2s ease;
		top: 15%;
		transform: translate( 0px, -475px ) scale( 1.2 );
		background-size: cover;
	}
	
	#dog.arrived {
		transform: translate( 0px, 0px ) scale( 1.2 );
	}
	
	#dog.docile {
		animation: none;
		background-image:
			url("../images/minigames/CURIOUS-DOGS-2.png");
		background-size: cover;
		transition: none;
		animation: CURIOUS-DOGS-flopping 1s;
		animation-iteration-count: 1;
		animation-fill-mode: both;
		animation-direction: normal;
	}
	
	#lure {
		position: absolute;
		aspect-ratio: 450 / 263 ;
		width: 100%;
		height: auto;
		left: 0px;
		bottom: 0px;
		background-image:
			url("../images/minigames/CURIOUS-DOGS-FOOD.png");
		background-size:100%;
		background-repeat: no-repeat;
	}
	
}

@keyframes CURIOUS-DOGS-walking {
	0% {
		background-image:
			url("../images/minigames/CURIOUS-DOGS-0.png");
	}
	50% {
		background-image:
			url("../images/minigames/CURIOUS-DOGS-1.png");
	}
	100% {
		background-image:
			url("../images/minigames/CURIOUS-DOGS-0.png");
	}
}

@keyframes CURIOUS-DOGS-flopping {
	0% {
		transform: rotate( 180deg ) scale( 1.2 );
	}
	50% {
		transform: rotate( -20deg ) scale( 1.4 );
	}
	100% {
		transform: rotate( 0deg ) scale( 1.2 );
	}
}