Cyberpunk Neon Pass 3D

<!--
  Author: @codepeek
  License: MIT
  Tags: #buttons #css #interface #opensource #codepeek
-->
<div class="ticket-wrapper-463"><div class="ticket-463"><div class="t-main"><div class="t-content"><div class="t-header"><div class="t-logo"><svg viewBox="0 0 24 24"><path d="M12 2L2 7l10 5 10-5-10-5zM2 17l10 5 10-5M2 12l10 5 10-5"/></svg> SYNTAX</div><span class="t-type">DEV PASS</span></div><h2 class="t-title">CYBER HACK</h2><p class="t-subtitle">Global Developer Conference 2026</p><div class="t-details"><div class="t-detail-item"><span class="t-label">ATTENDEE</span><span class="t-value">Alex Mercer</span></div><div class="t-detail-item"><span class="t-label">DATE</span><span class="t-value">NOV 12, 2026</span></div><div class="t-detail-item"><span class="t-label">ZONE</span><span class="t-value">Sector 7G</span></div><div class="t-detail-item"><span class="t-label">GATE</span><span class="t-value">A-04</span></div></div></div></div><div class="t-perforation"><div class="t-perf-line"></div></div><div class="t-stub"><div class="t-barcode-container"><div class="t-barcode"></div><span class="t-barcode-id">SYN-8809-X9</span></div><div class="t-admit"><span class="t-admit-text">SEAT</span><div class="t-admit-num">42</div></div></div></div></div>

/*
 * Author: @codepeek
 * License: MIT
 * Tags: #buttons #css #interface #opensource #codepeek
 */

.ticket-wrapper-463 { --t-bg: #0f0a1c; --t-bg-light: #1b122f; --t-accent: #a855f7; --t-accent-glow: rgba(168, 85, 247, 0.5); font-size: 10px; perspective: 1000px; display: inline-block; }
.ticket-wrapper-463 .ticket-463 { position: relative; width: 22em; color: #f8fafc; font-family: system-ui, sans-serif; transform-style: preserve-3d; transition: transform 0.6s cubic-bezier(0.23, 1, 0.32, 1), box-shadow 0.6s ease; filter: drop-shadow(0px 0px 10px rgba(0,0,0,0.5)); }
.ticket-wrapper-463:hover .ticket-463 { transform: rotateX(8deg) rotateY(-12deg) scale(1.03); }
.ticket-463 .t-main { padding: 2em; position: relative; overflow: hidden; background: radial-gradient(circle at bottom left, transparent 1em, var(--t-bg) 1.05em), radial-gradient(circle at bottom right, transparent 1em, var(--t-bg) 1.05em); background-size: 51% 100%; background-position: bottom left, bottom right; background-repeat: no-repeat; border-top-left-radius: 1em; border-top-right-radius: 1em; border: 1px solid rgba(168, 85, 247, 0.3); border-bottom: none; }
.ticket-463 .t-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 1.5em; }
.ticket-463 .t-logo { display: flex; align-items: center; gap: 0.5em; font-weight: 900; font-size: 1.2em; fill: var(--t-accent); }
.ticket-463 .t-logo svg { width: 1.5em; height: 1.5em; stroke: var(--t-accent); stroke-width: 2; fill: none; }
.ticket-463 .t-type { font-size: 0.6em; letter-spacing: 0.2em; color: var(--t-accent); border: 1px solid var(--t-accent); padding: 0.4em 0.8em; border-radius: 99em; font-weight: 700; }
.ticket-463 .t-title { font-size: 2.2em; font-weight: 900; margin: 0; color: #f3e8ff; text-shadow: 0 0 10px var(--t-accent-glow); }
.ticket-463 .t-subtitle { color: #94a3b8; font-size: 0.85em; margin: 0.2em 0 1.8em 0; }
.ticket-463 .t-details { display: grid; grid-template-columns: 1fr 1fr; gap: 1em; }
.ticket-463 .t-label { font-size: 0.6em; color: #6b21a8; font-weight: 800; display: block; }
.ticket-463 .t-value { font-size: 1em; font-weight: 700; color: #e9d5ff; }
.ticket-463 .t-perforation { display: flex; height: 1em; align-items: center; background: var(--t-bg); }
.ticket-463 .t-perf-line { flex-grow: 1; border-top: 2px dashed rgba(168, 85, 247, 0.4); margin: 0 1em; }
.ticket-463 .t-stub { padding: 1.5em 2em; background: radial-gradient(circle at top left, transparent 1em, var(--t-bg-light) 1.05em), radial-gradient(circle at top right, transparent 1em, var(--t-bg-light) 1.05em); background-size: 51% 100%; background-position: top left, top right; background-repeat: no-repeat; border-bottom-left-radius: 1em; border-bottom-right-radius: 1em; border: 1px solid rgba(168, 85, 247, 0.3); border-top: none; display: flex; justify-content: space-between; align-items: center; }
.ticket-463 .t-barcode { width: 9em; height: 2.5em; background: repeating-linear-gradient(90deg, #d8b4fe 0, #d8b4fe 2px, transparent 2px, transparent 4px, #d8b4fe 4px, #d8b4fe 7px, transparent 7px, transparent 9px); }
.ticket-463 .t-barcode-id { font-family: monospace; font-size: 0.65em; color: #94a3b8; display: block; margin-top: 0.3em; }
.ticket-463 .t-admit-num { font-size: 2.2em; font-weight: 900; color: var(--t-accent); text-shadow: 0 0 10px var(--t-accent-glow); }