/* Dark theme with purple-green accents */
:root {
  --purple: #6A1B9A;
  --green: #00C853;
  --dark-bg: #0A0A0A;
  --text-light: #E0E0E0;
  --gradient: linear-gradient(135deg, var(--purple), var(--green));
}

body {
  margin: 0;
  font-family: 'Arial', sans-serif;
  background: var(--dark-bg);
  color: var(--text-light);
  overflow-x: hidden;
  scroll-snap-type: y mandatory; /* Enables snap scrolling */
}

.section {
  height: 100vh;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  text-align: center;
  scroll-snap-align: start;
  position: relative;
  z-index: 5; /* Ensure sections are above background elements */
}

.section.active {
  opacity: 1;
}

/* Planet world with zoom support */
.planet {
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  z-index: 1; /* Stays behind content */
  transition: transform 0.1s linear; /* Faster transition for smoother scroll-follow */
  will-change: transform; /* Optimize for performance */
}

.planet img {
  width: 300px; /* Base size; scales up on zoom */
  height: auto;
  transition: transform-origin 0.1s linear;
}

/* Content overlay - Always on top */
.content {
  position: relative;
  z-index: 10; /* Highest z-index to ensure top layer */
  background: rgba(0, 0, 0, 0.7); /* Slight background for readability */
  padding: 2rem;
  border-radius: 8px;
  max-width: 600px;
  opacity: 1; /* Remove fade transition to avoid lag */
  transform: translateZ(0); /* Boost rendering layer */
}

h1, h2 {
  background: var(--gradient);
  background-clip: text; 
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

/* Shimmering and moving stars background */
.stars {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: transparent;
  pointer-events: none;
  z-index: 0;
}

.star {
  position: absolute;
  background: white;
  border-radius: 50%;
  animation: shimmer 2s infinite ease-in-out, drift 20s linear infinite; /* Add drift */
}

@keyframes shimmer {
  0%, 100% { opacity: 0.5; }
  50% { opacity: 1; }
}

@keyframes drift {
  0% { transform: translate(0, 0); }
  100% { transform: translate(calc(-10vw + 20vw * var(--rand-x)), calc(-10vh + 20vh * var(--rand-y))); } /* Random slow drift */
}

/* Shooting stars */
.shooting-star {
  position: absolute;
  width: 2px;
  height: 2px;
  background: white;
  border-radius: 50%;
  opacity: 0;
  animation: shoot 5s linear infinite;
  animation-delay: calc(var(--delay) * 1s);
}

@keyframes shoot {
  0% { transform: translate(var(--start-x), var(--start-y)); opacity: 0; }
  10% { opacity: 1; }
  100% { transform: translate(var(--end-x), var(--end-y)); opacity: 0; }
}

/* Button style */
.stake-button {
  display: inline-block;
  padding: 1rem 2rem;
  background: var(--gradient);
  color: white;
  text-decoration: none;
  border-radius: 8px;
  margin-top: 1rem;
  transition: transform 0.3s;
}

.stake-button:hover {
  transform: scale(1.05);
}

/* Header */
header {
  position: fixed;
  top: 0;
  width: 100%;
  background: rgba(0, 0, 0, 0.8);
  padding: 1rem;
  display: flex;
  justify-content: space-between;
  align-items: center;
  z-index: 10;
}

.logo img {
  height: 50px;
  width: auto;
}

nav a {
 color: var(--text-light);
 margin: 0 1rem;
 padding-right: 2rem;
 text-decoration: none;
 transition: color 0.3s;
 font-weight: 600;
}

nav a:hover {
  color: var(--green);
}

/* Responsive */
@media (max-width: 768px) {
  .planet img { width: 200px; }
  .content { max-width: 90%; }
}