@keyframes diagonalMove {
  0% { background-position: 0 0; }
  100% { background-position: 40px 0; }
}

.processing-stripes {
  position: relative;
  overflow: hidden;
}

.processing-stripes::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-size: 40px 40px;
  animation: diagonalMove 2s linear infinite;
}

/* Light mode - darker stripes */
.processing-stripes::before {
  background-image: repeating-linear-gradient(
    45deg,
    rgba(0, 0, 0, 0.07),
    rgba(0, 0, 0, 0.07) 4px,
    transparent 4px,
    transparent 8px
  );
}

/* Dark mode - darker stripes */
:is(.dark .processing-stripes)::before {
  background-image: repeating-linear-gradient(
    45deg,
    rgba(0, 0, 0, 0.15),
    rgba(0, 0, 0, 0.15) 4px,
    transparent 4px,
    transparent 8px
  );
}