---
import { Image } from "astro:assets";
import logo from "~/assets/logo-temp.png";
import { Icon } from "astro-icon/components";
import astronautImage from "~/assets/astronaut.png";
import HeroImage from "~/components/hero-image.astro";
import Starfield from "~/components/starfield.astro";

const widths = [450, 800];
const sizes = "(min-width: 640px) 42vw, 67vw";
---

<section class="relative h-full bg-black">
  
  <div id="splash-bg" class="absolute inset-0 opacity-40">
    <HeroImage />
  </div>
  <div class="relative grid h-full place-items-center sm:grid-cols-2">
    <h2
      class="flex flex-col items-center gap-2 self-end sm:gap-4 sm:self-auto sm:justify-self-end"
    >
      <div
        class="text-center text-white font-extrabold tracking-tighter text-6xl md:text-8xl"
      >
        The closet
	<br/> you wish
	<br/> you had.
      </div>
    </h2>
    <div></div>
  </div>
</section>

<style>
  @keyframes float {
    0% {
      transform: translate3d(0, 0, 0);
    }

    100% {
      transform: translate3d(0, 30px, 0);
    }
  }

  #astronaut {
    animation: float linear 2.5s infinite alternate;
  }

  @media (prefers-reduced-motion: reduce) {
    #astronaut {
      @apply animate-none;
    }

    :global(#starfield) {
      @apply hidden;
    }

    #splash-bg {
      @apply block;
    }
  }
</style>
