Deep Violet Cinema Pass 3D

<!--
  Author: @codepeek
  License: MIT
  Tags: #buttons #css #interface #opensource #codepeek
-->
<div class="ticket-wrapper-472"><div class="ticket-472"><div class="t-main"><div class="t-content"><div class="t-header"><div class="t-logo">🎬 CINEMA</div><span class="t-type">PREMIERE</span></div><h2 class="t-title">AVATAR 3</h2><p class="t-subtitle">Exclusive Red Carpet Premiere</p><div class="t-details"><div class="t-detail-item"><span class="t-label">GUEST</span><span class="t-value">David Miller</span></div><div class="t-detail-item"><span class="t-label">DATE</span><span class="t-value">DEC 20, 2026</span></div><div class="t-detail-item"><span class="t-label">CINEMA</span><span class="t-value">IMAX Dome</span></div><div class="t-detail-item"><span class="t-label">SEAT</span><span class="t-value">Row F - 14</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">IMAX-2026-VIP</span></div><div class="t-admit"><span class="t-admit-text">HALL</span><div class="t-admit-num">01</div></div></div></div></div>

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

.ticket-wrapper-472 { --t-bg: #11071f; --t-bg-light: #200e38; --t-accent: #c084fc; --t-accent-glow: rgba(192, 132, 252, 0.5); font-size: 10px; perspective: 1000px; display: inline-block; }
.ticket-472 { position: relative; width: 22em; color: #fff; font-family: system-ui, sans-serif; transform-style: preserve-3d; transition: transform 0.6s cubic-bezier(0.23, 1, 0.32, 1); filter: drop-shadow(0 15px 30px rgba(192, 132, 252, 0.25)); }
.ticket-wrapper-472:hover .ticket-472 { transform: rotateX(-10deg) rotateY(12deg) scale(1.03); }
.ticket-472 .t-main { padding: 2em; 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(192, 132, 252, 0.4); border-bottom: none; }
.ticket-472 .t-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 1.5em; }
.ticket-472 .t-logo { font-weight: 900; font-size: 1.1em; color: #e9d5ff; }
.ticket-472 .t-type { font-size: 0.6em; border: 1px solid var(--t-accent); color: #f3e8ff; padding: 0.3em 0.8em; border-radius: 99em; font-weight: 800; background: rgba(192, 132, 252, 0.15); }
.ticket-472 .t-title { font-size: 2.3em; font-weight: 900; margin: 0; color: #faf5ff; text-shadow: 0 0 10px var(--t-accent-glow); }
.ticket-472 .t-subtitle { color: #9333ea; font-size: 0.85em; margin: 0.2em 0 1.8em 0; font-weight: 600; }
.ticket-472 .t-details { display: grid; grid-template-columns: 1fr 1fr; gap: 1em; }
.ticket-472 .t-label { font-size: 0.6em; color: #7e22ce; font-weight: 800; display: block; }
.ticket-472 .t-value { font-size: 1.05em; font-weight: 700; color: #f3e8ff; }
.ticket-472 .t-perforation { display: flex; height: 1em; align-items: center; background: var(--t-bg); }
.ticket-472 .t-perf-line { flex-grow: 1; border-top: 2px dashed rgba(192, 132, 252, 0.4); margin: 0 1.2em; }
.ticket-472 .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(192, 132, 252, 0.4); border-top: none; display: flex; justify-content: space-between; align-items: center; }
.ticket-472 .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-472 .t-barcode-id { font-family: monospace; font-size: 0.65em; color: #9333ea; display: block; margin-top: 0.3em; }
.ticket-472 .t-admit-text { font-size: 0.6em; color: #9333ea; font-weight: 800; display: block; }
.ticket-472 .t-admit-num { font-size: 2.2em; font-weight: 900; color: var(--t-accent); text-shadow: 0 0 10px var(--t-accent-glow); }