<div class="bga-09">
  <div class="bga-09__scene">
    <div class="bga-09__column"><span>ﾊ</span>ﾐﾋｰｳｼﾅﾓﾆｻﾜｷｾﾈ01ﾁﾂ</div>
    <div class="bga-09__column"><span>ｱ</span>ｶﾀﾚﾆｿﾈﾎｵﾗ10ﾘﾜｾﾁｸｺ</div>
    <div class="bga-09__column"><span>ﾈ</span>ｾﾁｸ01ﾜｷﾅﾓﾆｻﾚﾋｰｳ</div>
    <div class="bga-09__column"><span>ﾗ</span>10ﾘﾜｾﾁｸﾀﾚﾆｿﾈﾎｵｶ</div>
    <div class="bga-09__column"><span>ｼ</span>ﾅﾓﾆｻﾜｷﾈﾁﾂ01ﾊﾐﾋｰ</div>
    <div class="bga-09__column"><span>ﾀ</span>ﾚﾆｿﾈﾎｵﾗ10ﾘｱｶﾜｾﾁ</div>
    <div class="bga-09__column"><span>ﾐ</span>ﾋｰｳｼﾅ01ﾆｻﾜｷｾﾈﾁﾂ</div>
    <div class="bga-09__column"><span>ｿ</span>ﾈﾎｵﾗ10ﾘﾜﾀﾚﾆｾﾁｸｺ</div>
    <div class="bga-09__column"><span>ﾜ</span>ｷｾﾈﾁ01ﾂﾊﾐﾋｰｳｼﾅﾓ</div>
    <div class="bga-09__column"><span>ﾎ</span>ｵﾗ10ﾘﾜｾﾀﾚﾆｿﾈﾁｸｺ</div>
    <div class="bga-09__column"><span>ﾆ</span>ｻﾜｷｾﾈﾁﾂ01ﾊﾐﾋｰｳｼ</div>
    <div class="bga-09__column"><span>ﾘ</span>ﾜｾﾁｸﾀ10ﾚﾆｿﾈﾎｵﾗｶ</div>
    <div class="bga-09__column"><span>ﾅ</span>ﾓﾆｻﾜｷ01ｾﾈﾁﾂﾊﾐﾋｰ</div>
    <div class="bga-09__column"><span>ﾚ</span>ﾆｿﾈﾎ10ｵﾗﾘﾜｾﾁｸﾀｺ</div>
    <div class="bga-09__column"><span>ﾋ</span>ｰｳｼﾅﾓ01ﾆｻﾜｷｾﾈﾁﾂ</div>
    <div class="bga-09__column"><span>ｵ</span>ﾗﾘﾜｾﾁ10ｸﾀﾚﾆｿﾈﾎｶ</div>
  </div>
</div>

.bga-09, .bga-09 *, .bga-09 *::before, .bga-09 *::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

.bga-09 {
  min-height: 460px;
  display: grid;
  place-items: stretch;
}

.bga-09__scene {
  width: 100%;
  min-height: 460px;
  position: relative;
  overflow: hidden;
  background: #000;
  font-family: "Courier New", monospace;
}

.bga-09__column {
  position: absolute;
  top: 0;
  width: 22px;
  color: #00ff66;
  font-size: 18px;
  line-height: 22px;
  text-align: center;
  white-space: pre;
  text-shadow: 0 0 6px #00ff66;
  writing-mode: vertical-rl;
  text-orientation: upright;
  animation: bga-09-fall linear infinite;
  /* gradient mask so the trail fades upward */
  -webkit-mask-image: linear-gradient(to bottom, transparent, #000 25%, #000 75%, transparent);
  mask-image: linear-gradient(to bottom, transparent, #000 25%, #000 75%, transparent);
}

/* Each column gets its own position, speed, and delay */
.bga-09__column:nth-child(1)  { left: 2%;  animation-duration: 6s;  animation-delay: 0s;   opacity: 0.9; }
.bga-09__column:nth-child(2)  { left: 8%;  animation-duration: 9s;  animation-delay: 1.5s; opacity: 0.7; }
.bga-09__column:nth-child(3)  { left: 14%; animation-duration: 5s;  animation-delay: 0.5s; }
.bga-09__column:nth-child(4)  { left: 20%; animation-duration: 11s; animation-delay: 2s;   opacity: 0.8; }
.bga-09__column:nth-child(5)  { left: 26%; animation-duration: 7s;  animation-delay: 3s; }
.bga-09__column:nth-child(6)  { left: 32%; animation-duration: 8s;  animation-delay: 0.2s; opacity: 0.6; }
.bga-09__column:nth-child(7)  { left: 38%; animation-duration: 6.5s;animation-delay: 1s; }
.bga-09__column:nth-child(8)  { left: 44%; animation-duration: 10s; animation-delay: 2.5s; opacity: 0.85; }
.bga-09__column:nth-child(9)  { left: 50%; animation-duration: 5.5s;animation-delay: 0.8s; }
.bga-09__column:nth-child(10) { left: 56%; animation-duration: 9.5s;animation-delay: 3.5s; opacity: 0.7; }
.bga-09__column:nth-child(11) { left: 62%; animation-duration: 7.5s;animation-delay: 1.2s; }
.bga-09__column:nth-child(12) { left: 68%; animation-duration: 6s;  animation-delay: 2.8s; opacity: 0.9; }
.bga-09__column:nth-child(13) { left: 74%; animation-duration: 11s; animation-delay: 0.4s; }
.bga-09__column:nth-child(14) { left: 80%; animation-duration: 8.5s;animation-delay: 1.8s; opacity: 0.65; }
.bga-09__column:nth-child(15) { left: 86%; animation-duration: 5s;  animation-delay: 3.2s; }
.bga-09__column:nth-child(16) { left: 92%; animation-duration: 9s;  animation-delay: 0.6s; opacity: 0.8; }

/* brighten the leading glyph */
.bga-09__column span { color: #ccffcc; text-shadow: 0 0 12px #aaffaa; }

@keyframes bga-09-fall {
  0%   { transform: translateY(-100%); }
  100% { transform: translateY(100vh); }
}

@media (prefers-reduced-motion: reduce) {
  .bga-09__column {
    animation: none !important;
  }
}