.scan-field {
    position: absolute;
    inset: 0;
    z-index: 0;
    pointer-events: none;
    overflow: hidden;
    mix-blend-mode: screen;
    opacity: 0.92;
}

    .scan-field::before,
    .scan-field::after {
        content: "";
        position: absolute;
        inset: auto;
        border-radius: 50%;
        filter: blur(56px);
        opacity: 0.8;
    }

    .scan-field::before {
        width: 360px;
        height: 360px;
        left: -120px;
        top: -120px;
        background: rgba(116, 220, 255, 0.18);
        animation: scan-glow 18s ease-in-out infinite alternate;
    }

    .scan-field::after {
        width: 420px;
        height: 420px;
        right: -170px;
        bottom: -170px;
        background: rgba(141, 134, 255, 0.22);
        animation: scan-glow 24s ease-in-out infinite alternate-reverse;
    }

.scan-grid {
    position: absolute;
    inset: 0;
    background-image: linear-gradient(rgba(121, 219, 255, 0.12) 1px, transparent 1px), linear-gradient(90deg, rgba(121, 219, 255, 0.12) 1px, transparent 1px);
    background-size: 72px 72px;
    mask-image: radial-gradient(circle at center, black 52%, transparent 100%);
    opacity: 0.45;
    animation: grid-pan 28s linear infinite;
}

.scan-beam,
.bg-scan-card,
.scan-target {
    position: absolute;
    display: block;
    pointer-events: none;
    will-change: transform, opacity;
}

.scan-beam {
    background: linear-gradient( 90deg, rgba(121, 219, 255, 0), rgba(121, 219, 255, 0.96), rgba(121, 219, 255, 0) );
    box-shadow: 0 0 24px rgba(121, 219, 255, 0.65);
}

.beam-horizontal {
    left: -20%;
    right: -20%;
    height: 2px;
    top: 18%;
    animation: beam-slide-y 4.2s ease-in-out infinite;
}

.beam-vertical {
    top: -20%;
    bottom: -20%;
    width: 2px;
    left: 72%;
    background: linear-gradient( 180deg, rgba(121, 219, 255, 0), rgba(255, 255, 255, 0.9), rgba(121, 219, 255, 0) );
    animation: beam-slide-x 5.1s ease-in-out infinite;
}

.bg-scan-card {
    border-radius: 18px;
    border: 1px solid rgba(121, 219, 255, 0.28);
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.28), rgba(255, 255, 255, 0.08)), linear-gradient(180deg, rgba(19, 42, 76, 0.48), rgba(19, 42, 76, 0.24));
    box-shadow: 0 24px 40px rgba(19, 42, 76, 0.18), inset 0 1px 0 rgba(255, 255, 255, 0.22);
    backdrop-filter: blur(10px);
    overflow: hidden;
    animation: card-float var(--duration) ease-in-out infinite;
    animation-delay: var(--delay);
}

    .bg-scan-card::before {
        content: "";
        position: absolute;
        inset: 0;
        background: linear-gradient(90deg, rgba(121, 219, 255, 0.34), rgba(121, 219, 255, 0)), linear-gradient(180deg, rgba(255, 255, 255, 0.06), transparent);
        opacity: 0.9;
        clip-path: polygon(0 0, 100% 0, 100% 86%, 88% 100%, 0 100%);
    }

    .bg-scan-card::after {
        content: "";
        position: absolute;
        left: 12px;
        right: 12px;
        top: 14px;
        height: 58%;
        background: linear-gradient(90deg, rgba(255, 255, 255, 0.92) 0 34%, transparent 34% 100%) 0 0 / 100% 8px no-repeat, linear-gradient(90deg, rgba(255, 255, 255, 0.72) 0 52%, transparent 52% 100%) 0 18px / 100% 6px no-repeat, linear-gradient(90deg, rgba(121, 219, 255, 0.42) 0 64%, transparent 64% 100%) 0 34px / 100% 6px no-repeat, linear-gradient(90deg, rgba(255, 255, 255, 0.52) 0 44%, transparent 44% 100%) 0 50px / 100% 6px no-repeat;
        opacity: 0.9;
    }

.scan-target {
    width: 16px;
    height: 16px;
    border-radius: 50%;
    border: 1px solid rgba(121, 219, 255, 0.9);
    background: radial-gradient(circle, rgba(255, 255, 255, 0.95) 0 18%, transparent 19%);
    box-shadow: 0 0 0 8px rgba(121, 219, 255, 0.08), 0 0 18px rgba(121, 219, 255, 0.45);
    animation: target-pulse 2.6s ease-in-out infinite;
}

.card-a {
    left: 6vw;
    top: 18vh;
    width: 160px;
    height: 98px;
    --duration: 8s;
    --delay: -1s;
    --rotate: -12deg;
}

.card-b {
    right: 8vw;
    top: 16vh;
    width: 138px;
    height: 88px;
    --duration: 9s;
    --delay: -4s;
    --rotate: 8deg;
}

.card-c {
    left: 18vw;
    bottom: 12vh;
    width: 176px;
    height: 106px;
    --duration: 10s;
    --delay: -6s;
    --rotate: 14deg;
}

.card-d {
    right: 16vw;
    bottom: 20vh;
    width: 124px;
    height: 78px;
    --duration: 7s;
    --delay: -2s;
    --rotate: -8deg;
}

.target-a {
    left: 15vw;
    top: 10vh;
    animation-delay: -0.5s;
}

.target-b {
    right: 22vw;
    top: 28vh;
    animation-delay: -1.2s;
}

.target-c {
    left: 62vw;
    bottom: 14vh;
    animation-delay: -1.8s;
}
@keyframes scan-glow {
    from {
        transform: scale(0.95) translateY(0);
    }

    to {
        transform: scale(1.08) translateY(12px);
    }
}

@keyframes grid-pan {
    from {
        transform: translateY(0);
    }

    to {
        transform: translateY(72px);
    }
}

@keyframes beam-slide-y {
    0% {
        transform: translateY(0);
        opacity: 0.2;
    }

    50% {
        transform: translateY(420px);
        opacity: 1;
    }

    100% {
        transform: translateY(0);
        opacity: 0.2;
    }
}

@keyframes beam-slide-x {
    0% {
        transform: translateX(0);
        opacity: 0.18;
    }

    50% {
        transform: translateX(-360px);
        opacity: 1;
    }

    100% {
        transform: translateX(0);
        opacity: 0.18;
    }
}

@keyframes card-float {
    0%, 100% {
        transform: translateY(0) rotate(var(--rotate, 0deg));
        opacity: 0.34;
    }

    50% {
        transform: translateY(-18px) rotate(var(--rotate, 0deg));
        opacity: 0.76;
    }
}

@keyframes target-pulse {
    0%, 100% {
        transform: scale(0.92);
        opacity: 0.72;
    }

    50% {
        transform: scale(1.15);
        opacity: 1;
    }
}