/* === Base Styles === */
body {
  background-color: #000;
  color: #fff;
  font-family: 'Impact', sans-serif;
  text-align: center;
  margin: 0;
  padding: 0;
  overflow-x: hidden;
}

header {
  background: linear-gradient(to right, #ff004f, #ff9900);
  padding: 60px 20px;
  text-shadow: 2px 2px 10px #000;
}

header h1 {
  font-size: 3em;
  margin-bottom: 10px;
}

header p {
  font-size: 1.5em;
}

/* === Gallery Section === */
.gallery {
  position: relative;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  padding: 40px 20px;
  background-color: #111;
}

.gallery img {
  width: 90%;
  max-width: 300px;
  height: auto;
  aspect-ratio: 3 / 2;
  object-fit: cover;
  margin: 15px auto;
  border: 5px solid #fff;
  box-shadow: 0 0 25px hotpink;
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.gallery img:hover {
  transform: scale(1.05);
  box-shadow: 0 0 40px red;
}

/* === Eagle Wrapper === */
.eagle-wrapper {
  position: relative;
  width: 100%;
  height: 250px; /* Gives the eagle room to fly */
  overflow: visible;
  margin: 40px 0;
}


.fly-eagle {
  position: absolute;
  top: 50%;
  left: -300px;
  width: 250px;
  transform: translateY(-50%);
  animation: eagleFly 12s linear infinite;
  pointer-events: none;
}



@keyframes eagleFly {
  0% {
    transform: translateY(-100px) rotate(10deg);
    left: -200px;
  }
  25% {
    transform: translateY(0px) rotate(0deg);
    left: 25%;
  }
  50% {
    transform: translateY(100px) rotate(-10deg);
    left: 50%;
  }
  75% {
    transform: translateY(0px) rotate(0deg);
    left: 75%;
  }
  100% {
    transform: translateY(-100px) rotate(10deg);
    left: 110%;
  }
}


/* === Bio Section === */
.bio {
  max-width: 600px;
  margin: 120px auto 40px;
  padding: 20px;
  background-color: #222;
  color: #fff;
  text-align: center;
  border-top: 2px solid #fff;
  box-shadow: 0 0 20px #ff004f;
  line-height: 1.6;
}

.bio h2 {
  font-size: 2em;
  margin-bottom: 20px;
  text-align: center;
  color: #ff9900;
}

.bio ul {
  list-style-position: inside;
  text-align: center;
  padding-left: 0;
  margin: 10px auto;
}

.bio li {
  margin-bottom: 8px;
}

/* === Fireworks Canvas === */
#fireworksCanvas {
  position: fixed;
  top: 0;
  left: 0;
  z-index: 0;
  pointer-events: none;
}

/* === Mobile Tweaks === */
@media (max-width: 600px) {
  .fly-eagle {
    width: 50vw;
    animation: none;
  }

  .bio {
    margin-top: 60px;
  }

  .gallery img {
    margin: 10px auto;
  }
}