GSAP Flip Card Modal

<div class="gfcm-card" id="gfcm-card">
  <div class="gfcm-front" id="gfcm-front"><h3>Click to flip</h3></div>
  <div class="gfcm-back" id="gfcm-back">
    <h3>Modal View</h3>
    <p>Full content here</p>
    <button class="gfcm-close" id="gfcm-close">Back</button>
  </div>
</div>

.gfcm-card {
  width: 240px;
  height: 160px;
  perspective: 800px;
  cursor: pointer;
}
.gfcm-front, .gfcm-back {
  position: absolute;
  width: 100%;
  height: 100%;
  backface-visibility: hidden;
  border-radius: 16px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  color: #e2e8f0;
}
.gfcm-front { background: #312e81; }
.gfcm-back {
  background: #1e293b;
  transform: rotateY(180deg);
}
.gfcm-front h3, .gfcm-back h3 { margin: 0 0 8px; font-size: 18px; }
.gfcm-back p { margin: 0 0 16px; font-size: 13px; opacity: 0.7; }
.gfcm-close {
  padding: 8px 20px;
  background: #334155;
  color: #e2e8f0;
  border: none;
  border-radius: 6px;
  font-size: 13px;
  font-family: inherit;
  cursor: pointer;
}

const card = document.getElementById('gfcm-card');
const front = document.getElementById('gfcm-front');
const back = document.getElementById('gfcm-back');
const closeBtn = document.getElementById('gfcm-close');
let flipped = false;
front.addEventListener('click', function() {
  if (flipped) return;
  flipped = true;
  gsap.to(front, { rotationY: 180, duration: 0.6, ease: 'power2.inOut' });
  gsap.to(back, { rotationY: 360, duration: 0.6, ease: 'power2.inOut' });
});
closeBtn.addEventListener('click', function(e) {
  e.stopPropagation();
  flipped = false;
  gsap.to(front, { rotationY: 0, duration: 0.6, ease: 'power2.inOut' });
  gsap.to(back, { rotationY: 180, duration: 0.6, ease: 'power2.inOut' });
});