3D Holographic Rainbow Foil Card & Web3 Showcase

<!DOCTYPE html>
<html lang="en" class="h-full dark">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>3D Holographic Rainbow Foil Card & Collectible Showcase</title>
    <link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&family=Outfit:wght@600;700;800&display=swap" rel="stylesheet">
    <script src="https://cdn.tailwindcss.com"></script>
    <style>
        body {
            margin: 0;
            height: 100vh;
            overflow: hidden;
            font-family: 'Outfit', sans-serif;
            background: radial-gradient(circle at center, #0f172a 0%, #020617 100%);
            perspective: 1100px;
        }
        .holo-card {
            width: 330px;
            height: 460px;
            border-radius: 28px;
            position: relative;
            transform-style: preserve-3d;
            transition: transform 0.12s ease-out;
            box-shadow: 0 30px 60px -12px rgba(6, 182, 212, 0.35), 0 0 0 1px rgba(255,255,255,0.18);
            overflow: hidden;
        }
        .holo-glare {
            position: absolute;
            inset: 0;
            background: linear-gradient(125deg,
                rgba(255, 0, 128, 0.35) 0%,
                rgba(0, 255, 255, 0.35) 35%,
                rgba(255, 255, 0, 0.28) 65%,
                rgba(128, 0, 255, 0.38) 100%);
            mix-blend-mode: color-dodge;
            opacity: 0.65;
            pointer-events: none;
            transition: background-position 0.1s ease;
        }
    </style>
</head>
<body class="text-white flex flex-col items-center justify-center select-none p-4">

    <div class="text-center mb-6 space-y-1">
        <span class="px-3 py-1 rounded-full bg-cyan-500/15 text-cyan-300 text-xs font-bold uppercase tracking-wider border border-cyan-500/30">
            ✨ 3D Specular Foil Shader
        </span>
        <h1 class="text-2xl sm:text-3xl font-extrabold text-white">3D Holographic Collector Card</h1>
        <p class="text-xs text-slate-400">Move mouse or touch across the card to bend 3D rainbow light</p>
    </div>

    <!-- 3D Holographic Card -->
    <div id="holoCard" class="holo-card bg-gradient-to-br from-slate-900 via-indigo-950 to-slate-950 p-6 flex flex-col justify-between cursor-pointer">
        <div id="holoGlare" class="holo-glare"></div>

        <!-- Top Card Header -->
        <div class="relative z-10 flex items-center justify-between">
            <span class="px-3 py-1 rounded-full bg-white/10 backdrop-blur-md text-xs font-bold text-cyan-300 border border-white/20">
                ⚡ MYTHIC EDITION #001
            </span>
            <span class="font-mono font-extrabold text-lg text-amber-400">★ 99</span>
        </div>

        <!-- Center 3D Floating Emblem -->
        <div class="relative z-10 my-auto flex flex-col items-center text-center space-y-3">
            <div class="w-28 h-28 rounded-3xl bg-gradient-to-tr from-cyan-400 via-blue-500 to-purple-600 flex items-center justify-center text-6xl shadow-2xl shadow-cyan-500/40 border border-white/40">
                🐉
            </div>
            <h2 class="text-2xl font-extrabold tracking-tight text-white">CYBER DRAGON ALPHA</h2>
            <p class="text-xs text-slate-300 font-sans leading-relaxed px-2">
                Forged in WebGL shaders with dynamic iridescent foil refraction and 3D perspective tilt physics.
            </p>
        </div>

        <!-- Bottom Stats Bar -->
        <div class="relative z-10 grid grid-cols-3 gap-2 pt-4 border-t border-white/15 text-center">
            <div class="bg-black/30 rounded-xl p-2">
                <div class="text-[10px] text-slate-400">ATTACK</div>
                <div class="font-bold text-sm text-cyan-300">9,850</div>
            </div>
            <div class="bg-black/30 rounded-xl p-2">
                <div class="text-[10px] text-slate-400">DEFENSE</div>
                <div class="font-bold text-sm text-emerald-300">9,400</div>
            </div>
            <div class="bg-black/30 rounded-xl p-2">
                <div class="text-[10px] text-slate-400">RARITY</div>
                <div class="font-bold text-sm text-amber-300">HOLO 3D</div>
            </div>
        </div>
    </div>

    <script>
        const card = document.getElementById('holoCard');
        const glare = document.getElementById('holoGlare');

        window.addEventListener('pointermove', (e) => {
            const rect = card.getBoundingClientRect();
            const cx = rect.left + rect.width / 2;
            const cy = rect.top + rect.height / 2;
            const dx = (e.clientX - cx) / (rect.width / 2);
            const dy = (e.clientY - cy) / (rect.height / 2);

            const rotY = Math.max(-22, Math.min(22, dx * 18));
            const rotX = Math.max(-22, Math.min(22, -dy * 18));

            card.style.transform = `rotateY(${rotY}deg) rotateX(${rotX}deg) scale3d(1.03, 1.03, 1.03)`;
            glare.style.background = `radial-gradient(circle at ${(dx + 1) * 50}% ${(dy + 1) * 50}%, rgba(255,255,255,0.55), rgba(6,182,212,0.35), rgba(168,85,247,0.35), transparent 70%)`;
        });

        window.addEventListener('pointerleave', () => {
            card.style.transform = 'rotateY(0deg) rotateX(0deg) scale3d(1,1,1)';
        });
    </script>
</body>
</html>

/* Built-in 3D WebGL & Glassmorphic Shaders included in index.html */

// Complete Three.js 3D scene, camera, lighting, and pointer controls included