ANIMATION: 3d-flip-cards
NAME: Flip Cards
CATEGORY: 3D

DESCRIPTION: Cards that flip 180 degrees on click to reveal back content. Uses CSS preserve-3d and backface-visibility to create a smooth two-sided card effect. The flip animation uses a cubic-bezier easing for a natural feel.

IMPLEMENTATION RULES:
- Native browser APIs only — no external libraries
- Use useRef + useEffect with proper cleanup (cancelAnimationFrame, removeEventListener)
- Use CSS perspective, rotateX/Y/Z, preserve-3d, translateZ for 3D transforms
- Performance: use will-change on animated elements, prefer CSS transitions over JS animation when possible
- Responsive: reduce 3D intensity on mobile (smaller perspective values)

CODE EXAMPLE:
function FlipCard({ front, back }) {
  const [flipped, setFlipped] = React.useState(false);
  return (
    <div onClick={() => setFlipped(!flipped)} style={{ perspective: "800px", cursor: "pointer", width: "280px", height: "360px" }}>
      <div style={{
        position: "relative", width: "100%", height: "100%",
        transformStyle: "preserve-3d",
        transform: flipped ? "rotateY(180deg)" : "rotateY(0deg)",
        transition: "transform 0.6s cubic-bezier(0.4, 0, 0.2, 1)"
      }}>
        <div style={{ position: "absolute", inset: 0, backfaceVisibility: "hidden", borderRadius: "12px", padding: "1.5rem" }}>{front}</div>
        <div style={{ position: "absolute", inset: 0, backfaceVisibility: "hidden", transform: "rotateY(180deg)", borderRadius: "12px", padding: "1.5rem" }}>{back}</div>
      </div>
    </div>
  );
}