/*
	New Perspectives on HTML and CSS, 8th Edition
	Chapter 8
	Case Problem 2

	Pixal Arts and Entertainment Animation Styles

	Author: Chris LaFleur
	Date: 11/26/23

	Sprite animation is created using the paa_bat.png, 
	paa_bfly.png, and paa_fox.png image files.

	paa_bat.png has 40 frames
	paa_bfly.png has 34 frames
	paa_fox.png has 28 frames
*/


/* Transition Effects */

nav#gameLinks a{
	position: relative;
	color: white;
	transition: color 0.5s;
}

nav#gameLinks a:hover{
	color: rgb(255, 194, 99);
}

nav#gameLinks a::after{
	content: "";
	position: absolute;
	top: 100%;
	left: 1px;
	width: 0%;
	height: 8px;
	background: linear-gradient(to right, rgb(237, 243, 71), rgb(188, 74, 0));
	border-radius: 4px;
	opacity: 0;
	transition: opacity 0.5s,
				width 0.5s;
}

nav#gameLinks a:hover::after{
	opacity: 1;
	width: 100%;
}


/* Sprite Styles */

div.sprite{
	position: absolute;
}

div#bat{
	width: 40px;
	height: 50px;
	top: 100px;
	left: -50px;
	background: url(paa_bat.png) left center / cover no-repeat;
	animation: playSprite 2s steps(39) infinite,
				flyRight 8s linear infinite;
}

div#butterfly{
	width: 35px;
	height: 35px;
	top: 60px;
	left: -50px;
	background: url(paa_bfly.png) left center / cover no-repeat;
	animation: playSprite 1s steps(33) 3s infinite,
				flyRight 6s cubic-bezier(0,1,0.73,0) infinite;
}

div#fox{
	width: 280px;
	height: 260px;
	bottom: 10px;
	right: 10px;
	background: url(paa_fox.png) left center / cover no-repeat;
	animation: playSprite 3.5s steps(27) 4s infinite;
}


/* Animation Styles */

@keyframes playSprite{
	100% 	{background-position: right center;}
}

@keyframes flyRight{
	25% 	{top: 150px;}
	50% 	{top: 55px;}
	65% 	{top: 120px;}
	90% 	{top: 50px;}
	100% 	{top: 80px; left: 100%;}
}