/*
	Elements:
	<div id="bag-back"></div>
	<div id="bag-item"></div>
	<div id="bag-front"></div>
	
	States:
	start, openA, openB, openC, done
	
	They are inside a 450x960 #PAPER-BAG.mini-game container.
	
	Paper bag image is 374x415. Food items are 265x265.

*/

.PAPER-BAG {

	/*	The bag */
	#bag-front,
	#bag-back {
		position: absolute;
		top: 50px;
		left: calc( 50% - 225px );
		width: 450px;
		height: 960px;
		background-size:100%;
		background-repeat: no-repeat;
		background-position: center;
		overflow: hidden;
		scale: 0.9;
	}
	
	/*	The bag back. Appears only when in openC. */
	#bag-back {
		background-image: url( "../images/minigames/PAPER-BAG-back.png" );
		opacity: 0;
	}
	&[frame="openC"] #bag-back,
	&[frame="done"] #bag-back {
		opacity: 1;
	}
	
	/*	The bag front. Steps through the four stages.	*/
	
	#bag-front {
		transition: transform 0.25s ease;
	}
	&[frame="start"] #bag-front {
		background-image: url( "../images/minigames/PAPER-BAG-1.png" );
	}
	&[frame="openA"] #bag-front {
		background-image: url( "../images/minigames/PAPER-BAG-2.png" );
	}
	&[frame="openB"] #bag-front {
		background-image: url( "../images/minigames/PAPER-BAG-3.png" );
	}
	&[frame="openC"] #bag-front,
	&[frame="done"] #bag-front {
		background-image: url( "../images/minigames/PAPER-BAG-4.png" );
	}
	
	/*	The bag item.  Drops down initially, then drops into the bag.	*/
	#bag-item {
		position: absolute;
		left: calc( 50% - 132px );
		aspect-ratio: 1 / 1;
		width: 265px;
		height: 265px;
		background-repeat: no-repeat;
		background-position: center;
		overflow: hidden;
		top: 120px;
		transition: all 0.5s ease;
		transform: translate( 0px, 0px );
		animation-duration: 1.0s;
		animation-fill-mode: forwards;
		animation-name: PAPER-BAG-bag-item-entrance;
		transform-origin: 50% 100%;
		background-image: url( "../images/minigames/PAPER-BAG-EGGS.png" );
		background-size:100%;
	}
	&[frame="done"] #bag-item {
		animation-duration: 1.0s;
		animation-fill-mode: forwards;
		animation-name: PAPER-BAG-put-item-in-bag;
	}
		
	/*	Minigame variants		*/
	&#PAPER-BAG-EGGS #bag-item {
		background-image: url( "../images/minigames/PAPER-BAG-EGGS.png" );
	}
	&#PAPER-BAG-CANTALOUPE #bag-item {
		background-image: url( "../images/minigames/PAPER-BAG-CANTALOUPE.png" );
	}
	&#PAPER-BAG-GUACAMOLE #bag-item {
		background-image: url( "../images/minigames/PAPER-BAG-GUACAMOLE.png" );
	}
	&#PAPER-BAG-GREENS #bag-item {
		background-image: url( "../images/minigames/PAPER-BAG-GREENS.png" );
	}
	&#PAPER-BAG-GREENS #bag-item {
		background-image: url( "../images/minigames/PAPER-BAG-GREENS.png" );
	}
	&#PAPER-BAG-MUFFIN #bag-item {
		background-image: url( "../images/minigames/PAPER-BAG-MUFFIN.png" );
	}
	&#PAPER-BAG-STRAWBERRIES #bag-item {
		background-image: url( "../images/minigames/PAPER-BAG-STRAWBERRIES.png" );
	}
	&#PAPER-BAG-TOMATOES #bag-item {
		background-image: url( "../images/minigames/PAPER-BAG-TOMATOES.png" );
	}
}


@keyframes PAPER-BAG-bag-item-entrance {
	0% {
		top: -265px;
	}
	100% {
		top: 100px;
	}
}

@keyframes PAPER-BAG-put-item-in-bag {
	0% {
		top: 100px;
	}
	33% {
		top: 20px;
	}
	100% {
		top: 400px;
	}
}