Holographic Card

/* Add JS: document.querySelector('.hologram-card').addEventListener('mousemove', (e) => { const rect = e.target.getBoundingClientRect(); const x = (e.clientX - rect.left) / rect.width - 0.5; const y = (e.clientY - rect.top) / rect.height - 0.5; e.target.style.transform = `perspective(1000px) rotateY(${x * 10}deg) rotateX(${-y * 10}deg)`; }); */
.hologram-card {
  width: 350px;
  height: 250px;
  background: linear-gradient(135deg, rgba(255,255,255,0.1), rgba(255,255,255,0.05));
  backdrop-filter: blur(15px);
  -webkit-backdrop-filter: blur(15px);
  border: 1px solid rgba(255,255,255,0.18);
  border-radius: 20px;
  position: relative;
  overflow: hidden;
  transition: all 0.3s ease;
}
.hologram-card::before {
  content: '';
  position: absolute;
  top: 0;
  left: -100%;
  width: 100%;
  height: 100%;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,0.2), transparent);
  background: linear-gradient(90deg, #ff00cc, #3333ff, #00ffcc, #ff00cc);
  background-size: 400% 400%;
  opacity: 0.6;
  animation: hologram-shine 3s linear infinite;
  mix-blend-mode: lighten;
}
@keyframes hologram-shine {
  0% { background-position: 0% 50%; left: -100%; }
  100% { background-position: 400% 50%; left: 100%; }
}