.card-scan{position:relative;width:100%;max-width:520px;margin:0 auto;aspect-ratio:100 / 90;container-type:inline-size}.card-scan::before{content:"";position:absolute;inset:4cqw 2cqw 0;border-radius:50%;background:radial-gradient(closest-side, rgba(255,255,255,0.14), transparent)}.card-scan__card{position:absolute;left:0;top:34cqw;width:62cqw;aspect-ratio:85.6 / 54;overflow:hidden;border-radius:3cqw;background:#fff;box-shadow:0 3cqw 6cqw rgba(3,12,32,0.45);transform:rotate(-3deg)}.card-scan__card-band{display:flex;align-items:center;height:8cqw;padding:0 3.5cqw;background:linear-gradient(135deg, #1f478a, #122850);color:#fff;font-size:2.3cqw;font-weight:600;letter-spacing:0.04em;text-transform:uppercase;white-space:nowrap}.card-scan__card-body{display:flex;align-items:center;gap:3cqw;height:calc(100% - 8cqw);padding:0 3.5cqw}.card-scan__card-member{display:flex;flex:1;flex-direction:column;min-width:0}.card-scan__card-name{margin-top:1.6cqw;color:#111827;font-size:3.3cqw;font-weight:600;line-height:1.2;white-space:nowrap}.card-scan__card-line{color:#6b7280;font-size:2.2cqw;line-height:1.5;white-space:nowrap}.card-scan__card-qr{flex-shrink:0;width:17cqw;height:17cqw}.card-scan__card-qr svg,.card-scan__camera-qr svg{display:block}.card-scan__avatar{display:flex;align-items:center;justify-content:center;width:8.5cqw;height:8.5cqw;border-radius:50%;background:#dde7f6;color:#19386d;font-size:3cqw;font-weight:600}.card-scan__avatar--lg{width:11cqw;height:11cqw;margin-top:4cqw;font-size:3.8cqw}.card-scan__phone{position:absolute;left:66cqw;top:0;width:32cqw;height:64cqw;padding:1.3cqw;border-radius:5.5cqw;background:#0f172a;box-shadow:0 0 0 0.35cqw #334155,0 4cqw 8cqw rgba(3,12,32,0.5);transform:rotate(5deg);animation:card-scan-phone 9s ease-in-out infinite}.card-scan__phone::before{content:"";position:absolute;z-index:2;top:2.4cqw;left:50%;width:8cqw;height:1.8cqw;border-radius:1cqw;background:#0f172a;transform:translateX(-50%)}.card-scan__phone::after{content:"";position:absolute;inset:0;border-radius:inherit;opacity:0;animation:card-scan-ping 9s ease-out infinite}.card-scan__screen{position:relative;width:100%;height:100%;overflow:hidden;border-radius:4.2cqw;background:#fff}.card-scan__layer{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;text-align:center}.card-scan__layer--idle{justify-content:center;gap:2.5cqw;padding:0 3cqw;opacity:0;animation:card-scan-idle 9s ease-in-out infinite}.card-scan__layer--camera{justify-content:center;background:radial-gradient(circle at 50% 45%, #334155, #0b1220 75%);opacity:0;animation:card-scan-camera 9s ease-in-out infinite}.card-scan__layer--result{animation:card-scan-result 9s ease-in-out infinite}.card-scan__app-title{position:absolute;top:6cqw;left:0;right:0;color:#122850;font-size:2.5cqw;font-weight:600}.card-scan__idle-icon{display:flex;align-items:center;justify-content:center;width:15cqw;height:15cqw;border-radius:50%;background:#dde7f6;color:#1f478a}.card-scan__idle-icon svg{width:8cqw;height:8cqw}.card-scan__idle-text{color:#4b5563;font-size:2.2cqw;line-height:1.35}.card-scan__viewfinder{position:relative;width:22cqw;height:22cqw;color:#fff;background:linear-gradient(currentColor, currentColor) top left/4.5cqw 0.6cqw no-repeat,linear-gradient(currentColor, currentColor) top left/0.6cqw 4.5cqw no-repeat,linear-gradient(currentColor, currentColor) top right/4.5cqw 0.6cqw no-repeat,linear-gradient(currentColor, currentColor) top right/0.6cqw 4.5cqw no-repeat,linear-gradient(currentColor, currentColor) bottom left/4.5cqw 0.6cqw no-repeat,linear-gradient(currentColor, currentColor) bottom left/0.6cqw 4.5cqw no-repeat,linear-gradient(currentColor, currentColor) bottom right/4.5cqw 0.6cqw no-repeat,linear-gradient(currentColor, currentColor) bottom right/0.6cqw 4.5cqw no-repeat;animation:card-scan-viewfinder 9s ease-in-out infinite}.card-scan__camera-qr{position:absolute;inset:2.6cqw;padding:1cqw;border-radius:0.8cqw;background:#fff}.card-scan__laser{position:absolute;left:1.2cqw;right:1.2cqw;top:10%;height:0.5cqw;border-radius:0.5cqw;background:#4ade80;box-shadow:0 0 2cqw 0.6cqw rgba(74,222,128,0.6);opacity:0;animation:card-scan-laser 9s linear infinite}.card-scan__camera-hint{position:absolute;bottom:7cqw;left:0;right:0;color:rgba(255,255,255,0.8);font-size:2.1cqw}.card-scan__verdict{display:flex;align-items:center;justify-content:center;gap:1.2cqw;width:100%;padding:6.5cqw 0 3cqw;background:#5aa93d;color:#fff;font-size:3cqw;font-weight:700;letter-spacing:0.06em}.card-scan__verdict svg{width:3.6cqw;height:3.6cqw}.card-scan__result-name{margin-top:1.6cqw;color:#111827;font-size:2.9cqw;font-weight:600}.card-scan__facts{display:flex;flex-direction:column;width:100%;margin-top:2.6cqw;padding:0 3cqw}.card-scan__fact{display:flex;justify-content:space-between;padding:1.2cqw 0;border-bottom:1px solid #eeeeee;color:#6b7280;font-size:2.1cqw}.card-scan__fact strong{color:#111827;font-weight:600}.card-scan__stamp{margin-top:2.6cqw;color:#9ca3af;font-size:1.9cqw}@keyframes card-scan-phone{0%,10%{transform:translate(0, 0) rotate(5deg)}24%,52%{transform:translate(-32cqw, 24.5cqw) rotate(-3deg)}64%,88%{transform:translate(-10cqw, 3cqw) rotate(0deg)}100%{transform:translate(0, 0) rotate(5deg)}}@keyframes card-scan-idle{0%,14%{opacity:1}18%,92%{opacity:0}97%,100%{opacity:1}}@keyframes card-scan-camera{0%,15%{opacity:0}19%,54%{opacity:1}57%,100%{opacity:0}}@keyframes card-scan-result{0%,54%{opacity:0;transform:translateY(6%)}58%,90%{opacity:1;transform:translateY(0)}94%,100%{opacity:0;transform:translateY(0)}}@keyframes card-scan-laser{0%,23%{top:10%;opacity:0}25%{top:10%;opacity:1}37%{top:86%}49%{top:10%;opacity:1}51%,100%{top:10%;opacity:0}}@keyframes card-scan-viewfinder{0%,49%{color:#fff;transform:scale(1)}51%{color:#4ade80;transform:scale(1.08)}54%{color:#4ade80;transform:scale(1)}57%,100%{color:#fff;transform:scale(1)}}@keyframes card-scan-ping{0%,50%{opacity:0;box-shadow:0 0 0 0 rgba(74,222,128,0.7)}51%{opacity:1;box-shadow:0 0 0 0 rgba(74,222,128,0.7)}60%,100%{opacity:0;box-shadow:0 0 0 5cqw rgba(74,222,128,0)}}@media (prefers-reduced-motion: reduce){.card-scan__phone,.card-scan__phone::after,.card-scan__layer,.card-scan__viewfinder,.card-scan__laser{animation:none}}
