<script setup lang="ts">
import { computed } from 'vue'
import { svgDataUri, jellyfishSvg } from '../svgPatterns'
import { useAquaticState } from '../useAquaticState'

const { activeEventModifiers } = useAquaticState()
const bioActive = computed(() => activeEventModifiers.value.has('bioluminescent-flash'))

const jelly1Bg = svgDataUri(jellyfishSvg('#c084fc', '#d8b4fe'))
const jelly2Bg = svgDataUri(jellyfishSvg('#67e8f9', '#a5f3fc'))
</script>

<template>
  <div class="jellyfish-drift" :class="{ bioluminescent: bioActive }">
    <div
      class="jelly jelly-1"
      :style="{ backgroundImage: jelly1Bg }"
    />
    <div
      class="jelly jelly-2"
      :style="{ backgroundImage: jelly2Bg }"
    />
  </div>
</template>

<style scoped>
.jellyfish-drift {
  position: absolute;
  inset: 0;
  z-index: 8;
  pointer-events: none;
}

.jelly {
  position: absolute;
  width: 32px;
  height: 44px;
  background-size: contain;
  background-repeat: no-repeat;
  will-change: transform;
}

.jelly-1 {
  left: 20%;
  animation:
    jelly-vertical 45s linear infinite,
    jelly-horizontal 8s ease-in-out infinite alternate,
    jelly-pulse 3s ease-in-out infinite;
}

.jelly-2 {
  left: 68%;
  animation:
    jelly-vertical 55s linear infinite -20s,
    jelly-horizontal 10s ease-in-out infinite alternate -4s,
    jelly-pulse 3.5s ease-in-out infinite -1.5s;
}

.jellyfish-drift.bioluminescent .jelly {
  filter: drop-shadow(0 0 6px rgba(103, 232, 249, 0.6));
}

@keyframes jelly-vertical {
  0% { top: -50px; }
  100% { top: calc(100% + 50px); }
}

@keyframes jelly-horizontal {
  from { transform: translateX(-15px); }
  to { transform: translateX(15px); }
}

@keyframes jelly-pulse {
  0%, 100% { transform: scaleY(1); }
  50% { transform: scaleY(0.9); }
}
</style>
