<template>
  <div class="compilation mx-auto p-4 inline-flex">
    <atropos-component ref="atropos" class="my-atropos" active-offset="80" shadow-scale="1.05">
      <img src="/zero/sky-a.jpg" data-atropos-offset="-8" />
      <img src="/zero/propeller-a.png" data-atropos-offset="-3" class="absolute inset-0 object-cover" />
      <img src="/zero/zero-a.png" data-atropos-offset="0" class="absolute inset-0 object-cover" />
      <img src="/logo.svg" data-atropos-offset="0" width="70%" class="logo absolute inset-0" />
    </atropos-component>
  </div>
</template>

<script setup>
import { onMounted, ref } from 'vue'

const atropos = ref(null)

onMounted(() => {

})
</script>

<style scoped>
.logo {
  filter: drop-shadow(4px 4px 0 rgb(0 0 0 / 0.5));
  left: 14%;
  top: 10%;
}
</style>
