*, *::before, *::after {
  box-sizing: border-box;
}

body {
  font-family: system-ui, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
  margin: 0;
  background: #000000;
  overflow: hidden;
}

.matrix-wrapper {
  position: relative;
  width: 100vw;
  height: 100vh;
  display: flex;
  justify-content: center;
  align-items: center;
}

#matrix-canvas {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 1;
}

.matrix-content {
  position: relative;
  z-index: 2;
  background: rgba(0, 0, 0, 0.7);
  backdrop-filter: blur(8px);
  padding: 40px 60px;
  border: 1px solid #10b981;
  border-radius: 8px;
  text-align: center;
  box-shadow: 0 0 30px rgba(16, 185, 129, 0.2);
}

.matrix-content h2 {
  color: #10b981;
  font-family: "Courier New", Courier, monospace;
  font-size: 2rem;
  margin: 0 0 30px 0;
  letter-spacing: 2px;
  text-transform: uppercase;
  text-shadow: 0 0 10px #10b981;
}

.cyber-btn {
  background: transparent;
  color: #10b981;
  border: 2px solid #10b981;
  padding: 12px 32px;
  font-size: 1.125rem;
  font-family: inherit;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 2px;
  cursor: pointer;
  transition: all 0.2s;
  box-shadow: inset 0 0 10px rgba(16, 185, 129, 0.2);
}

.cyber-btn:hover {
  background: #10b981;
  color: #000000;
  box-shadow: 0 0 20px rgba(16, 185, 129, 0.6);
}

const canvas = document.getElementById("matrix-canvas");
const ctx = canvas.getContext("2d");

let width = window.innerWidth;
let height = window.innerHeight;
canvas.width = width;
canvas.height = height;

const chars = "ABCDEFGHIJKLMNOPQRSTUVWXYZ0123456789$+-*/=%";
const fontSize = 16;
const columns = Math.floor(width / fontSize);

/* Create an array of drop positions safely using native object */
const drops = new Array();
for (let i = 0; i < columns; i++) {
  drops.push(1);
}

function drawMatrix() {
  /* Fades out old frames slowly to create the trail effect */
  ctx.fillStyle = "rgba(0, 0, 0, 0.05)";
  ctx.fillRect(0, 0, width, height);
  
  ctx.fillStyle = "#10b981";
  ctx.font = fontSize + "px monospace";
  
  for (let i = 0; i < drops.length; i++) {
    /* Pick a random character securely */
    const randIndex = Math.floor(Math.random() * chars.length);
    const text = chars.charAt(randIndex);
    
    /* Calculate X and Y positions */
    const x = i * fontSize;
    const currentDrop = drops.at(i);
    const y = currentDrop * fontSize;
    
    ctx.fillText(text, x, y);
    
    /* Reset drop to top randomly to create staggered falling */
    if (y > height && Math.random() > 0.975) {
      drops.splice(i, 1, 0);
    }
    
    /* Move drop down by one row */
    const newVal = drops.at(i) + 1;
    drops.splice(i, 1, newVal);
  }
}

/* Run the matrix loop */
setInterval(drawMatrix, 30);

window.addEventListener("resize", function() {
  width = window.innerWidth;
  height = window.innerHeight;
  canvas.width = width;
  canvas.height = height;
});