<template>
  <div class="bubble-stream">
    <div class="bubbles-base" />
    <div v-if="burstActive" class="bubbles-burst" />
  </div>
</template>

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

const { activeEventModifiers } = useAquaticState()
const burstActive = computed(() => activeEventModifiers.value.has('bubble-burst'))
</script>

<style scoped>
.bubble-stream {
  position: absolute;
  inset: 0;
  z-index: 6;
  pointer-events: none;
}

.bubbles-base {
  position: absolute;
  inset: 0;
  background:
    /* Large bubbles - slow rise */
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='90' height='220' viewBox='0 0 90 220' shape-rendering='crispEdges'%3E%3Crect x='22' y='30' width='4' height='4' fill='%2367e8f9' opacity='0.22'/%3E%3Crect x='65' y='95' width='4' height='4' fill='%2367e8f9' opacity='0.18'/%3E%3Crect x='38' y='160' width='4' height='4' fill='%2367e8f9' opacity='0.24'/%3E%3Crect x='10' y='200' width='4' height='4' fill='%2367e8f9' opacity='0.16'/%3E%3Crect x='75' y='50' width='4' height='4' fill='%2367e8f9' opacity='0.14'/%3E%3C/svg%3E") repeat / 90px 220px,
    /* Medium bubbles - medium rise */
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='110' height='300' viewBox='0 0 110 300' shape-rendering='crispEdges'%3E%3Crect x='30' y='40' width='2' height='2' fill='white' opacity='0.16'/%3E%3Crect x='80' y='120' width='2' height='2' fill='white' opacity='0.13'/%3E%3Crect x='15' y='190' width='2' height='2' fill='white' opacity='0.16'/%3E%3Crect x='60' y='260' width='2' height='2' fill='white' opacity='0.12'/%3E%3Crect x='95' y='70' width='2' height='2' fill='white' opacity='0.14'/%3E%3Crect x='45' y='160' width='2' height='2' fill='white' opacity='0.1'/%3E%3C/svg%3E") repeat / 110px 300px,
    /* Tiny bubbles - fast rise */
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='70' height='160' viewBox='0 0 70 160' shape-rendering='crispEdges'%3E%3Crect x='15' y='20' width='2' height='2' fill='%2367e8f9' opacity='0.1'/%3E%3Crect x='50' y='60' width='2' height='2' fill='%2367e8f9' opacity='0.08'/%3E%3Crect x='30' y='100' width='2' height='2' fill='white' opacity='0.09'/%3E%3Crect x='60' y='140' width='2' height='2' fill='%2367e8f9' opacity='0.07'/%3E%3Crect x='8' y='80' width='2' height='2' fill='white' opacity='0.08'/%3E%3C/svg%3E") repeat / 70px 160px;
  animation: sea-bubbles 16s linear infinite, water-sway 10s ease-in-out infinite alternate;
}

/* Burst event: extra large bubbles from a point */
.bubbles-burst {
  position: absolute;
  inset: 0;
  background:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='60' height='180' viewBox='0 0 60 180' shape-rendering='crispEdges'%3E%3Crect x='25' y='20' width='6' height='6' fill='%2367e8f9' opacity='0.3'/%3E%3Crect x='15' y='70' width='6' height='6' fill='%2367e8f9' opacity='0.28'/%3E%3Crect x='35' y='110' width='6' height='6' fill='%2367e8f9' opacity='0.32'/%3E%3Crect x='20' y='150' width='6' height='6' fill='white' opacity='0.25'/%3E%3Crect x='40' y='40' width='4' height='4' fill='white' opacity='0.22'/%3E%3C/svg%3E") repeat / 60px 180px;
  animation: burst-rise 6s linear infinite;
  opacity: 0;
  animation: burst-rise 6s linear infinite, burst-fade 8s ease-in-out forwards;
}

@keyframes sea-bubbles {
  from { background-position: 0 0, 30px 0, 10px 0; }
  to { background-position: 0 -220px, 0 -300px, -15px -160px; }
}

@keyframes water-sway {
  from { transform: translateX(-3px); }
  to { transform: translateX(3px); }
}

@keyframes burst-rise {
  from { background-position: 30px 0; }
  to { background-position: 30px -180px; }
}

@keyframes burst-fade {
  0% { opacity: 0; }
  10% { opacity: 0.8; }
  80% { opacity: 0.6; }
  100% { opacity: 0; }
}
</style>
