script.js

const canvas = document.getElementById('galaxy');
const ctx = canvas.getContext('2d');
let width = canvas.width = window.innerWidth;
let height = canvas.height = window.innerHeight;

// Resize canvas on window resize
window.addEventListener('resize', () => {
  width = canvas.width = window.innerWidth;
  height = canvas.height = window.innerHeight;
});

// Mouse position
let mouseX = width / 2;
let mouseY = height / 2;

window.addEventListener('mousemove', (e) => {
  mouseX = e.clientX;
  mouseY = e.clientY;
});

window.addEventListener('click', (e) => {
  createShootingStar(e.clientX, e.clientY);
});

// Star class
class Star {
  constructor(layer) {
    this.x = Math.random() * width;
    this.y = Math.random() * height;
    this.size = Math.random() * 2 * (3 - layer);
    this.opacity = Math.random() * 0.8 + 0.2;
    this.twinkleSpeed = Math.random() * 0.02 + 0.005;
    this.twinkleOffset = Math.random() * Math.PI * 2;
    this.layer = layer; // 1 = far, 2 = mid, 3 = near
  }

  update() {
    // Parallax effect based on mouse and layer
    const dx = (mouseX - width / 2) * (this.layer * 0.05);
    const dy = (mouseY - height / 2) * (this.layer * 0.05);

    this.x += (this.x - width / 2 + dx) * 0.0001 * this.layer;
    this.y += (this.y - height / 2 + dy) * 0.0001 * this.layer;

    // Wrap around screen
    if (this.x < 0) this.x = width;
    if (this.x > width) this.x = 0;
    if (this.y < 0) this.y = height;
    if (this.y > height) this.y = 0;
  }

  draw() {
    const alpha = (Math.sin(Date.now() * this.twinkleSpeed + this.twinkleOffset) + 1) * 0.5 * this.opacity;
    ctx.globalAlpha = alpha;
    ctx.fillStyle = 'white';
    ctx.beginPath();
    ctx.arc(this.x, this.y, this.size, 0, Math.PI * 2);
    ctx.fill();
    ctx.globalAlpha = 1;
  }
}

// Shooting Star
function createShootingStar(x, y) {
  const star = {
    x,
    y,
    length: 0,
    speed: 15,
    angle: Math.random() * 0.2 + 0.1,
    direction: Math.random() > 0.5 ? 1 : -1,
    life: 30
  };

  const animate = () => {
    ctx.globalCompositeOperation = 'lighter';
    ctx.strokeStyle = 'rgba(255, 255, 255, 0.8)';
    ctx.lineWidth = 2;
    ctx.beginPath();
    ctx.moveTo(star.x, star.y);
    const nx = star.x + Math.cos(star.angle) * star.direction * star.length;
    const ny = star.y + Math.sin(star.angle) * star.direction * star.length;
    ctx.lineTo(nx, ny);
    ctx.stroke();
    ctx.globalCompositeOperation = 'source-over';

    star.length += star.speed;
    star.life--;

    if (star.life > 0) {
      requestAnimationFrame(animate);
    }
  };
  animate();
}

// Create stars
const stars = [];
for (let layer = 1; layer <= 3; layer++) {
  const count = layer === 1 ? 200 : layer === 2 ? 100 : 50;
  for (let i = 0; i < count; i++) {
    stars.push(new Star(layer));
  }
}

// Draw constellations
const constellations = [
  [{ x: 0.1, y: 0.2 }, { x: 0.2, y: 0.5 }, { x: 0.3, y: 0.3 }, { x: 0.4, y: 0.7 }],
  [{ x: 0.7, y: 0.1 }, { x: 0.8, y: 0.4 }, { x: 0.9, y: 0.2 }],
  [{ x: 0.5, y: 0.8 }, { x: 0.6, y: 0.6 }, { x: 0.75, y: 0.9 }, { x: 0.9, y: 0.7 }]
];

function drawConstellations() {
  ctx.strokeStyle = 'rgba(255, 255, 255, 0.2)';
  ctx.lineWidth = 1;
  constellations.forEach(stars => {
    ctx.beginPath();
    stars.forEach((point, i) => {
      const x = point.x * width + (mouseX - width / 2) * 0.02;
      const y = point.y * height + (mouseY - height / 2) * 0.02;
      if (i === 0) ctx.moveTo(x, y);
      else ctx.lineTo(x, y);
    });
    ctx.stroke();
  });
}

// Animation loop
function animate() {
  ctx.clearRect(0, 0, width, height);

  // Draw deep space gradient background
  const gradient = ctx.createRadialGradient(width/2, height/2, 0, width/2, height/2, width);
  gradient.addColorStop(0, '#111');
  gradient.addColorStop(1, '#000');
  ctx.fillStyle = gradient;
  ctx.fillRect(0, 0, width, height);

  stars.forEach(star => {
    star.update();
    star.draw();
  });

  drawConstellations();

  requestAnimationFrame(animate);
}

animate();