Animated Parallax Hero with Navbar

<section id="etheria-hero" class="relative h-screen w-full overflow-hidden bg-stone-900 text-[#F2F0EB]"
  style="font-family: 'Inter', sans-serif;">
  <script src="https://code.iconify.design/iconify-icon/1.0.7/iconify-icon.min.js"></script>

  <style>
    @keyframes revealFlow {
      0% {
        opacity: 0;
        transform: translateY(40px) scale(0.98);
        filter: blur(12px);
      }

      100% {
        opacity: 1;
        transform: translateY(0) scale(1);
        filter: blur(0);
      }
    }

    .reveal-item {
      opacity: 0;
      will-change: transform, opacity, filter;
    }

    .reveal-active {
      animation: revealFlow 1.2s cubic-bezier(0.2, 0.6, 0.2, 1) both;
    }

    .delay-100 {
      animation-delay: 100ms;
    }

    .delay-200 {
      animation-delay: 200ms;
    }

    .delay-300 {
      animation-delay: 300ms;
    }

    .delay-400 {
      animation-delay: 400ms;
    }

    .delay-500 {
      animation-delay: 500ms;
    }
  </style>

  <!-- Parallax Background Image -->
  <div class="absolute inset-0 z-0 overflow-hidden">
    <img id="hero-bg-img" src="https://hoirqrkdgbmvpwutwuwj.supabase.co/storage/v1/object/public/assets/assets/c55b9091-b0ca-4842-92d7-7be239f76440_1600w.webp" alt="Serene Portrait" class="absolute left-0 -top-[10%] h-[120%] w-full object-cover opacity-60 mix-blend-overlay will-change-transform">
    <div class="absolute inset-0 bg-gradient-to-b from-stone-900/30 via-transparent to-stone-900/90"></div>
    <div class="absolute inset-0 bg-black/20"></div>
  </div>

  <!-- Navbar -->
  <nav class="relative z-20 flex w-full items-center justify-between px-6 pt-8 md:px-12">
    <div class="flex items-center gap-2 reveal-item delay-100">
      <iconify-icon icon="solar:tornado-small-outline" class="text-3xl" style="color: #F2F0EB"></iconify-icon>
      <span class="text-2xl font-light tracking-tighter text-white" style="font-family: 'DM Sans', sans-serif;">Etheria</span>
    </div>

    <div class="hidden items-center gap-12 text-sm font-medium tracking-wide text-white/80 md:flex">
      <a href="#" class="reveal-item delay-200 tracking-tighter transition-colors hover:text-white">Expertise</a>
      <a href="#" class="reveal-item delay-300 tracking-tighter transition-colors hover:text-white">Solutions</a>
      <a href="#" class="reveal-item delay-400 tracking-tighter transition-colors hover:text-white">Research</a>
      <a href="#" class="reveal-item delay-500 tracking-tighter transition-colors hover:text-white">Insights</a>
    </div>

    <div
      class="hidden items-center gap-8 text-xs font-medium uppercase tracking-widest text-white/70 md:flex reveal-item delay-500">
      <span class="tracking-tighter">+1-800-ETHERIA</span>
      <a href="#" class="group flex items-center gap-1 text-white transition-opacity hover:opacity-80 tracking-tighter">
        Consult With Us
        <iconify-icon icon="solar:arrow-right-up-linear"
          class="transition-transform group-hover:translate-x-0.5 group-hover:-translate-y-0.5"></iconify-icon>
      </a>
    </div>

    <button class="text-white md:hidden reveal-item">
      <iconify-icon icon="solar:hamburger-menu-linear" class="text-3xl"></iconify-icon>
    </button>
  </nav>

  <!-- Hero Content -->
  <div class="relative z-10 flex h-[calc(100vh-100px)] flex-col justify-end px-6 pb-12 md:px-12 md:pb-20">
    <div
      class="mb-auto flex w-full justify-between pt-12 text-xs font-medium tracking-wider text-white/40 reveal-item delay-300">
      <span class="uppercase tracking-tighter">// Exclusive intelligence for the future of business.</span>
      <span class="tracking-tighter">©2026</span>
    </div>

    <div class="flex flex-col items-end gap-12 md:flex-row md:items-end md:justify-between">
      <h1
        class="max-w-4xl text-5xl font-light leading-[1.1] tracking-tighter text-white reveal-item delay-100 md:text-7xl lg:text-8xl"
        style="font-family: 'DM Sans', sans-serif;">
        Ascending Your Enterprise to a State of
        <span class="text-white/90">Algorithmic Perfection.</span>
      </h1>

      <div class="flex max-w-sm flex-col gap-8 reveal-item delay-300">
        <p class="text-lg leading-relaxed tracking-tighter text-white/80">
          Intelligence is not just data processing—it is an art, a strategy, and the finest investment for your future.
        </p>
        <a href="#"
          class="group flex w-fit items-center gap-3 rounded-full bg-[#F2F0EB] px-8 py-4 text-sm tracking-tighter text-stone-900 transition-all hover:scale-105 hover:bg-white hover:shadow-lg">
          Explore Intelligence
          <iconify-icon icon="solar:arrow-right-up-linear"
            class="text-lg transition-transform group-hover:rotate-45"></iconify-icon>
        </a>
      </div>
    </div>
  </div>

  <script>
    (function() {
      const initHero = () => {
        const observerOptions = { threshold: 0.1 };
        const observer = new IntersectionObserver((entries) => {
          entries.forEach(entry => {
            if (entry.isIntersecting) {
              entry.target.classList.add('reveal-active');
            }
          });
        }, observerOptions);

        document.querySelectorAll('#etheria-hero .reveal-item').forEach(el => observer.observe(el));

        const heroBg = document.getElementById('hero-bg-img');
        window.addEventListener('scroll', () => {
          const scrollPosition = window.scrollY;
          if (scrollPosition < window.innerHeight && heroBg) {
            heroBg.style.transform = `translateY(${scrollPosition * 0.35}px)`;
          }
        });
      };

      if (document.readyState === 'complete') initHero();
      else window.addEventListener('load', initHero);
    })();
  </script>
</section>