.css-scanner{
  --card-width:320px;
  --card-height:200px;
  --scan-gap:30px;
  --half-gap:15px;
  position:relative;
  height:360px;
  overflow:hidden;
  isolation:isolate;
  border-block:1px solid #dfe3ef;

}
.css-scanner::before{
  position:absolute;
  inset:-30%;
  z-index:0;
  background:
    radial-gradient(circle at 15% 30%,rgba(105,87,245,.35) 0 1px,transparent 2px),
    radial-gradient(circle at 65% 70%,rgba(78,192,206,.3) 0 1px,transparent 2px),
    radial-gradient(circle at 85% 20%,rgba(105,87,245,.24) 0 1.5px,transparent 2.5px);
  background-size:58px 58px,76px 76px,96px 96px;
  content:"";
  animation:scannerDust 18s linear infinite;
  pointer-events:none;
}
.scanner-layer{
  position:absolute;
  inset:0;
  z-index:1;
  overflow:hidden;
  pointer-events:none;
}
.scanner-layer--original{clip-path:inset(0 0 0 50%)}
.scanner-layer--changed{clip-path:inset(0 50% 0 0)}
.scanner-track{
  position:absolute;
  top:50%;
  left:0;
  display:flex;
  width:max-content;
  gap:var(--scan-gap);
  animation:cardTravel 38s linear infinite;
  will-change:transform;
}
.css-scanner:hover .scanner-track{animation-play-state:paused}
.scanner-card{
  width:var(--card-width);
  height:var(--card-height);
  overflow:hidden;
  flex:0 0 auto;
  border:4px solid rgba(255,255,255,.92);
  border-radius:18px;
  background:#fff;
  box-shadow:0 18px 42px rgba(35,29,71,.2);
}
.scanner-card img{width:100%;height:100%;object-fit:cover}
.scanner-layer--changed .scanner-card{
  border-color:rgba(54,253,100,.92);
  box-shadow:0 18px 46px rgba(54,253,218,.24);
}
.scanner-layer--changed .scanner-card img{filter:saturate(1.08) contrast(1.04)}
.scanner-beam{
  position:absolute;
  top:20px;
  bottom:20px;
  left:50%;
  z-index:5;
  width:4px;
  border-radius:99px;
  background:rgba(54,253,100,.92);

  
  transform:translateX(-50%);
  pointer-events:none;
}
.scanner-beam::before{
  position:absolute;
  top:0;
  bottom:0;
  left:50%;
  width:90px;
  background:linear-gradient(90deg,transparent,rgba(105,87,245,.1),transparent);
  content:"";
  transform:translateX(-50%);
}
.scanner-side-label{
  position:absolute;
  bottom:20px;
  z-index:6;
  border:1px solid rgba(23,23,28,.1);
  border-radius:999px;
  padding:8px 12px;
  background:rgba(255,255,255,.78);
  color:#696873;
  font:700 11px/1 "DM Sans",sans-serif;
  letter-spacing:.08em;
  text-transform:uppercase;
  backdrop-filter:blur(10px);
}
.scanner-side-label--changed{left:20px;color:#5140da}
.scanner-side-label--original{right:20px}
@keyframes cardTravel{
  from{transform:translate3d(0,-50%,0)}
  to{transform:translate3d(calc(-50% - var(--half-gap)),-50%,0)}
}
@keyframes scannerDust{
  to{transform:translate3d(10%,4%,0)}
}
@media(max-width:620px){
  .css-scanner{--card-width:260px;--card-height:162px;--scan-gap:20px;--half-gap:10px;height:300px}
  .scanner-card{border-width:3px;border-radius:15px}
  .scanner-side-label{bottom:14px}
  .scanner-side-label--changed{left:14px}
  .scanner-side-label--original{right:14px}
}
@media(prefers-reduced-motion:reduce){
  .scanner-track,.css-scanner::before{animation-play-state:paused}
}