GSAP Color Morph Hover

<div class="gcmh-card" id="gcmh-card">
  <h3>Color Morph</h3>
  <p>Hover me</p>
</div>

.gcmh-card {
  width: 240px;
  padding: 40px 32px;
  background: #1e293b;
  border-radius: 16px;
  color: #e2e8f0;
  text-align: center;
  cursor: pointer;
}
.gcmh-card h3 { margin: 0 0 8px; font-size: 18px; }
.gcmh-card p { margin: 0; font-size: 12px; opacity: 0.5; }

const card = document.getElementById('gcmh-card');
card.addEventListener('mouseenter', function() {
  gsap.to(card, {
    background: 'linear-gradient(135deg, #312e81, #6366f1)',
    duration: 0.6,
    ease: 'power2.out'
  });
});
card.addEventListener('mouseleave', function() {
  gsap.to(card, {
    background: '#1e293b',
    duration: 0.6,
    ease: 'power2.out'
  });
});