/* =====================================================================================
   Isomorph, o que fica por cima da obra: scanlines, o clarao do snapshot e o eco do teclado.
   Tokens do base.css.
   ===================================================================================== */

/* scanlines: mascara de CRT por cima do canvas (fora do filtro, nao entra em snapshot/rec) */
#scan {
	position: fixed; inset: 0; z-index: 1; pointer-events: none; opacity: 0;
	background:
		repeating-linear-gradient(to bottom, rgba(0, 0, 0, 0.32) 0 var(--hairline), transparent var(--hairline) calc(var(--hairline) * 3)),
		radial-gradient(ellipse at 50% 50%, transparent 55%, rgba(0, 0, 0, 0.55) 100%);
	transition: opacity var(--motion-slow) ease;
}
body.scan-on #scan { opacity: 1; }
#shutter { position: fixed; inset: 0; z-index: 2; pointer-events: none; background: #fff; opacity: 0; }
#shutter.fire { animation: shutter 380ms ease-out; }
@keyframes shutter { 0% { opacity: 0.55; } 100% { opacity: 0; } }

/* ---------------------------------------------------------------- eco do teclado */
#echo {
	position: fixed; z-index: 11; pointer-events: none;
	inset-block-start: max(var(--edge-pad), env(safe-area-inset-top)); inset-inline: var(--edge-pad);
	display: flex; flex-wrap: wrap; justify-content: center; gap: var(--space-2);
}
.echo-item {
	display: inline-flex; align-items: center; gap: var(--space-2);
	padding: var(--space-1) var(--space-2) var(--space-1) var(--space-1); border-radius: var(--r-cap);
	background: var(--chassis); color: var(--legend-dim); font-size: var(--text-s);
	box-shadow: inset 0 var(--hairline) 0 rgba(255, 255, 255, 0.07), 0 calc(var(--shade) * 1.2) calc(var(--shade) * 2) rgba(0, 0, 0, 0.6);
	animation: echoIn var(--motion) var(--ease-out), echoOut var(--motion-slow) ease 1.1s forwards;
}
.echo-item kbd { font-size: var(--text-m); min-inline-size: 2.2em; block-size: 2.2em; transform: translateY(0.1em); box-shadow: inset 0 var(--hairline) 0 rgba(255, 255, 255, 0.1), 0 0.06em 0 var(--cap-edge); }
.echo-item strong { color: var(--legend); font-weight: 600; }
@keyframes echoIn { from { opacity: 0; transform: translateY(-40%); } }
@keyframes echoOut { to { opacity: 0; } }

/* calmo: o eco entra sem deslizar e o clarao do snapshot nao dispara (capture.js tambem nao pede) */
body.calm .echo-item { animation: echoOut 1ms linear 1.4s forwards; }
@media (prefers-reduced-motion: reduce) {
	#scan { transition: none !important; }
	#shutter.fire { animation-duration: 1ms; }
	.echo-item { animation: echoOut 1ms linear 1.4s forwards; }
}