<!-- Loading Animation Container -->
<div id="loading" style="display: flex; justify-content: center; align-items: center; height: 100vh; width: 100vw; background-color: #FFF; position: fixed; top: 0; left: 0; z-index: 9999;">
  <div style="display: flex; gap: 8px;">
    <div style="width: 14px; height: 14px; background-color: #298FC2; border-radius: 50%; animation: smooth-bounce 0.66s infinite ease-in-out; box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);"></div>
    <div style="width: 14px; height: 14px; background-color: #00A7B5; border-radius: 50%; animation: smooth-bounce 0.66s 0.22s infinite ease-in-out; box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);"></div>
    <div style="width: 14px; height: 14px; background-color: #9063CD; border-radius: 50%; animation: smooth-bounce 0.66s 0.44s infinite ease-in-out; box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);"></div>
  </div>
</div>

<!-- Hero Section Container (Initially Hidden) -->
<div id="hero-section" style="position: relative; height: 100vh; width: 100vw; text-align: center; display: flex; flex-direction: column; justify-content: center; align-items: center; overflow: hidden; opacity: 0; transition: opacity 2s;">
  <!-- Logo -->
  <img src="YOUR_LOGO_URL" alt="Logo" style="max-width: 150px; margin-bottom: 20px;">

  <!-- Headline and Subtext -->
  <h1 style="font-size: clamp(2em, 5vw, 3.5em); font-weight: bold; margin: 0;">
    Welcome to Hoozens!
  </h1>
  <p style="font-size: clamp(1em, 2.5vw, 1.5em); margin-top: 10px;">
    Where ideas come to life. Keep scrolling to see our magic.
  </p>

  <!-- Hand-Drawn Pencil-Style Arrow with Brand Color and Bounce Animation -->
  <div style="margin-top: 30px; animation: arrow-bounce 2s infinite;">
    <svg width="60" height="70" viewBox="0 0 24 28" fill="none" stroke="#298FC2" stroke-width="3.5" stroke-linecap="round" stroke-linejoin="round" style="filter: url(#pencilEffect);">
      <!-- Arrow Path with Longer Tail -->
      <path d="M12 4 L12 24 M5 17 L12 24 L19 17"></path>
      <defs>
        <!-- Pencil Effect Filter -->
        <filter id="pencilEffect">
          <feTurbulence type="fractalNoise" baseFrequency="0.8" numOctaves="3" stitchTiles="stitch"></feTurbulence>
          <feDisplacementMap in="SourceGraphic" scale="1.5" />
        </filter>
      </defs>
    </svg>
  </div>
</div>

<!-- CSS for Smooth Bounce Animation and Arrow Bounce -->
<style>
  @keyframes smooth-bounce {
    0%, 100% {
      transform: translateY(0);
    }
    50% {
      transform: translateY(-10px);
    }
  }

  @keyframes arrow-bounce {
    0%, 100% {
      transform: translateY(0);
    }
    50% {
      transform: translateY(-15px);
    }
  }
</style>
<!-- JavaScript for 3-Second Delay and Slower Fade-In Effect -->
<script>
  window.addEventListener('load', function() {
    // Add a 3-second delay before showing the hero section
    setTimeout(function() {
      // Hide the loading animation
      document.getElementById('loading').style.display = 'none';
      // Show the hero section with a slower fade-in effect
      document.getElementById('hero-section').style.opacity = '1';
    }, 3000); // 3000 milliseconds (3 seconds) delay
  });
</script>