.encode-card {
  position: relative;
  width: 500px;   /* mismo tamaño que tus cards */
  height: 310px;
  overflow: hidden;
  border-radius: 18px;
}

/* Imagen final */
.encode-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* Capa de código que se ve al inicio */
.code-overlay {
  position: absolute;
  inset: 0;
  background: radial-gradient(circle at 0% 0%, #383308d8, #52500dd2 50%, #2b2a04 100%);
  color: #a5b4fc;
  font-family: "Roboto Mono", monospace;
  font-size: 11px;
  line-height: 13px;
  padding: 10px;
  white-space: pre;
  overflow: hidden;
  z-index: 0;

  /* empieza visible */
  opacity: 1;
  /* desaparece después de 2s de “codificación” */
  animation: fadeCode 1s ease-out 2s forwards;
  /* pequeño glitch de escala */
  transform-origin: center;
}

@keyframes fadeCode {
  0% {
    opacity: 1;
    filter: none;
    transform: scale(1);
  }
  50% {
    filter: blur(1px);
    transform: scale(1.02);
  }
  100% {
    opacity: 0;
    filter: blur(3px);
    transform: scale(1.03);
  }
}