.workflow-beam-root, .workflow-beam-root * { box-sizing: border-box; } .workflow-beam-root { background: transparent; width: 100%; height: min(70vh, 640px); min-height: 480px; max-height: 800px; overflow: hidden; font-family: "JetBrains Mono", ui-monospace, monospace; font-size: 13px; color: var(--text, #d4fce0); position: relative; border-radius: 10px; --beam-y: 40%; } .workflow-beam-root .container { position: relative; width: 100%; height: 100%; display: flex; align-items: center; justify-content: center; } .workflow-beam-root .card-stream { position: absolute; top: var(--beam-y); transform: translateY(-50%); width: 100%; height: 180px; display: flex; align-items: center; overflow: visible; pointer-events: none; cursor: default; } .workflow-beam-root .card-line { display: flex; align-items: center; gap: 60px; white-space: nowrap; cursor: default; user-select: none; will-change: transform; pointer-events: none; } .workflow-beam-root .card-line:active { cursor: default; } .workflow-beam-root .card-line.dragging { cursor: default; } .workflow-beam-root .card-line.css-animated { animation: scrollCards 40s linear infinite; } @keyframes scrollCards { 0% { transform: translateX(-100%); } 100% { transform: translateX(100%); } } .workflow-beam-root .card-wrapper { position: relative; width: 400px; height: 250px; flex-shrink: 0; } .workflow-beam-root .card { position: absolute; top: 0; left: 0; width: 400px; height: 250px; border-radius: 15px; overflow: hidden; } .workflow-beam-root .card-normal { background: transparent; box-shadow: 0 15px 40px rgba(0, 0, 0, 0.55), 0 0 32px var(--glow-xs, rgba(0, 255, 65, 0.08)); display: flex; flex-direction: column; justify-content: space-between; padding: 0; color: var(--text, #d4fce0); z-index: 2; position: relative; overflow: hidden; } .workflow-beam-root .card-image { width: 100%; height: 100%; object-fit: cover; border-radius: 15px; transition: all 0.3s ease; filter: brightness(1.1) contrast(1.1); box-shadow: inset 0 0 20px rgba(0, 0, 0, 0.1); } .workflow-beam-root .card-image:hover { filter: brightness(1.1) contrast(1.1); } .workflow-beam-root .card-ascii { background: transparent; z-index: 1; position: absolute; top: 0; left: 0; width: 400px; height: 250px; border-radius: 15px; overflow: hidden; } .workflow-beam-root .card-chip { width: 40px; height: 30px; background: linear-gradient(135deg, var(--g, #00ff41), var(--g2, #00cc33)); border-radius: 5px; position: relative; margin-bottom: 20px; box-shadow: 0 0 12px var(--glow-sm, rgba(0, 255, 65, 0.15)); } .workflow-beam-root .card-chip::before { content: ""; position: absolute; top: 3px; left: 3px; right: 3px; bottom: 3px; background: linear-gradient(135deg, rgba(0, 255, 65, 0.35), rgba(0, 180, 50, 0.5)); border-radius: 2px; } .workflow-beam-root .contactless { position: absolute; top: 60px; left: 20px; width: 25px; height: 25px; border: 2px solid var(--border2, rgba(0, 255, 65, 0.45)); border-radius: 50%; background: radial-gradient(circle, var(--glow-xs, rgba(0, 255, 65, 0.12)), transparent); } .workflow-beam-root .contactless::after { content: ""; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); width: 15px; height: 15px; border: 1px solid rgba(0, 255, 65, 0.45); border-radius: 50%; } .workflow-beam-root .card-number { font-size: 22px; font-weight: bold; letter-spacing: 3px; margin-bottom: 15px; color: var(--text, #d4fce0); text-shadow: 0 0 14px var(--glow-xs, rgba(0, 255, 65, 0.12)); } .workflow-beam-root .card-info { display: flex; justify-content: space-between; align-items: flex-end; } .workflow-beam-root .card-holder { color: var(--text, #d4fce0); font-size: 14px; text-transform: uppercase; } .workflow-beam-root .card-expiry { color: var(--dim, rgba(212, 252, 224, 0.55)); font-size: 14px; } .workflow-beam-root .card-logo { position: absolute; top: 20px; right: 20px; font-size: 18px; font-weight: bold; color: var(--g, #00ff41); text-shadow: 0 0 12px var(--glow-sm, rgba(0, 255, 65, 0.15)); } .workflow-beam-root .ascii-content { position: absolute; top: 0; left: 0; width: 100%; height: 100%; color: var(--dim, rgba(212, 252, 224, 0.5)); font-family: "JetBrains Mono", monospace; font-size: 11px; line-height: 13px; overflow: hidden; white-space: pre; clip-path: inset(0 calc(100% - var(--clip-left, 0%)) 0 0); animation: glitch 0.1s infinite linear alternate-reverse; margin: 0; padding: 0; text-align: left; vertical-align: top; box-sizing: border-box; -webkit-mask-image: linear-gradient( to right, rgba(0, 0, 0, 1) 0%, rgba(0, 0, 0, 0.8) 30%, rgba(0, 0, 0, 0.6) 50%, rgba(0, 0, 0, 0.4) 80%, rgba(0, 0, 0, 0.2) 100% ); mask-image: linear-gradient( to right, rgba(0, 0, 0, 1) 0%, rgba(0, 0, 0, 0.8) 30%, rgba(0, 0, 0, 0.6) 50%, rgba(0, 0, 0, 0.4) 80%, rgba(0, 0, 0, 0.2) 100% ); } @keyframes glitch { 0% { opacity: 1; } 15% { opacity: 0.9; } 16% { opacity: 1; } 49% { opacity: 0.8; } 50% { opacity: 1; } 99% { opacity: 0.9; } 100% { opacity: 1; } } .workflow-beam-root .scanner { display: none; position: absolute; left: 50%; top: var(--beam-y); transform: translate(-50%, -50%); width: 4px; height: 300px; border-radius: 30px; background: linear-gradient( to bottom, transparent, rgba(0, 255, 65, 0.55), var(--g, #00ff41), rgba(0, 255, 65, 0.55), transparent ); box-shadow: 0 0 20px var(--glow, rgba(0, 255, 65, 0.45)), 0 0 40px var(--glow-sm, rgba(0, 255, 65, 0.15)); animation: scanPulse 2s ease-in-out infinite alternate; z-index: 10; } @keyframes scanPulse { 0% { opacity: 0.8; transform: translate(-50%, -50%) scaleY(1); } 100% { opacity: 1; transform: translate(-50%, -50%) scaleY(1.1); } } .workflow-beam-root .scanner-label { position: absolute; bottom: -40px; left: 50%; transform: translateX(-50%); color: var(--g, #00ff41); font-size: 12px; font-weight: bold; text-transform: uppercase; letter-spacing: 2px; text-shadow: 0 0 10px var(--glow-sm, rgba(0, 255, 65, 0.2)); } .workflow-beam-root .card-normal { clip-path: inset(0 0 0 var(--clip-right, 0%)); } .workflow-beam-root .card-ascii { clip-path: inset(0 calc(100% - var(--clip-left, 0%)) 0 0); } .workflow-beam-root .scan-effect { position: absolute; top: 0; left: 0; width: 100%; height: 100%; background: linear-gradient( 90deg, transparent, rgba(0, 255, 65, 0.35), transparent ); animation: scanEffect 0.6s ease-out; pointer-events: none; z-index: 5; } @keyframes scanEffect { 0% { transform: translateX(-100%); opacity: 0; } 50% { opacity: 1; } 100% { transform: translateX(100%); opacity: 0; } } .workflow-beam-root .instructions { position: absolute; top: 50%; right: 30px; transform: translateY(-50%); color: var(--dim, rgba(212, 252, 224, 0.55)); font-size: 14px; max-width: 200px; text-align: right; z-index: 5; } .workflow-beam-root #particleCanvas, .workflow-beam-root #scannerCanvas { background: transparent; } .workflow-beam-root #particleCanvas { position: absolute; top: var(--beam-y); left: 0; transform: translateY(-50%); width: 100%; height: 250px; z-index: 0; pointer-events: none; } .workflow-beam-root #scannerCanvas { position: absolute; top: var(--beam-y); left: -3px; transform: translateY(-50%); width: 100%; height: 300px; z-index: 15; pointer-events: none; }