<template>
  <div class="absolute inset-0 overflow-hidden">
    <!-- Lottie animation -->
    <ClientOnly>
      <DotLottieVue
        src="/animations/supply-chain.lottie"
        autoplay
        loop
        class="absolute inset-0 w-full h-full"
        :style="{
          opacity: 1 - collapseProgress * 0.7,
          transform: `scale(${1 + collapseProgress * 0.1})`
        }"
      />
    </ClientOnly>

    <!-- Overlay for text readability -->
    <div class="absolute inset-0 bg-gradient-to-b from-slate-900/60 via-slate-900/40 to-slate-900/70" />
  </div>
</template>

<script setup lang="ts">
import { DotLottieVue } from '@lottiefiles/dotlottie-vue'

defineProps<{
  collapseProgress: number
}>()
</script>
