index.html:
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>GEOSTORM Animated Logo</title>
  <link rel="stylesheet" href="styles.css">
  <link href="https://fonts.googleapis.com/css2?family=Krona+One&family=Cutive+Mono&display=swap" rel="stylesheet">
</head>
<body>
  <!-- Background Animations -->
  <div id="background">
    <!-- Storm Cloud Canvas -->
    <canvas id="storm-canvas"></canvas>
    <!-- Neural Network Animation -->
    <canvas id="neural-canvas"></canvas>
    <!-- Outline of Poland -->
    <div id="poland-outline">
      <!-- Poland SVG Outline -->
      <svg id="poland-svg" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 200 200">
        <!-- Poland outline path (simplified) -->
        <path d="M50,10 L150,10 L190,60 L190,140 L150,190 L50,190 L10,140 L10,60 Z" fill="none" stroke="white" stroke-width="2"/>
      </svg>
    </div>
  </div>

  <!-- Introductory Logo -->
  <div class="intro-logo">
    <!-- Your logo.svg file -->
    <img src="logo.svg" alt="Introductory Logo" id="intro-logo-img">
  </div>

  <!-- Main Logo Animation -->
  <div class="logo-container">
    <svg class="logo" viewBox="0 0 600 150" xmlns="http://www.w3.org/2000/svg">
      <text x="50%" y="100" class="geostorm-text" text-anchor="middle">
        <tspan class="letter" style="animation-delay: 2s;">G</tspan>
        <tspan class="letter" style="animation-delay: 2.1s;">E</tspan>
        <tspan class="letter" style="animation-delay: 2.2s;">O</tspan>
        <tspan class="letter" style="animation-delay: 2.3s;">S</tspan>
        <tspan class="letter" style="animation-delay: 2.4s;">T</tspan>
        <tspan class="letter" style="animation-delay: 2.5s;">O</tspan>
        <tspan class="yellow-r" style="animation-delay: 2.6s;">☈</tspan>
        <tspan class="letter" style="animation-delay: 2.7s;">M</tspan>
      </text>
    </svg>
    <div class="additional-text">
      <span class="fade-in" style="animation-delay: 4s;">tempestas</span>
      <span class="fade-in" style="animation-delay: 4.2s;">grando</span>
      <span class="fade-in" style="animation-delay: 4.4s;">spiritus</span>
      <span class="fade-in" style="animation-delay: 4.6s;">vortex</span>
    </div>
  </div>

  <!-- JavaScript -->
  <script src="script.js"></script>
</body>
</html>
styles.css:
body {
  margin: 0;
  padding: 0;
  background-color: #000;
  overflow: hidden;
  position: relative;
}

/* Background Animations */
#background {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}

#storm-canvas, #neural-canvas {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}

#poland-outline {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  opacity: 0.5;
}

/* Introductory Logo */
.intro-logo {
  position: absolute;
  top: 10%;
  left: 50%;
  transform: translateX(-50%);
  opacity: 0;
  animation: fadeInLogo 2s ease-in-out forwards;
}

#intro-logo-img {
  width: 150px;
  height: 150px;
}

/* Fade-In Animation for Introductory Logo */
@keyframes fadeInLogo {
  to {
    opacity: 1;
  }
}

/* Main Logo Container */
.logo-container {
  width: 100%;
  max-width: 600px;
  margin: 0 auto;
  position: absolute;
  top: 70%; /* Adjusted to move the text further down */
  left: 50%;
  transform: translate(-50%, -50%);
  opacity: 0;
  animation: fadeInMainLogo 1s ease-in-out forwards;
  animation-delay: 2s;
  display: flex;
  flex-direction: column;
  align-items: center;
}

@keyframes fadeInMainLogo {
  to {
    opacity: 1;
  }
}

.logo {
  width: 100%;
  height: auto;
}

.geostorm-text {
  font-family: 'Krona One', sans-serif;
  font-size: 64px;
  font-weight: 400;
  fill: #fff;
  stroke: #000;
  stroke-width: 0.5;
  paint-order: stroke fill;
  letter-spacing: -5px;
  opacity: 1;
}

.yellow-r {
  fill: #ffff00;
  stroke: #000;
  stroke-width: 0.5;
  paint-order: stroke fill;
}

/* Text Animations */
@keyframes fadeInUp {
  from {
    opacity: 0;
    transform: translateY(20px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes pulse {
  0%, 100% { transform: scale(1); }
  50% { transform: scale(1.05); }
}

@keyframes glowPulse {
  0%, 100% { filter: drop-shadow(0 0 2px rgba(255, 255, 0, 0.7)); }
  50% { filter: drop-shadow(0 0 8px rgba(255, 255, 0, 0.9)); }
}

.letter, .yellow-r {
  opacity: 0;
  display: inline-block;
  animation: fadeInUp 0.5s ease-out forwards, pulse 2s ease-in-out infinite;
}

.yellow-r {
  animation: fadeInUp 0.5s ease-out forwards, glowPulse 2s ease-in-out infinite;
}

/* Assigning explicit animation delays using attribute selectors */
.letter[data-delay] {
  animation-delay: attr(data-delay s);
}

.yellow-r[data-delay] {
  animation-delay: attr(data-delay s);
}

/* Additional Text */
.additional-text {
  margin-top: 100px; /* Increased to move the text further down */
  text-align: center;
  font-family: 'Cutive Mono', monospace;
  font-size: 24px;
  color: #fff;
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
}

.fade-in {
  opacity: 0;
  display: inline-block;
  margin: 5px 10px;
  animation: fadeIn 1s ease-out forwards, pulse 3s ease-in-out infinite;
}

.fade-in[data-delay] {
  animation-delay: attr(data-delay s);
}

@keyframes fadeIn {
  from { opacity: 0; }
  to { opacity: 1; }
}
script.js:
document.addEventListener('DOMContentLoaded', () => {
  // Storm Cloud Background Animation
  const stormCanvas = document.getElementById('storm-canvas');
  const ctxStorm = stormCanvas.getContext('2d');

  stormCanvas.width = window.innerWidth;
  stormCanvas.height = window.innerHeight;

  function drawStorm() {
    ctxStorm.clearRect(0, 0, stormCanvas.width, stormCanvas.height);

    // Draw semi-transparent dark clouds
    const gradient = ctxStorm.createRadialGradient(
      stormCanvas.width / 2, stormCanvas.height / 2, 0,
      stormCanvas.width / 2, stormCanvas.height / 2, stormCanvas.width
    );
    gradient.addColorStop(0, 'rgba(20, 20, 20, 0.5)');
    gradient.addColorStop(1, 'rgba(0, 0, 0, 0)');
    ctxStorm.fillStyle = gradient;
    ctxStorm.fillRect(0, 0, stormCanvas.width, stormCanvas.height);

    // Removed the lightning effect to eliminate screen flashes

    requestAnimationFrame(drawStorm);
  }

  drawStorm();

  // Neural Network Animation
  const neuralCanvas = document.getElementById('neural-canvas');
  const ctxNeural = neuralCanvas.getContext('2d');

  neuralCanvas.width = window.innerWidth;
  neuralCanvas.height = window.innerHeight;

  class Node {
    constructor() {
      this.x = Math.random() * neuralCanvas.width;
      this.y = Math.random() * neuralCanvas.height;
      this.vx = (Math.random() - 0.5) * 0.5;
      this.vy = (Math.random() - 0.5) * 0.5;
      this.size = 2;
    }

    update() {
      this.x += this.vx;
      this.y += this.vy;

      // Bounce off edges
      if (this.x < 0 || this.x > neuralCanvas.width) this.vx *= -1;
      if (this.y < 0 || this.y > neuralCanvas.height) this.vy *= -1;
    }

    draw() {
      ctxNeural.fillStyle = 'rgba(255, 255, 255, 0.7)';
      ctxNeural.beginPath();
      ctxNeural.arc(this.x, this.y, this.size, 0, Math.PI * 2);
      ctxNeural.fill();
    }
  }

  const nodes = [];
  for (let i = 0; i < 100; i++) {
    nodes.push(new Node());
  }

  function drawNeuralNetwork() {
    ctxNeural.clearRect(0, 0, neuralCanvas.width, neuralCanvas.height);

    // Draw connections
    for (let i = 0; i < nodes.length; i++) {
      for (let j = i + 1; j < nodes.length; j++) {
        const dx = nodes[i].x - nodes[j].x;
        const dy = nodes[i].y - nodes[j].y;
        const distance = Math.sqrt(dx * dx + dy * dy);

        if (distance < 100) {
          ctxNeural.strokeStyle = 'rgba(255, 255, 255, 0.1)';
          ctxNeural.lineWidth = 1;
          ctxNeural.beginPath();
          ctxNeural.moveTo(nodes[i].x, nodes[i].y);
          ctxNeural.lineTo(nodes[j].x, nodes[j].y);
          ctxNeural.stroke();
        }
      }
    }

    // Update and draw nodes
    nodes.forEach(node => {
      node.update();
      node.draw();
    });

    requestAnimationFrame(drawNeuralNetwork);
  }

  drawNeuralNetwork();

  // Adjust canvas sizes on resize
  window.addEventListener('resize', () => {
    stormCanvas.width = window.innerWidth;
    stormCanvas.height = window.innerHeight;
    neuralCanvas.width = window.innerWidth;
    neuralCanvas.height = window.innerHeight;
  });
});

Your main task in this project - is to make so the additional text will be placed significantly more to the bottom along with the "GEOSTORM" text, and make the "GEOSTORM" text visible on the animation because currently it's not, which is considered as a major bug and needs urgent resolving.