.scanner-container { position: relative; width: 100%; max-width: 500px; margin: 0 auto; } .scanner-video { width: 100%; height: 350px; object-fit: cover; background: #000; border-radius: 10px; } .scanner-overlay { position: absolute; top: 0; left: 0; right: 0; bottom: 0; pointer-events: none; display: flex; align-items: center; justify-content: center; } .scanner-frame { width: 80%; height: 40%; border: 3px solid #4caf50; border-radius: 8px; box-shadow: 0 0 0 9999px rgba(0, 0, 0, 0.5); position: relative; animation: scan-pulse 2s infinite; } .scan-line { position: absolute; width: 100%; height: 2px; background: linear-gradient(90deg, transparent, #4caf50, transparent); animation: scan-line 2s linear infinite; } @keyframes scan-line { 0% { top: 0; } 50% { top: 100%; } 100% { top: 0; } } @keyframes scan-pulse { 0%, 100% { border-color: #4caf50; box-shadow: 0 0 0 9999px rgba(0, 0, 0, 0.5); } 50% { border-color: #66bb6a; box-shadow: 0 0 0 9999px rgba(0, 0, 0, 0.6), 0 0 20px rgba(76, 175, 80, 0.5); } }