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

   Pixal Arts and Entertainment Animation Styles
   Author: Kyle Snyder
   Date:   12/2/24

   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 ease-out;
}

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

nav#gameLinks a::after {
   content: "";
   position: absolute;
   top: 100%;
   left: 0px;
   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 linear,
   width 0.5s linear;
}

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


/* Sprite Styles */
div.sprite {
   position: absolute;

}

div#butterfly {
   width: 35px;
   height: 35px;
   top: 60px;
   left: -50px;
   background: url('paa_bfly.png') left center / no-repeat content-box;
   border: 1px  solid red;
   animation: playSprite 1s linear 3s steps(33) infinite,
   flyRight 6s linear infinite;
}

div#bat {
   width: 40px;
   height: 50px;
   top: 100px;
   left: 50px;
   background: url("paa_bat.png") left center / 100% no-repeat content-box;
   /*background: url("hexagon-pattern-2657990_1280.png") top left / 20% repeat content-box; /* https://pixabay.com/illustrations/hexagon-pattern-pattern-hexagon-2657990/ I edited it to make it darker*/
   border: 1px solid red;
   
   animation: playSprite 3.5s linear 4s steps(39) 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 / 100% no-repeat content-box content-box;
   
   animation: playSprite 3.5s linear 4s steps(27) infinite;

}

/* Animation Styles */

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

@keyframes playSprite 
{
   100% {background: url('paa_bat.png') right center / 100% no-repeat content-box content-box;}
}