<script setup lang="ts">
import { onMounted, onBeforeUnmount, computed } from 'vue'
import { useAquaticEvents } from './useAquaticEvents'
import { useAquaticState } from './useAquaticState'
import {
  OceanScene,
  BubbleStream,
  FishSchool,
  JellyfishDrift,
  EventOverlay,
  EdgeFade,
  PixelLife,
} from './layers'

const { start, stop } = useAquaticEvents()
const { timeOfDay, season, depthZone } = useAquaticState()

const rootClasses = computed(() => [
  `tod-${timeOfDay.value}`,
  `season-${season.value}`,
  `depth-${depthZone.value}`,
])

onMounted(() => start())
onBeforeUnmount(() => stop())
</script>

<template>
  <div class="aquatic-bg" :class="rootClasses">
    <!-- The world: unified background scene -->
    <OceanScene />

    <!-- Independent dynamic overlay layers -->
    <BubbleStream />
    <FishSchool />
    <JellyfishDrift />
    <PixelLife />
    <EventOverlay />
    <EdgeFade />
  </div>
</template>

<style scoped>
.aquatic-bg {
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  overflow: hidden;
}

@media (prefers-reduced-motion: reduce) {
  .aquatic-bg :deep(*) {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}
</style>
