<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Vulcan Website</title>
  <style>
    * {
      margin: 0;
      padding: 0;
      box-sizing: border-box;
      user-select: none; /* Disable text selection */
    }
    body {
      background: black; /* Black background for the entire body */
      overflow: hidden;
      height: 100vh;
      position: relative;
      display: flex;
      justify-content: center;
      align-items: center;
      flex-direction: column;
    }
    canvas {
      position: fixed;
      top: 0;
      left: 0;
      width: 100vw;
      height: 100vh;
    }
    .glow {
      color: transparent;
      font-size: 125px;
      text-align: center;
      position: absolute;
      top: 20px;
      left: 50%;
      transform: translateX(-50%);
      z-index: 10;
      -webkit-text-stroke: 1px darkred; /* Reduced stroke width */
      text-shadow: 
        0 0 3px rgb(82, 0, 0), 
        0 0 5px rgb(66, 0, 0), 
        0 0 10px rgb(5, 0, 0); /* Reduced shadow intensity */
      animation: glowing 1.5s infinite, scaleUpDown 2s infinite; /* Add glowing and scaling animation */
    }
    @keyframes glowing {
      0% { text-shadow: 0 0 3px rgb(82, 0, 0), 0 0 5px rgb(66, 0, 0), 0 0 10px rgb(255, 0, 0); }
      50% { text-shadow: 0 0 5px rgb(82, 0, 0), 0 0 10px rgb(255, 0, 0), 0 0 15px rgb(255, 0, 0); }
      100% { text-shadow: 0 0 3px rgb(82, 0, 0), 0 0 5px rgb(66, 0, 0), 0 0 10px rgb(255, 0, 0); }
    }
    @keyframes scaleUpDown {
      0%, 100% {
        transform: translateX(-50%) scale(1);
      }
      50% {
        transform: translateX(-50%) scale(1.05); /* Scale up */
      }
    }
    .button {
      background-color: black;
      color: darkred;
      border: 2px solid darkred;
      padding: 15px 70px;
      font-size: 22px;
      text-align: center;
      text-decoration: none;
      display: block;
      border-radius: 5px;
      position: relative;
      z-index: 20;
      transition: all 0.3s ease;
      box-shadow: 0 0 5px darkred, 0 0 10px darkred, 0 0 15px darkred; /* Reduced shadow intensity */
    }
    .button2 {
      background-color: black;
      color: darkred;
      border: 2px solid darkred;
      padding: 15px 70px;
      font-size: 22px;
      text-align: center;
      text-decoration: none;
      display: block;
      border-radius: 5px;
      position: relative;
      z-index: 20;
      transition: all 0.3s ease;
      box-shadow: 0 0 5px darkred, 0 0 10px darkred, 0 0 15px darkred; /* Reduced shadow intensity */
      margin-top: 20px;
    }
    .button:hover, .button2:hover {
      box-shadow: 0 0 15px darkred, 0 0 25px darkred, 0 0 35px darkred;
      transform: scale(1.05);
    }

    /* Overlay Styles */
    .overlay {
      position: fixed;
      top: 50%;
      left: 50%;
      transform: translate(-50%, -50%);
      width: 300px; /* Fixed width */
      height: 100px; /* Fixed height */
      background-color: black; /* Fully black background */
      display: flex;
      justify-content: center;
      align-items: center;
      z-index: 30; /* Above other elements */
      color: darkred;
      font-size: 40px;
      cursor: pointer; /* Change cursor to indicate clickable */
      text-align: center;
      -webkit-text-stroke: 1px darkred; /* Stroke for the overlay text */
      text-shadow: 
        0 0 3px rgb(82, 0, 0), 
        0 0 5px rgb(66, 0, 0), 
        0 0 10px rgb(255, 0, 0); /* Reduced shadow intensity */
      animation: fadeIn 1s; /* Fade-in effect */
    }

    @keyframes fadeIn {
      from {
        opacity: 0;
      }
      to {
        opacity: 1;
      }
    }

    @keyframes floatUp {
      0% {
        transform: translate(-50%, -50%) scale(1);
      }
      50% {
        transform: translate(-50%, -60%) scale(1.05); /* Float up and scale */
      }
      100% {
        transform: translate(-50%, -100%); /* Move completely up */
        opacity: 0; /* Fade out */
      }
    }

    .content {
      display: none; /* Hidden until the overlay is clicked */
      transition: opacity 0.5s ease; /* Smooth fade-in */
      opacity: 0; /* Start invisible */
      z-index: 20;
      text-align: center; /* Center align content */
    }

    .content.show {
      display: block; /* Show the content */
      opacity: 1; /* Fade in the content */
    }
  </style>
</head>
<body>
  <div class="overlay" id="overlay">Click To Enter</div>
  <div class="content" id="content">
    <div class="glow">Vulcan</div>
    <a href="https://discord.gg/jK8s9UNVHy" class="button">Vulcan Discord</a>
    <a href="Vulcandownload.html" class="button2">Downloads</a>
    <canvas id="matrixCanvas"></canvas>
  </div>

  <div class="content" id="content">
    <div class="glow">Vulcan</div>
    <a href="https://discord.gg/jK8s9UNVHy" class="button">Vulcan Discord</a>
    <a href="Vulcandownload.html" class="button2">Downloads</a>
    <canvas id="matrixCanvas"></canvas>
  </div>
  
  
  <!-- Audio element -->
  <audio id="backgroundMusic" src="music.mp3" preload="auto"></audio>

  <script>
    const canvas = document.getElementById('matrixCanvas');
    const ctx = canvas.getContext('2d');
    const overlay = document.getElementById('overlay');
    const backgroundMusic = document.getElementById('backgroundMusic');
    const content = document.getElementById('content');

    let fontSize = 16;
    let drops = [];
    const characters = "ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789!@#$%^&*()_+[]{}|;:',.<>?/~`"; // Diverse character set

    function initializeCanvas() {
      canvas.width = window.innerWidth;
      canvas.height = window.innerHeight;
      const columns = Math.floor(canvas.width / fontSize);
      drops = Array(columns).fill(0);
    }

    function drawMatrix() {
      ctx.fillStyle = 'rgba(0, 0, 0, 0.05)';
      ctx.fillRect(0, 0, canvas.width, canvas.height);
      ctx.fillStyle = 'darkred'; // Keep text color dark red

      for (let i = 0; i < drops.length; i++) {
        const text = characters.charAt(Math.floor(Math.random() * characters.length));
        const x = i * fontSize;
        const y = drops[i] * fontSize;
        const randomSize = Math.random() * (fontSize * 1.5 - fontSize) + fontSize; // Random font size

        ctx.font = `${randomSize}px monospace`;
        ctx.fillText(text, x, y);

        if (y > canvas.height && Math.random() > 0.975) {
          drops[i] = 0;
        }

        drops[i]++;
      }
    }

    function startAnimation() {
      setInterval(drawMatrix, 35);
    }

    window.addEventListener('load', () => {
      initializeCanvas();
      startAnimation();
      
      // Event listener to handle overlay click
      overlay.addEventListener('click', () => {
        overlay.style.animation = 'floatUp 0.5s forwards'; // Trigger float up animation
        backgroundMusic.play(); // Play the background music

        // Show content after animation ends
        setTimeout(() => {
          overlay.style.display = 'none'; // Hide the overlay
          content.classList.add('show'); // Show the main content
        }, 500); // Match this with animation duration
      });
    });

    window.addEventListener('resize', initializeCanvas); // Adjust canvas on resize
  </script>
</body>
</html>
