TITLE: Lumen Moth — Holo Rare
PROMPT: Build a single self-contained HTML page presenting one holographic trading card for a fictional creature on a dark pedestal. Page background: layered radial gradients from #241547 through #1b1030 to #0a0616, with a fixed multiply/overlay grain layer of 1px repeating lines and 5px dot patterns, and a pink glow that tracks the pointer via --mx/--my custom properties. Layout: centred column — a monospace uppercase eyebrow "NEOFAUNA · SERIES II · HOLO" with hairline rules; a stage with perspective 1400px containing a softly floating 3:4 card (width min(74vw, 288px), aspect-ratio 3/4) over a blurred teal/pink elliptical pedestal glow; below the card three stat tiles (POWER 84 PWR, RESILIENCE 61 RES, SPEED 92 SPD) and a holo-level meter that fills to 93% on hover; a monospace hint line. The card has two faces with backface-visibility hidden: the front holds an SVG Lumen Moth — four translucent wings with pink-gold-teal linear gradients, darker inner wings, gold eyespots with rings, vein strokes, scale ellipses, a segmented white-teal abdomen, four legs, curved antennae, black eyes with teal glints, and a glowing thorax orb — plus a name plate in Georgia small-caps with a gradient-clipped fill, a subtitle line and an animated "HOLO RARE" pill badge (system-ui 800, 260% gradient background scrolling over 5.5s). Three blend-mode layers over the front do the foil: a 270% linear rainbow sweep in color-dodge whose background-position is driven by --mx/--my, a conic rainbow in overlay whose angle is driven by --rot, and a screen-mode radial glare that follows the pointer. Eighteen twinkling sparkles are scattered inside the art window. The back face shows lore copy, three scaleX stat bars, a lumen-output row, "EDITION 001 / 500" and a deterministic 9x9 QR-like block. Palette: #1b1030 deep purple, #ff5c8a holo pink, #5eead4 holo teal, #ffd166 gold, #f8fafc white.
DESCRIPTION: A single collectible card treated like a physical object: it floats, casts a coloured light pool, and its foil moves like real foil because three blended gradient layers track the pointer's position and the card's rotation. Tilting sweeps the rainbow across the wings; clicking flips the card to its field notes and stat bars; dragging pushes the tilt much further for inspection; the holo meter charges on hover.
TECHNIQUES: preserve-3d tilt with CSS custom properties (--rx/--ry/--rz/--flip/--mx/--my/--rot) eased in a rAF loop; backface-visibility two-sided card; layered mix-blend-mode color-dodge, overlay and screen gradients for the foil sheen; gradient-clipped small-caps display type; embossed gradient border via double background-clip (padding-box + border-box); inset shadows for the frame emboss; inline SVG creature with CSS-styled gradient stops; rAF sparkle particles with gravity; pointer capture for drag inspection.
INTERACTION: Moving the pointer over the stage tilts the card and sweeps the foil, glare and conic sheen across it; clicking (or Enter/Space on the focused card) flips it to the back with the lore, stat bars, edition line and QR block; pressing and dragging tilts up to about 30 degrees with a slight roll for inspection; hovering the card charges the holo-level meter from 34% to 93%; pressing space anywhere fires a 22-particle sparkle burst from the card. Reduced motion stops the float, badge shimmer, sparkle twinkle and flip transition.