/* The status is emitted only after the detector reaches the end of the file. */
.scan-caption {
  align-items: center;
  background: var(--ink, #141416);
  bottom: auto;
  color: #7be1cc;
  display: flex;
  gap: 10px;
  padding: 12px 15px;
  right: 138px !important;
  text-align: center;
  top: 270px;
  width: 320px;
  opacity: 0;
  animation: detector-status 12s linear infinite;
  transform: rotate(-3deg);
  z-index: 5;
}

.scan-caption .pulse { background: #7be1cc; flex: 0 0 11px; height: 11px; margin: 0; width: 11px; }
.scan-caption strong { display: block; font: 600 17px/.95 'DM Mono', monospace; letter-spacing: -.055em; white-space: nowrap; }
.scan-caption small { color: #d2f8ef; display: block; font: 9px 'DM Mono', monospace; letter-spacing: .025em; margin-top: 5px; }

.scan-line { animation: scan-slow 12s linear infinite; }
.revealed-identity { animation: reveal-identity-slow 12s linear infinite; }
.confidential-document::before {
  animation: scanned-area-fade 12s linear infinite;
  background: rgba(255, 255, 255, .78);
  content: '';
  height: 0;
  left: 0;
  pointer-events: none;
  position: absolute;
  right: 0;
  top: 0;
  z-index: 1;
}

.confidential-document .hidden-identity { z-index: 0; }

@keyframes detector-status {
  0%, 57% { opacity: 0; }
  58%, 63% { opacity: 1; }
  64%, 66% { opacity: 0; }
  67%, 72% { opacity: 1; }
  73%, 75% { opacity: 0; }
  76%, 81% { opacity: 1; }
  82%, 84% { opacity: 0; }
  85%, 90% { opacity: 1; }
  91%, 93% { opacity: 0; }
  94%, 99% { opacity: 1; }
  99%, 100% { opacity: 0; }
}

@keyframes scan-slow {
  0%, 10% { opacity: 0; top: 0; }
  13% { opacity: 1; }
  55% { opacity: 1; top: 342px; }
  58%, 100% { opacity: 0; top: 342px; }
}

@keyframes reveal-identity-slow {
  0%, 15% { clip-path: inset(0 0 100% 0); opacity: 0; }
  15.1% { clip-path: inset(0 0 100% 0); opacity: .78; }
  55% { clip-path: inset(0 0 2% 0); opacity: .78; }
  58%, 100% { clip-path: inset(0 0 2% 0); opacity: 0; }
}

@keyframes scanned-area-fade {
  0%, 10% { height: 0; opacity: 0; }
  13% { height: 15px; opacity: 1; }
  55% { height: 357px; opacity: 1; }
  58%, 100% { height: 357px; opacity: 0; }
}

@media (max-width: 520px) {
  .scan-caption { left: 50%; padding: 8px 10px; right: auto !important; top: 215px; transform: translateX(-50%) rotate(-3deg); width: 220px; }
  .scan-caption strong { font-size: 10px; }
  .scan-caption small { font-size: 6px; margin-top: 3px; }
  .scan-caption .pulse { flex-basis: 7px; height: 7px; width: 7px; }
  .scan-line { animation-name: scan-mobile; }
  .revealed-identity { animation-name: reveal-identity-mobile; }
  .confidential-document::before { animation-name: scanned-area-fade-mobile; }
}

@keyframes scan-mobile {
  0%, 10% { opacity: 0; top: 0; }
  13% { opacity: 1; }
  55% { opacity: 1; top: 254px; }
  58%, 100% { opacity: 0; top: 254px; }
}

@keyframes reveal-identity-mobile {
  0%, 16% { clip-path: inset(0 0 100% 0); opacity: 0; }
  16.1% { clip-path: inset(0 0 100% 0); opacity: .78; }
  55% { clip-path: inset(0 0 0 0); opacity: .78; }
  58%, 100% { clip-path: inset(0 0 0 0); opacity: 0; }
}

@keyframes scanned-area-fade-mobile {
  0%, 10% { height: 0; opacity: 0; }
  13% { height: 15px; opacity: 1; }
  55% { height: 269px; opacity: 1; }
  58%, 100% { height: 269px; opacity: 0; }
}