@use "sass:math";
@import url('https://fonts.googleapis.com/css2?family=Inconsolata:wght@200&display=swap');

:root {
  --string-rain-color: rgb(179, 255, 199);
}

$string-rain-color: var(--string-rain-color);

$str: 'ぁぃぅぇぉかきくけこんさしすせそた◁▣▤▥▦▧♂♀♥☻►◄▧▨♦ちつってとゐなにぬねのはひふへほゑまみむめもゃゅょゎをァィゥヴェォカヵキクケヶコサシスセソタチツッテトヰンナニヌネノハヒフヘホヱマミムメモャュョヮヲㄅㄉㄓㄚㄞㄢㄦㄆㄊㄍㄐㄔㄗㄧㄛㄟㄣㄇㄋㄎㄑㄕㄘㄨㄜㄠㄤㄈㄏㄒㄖㄙㄩㄝㄡㄥabcdefghigklmnopqrstuvwxyz123456789%@#$<>^&*_+';
$length: str-length($str);
$n: 50;
$animationTime: 4;
$perColumnNums: 50;

@function randomChar() {
  $r: random($length);
  @return str-slice($str, $r, $r);
}

@function randomChars($number) {
  $value: '';

  @if $number > 0 {
    @for $i from 1 through $number {
      $value: $value + randomChar();
    }
  }
  @return $value;
}

.wskco-string-rain {
  background: #000;
  position: relative;
  overflow: hidden;

  &__wrapper {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    display: flex;
    justify-content: space-around;
    flex-wrap: nowrap;
    flex-direction: row;
    font-family: 'Inconsolata', monospace, sans-serif;

    p {
      position: relative;
      height: 100%;
      margin: 0;
      text-align: center;
      word-break: break-all;
      white-space: pre-wrap;
      width: 1em;
      font-size: 1em;

      &::before,
      &::after {
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        height: 100%;
        overflow: hidden;
      }
    }

    @for $i from 0 through $n {
      $content: randomChars($perColumnNums);
      $contentNext: randomChars($perColumnNums);
      $delay: random($n);
      $randomAnimationTine: #{$animationTime + math.div(random(20), 10) - 1}s;

      p:nth-child(#{$i})::before {
        content: $content;
        color: $string-rain-color;
        text-shadow: 0 0 1px #fff, 0 0 2px #fff, 0 0 5px currentColor,
          0 0 10px currentColor;
        animation: typing-#{$i}
          $randomAnimationTine
          steps(20, end)
          #{$delay *
          0.1s *
          -1}
          infinite;
        z-index: 1;
      }

      p:nth-child(#{$i})::after {
        $alpha: math.div(random(40), 100) + 0.6;
        content: '';
        background: linear-gradient(
          rgba(0, 0, 0, $alpha),
          rgba(0, 0, 0, $alpha),
          rgba(0, 0, 0, $alpha),
          transparent 75%,
          transparent
        );
        background-size: 100% 220%;
        background-repeat: no-repeat;
        animation: mask
          $randomAnimationTine
          infinite
          #{($delay - 2) *
          0.1s *
          -1}
          linear;
        z-index: 2;
      }

      @keyframes typing-#{$i} {
        0% {
          height: 0;
        }
        25% {
          height: 100%;
        }
        100% {
          height: 100%;
          content: $contentNext;
        }
      }
    }
  }
}

@keyframes mask {
  0% {
    background-position: 0 220%;
  }
  30% {
    background-position: 0 0%;
  }
  100% {
    background-position: 0 0%;
  }
}