.matrix-button {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  background: #1456d9;
}
.matrix-button:hover,
.matrix-button:focus-visible {
  background: #1048bb;
  box-shadow:
    0 0 18px #4bafff55,
    0 7px 22px #175eea35;
}
.matrix-rain {
  position: absolute;
  inset: 0;
  z-index: -2;
  display: flex;
  justify-content: space-around;
  pointer-events: none;
  opacity: 0.8;
  transition: opacity 0.2s;
}
.matrix-button:hover .matrix-rain,
.matrix-button:focus-visible .matrix-rain {
  opacity: 1;
}
.matrix-stream {
  flex: 0 0 auto;
  align-self: flex-start;
  white-space: pre;
  font:
    9px/12px ui-monospace,
    monospace;
  color: #a2edff;
  text-shadow: 0 0 5px #71d9ff;
  animation: matrix-fall var(--duration) linear var(--delay) infinite;
}
.matrix-stream:nth-child(3n) {
  color: #e0faff;
  opacity: 0.7;
}
.matrix-glyph {
  display: block;
  height: 12px;
  opacity: var(--trail-opacity);
}
.matrix-head {
  color: #edfdff;
  text-shadow:
    0 0 3px #fff,
    0 0 7px #94f4ff,
    0 0 12px #53caff;
}
.matrix-button::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: linear-gradient(
    90deg,
    #1456d920,
    #1048bb90 30%,
    #1048bb90 70%,
    #1456d920
  );
  pointer-events: none;
}
.matrix-label {
  position: relative;
  text-shadow: 0 1px 3px #063387;
}
@keyframes matrix-fall {
  from {
    transform: translateY(-50%);
  }
  to {
    transform: translateY(0);
  }
}
@media (prefers-reduced-motion: reduce) {
  .matrix-stream {
    animation: none;
    transform: translateY(-25%);
  }
  .matrix-rain,
  .matrix-button:hover .matrix-rain,
  .matrix-button:focus-visible .matrix-rain {
    opacity: 0.2;
  }
}