/*
	Elements:
		<div id="fridge-back"></div>
		<div id="chicken-shelved" class="shelved-item"></div>
		<div id="pork-shelved" class="shelved-item"></div>
		<div id="beef-shelved" class="shelved-item"></div>
		<div id="chicken" class="item" position="offscreen"></div>
		<div id="pork" class="item" position="offscreen"></div>
		<div id="beef" class="item" position="offscreen"></div>
	
	States:
	start, card1, card2, card3, card4, card5, done
	
*/

.FRIDGE {

	/*	450 width, 30 pixel margin = 180px  */
	/*	Images are 725x828	*/
	
	#fridge-back {
		left: 0px;
		top: 0px;
		width: 100%;
		height: 100%;
		background-image: url( "../images/minigames/FRIDGE-back.png" );
		background-size:100%;
		background-repeat: no-repeat;
	}
	.shelved-item {
		aspect-ratio: 450 / 100; 
		width: 100%;
		height: auto;
		left: 0px;
		opacity: 0;
		transition: opacity 0.1s ease 0.40s, transform 0.15s ease 0.40s;
		transform: scale( 0.5, 1.0 );
		background-size:100%;
		background-repeat: no-repeat;
		&#chicken-shelved {
			top: 160px;
			background-image:
				url( "../images/minigames/FRIDGE-chicken-shelved.png" );
		}
		&#beef-shelved {
			top: 330px;
			background-image:
				url( "../images/minigames/FRIDGE-beef-shelved.png" );
		}
		&#pork-shelved {
			top: 500px;
			background-image:
			url( "../images/minigames/FRIDGE-pork-shelved.png" );
		}
		&.shown {
			opacity: 1;
			transform: scale( 1.0, 1.0 );
		}
	}
	.item {
		aspect-ratio: 405 / 315;
		width: 90%;
		height: auto;
		left: 22px;
		top:64.5%;
		opacity: 1.0;
		transition: top 0.5s ease, transform 0.5s ease, opacity 0.1s 0.4s;
		background-size:100%;
		background-repeat: no-repeat;
		
		&#chicken {
			background-image: url( "../images/minigames/FRIDGE-chicken.png" );
		}
		&#beef {
			background-image: url( "../images/minigames/FRIDGE-beef.png" );
		}
		&#pork {
			background-image: url( "../images/minigames/FRIDGE-pork.png" );
		}
		
		&[position="offscreen"] {
			transform: translate( -100%, 0px );
		}
		&[position="chicken"] {
			top: 14%;
			transform: scale( 0.5 );
			opacity: 0;
		}
		&[position="beef"] {
			top: 28%;
			transform: scale( 0.5 );
			opacity: 0;
		}
		&[position="pork"] {
			top:40.6%;
			transform: scale( 0.5 );
			opacity: 0;
		}
	}

}