/* Reset + Base */
* { margin: 0; padding: 0; box-sizing: border-box; }
body { font-family: 'Montserrat', sans-serif; color: #fff; overflow-x: hidden; height: 100vh; }

/* Background layers */
#gradient-bg {
  position: fixed; top: 0; left: 0; width: 100%; height: 100%;
  background: linear-gradient(270deg, #000, #111, #200020, #111, #000);
  background-size: 1000% 1000%;
  animation: gradientShift 40s ease infinite;
  z-index: -3;
}
#stars, #shapes {
  position: fixed; top: 0; left: 0; width: 100%; height: 100%;
}
#stars { z-index: -2; }
#shapes { z-index: -1; }

/* Content */
.container {
  position: relative;
  max-width: 800px;
  margin: 0 auto;
  padding: 120px 20px;
  text-align: center;
}
h1 {
  font-size: 3em;
  margin-bottom: 1em;
  background: linear-gradient(90deg, #ff0000, #ffd700, #ff0000);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  animation: glow 3s infinite alternate;
}
p.bio {
  font-size: 1.2em;
  line-height: 1.6;
  margin: 1.5em 0;
  opacity: 0;
  transform: translateY(30px);
  transition: all 1s ease;
}
.links {
  margin-top: 2em;
}
.links a {
  margin: 0 10px;
  text-decoration: none;
  color: #ffd700;
  font-weight: bold;
  transition: 0.3s;
}
.links a:hover {
  color: #ff0000;
  text-shadow: 0 0 10px #ff0000;
}

/* Animations */
@keyframes gradientShift {
  0% { background-position: 0% 50%; }
  50% { background-position: 100% 50%; }
  100% { background-position: 0% 50%; }
}
@keyframes glow {
  from { text-shadow: 0 0 10px #ff0000; }
  to { text-shadow: 0 0 20px #ffd700, 0 0 30px #ff0000; }
}

/* Animate on scroll */
[data-animate].show {
  opacity: 1;
  transform: translateY(0);
}