.tilt-card {
width: 320px;
padding: 36px 28px;
border-radius: 24px;
background: linear-gradient(135deg, rgba(255, 255, 255, 0.1), rgba(255, 255, 255, 0.02));
border: 1px solid rgba(255, 255, 255, 0.2);
backdrop-filter: blur(20px);
-webkit-backdrop-filter: blur(20px);
box-shadow: 0 30px 60px rgba(0, 0, 0, 0.6);
transform-style: preserve-3d;
text-align: center;
cursor: pointer;
transition: transform 0.15s ease-out, box-shadow 0.25s, border-color 0.25s;
}
.tilt-card:hover {
box-shadow: 0 35px 80px rgba(0, 240, 255, 0.3), 0 0 30px rgba(147, 51, 234, 0.35);
border-color: rgba(0, 240, 255, 0.5);
}
const card = document.getElementById('tiltCard');
let maxTilt = 18;
let scaleVal = 1.05;
card.addEventListener('mousemove', (e) => {
const rect = card.getBoundingClientRect();
const x = e.clientX - rect.left - rect.width / 2;
const y = e.clientY - rect.top - rect.height / 2;
const rotateX = -(y / (rect.height / 2)) * maxTilt;
const rotateY = (x / (rect.width / 2)) * maxTilt;
card.style.transform = `perspective(1000px) rotateX(${rotateX}deg) rotateY(${rotateY}deg) scale(${scaleVal})`;
});
card.addEventListener('mouseleave', () => {
card.style.transform = 'perspective(1000px) rotateX(0deg) rotateY(0deg) scale(1)';
});