<div class="card">
    <img src="/photos/amsterdam-cityscape/1.jpg" alt="Amsterdam cityscape" />
    <div class="gradient-overlay"></div>
    <div class="caption">A high-rise in Amsterdam Zuid</div>
</div>

<script type="module">
    import { animate, frame } from "https://cdn.jsdelivr.net/npm/motion@12.7.1/+esm"

    const card = document.querySelector(".card")
    const maxTilt = 15

    const tilt = {
        z: 0,
        rotateX: 0,
        rotateY: 0,
    }

    // Calculate tilt based on pointer position
    function calculateTilt(event) {
        const rect = card.getBoundingClientRect()
        tilt.z = -10
        const x = event.clientX - rect.left
        const y = event.clientY - rect.top

        // Convert coordinates to percentages
        const xPercent = x / rect.width
        const yPercent = y / rect.height

        tilt.rotateX = maxTilt * (0.5 - yPercent)
        tilt.rotateY = maxTilt * (xPercent - 0.5)
    }

    function animateToTilt() {
        animate(card, {
            transformPerspective: 500,
            rotateX: tilt.rotateX,
            rotateY: tilt.rotateY,
            z: tilt.z,
        })
    }

    function updateTilt(e) {
        calculateTilt(e)
        frame.postRender(animateToTilt)
    }

    card.addEventListener("pointerenter", updateTilt)
    card.addEventListener("pointermove", updateTilt)
    card.addEventListener("pointerleave", () => {
        tilt.z = 0
        tilt.rotateX = 0
        tilt.rotateY = 0
        frame.postRender(animateToTilt)
    })
</script>

<style>
    body {
        overflow: hidden;
    }
    .card {
        position: relative;
        width: 300px;
        height: 400px;
        border-radius: 20px;
        overflow: hidden;
        cursor: pointer;
        background: var(--layer);
        border: 1px solid var(--border);
        will-change: transform;
        transform-style: preserve-3d;
        perspective: 500px;
    }

    .card img {
        width: 100%;
        height: 100%;
        object-fit: cover;
        -webkit-touch-callout: none;
        -webkit-user-select: none;
        user-select: none;
        touch-action: none;
    }

    .gradient-overlay {
        position: absolute;
        bottom: 0;
        left: 0;
        right: 0;
        height: 120px;
        z-index: 1;
        background: linear-gradient(to top, rgba(0, 0, 0, 1), rgba(0, 0, 0, 0));
    }

    .caption {
        position: absolute;
        z-index: 2;
        bottom: 20px;
        left: 20px;
        right: 20px;
        color: #f5f5f5;
        font-size: 16px;
        line-height: 1.5;
        text-shadow: 0 1px 2px rgba(0, 0, 0, 0.5);
    }
</style>