.scan-mark { position: relative; display: block; aspect-ratio: 1; isolation: isolate; }
.scan-mark-piece {
  position: absolute; inset: 0; display: block;
  background: url("/M.png?v=1") center / 144% auto no-repeat;
  filter: url("#scan-mark-extract");
  opacity: 0.1; will-change: opacity;
  animation: scan-mark-pulse 1.8s steps(1, end) infinite;
}
.scan-mark-piece:nth-child(1)  { clip-path: inset(0 75% 75% 0); animation-delay: 0ms; }
.scan-mark-piece:nth-child(2)  { clip-path: inset(0 50% 75% 25%); animation-delay: 62ms; }
.scan-mark-piece:nth-child(3)  { clip-path: inset(0 25% 75% 50%); animation-delay: 124ms; }
.scan-mark-piece:nth-child(4)  { clip-path: inset(0 0 75% 75%); animation-delay: 186ms; }
.scan-mark-piece:nth-child(5)  { clip-path: inset(25% 75% 50% 0); animation-delay: 248ms; }
.scan-mark-piece:nth-child(6)  { clip-path: inset(25% 50% 50% 25%); animation-delay: 310ms; }
.scan-mark-piece:nth-child(7)  { clip-path: inset(25% 25% 50% 50%); animation-delay: 372ms; }
.scan-mark-piece:nth-child(8)  { clip-path: inset(25% 0 50% 75%); animation-delay: 434ms; }
.scan-mark-piece:nth-child(9)  { clip-path: inset(50% 75% 25% 0); animation-delay: 496ms; }
.scan-mark-piece:nth-child(10) { clip-path: inset(50% 50% 25% 25%); animation-delay: 558ms; }
.scan-mark-piece:nth-child(11) { clip-path: inset(50% 25% 25% 50%); animation-delay: 620ms; }
.scan-mark-piece:nth-child(12) { clip-path: inset(50% 0 25% 75%); animation-delay: 682ms; }
.scan-mark-piece:nth-child(13) { clip-path: inset(75% 75% 0 0); animation-delay: 744ms; }
.scan-mark-piece:nth-child(14) { clip-path: inset(75% 50% 0 25%); animation-delay: 806ms; }
.scan-mark-piece:nth-child(15) { clip-path: inset(75% 25% 0 50%); animation-delay: 868ms; }
.scan-mark-piece:nth-child(16) { clip-path: inset(75% 0 0 75%); animation-delay: 930ms; }

@keyframes scan-mark-pulse {
  0%, 8% { opacity: 0.1; }
  22%, 44% { opacity: 1; }
  58%, 100% { opacity: 0.1; }
}

@media (prefers-reduced-motion: reduce) {
  .scan-mark-piece { animation: none; opacity: 1; }
}