<template>
  <div
    class="hero-grid px-4"
    :class="props.position === 'bottom' ? 'is-bottom' : 'is-top'"
    :style="
      (props.flip ?? props.position === 'bottom')
        ? 'transform: scaleY(-1);'
        : ''
    "
    aria-hidden="true"
  >
    <div class="hero-grid-top container mx-auto">
      <div
        class="pointer-events-none absolute inset-0 z-0 bg-black [mask-image:url('/images/home-hero-assets/hero-background-grid.png')] [mask-size:100%_auto] [mask-position:center_top] [mask-repeat:no-repeat] dark:hidden"
      />

      <div
        class="pointer-events-none absolute inset-0 z-0 hidden bg-[url('/images/home-hero-assets/hero-background-grid.png')] bg-[length:100%_auto] bg-[position:center_top] bg-no-repeat dark:block"
      />

      <div
        class="lazy-background-image lazy-background-image-maskImage lazy-background-image-loaded hero-grid-top-animation"
        style="
          --background-image: url(&quot;/images/home-hero-assets/hero-background-grid-mask.png&quot;);
        "
      >
        <div />
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
interface Props {
  position?: "top" | "bottom";
  flip?: boolean;
}

const props = withDefaults(defineProps<Props>(), {
  position: "top",
  flip: undefined,
});
</script>

<style scoped>
.hero-grid {
  position: absolute;
  pointer-events: none;
  left: 0;
  right: 0;
  width: 100%;
  z-index: 0;
}

.hero-grid.is-top {
  top: var(--header-height);
}

.hero-grid.is-bottom {
  bottom: 40px;
}
@media screen and (max-width: 1024px) {
  .hero-grid.is-bottom {
    bottom: 80px;
  }
}
.hero-grid-top {
  position: relative;
  width: 100%;
  height: 202px;
}

.hero-grid.is-top .hero-grid-top {
  margin-bottom: 85px;
}
.hero-grid.is-bottom .hero-grid-top {
  margin-top: 85px;
}

.lazy-background-image {
  transition: opacity 1s cubic-bezier(0.6, 0.6, 0, 1);
}

.lazy-background-image-maskImage {
  -webkit-mask-image: var(--background-image);
  mask-image: var(--background-image);
}

.hero-grid-top-animation {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 1;
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -webkit-mask-size: 100% auto;
  mask-size: 100% auto;
  -webkit-mask-position: center top;
  mask-position: center top;
}

.hero-grid-top-animation div {
  position: relative;
  top: 0;
  width: 100%;
  height: 200px;
  z-index: 1;
  background: linear-gradient(
    180deg,
    rgba(183, 164, 251, 0) 0%,
    oklch(0.78 0.1277 211.3) 100%,
    oklch(0.68 0.1277 211.3) 100%,
    rgba(133, 98, 255, 0) 0%
  );
  animation: gridAnimation 18s infinite cubic-bezier(0.62, 0.62, 0.28, 0.67);
}

.hero-grid.is-top .hero-grid-top-animation div {
  animation-delay: 0s;
  animation-direction: normal;
}
.hero-grid.is-bottom .hero-grid-top-animation div {
  animation-delay: 1.8s;
  animation-direction: reverse;
}

@keyframes gridAnimation {
  0% {
    transform: translateY(-202px);
  }
  10% {
    transform: translateY(202px);
  }
  70% {
    transform: translateY(202px);
  }
  80% {
    transform: translateY(-202px);
  }
  100% {
    transform: translateY(-202px);
  }
}
</style>
