class HeroGrid {
  constructor() {
    this.heroGrid = document.querySelector('.hero-grid');
    this.heroEl = document.getElementById('hero');
    if (!this.heroGrid || !this.heroEl) return;
    this.gx = 0;
    this.gy = 0;
    this.tx = 0;
    this.ty = 0;
    this.mouseInHero = false;
    document.addEventListener('mousemove', e => this.onMouseMove(e));
    this.lerp();
  }

  onMouseMove(e) {
    const heroRect = this.heroEl.getBoundingClientRect();
    const gridRect = this.heroGrid.getBoundingClientRect();
    const activeTop = heroRect.top + heroRect.height * 0.3;
    if (e.clientY >= activeTop && e.clientY <= heroRect.bottom) {
      this.mouseInHero = true;
      this.tx = e.clientX - gridRect.left;
      this.ty = e.clientY - gridRect.top;
    } else {
      this.mouseInHero = false;
      this.tx = gridRect.width / 2;
      this.ty = gridRect.height * 0.3;
    }
  }

  lerp() {
    this.gx += (this.tx - this.gx) * 0.08;
    this.gy += (this.ty - this.gy) * 0.08;
    this.heroGrid.style.setProperty('--mx', this.gx + 'px');
    this.heroGrid.style.setProperty('--my', this.gy + 'px');
    requestAnimationFrame(() => this.lerp());
  }
}
