<route lang="json5" type="home">
{
  style: {
    navigationStyle: 'custom',
    navigationBarTitleText: '',
  },
}
</route>

<template>
  <image src="@/static/images/production/bg.jpg" class="w-full h-full absolute z-[-10]"></image>
  <view class="star-container absolute top-0 left-0 w-full h-full overflow-hidden z-[-9]">
    <image
      v-for="star in visibleStars"
      :key="star.id"
      :src="'/static/images/play/star.png'"
      class="star-image absolute"
      :style="{
        top: star.top,
        left: star.left,
        width: star.size,
        height: star.size,
        '--opacity': star.opacity,
        '--duration': `${star.duration}s`,
        '--delay': `${star.delay}s`,
        '--rotate': `${star.rotate}deg`,
        '--scale': star.scale,
      }"
    />
  </view>
  <view class="w-full min-h-screen flex flex-col items-center z-10">
    <view class="w-full h-60rpx flex items-center justify-end mt-20rpx">
      <view class="flex items-center">
        <view
          class="w-60rpx h-60rpx flex items-center justify-center rounded-52rpx bg-#1f2029 mr-20rpx"
          @click="show = true"
        >
          <image
            :src="getAssetsImages('production', value1)"
            class="w-38rpx h-38rpx rounded-38rpx"
          ></image>
        </view>
        <view
          class="min-w-150rpx h-60rpx flex items-center justify-center mr-20rpx bg-#1f2029 rounded-52rpx"
          @click="goPage('/pages/purse/index')"
        >
          <image
            src="@/static/images/production/wallet.png"
            class="w-32rpx h-32rpx ml-20rpx mr-7rpx"
          ></image>
          <text class="mr-20rpx text-[24rpx] text-white font-400">
            {{ $t('production.purse') }}
          </text>
        </view>
      </view>
    </view>
    <view class="w-690rpx mt-15rpx h-90rpx w-full flex items-center justify-center text-white">
      <image src="@/static/images/trophy/jinbi.png" class="w-60rpx h-60rpx mr-10rpx"></image>
      <text class="text-[60rpx] font-700 mr-10rpx" ref="goldCoinEl">
        {{ currentLibaoData.currentValue }}
      </text>
      <text class="text-24rpx font-400 pt-20rpx">BHCoin</text>
    </view>
    <view
      id="lottieContainer"
      class="w-690rpx flex items-center justify-center mt-30rpx h-557rpx"
      @click="tishiShow = true"
    >
      <!--      <image src="@/static/images/production/cat.png" class="w-250rpx h-557rpx"></image>-->
    </view>
    <view class="w-full flex items-center justify-center mt-20rpx">
      <view class="custrom-bg w-650rpx flex text-white items-center">
        <wd-progress :percentage="percentage" hide-text :duration="0.1" />
      </view>
    </view>
    <view class="w-650rpx flex items-center justify-between mt-20rpx">
      <view class="flex items-center">
        <image src="@/static/images/production/time.png" class="w-30rpx h-30rpx mr-10rpx"></image>
        <text class="text-white text-26rpx font-700 mr-5rpx">{{ $t('index.Countdown') }}</text>
        <text class="text-primary text-26rpx font-400">{{ displayTime }}</text>
      </view>
      <view class="flex items-center justify-center">
        <image src="@/static/images/trophy/jinbi.png" class="w-30rpx h-30rpx mr-10rpx"></image>
        <text class="text-26rpx font-400 text-white">+{{ currentLibaoData.currentRate }}/s</text>
      </view>
    </view>
    <view class="w-650rpx flex items-center mt-20rpx justify-between">
      <!--      @click="goPage('/pages/play/index')"-->
      <view
        @click="startGame"
        class="w-310rpx h-80rpx flex items-center justify-center relative bg-#111 rounded-20rpx"
      >
        <image src="@/static/images/production/btn.png" class="w-310rpx h-80rpx absolute"></image>
        <image src="@/static/images/production/liwu.png" class="w-36rpx h-36rpx mr-10rpx"></image>
        <text class="text-white text-28rpx font-700" :class="{ 'libao-scale': isAnimating }">
          Play
        </text>
      </view>
      <view
        @click="shengjiShow = true"
        class="w-310rpx h-80rpx flex items-center justify-center relative bg-#111 rounded-20rpx"
      >
        <image src="@/static/images/production/btn.png" class="w-310rpx h-80rpx absolute"></image>
        <image
          src="@/static/images/production/shengji.png"
          class="w-36rpx h-36rpx mr-10rpx"
        ></image>
        <text class="text-white text-28rpx font-700">Boots</text>
      </view>
    </view>
    <view class="w-650rpx flex items-center mt-20rpx relative">
      <image
        src="@/static/images/production/playbg.png"
        class="w-243rpx h-44rpx absolute left-36rpx"
      ></image>
      <view class="flex items-center justify-center z-1 ml-77rpx mt-10rpx">
        <image
          src="@/static/images/production/shangsheng.png"
          class="w-14rpx h-19rpx mr-10rpx"
        ></image>
        <text class="text-18rpx font-400 text-white">08:01:11(+0.02/s)</text>
      </view>
    </view>
    <!--    <view id="lottieContainer" class="box"></view>-->
    <!--    <button @click="show = !show">Solana Wallet</button>-->
  </view>
  <!-- 语言 -->
  <wd-popup v-model="show" position="top">
    <view
      class="bg-cardlight w-full h-750rpx flex items-center flex-col justify-between p-x-30rpx p-y-50rpx box-border"
    >
      <view
        v-for="item in languages"
        :key="item.label"
        class="w-690rpx flex items-center h-80rpx rounded-10rpx justify-between text-white text-28rpx langboder"
        @click="changeLocale(item)"
        :class="value1 === item.value ? 'bg-ac-yy' : ''"
      >
        <view class="ml-30rpx">
          <image
            :src="getAssetsImages('production', item.value)"
            class="w-60rpx h-60rpx mr-30rpx rounded-38rpx"
          ></image>
          <text :class="value1 === item.value ? 'text-primary' : 'text-white'">
            {{ item.label }}
          </text>
        </view>
        <image
          v-if="value1 === item.value"
          src="@/static/images/production/gou.png"
          class="w-30rpx h-30rpx mr-30rpx"
        ></image>
      </view>
    </view>
  </wd-popup>
  <Dialog v-model:show-value="shengjiShow" position="bottom" width="690rpx" height="672rpx">
    <view class="w-full flex flex-col items-center">
      <text class="text-white mt-90rpx text-36rpx font-700">Speed up the process!</text>
      <view
        class="w-650rpx h-150rpx flex bg-cards rounded-20rpx items-center justify-between mt-30rpx"
      >
        <view class="flex flex-col text-primary ml-20rpx">
          <text class="text-42rpx font-700 h-63rpx">BH 0</text>
          <text class="font-400 text-24rpx mt-10rpx">360 HB Coin/H</text>
        </view>
        <image
          src="@/static/images/production/maozhuao.png"
          class="w-90rpx h-90rpx mr-20rpx"
        ></image>
      </view>
      <view
        class="w-650rpx h-280rpx flex flex-col bg-cards rounded-20rpx items-center justify-around mt-30rpx"
      >
        <view class="flex items-center justify-between text-white w-full">
          <text class="text-42rpx font-700 ml-20rpx">BH 1</text>
          <text class="text-24rpx font-400 mr-20rpx">720 HB Coin/H</text>
        </view>
        <view class="w-full flex items-center justify-around">
          <view
            class="w-285rpx h-156rpx rounded-20rpx bg-cardlight flex flex-col items-center justify-around"
          >
            <view class="flex items-center w-full justify-start ml-30rpx">
              <image src="@/static/images/purse/u.png" class="w-30rpx h-30rpx mr-10rpx"></image>
              <text class="text-24rpx font-400 text-white">100</text>
            </view>
            <view
              class="w-245rpx h-60rpx bg-primary rounded-20rpx flex items-center justify-center"
            >
              <text class="text-26rpx font-700 text-textc">Upgrade</text>
            </view>
          </view>
          <view
            class="w-285rpx h-156rpx rounded-20rpx bg-cardlight flex flex-col items-center justify-around"
          >
            <view class="flex items-center w-full justify-start ml-30rpx">
              <image
                src="@/static/images/trophy/jinbi.png"
                class="w-30rpx h-30rpx mr-10rpx"
              ></image>
              <text class="text-24rpx font-400 text-white">100</text>
            </view>
            <view
              class="w-245rpx h-60rpx bg-primary rounded-20rpx flex items-center justify-center"
            >
              <text class="text-26rpx font-700 text-textc">Upgrade</text>
            </view>
          </view>
        </view>
      </view>
    </view>
  </Dialog>
  <Dialog v-model:show-value="tishiShow" width="690rpx" height="577rpx">
    <view class="w-full flex flex-col items-center">
      <image src="@/static/images/production/time.png" class="w-90rpx h-90rpx mt-90rpx"></image>
      <view class="w-630rpx flex items-center">
        <text class="text-white font-700 text-36rpx text-center mt-30rpx">
          You can collect GT coins every 12 hours
        </text>
      </view>
      <view class="w-630rpx flex items-center justify-center mt-30rpx">
        <text class="text-26rpx font-400 text-primary text-center">{{ displayTime }}</text>
      </view>
      <view
        @click="tishiShow = false"
        class="w-630rpx bg-primary h-100rpx flex items-center justify-center rounded-20rpx mt-30rpx"
      >
        <text class="text-28rpx font-700 text-textc">Got it</text>
      </view>
    </view>
    <view class="w-full flex flex-col items-center">
      <image src="@/static/images/production/time.png" class="w-90rpx h-90rpx mt-90rpx"></image>
      <view class="w-630rpx flex items-center">
        <text class="text-white font-700 text-36rpx text-center mt-30rpx">
          You can collect GT coins every 12 hours
        </text>
      </view>
      <view class="w-630rpx flex items-center justify-center mt-30rpx">
        <text class="text-26rpx font-400 text-primary text-center">10h 13m 26s</text>
      </view>
      <view
        class="w-630rpx bg-primary h-100rpx flex items-center justify-center rounded-20rpx mt-30rpx"
      >
        <text class="text-28rpx font-700 text-textc">Got it</text>
      </view>
    </view>
  </Dialog>
  <Dialog v-model:show-value="lingquShow" width="690rpx" height="577rpx">
    <view class="w-full flex flex-col items-center">
      <image src="@/static/images/trophy/jinbi.png" class="w-90rpx h-90rpx mt-90rpx"></image>
      <view class="w-630rpx flex items-center">
        <text class="text-white font-700 text-36rpx text-center mt-30rpx">
          The result of the last automatic collection
        </text>
      </view>
      <view class="w-630rpx flex items-center justify-center mt-30rpx">
        <text class="text-26rpx font-400 text-primary text-center">
          + {{ currentLibaoData.currentValue }}
        </text>
      </view>
      <view
        @click="lingqu"
        class="w-630rpx bg-primary h-100rpx flex items-center justify-center rounded-20rpx mt-30rpx"
      >
        <text class="text-28rpx font-700 text-textc">Got it</text>
      </view>
    </view>
    <view class="w-full flex flex-col items-center">
      <image src="@/static/images/production/time.png" class="w-90rpx h-90rpx mt-90rpx"></image>
      <view class="w-630rpx flex items-center">
        <text class="text-white font-700 text-36rpx text-center mt-30rpx">
          You can collect GT coins every 12 hours
        </text>
      </view>
      <view class="w-630rpx flex items-center justify-center mt-30rpx">
        <text class="text-26rpx font-400 text-primary text-center">10h 13m 26s</text>
      </view>
      <view
        class="w-630rpx bg-primary h-100rpx flex items-center justify-center rounded-20rpx mt-30rpx"
      >
        <text class="text-28rpx font-700 text-textc">Got it</text>
      </view>
    </view>
  </Dialog>
  <tabbar currentTab="pages/index/index"></tabbar>
</template>
<script setup lang="ts">
import i18n, { t } from '@/locale/index'
import { useLaunchParams } from '@telegram-apps/sdk-vue'
import lottie from 'lottie-web'
import animationData from '@/static/Animation.json'
import Dialog from '@/components/common/Dialog/index.vue'
import { useUserStore } from '@/store/user'
import tabbar from '@/components/TabBar/index.vue'
import { useNotify } from 'wot-design-uni'
import { useImgPath } from '@/hooks/useImgPath'
import {
  getGoldCoinProductState,
  stageCoinAdd,
  startCoinGame,
  UserCenter,
} from '@/service/index/foo'
const { getAssetsImages } = useImgPath()
const { showNotify } = useNotify()

// 用户信息
const pl = useLaunchParams()
const useStore = useUserStore()
const initUser = async (user: any, shareCode: string) => {
  const data = await useStore.setUserInfo(user, shareCode)
}

// 获取当前礼包数据
const currentLibaoData = ref<UserCenter>({} as UserCenter)
const getGoldCoinProduct = async () => {
  const { data } = await getGoldCoinProductState()
  currentLibaoData.value = data
}
const isAnimating = ref(false)
// 是否有动画
const libaoShow = computed(() => {
  return currentLibaoData.value.status === 0 || currentLibaoData.value.status === 2
})
watch(
  () => libaoShow.value,
  (newValue) => {
    isAnimating.value = newValue
  },
)
const formatDisplayTime = (seconds: number): string => {
  if (!seconds || isNaN(seconds)) {
    return '00h 00m 00s'
  }
  if (currentLibaoData.value.status === 0 || currentLibaoData.value.status === 2) {
    return '00h 00m 00s'
  }
  // 限制最大时间为12小时
  seconds = Math.min(seconds, TWELVE_HOURS)
  // 如果小于0，返回0
  seconds = Math.max(0, seconds)
  const hours = Math.floor(seconds / 3600)
  const minutes = Math.floor((seconds % 3600) / 60)
  const remainingSecs = seconds % 60
  return `${hours.toString().padStart(2, '0')}h ${minutes.toString().padStart(2, '0')}m ${remainingSecs.toString().padStart(2, '0')}s`
}
const percentage = ref(0) // 进度条
const TWELVE_HOURS = 12 * 60 * 60 // 12小时的秒数
const remainingSeconds = ref(0)
const lastRefreshTime = ref(0)
const REFRESH_INTERVAL = 10000
const progressTimer = ref<number | null>(null)
const initDisplayTime = () => {
  if (currentLibaoData.value?.status === 1 && currentLibaoData.value?.startTimestamp) {
    const currentTimestamp = Math.floor(Date.now() / 1000)
    const startTime = currentLibaoData.value.startTimestamp
    // 计算已经过去的时间
    let elapsedTime: number
    // 如果服务器返回的 endTimestamp 不为 0，优先使用服务器时间
    if (currentLibaoData.value.endTimestamp) {
      elapsedTime = currentLibaoData.value.endTimestamp - startTime
    } else {
      // 使用本地时间计算，但需要校验
      elapsedTime = currentTimestamp - startTime
    }
    // 检查是否超过12小时
    if (elapsedTime >= TWELVE_HOURS) {
      // 如果超过12小时，说明游戏应该已经结束
      remainingSeconds.value = 0
      displayTime.value = '00h 00m 00s'

      // 停止所有计时器并刷新状态
      stopAllTimers()
      // refreshData()
    } else if (elapsedTime < 0) {
      // 如果出现负数时间（比如服务器时间与本地时间不同步）
      // 使用服务器时间或重置为0
      remainingSeconds.value = TWELVE_HOURS
      displayTime.value = formatDisplayTime(TWELVE_HOURS)
    } else {
      // 正常情况：计算剩余时间
      remainingSeconds.value = TWELVE_HOURS - elapsedTime
      displayTime.value = formatDisplayTime(remainingSeconds.value)
    }
  } else {
    // 游戏未开始或已结束
    remainingSeconds.value = 0
    displayTime.value = '00h 00m 00s'
  }
}
// 开始游戏
const startGame = async () => {
  if (currentLibaoData.value.status === 2) {
    lingquShow.value = true
  } else {
    // stopAllTimers()

    try {
      if (currentLibaoData.value.status === 0) {
        await startCoinGame()
        await getGoldCoinProduct()
        percentage.value = 0
        // // 初始化显示时间
        initDisplayTime()
        //
        // // 启动动画和计时器
        isAnimating.value = false
        startCountdown()
        // startProgressAnimation()
      } else {
        tishiShow.value = true
      }
    } catch (error) {
      console.error('Failed to start game:', error)
      setTimeout(() => startGame(), 5000)
    }
  }
}
const lingqu = async () => {
  const { code, msg } = await stageCoinAdd()
  if (code === 1) {
    showNotify({ type: 'success', message: msg })
  } else {
    showNotify({ type: 'warning', message: msg })
  }
  lingquShow.value = false
  await startCoinGame()
  await getGoldCoinProduct()
  if (currentLibaoData.value.status === 1) {
    // 先停止所有计时器
    stopAllTimers()
    // 重新初始化显示时间
    initDisplayTime()
    // 重新启动动画和计时器
    isAnimating.value = true
    startCountdown()
    startProgressAnimation()
    // 更新最后刷新时间
    lastRefreshTime.value = Date.now()
  }
}
watch(
  () => currentLibaoData.value.status,
  (newStatus) => {
    console.info('🚀 ~ file:index method: line:443 -----', 11)
    // 确保进度条状态正确
    percentage.value = getProgressPercentage()
    // 如果变成了进行中状态，启动动画
    if (newStatus === 1) {
      // isAnimating.value = false
      startCountdown()
      // startProgressAnimation()
    } else {
      // 其他状态停止动画
      stopAllTimers()
    }
  },
)
const startProgressAnimation = () => {
  if (progressTimer.value) {
    cancelAnimationFrame(progressTimer.value)
  }

  const updateProgress = async () => {
    percentage.value = getProgressPercentage()

    // 每10秒刷新一次数据
    const now = Date.now()
    if (now - lastRefreshTime.value >= REFRESH_INTERVAL) {
      lastRefreshTime.value = now
      await refreshData()
    }

    // 只有在游戏进行中状态才继续动画
    if (currentLibaoData.value.status === 1) {
      progressTimer.value = requestAnimationFrame(updateProgress)
    }
  }

  updateProgress()
}
const refreshData = async () => {
  const now = Date.now()
  try {
    // 更新最后刷新时间
    lastRefreshTime.value = now
    await getGoldCoinProduct()
    // // 根据状态显示音符动画
    // if (currentLibaoData.value.status === 1) {
    //   showNote.value = true
    //   setTimeout(() => {
    //     showNote.value = false
    //   }, 800)
    // }
    // 不再在这里停止计时器，让外部控制
  } catch (error) {
    console.error('Refresh failed:', error)
    throw error // 向上传递错误
  }
}
// countdown
const countdownTimer = ref<number | null>(null)
const startCountdown = () => {
  if (countdownTimer.value) {
    clearInterval(countdownTimer.value)
  }
  const updateCountdown = () => {
    if (currentLibaoData.value.status !== 1) {
      stopAllTimers()
      return
    }
    if (remainingSeconds.value > 0) {
      remainingSeconds.value--
      displayTime.value = formatDisplayTime(remainingSeconds.value)
      // 每次时间更新时也更新进度条
      const progress = ((TWELVE_HOURS - remainingSeconds.value) / TWELVE_HOURS) * 100
      percentage.value = Math.min(Math.max(0, progress), 100)
    } else {
      stopAllTimers()
      refreshData()
    }
  }
  // 确保初始时间正确
  if (!remainingSeconds.value) {
    initDisplayTime()
  }
  // 立即执行一次更新
  updateCountdown()
  // 启动定时器
  countdownTimer.value = setInterval(updateCountdown, 1000)
}
const stopAllTimers = () => {
  if (countdownTimer.value) {
    clearInterval(countdownTimer.value)
    countdownTimer.value = null
  }
  // if (progressTimer.value) {
  //   cancelAnimationFrame(progressTimer.value)
  //   progressTimer.value = null
  // }
  //
  // if (timerInterval.value) {
  //   clearInterval(timerInterval.value)
  //   timerInterval.value = null
  // }
  percentage.value = 0
  isAnimating.value = false
  // showNote.value = false
}
// Lott
const initLott = () => {
  const query = uni.createSelectorQuery()
  query
    .select('#lottieContainer')
    .boundingClientRect((rect) => {
      if (rect) {
        lottie.loadAnimation({
          container: document.getElementById('lottieContainer'),
          renderer: 'svg',
          loop: true,
          autoplay: false,
          animationData,
        })
        lottie.play()
      } else {
        console.error('Container element not found')
      }
    })
    .exec()
}
// 添加一个统一的检查和启动函数
const checkAndStartTimers = async () => {
  try {
    await getGoldCoinProduct()
    // 设置初始进度
    percentage.value = getProgressPercentage()
    if (currentLibaoData.value.status === 1) {
      initDisplayTime()
    }
  } catch (error) {
    console.error('Failed to check and start timers:', error)
    setTimeout(() => checkAndStartTimers(), 5000)
  }
}
const getProgressPercentage = (): number => {
  // 如果状态为0且有金币可以领取,返回100%
  if (currentLibaoData.value.status === 2 && currentLibaoData.value.currentValue > 0) {
    return 100
  }

  // 如果是游戏进行中状态，根据剩余时间计算进度
  if (currentLibaoData.value.status === 1) {
    const progress = ((TWELVE_HOURS - remainingSeconds.value) / TWELVE_HOURS) * 100
    return Math.min(Math.max(0, progress), 100)
  }
  return 0
}
onShow(async () => {
  generateStars()
  addStarsGradually()
  await initUser(pl.initData.user, uni.getStorageSync('shareCode') || '')
  await checkAndStartTimers()
  nextTick(() => {
    initLott()
  })
})
onHide(() => {
  if (addStarTimer) {
    clearInterval(addStarTimer)
  }
  lottie.destroy()
})

const goPage = async (url: string) => {
  await uni.navigateTo({
    url,
  })
}
// 语言
const value1 = ref('en')
const languages = [
  { value: 'en', label: 'English' },
  { value: 'vi', label: 'Tiếng Việt' },
  { value: 'th', label: 'ภาษาไทย' },
  { value: 'ru', label: 'Русский язык' },
  { value: 'ko', label: '한국어' },
  { value: 'ja', label: 'にほんご' },
  { value: 'zh-TW', label: '繁体中文' },
]
const changeLocale = async (item) => {
  // 请求存入语言
  uni.setLocale(item.value)
  i18n.global.locale = item.value
  uni.setStorageSync('lang', item.value)
  value1.value = item.value
  show.value = false
  // await postCheckLang(item.value)
}
const show = ref(false)
const displayTime = ref('00h 00m 00s')
const shengjiShow = ref(false)
const tishiShow = ref(false)
const lingquShow = ref(false)

// 星星
const stars = ref([])
const visibleStars = ref([])
const totalStars = 50
const addInterval = 100 // 每100ms添加一颗星星
let addStarTimer = null

const generateStar = (index) => ({
  id: index,
  top: `${Math.random() * 100}%`,
  left: `${Math.random() * 100}%`,
  size: `${Math.random() * 20 + 5}rpx`,
  duration: Math.random() * 5 + 5,
  delay: Math.random() * 2,
  opacity: Math.random() * 0.5 + 0.3,
  rotate: Math.random() * 1440, // 0 to 4 full rotations
  scale: Math.random() * 0.5 + 0.5,
})

const generateStars = () => {
  stars.value = Array.from({ length: totalStars }, (_, i) => generateStar(i))
}

const addStarsGradually = () => {
  let index = 0
  addStarTimer = setInterval(() => {
    if (index < stars.value.length) {
      visibleStars.value.push(stars.value[index])
      index++
    } else {
      clearInterval(addStarTimer)
    }
  }, addInterval)
}
</script>

<style lang="scss" scoped>
.langboder {
  border: 1px solid #3d537c;
}

.bg-ac-yy {
  border: 1px solid #ffdc00;
}

.custrom-bg {
  :deep(.wd-progress__inner) {
    border-radius: 20px;
    background: linear-gradient(90deg, #fff199 0%, #ffdc00 100%) !important;
  }

  :deep(.wd-progress__outer) {
    height: 24rpx;
    border-radius: 35rpx;
  }
}

.star-container {
  perspective: 1000px;
  transform-style: preserve-3d;
}

.star-image {
  --opacity: 0;
  --duration: 5s;
  --delay: 0s;
  --rotate: 0deg;
  --scale: 1;
  animation:
    star-appear 0.5s ease-out forwards,
    star-fall var(--duration) linear infinite var(--delay);
  filter: drop-shadow(0 0 5px rgba(255, 255, 255, 0.7));
}

@keyframes star-appear {
  from {
    opacity: 0;
    transform: scale(0);
  }
  to {
    opacity: var(--opacity);
    transform: scale(var(--scale));
  }
}

@keyframes star-fall {
  0% {
    transform: translateZ(-100px) translateX(0) translateY(0) rotate(0deg) scale(var(--scale));
  }
  10% {
    transform: translateZ(0) translateX(-50px) translateY(50px) rotate(var(--rotate))
      scale(var(--scale));
  }
  90% {
    transform: translateZ(0) translateX(-150px) translateY(450px) rotate(var(--rotate))
      scale(var(--scale));
  }
  100% {
    transform: translateZ(100px) translateX(-200px) translateY(500px) rotate(var(--rotate))
      scale(var(--scale));
    opacity: 0;
  }
}
.libao-scale {
  transform-origin: center center;
  animation: libaoGuitar 1s ease-out infinite;
}

@keyframes libaoGuitar {
  0% {
    transform: scale(0.95);
  }
  50% {
    transform: scale(1.32);
  }
  100% {
    transform: scale(0.95);
  }
}
</style>
