<script lang="ts" setup>
import valaxyLogoPng from '../assets/images/valaxy-logo.png'
</script>

<template>
  <div class="valaxy-logo-container" relative inline-flex justify="center" items="center">
    <div class="absolute bg-img" />
    <img
      class="fly-animation h-50"
      aspect="420/386" m="auto"
      :src="valaxyLogoPng" alt="Valaxy Logo" z="1"
    >
  </div>
</template>

<style lang="scss" scoped>
.valaxy-logo-container {
  &:hover {
    .bg-img {
      opacity: 0.4;
    }
  }
}

.bg-img {
  border-radius: 50%;
  filter: blur(72px);
  max-width: 350px;
  width: 150%;
  height: 150%;
  background-image: linear-gradient(-45deg, rgb(108 34 236) 50%, rgb(59 130 246 / var(--un-to-opacity, 1)) 50%);
  opacity: 0.3;
  transition: opacity var(--va-transition-duration-fast);
}
</style>
