/*
 * scanner.css — "SCANNING FOR CHECK VALIDITY…"
 * Success is a full sweep with a green stamp. Failure judders out at ~90%.
 * The evil variant (the machine checks YOU) is the same choreography in blood red.
 */

#scanner {
  position: absolute; inset: 0;
  z-index: 70;
  display: none;
  border-radius: 8px;
  overflow: hidden;
  background: rgba(4,8,18,.78);
  backdrop-filter: blur(3px);
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  cursor: pointer;
}
#scanner.on { display: block; }
#scanner.evil { background: rgba(28,4,6,.80); }

/* the sweeping bar */
#scan-bar {
  position: absolute; left: 0; right: 0; height: 22%;
  background: linear-gradient(180deg, transparent, rgba(74,222,128,.30), rgba(74,222,128,.06), transparent);
  box-shadow: 0 0 24px rgba(74,222,128,.45);
  will-change: transform;
}
#scanner.evil #scan-bar {
  background: linear-gradient(180deg, transparent, rgba(248,113,113,.32), rgba(248,113,113,.06), transparent);
  box-shadow: 0 0 24px rgba(248,113,113,.5);
}
#scanner.on #scan-bar { animation: scanSweep var(--sweep, 1400ms) linear infinite; }
#scanner.evil.on #scan-bar { animation-direction: reverse; }
@keyframes scanSweep { from { transform: translateY(-30%) } to { transform: translateY(460%) } }

/* scanline texture */
#scanner::after {
  content: ''; position: absolute; inset: 0; pointer-events: none;
  background: repeating-linear-gradient(0deg, rgba(255,255,255,.05) 0 1px, transparent 1px 3px);
}

.scan-inner {
  position: absolute; inset: 0;
  display: flex; flex-direction: column; justify-content: center;
  padding: 6% 7%;
  gap: .35rem;
  z-index: 2;
}
.scan-title {
  font-size: clamp(.65rem, 1.9vw, .92rem);
  letter-spacing: .14em;
  color: #86efac;
  text-transform: uppercase;
}
#scanner.evil .scan-title { color: #fca5a5; }

.scan-progress {
  height: 8px; border-radius: 4px;
  background: rgba(255,255,255,.10);
  overflow: hidden;
  margin: .3rem 0 .55rem;
}
.scan-progress > i {
  display: block; height: 100%; width: 0%;
  background: linear-gradient(90deg, #22c55e, #86efac);
  transition: width .12s linear;
}
#scanner.evil .scan-progress > i { background: linear-gradient(90deg, #ef4444, #fca5a5); }

.scan-log {
  font-size: clamp(.6rem, 1.6vw, .82rem);
  line-height: 1.65;
  color: #cbd5e1;
  min-height: 5.4em;
}
.scan-log div { opacity: 0; animation: logIn .18s ease-out forwards; }
.scan-log .ok { color: #86efac; }
.scan-log .no { color: #fca5a5; }
.scan-log .sf { color: #93c5fd; }
@keyframes logIn { from { opacity: 0; transform: translateX(-4px) } to { opacity: 1; transform: none } }

.scan-verdict {
  margin-top: .5rem;
  font-size: clamp(1rem, 3.6vw, 1.7rem);
  font-weight: 800;
  letter-spacing: .06em;
  opacity: 0;
}
.scan-verdict.show { opacity: 1; animation: stamp .28s cubic-bezier(.2,.9,.3,1.4); }
.scan-verdict.good { color: #4ade80; text-shadow: 0 0 22px rgba(74,222,128,.6); }
.scan-verdict.bad  { color: #f87171; text-shadow: 0 0 22px rgba(248,113,113,.6); }
@keyframes stamp { from { transform: scale(1.5); opacity: 0 } to { transform: scale(1); opacity: 1 } }

.scan-roast { color: #fda4af; font-size: clamp(.65rem, 1.8vw, .85rem); margin-top: .2rem; font-style: italic; }
.scan-skip  { position: absolute; bottom: 3%; right: 5%; color: #64748b; font-size: .68rem; letter-spacing: .08em; }

/* failure judder: the bar stalls near the end */
#scanner.failing #scan-bar { animation: none; transform: translateY(300%); }
#scanner.failing .scan-progress > i { animation: judder .3s ease-out; }
@keyframes judder { 0% { transform: translateX(0) } 30% { transform: translateX(-3px) } 60% { transform: translateX(2px) } 100% { transform: none } }

@media (prefers-reduced-motion: reduce) {
  #scanner.on #scan-bar { animation: none; opacity: .35 }
  .scan-log div, .scan-verdict.show { animation: none; opacity: 1 }
  .scan-progress > i { transition: none }
}