.matrix-container {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: -1;
  pointer-events: none;
  opacity: 0.35;
  display: hidden;
}

.matrix-pattern {
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
}

.matrix-column {
  position: absolute;
  top: -100%;
  width: 20px;
  height: 100%;
  font-size: 16px;
  line-height: 18px;
  font-weight: bold;
  animation: fall linear infinite;
  white-space: nowrap;
}

.matrix-column::before {
  content: "アイウエオカキクケコサシスセソタチツテトナニヌネノハヒフヘホマミムメモヤユヨラリルレロワヲンABCDEFGHIJKLMNOPQRSTUVWXYZ0123456789";
  position: absolute;
  top: 0;
  left: 0;
  background: linear-gradient(
    0deg,
    rgba(185, 79, 255, 1) 0%,
    rgba(255, 69, 69, 1) 20%,
    rgba(252, 176, 69, 1) 40%,
    rgba(252, 237, 69, 1) 60%,
    rgba(69, 252, 90, 1) 80%,
    rgba(69, 206, 252, 1) 100%
  );
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  writing-mode: vertical-lr;
  letter-spacing: 1px;
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* KONUMLAR — yüzde bazlı, tüm ekranı kaplar */
.matrix-column:nth-child(1)  { left: 2.5%;  animation-delay: -2.5s; animation-duration: 4s;   }
.matrix-column:nth-child(2)  { left: 5%;    animation-delay: -3.2s; animation-duration: 5.5s;   }
.matrix-column:nth-child(3)  { left: 7.5%;  animation-delay: -1.8s; animation-duration: 4s; }
.matrix-column:nth-child(4)  { left: 10%;   animation-delay: -2.9s; animation-duration: 6s; }
.matrix-column:nth-child(5)  { left: 12.5%; animation-delay: -1.5s; animation-duration: 4s;   }
.matrix-column:nth-child(6)  { left: 15%;   animation-delay: -3.8s; animation-duration: 6s; }
.matrix-column:nth-child(7)  { left: 17.5%; animation-delay: -2.1s; animation-duration: 4s; }
.matrix-column:nth-child(8)  { left: 20%;   animation-delay: -2.7s; animation-duration: 4.5s; }
.matrix-column:nth-child(9)  { left: 22.5%; animation-delay: -3.4s; animation-duration: 5.2s; }
.matrix-column:nth-child(10) { left: 25%;   animation-delay: -1.9s; animation-duration: 3.6s; }
.matrix-column:nth-child(11) { left: 27.5%; animation-delay: -3.6s; animation-duration: 6.1s; }
.matrix-column:nth-child(12) { left: 30%;   animation-delay: -2.3s; animation-duration: 4.1s; }
.matrix-column:nth-child(13) { left: 32.5%; animation-delay: -3.1s; animation-duration: 5.6s; }
.matrix-column:nth-child(14) { left: 35%;   animation-delay: -2.6s; animation-duration: 3.9s; }
.matrix-column:nth-child(15) { left: 37.5%; animation-delay: -3.7s; animation-duration: 5.1s; }
.matrix-column:nth-child(16) { left: 40%;   animation-delay: -2.8s; animation-duration: 4.3s; }
.matrix-column:nth-child(17) { left: 42.5%; animation-delay: -3.3s; animation-duration: 5.7s; }
.matrix-column:nth-child(18) { left: 45%;   animation-delay: -2.2s; animation-duration: 3.6s; }
.matrix-column:nth-child(19) { left: 47.5%; animation-delay: -3.9s; animation-duration: 5.3s; }
.matrix-column:nth-child(20) { left: 50%;   animation-delay: -2.4s; animation-duration: 4.4s; }
.matrix-column:nth-child(21) { left: 52.5%; animation-delay: -1.7s; animation-duration: 3.4s; }
.matrix-column:nth-child(22) { left: 55%;   animation-delay: -3.5s; animation-duration: 4.9s; }
.matrix-column:nth-child(23) { left: 57.5%; animation-delay: -2s;   animation-duration: 4s;   }
.matrix-column:nth-child(24) { left: 60%;   animation-delay: -4s;   animation-duration: 5.4s; }
.matrix-column:nth-child(25) { left: 62.5%; animation-delay: -1.6s; animation-duration: 3.3s; }
.matrix-column:nth-child(26) { left: 65%;   animation-delay: -3s;   animation-duration: 4.5s; }
.matrix-column:nth-child(27) { left: 67.5%; animation-delay: -3.8s; animation-duration: 5s;   }
.matrix-column:nth-child(28) { left: 70%;   animation-delay: -2.5s; animation-duration: 3.8s; }
.matrix-column:nth-child(29) { left: 72.5%; animation-delay: -3.2s; animation-duration: 4.6s; }
.matrix-column:nth-child(30) { left: 75%;   animation-delay: -2.7s; animation-duration: 4.2s; }
.matrix-column:nth-child(31) { left: 77.5%; animation-delay: -1.8s; animation-duration: 3.7s; }
.matrix-column:nth-child(32) { left: 80%;   animation-delay: -3.6s; animation-duration: 5.1s; }
.matrix-column:nth-child(33) { left: 82.5%; animation-delay: -2.1s; animation-duration: 4.1s; }
.matrix-column:nth-child(34) { left: 85%;   animation-delay: -3.4s; animation-duration: 4.7s; }
.matrix-column:nth-child(35) { left: 87.5%; animation-delay: -2.8s; animation-duration: 3.9s; }
.matrix-column:nth-child(36) { left: 90%;   animation-delay: -3.7s; animation-duration: 5.2s; }
.matrix-column:nth-child(37) { left: 92.5%; animation-delay: -2.3s; animation-duration: 4.3s; }
.matrix-column:nth-child(38) { left: 95%;   animation-delay: -1.9s; animation-duration: 3.5s; }
.matrix-column:nth-child(39) { left: 97.5%; animation-delay: -3.5s; animation-duration: 4.8s; }
.matrix-column:nth-child(40) { left: 99%;   animation-delay: -2.6s; animation-duration: 4.4s; }

.matrix-column:nth-child(odd)::before {
  content: "アイウエオカキクケコサシスセソタチツテトナニヌネノハヒフヘホマミムメモヤユヨラリルレロワヲン123456789";
}
.matrix-column:nth-child(even)::before {
  content: "ガギグゲゴザジズゼゾダヂヅデドバビブベボパピプペポヴァィゥェォャュョッABCDEFGHIJKLMNOPQRSTUVWXYZ";
}
.matrix-column:nth-child(3n)::before {
  content: "アカサタナハマヤラワイキシチニヒミリウクスツヌフムユルエケセテネヘメレオコソトノホモヨロヲン0987654321";
}
.matrix-column:nth-child(4n)::before {
  content: "ンヲロヨモホノトソコオレメヘネテセケエルユムフヌツスクウリミヒニチシキイワラヤマハナタサカア";
}
.matrix-column:nth-child(5n)::before {
  content: "ガザダバパギジヂビピグズヅブプゲゼデベペゴゾドボポヴァィゥェォャュョッ!@#$%^&*()_+-=[]{}|;:,.<>?";
}

@keyframes fall {
  0%   { transform: translateY(-10%); opacity: 1; }
  100% { transform: translateY(200%); opacity: 0; }
}

@media (max-width: 768px) {
  .matrix-column { font-size: 14px; line-height: 16px; width: 18px; }
}
@media (max-width: 480px) {
  .matrix-column { font-size: 12px; line-height: 14px; width: 15px; }
}