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

   Pixal Arts and Entertainment Animation Styles
   Author: Jonnie Jucht
   Date:   11.26.2024

   Filename: 
   
   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: 0;
		width: 0%;
		height: 8px;
		background: linear-gradient(to right, rgb(237,243,71), rgb(188,74,0));
		border-radius: 4px;
		opacity: 0;
		transition: width 0.5s, opacity 0.5s;
	}
	nav#gameLinks a:hover::after {
		width: 100%;
		opacity: 1;
	}

/* Sprite Styles */

	div.sprite {
		position: absolute;
	}
	#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;
	}
	#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;
	}
	#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 {
		0% {background-position: left center;}
		100% {background-position: right center;}
	}
	@keyframes flyRight {
		25% {top: 150px;}
		50% {top: 55px;}
		65% {top: 120px;}
		90% {top: 50px}
		100% {top: 80px; left: 100%}
	}