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

   Pixal Arts and Entertainment Animation Styles
   Author: Lucas Schiele
   Date:   11/26/2024

   Filename: paa_animate.css
   
   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: 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 no-repeat;
  background-size: cover;
  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 no-repeat;
  background-size: cover;
  animation: playSprite 1s 3s steps(33) 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 no-repeat;
  background-size: cover;
  animation: playSprite 3.5s 4s steps(27) 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%;}
}