Emerald Matrix Code Pass 3D

<!--
  Author: @codepeek
  License: MIT
  Tags: #buttons #css #interface #opensource #codepeek
-->
<div class="ticket-wrapper-464"><div class="ticket-464"><div class="t-main"><div class="t-content"><div class="t-header"><div class="t-logo">> ROOT_SYS</div><span class="t-type">LEVEL 5</span></div><h2 class="t-title">ZERO_DAY</h2><p class="t-subtitle">Cyber Security Conference 2026</p><div class="ticket-info-grid"><div class="info-cell"><span class="lbl">AGENT</span><span class="val">Neo Vance</span></div><div class="info-cell"><span class="lbl">DATE</span><span class="val">DEC 01, 2026</span></div><div class="info-cell"><span class="lbl">NODE</span><span class="val">Sub-Level 04</span></div><div class="info-cell"><span class="lbl">KEY</span><span class="val">0x88F2A</span></div></div></div></div><div class="t-perforation"><div class="t-perf-line"></div></div><div class="t-stub"><div class="t-barcode-wrap"><div class="t-barcode"></div><span class="t-barcode-id">SEC-9901-X</span></div><div class="seat-badge"><span class="lbl">ACCESS</span><strong class="val">101</strong></div></div></div></div>

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

.ticket-wrapper-464 { font-size: 10px; perspective: 1000px; display: inline-block; }
.ticket-464 { width: 22em; background: transparent; font-family: monospace; color: #22c55e; transition: transform 0.5s cubic-bezier(0.2, 0.8, 0.2, 1); transform-style: preserve-3d; filter: drop-shadow(0 15px 25px rgba(0,0,0,0.8)); }
.ticket-wrapper-464:hover .ticket-464 { transform: rotateX(-10deg) rotateY(15deg) scale(1.02); }
.ticket-464 .t-main { padding: 2em; background: radial-gradient(circle at bottom left, transparent 1em, #020d06 1.05em), radial-gradient(circle at bottom right, transparent 1em, #020d06 1.05em); background-size: 51% 100%; background-position: bottom left, bottom right; background-repeat: no-repeat; border: 1px solid rgba(34, 197, 94, 0.4); border-top-left-radius: 1em; border-top-right-radius: 1em; }
.ticket-464 .t-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 1.5em; }
.ticket-464 .t-logo { font-weight: 900; font-size: 1.2em; color: #4ade80; }
.ticket-464 .t-type { font-size: 0.6em; border: 1px solid #22c55e; color: #86efac; padding: 0.3em 0.6em; border-radius: 4px; }
.ticket-464 .t-title { font-size: 2.2em; font-weight: 900; margin: 0; color: #f0fdf4; text-shadow: 0 0 8px rgba(34,197,94,0.6); }
.ticket-464 .t-subtitle { font-size: 0.8em; color: #15803d; margin: 0.2em 0 1.5em 0; }
.ticket-464 .ticket-info-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 1em; }
.ticket-464 .lbl { font-size: 0.6em; color: #166534; display: block; font-weight: bold; }
.ticket-464 .val { font-size: 1.1em; color: #bbf7d0; font-weight: bold; }
.ticket-464 .t-perforation { display: flex; height: 1em; align-items: center; background: #020d06; }
.ticket-464 .t-perf-line { flex-grow: 1; border-top: 2px dashed rgba(34, 197, 94, 0.4); margin: 0 1em; }
.ticket-464 .t-stub { padding: 1.5em 2em; background: radial-gradient(circle at top left, transparent 1em, #052e16 1.05em), radial-gradient(circle at top right, transparent 1em, #052e16 1.05em); background-size: 51% 100%; background-position: top left, top right; background-repeat: no-repeat; border: 1px solid rgba(34, 197, 94, 0.4); border-bottom-left-radius: 1em; border-bottom-right-radius: 1em; display: flex; justify-content: space-between; align-items: center; }
.ticket-464 .t-barcode { width: 9em; height: 2.5em; background: repeating-linear-gradient(90deg, #22c55e 0, #22c55e 2px, transparent 2px, transparent 5px, #22c55e 5px, #22c55e 7px); }
.ticket-464 .t-barcode-id { font-size: 0.6em; color: #166534; display: block; margin-top: 0.3em; }
.ticket-464 .seat-badge .val { font-size: 2.2em; color: #22c55e; }