<script setup>
import { ref, onMounted, onUnmounted, computed, watch, nextTick } from 'vue'
import { useSceneStore } from '../store/scene'
import { useCollectionStore } from '../store/collection'
import { recordPageVisit, saveUserInfo, generateCoupletPoster } from '../api/api.js'
import LongImageViewer from './LongImageViewer.vue'
import MediaPlayer from './MediaPlayer.vue'
import QianmenScene from './QianmenScene.vue'
import DongzhimenScene from './DongzhimenScene.vue'
import LongfusiScene from './LongfusiScene.vue'
import WangfujingScene from './WangfujingScene.vue'
import ChongwenScene from './ChongwenScene.vue'
import EndPage from './EndPage.vue'
import LotteryFormModal from './LotteryFormModal.vue'
import AICoupletForm from './AICoupletForm.vue'
import CoupletDisplay from './CoupletDisplay.vue'
import LoadingComponent from './LoadingComponent.vue'

const sceneStore = useSceneStore()
const collectionStore = useCollectionStore()

// 当前活动场景索引
const activeSceneIndex = ref(0)
// 标题图片是否已显示过（用于保持显示状态）
const titleImageShown = ref(false)
// 滑动容器引用
const scrollContainer = ref(null)
// 是否在滚动中
const isScrolling = ref(false)
// 首页 section ID，用于 scroll-into-view
const homeSectionId = ref('')
// 页面是否准备就绪（滚动完成）
const isPageReady = ref(false)
// 前门板块高度
const qianmenSceneHeight = ref(0)
// 前门板块引用
const qianmenSceneRef = ref(null)
// 是否显示抽奖留资弹窗
const showLotteryForm = ref(false)
// 是否显示AI春联生成弹窗
const showAICoupletForm = ref(false)
// 是否显示春联展示页面
const showCoupletDisplay = ref(false)
// AI春联关键词
const coupletKeyword = ref('')
// 生成的春联
const generatedCouplet = ref(null)
// 页面访问UUID
const pageVisitUuid = ref('')
// 是否已提交用户信息
const hasSubmittedUserInfo = ref(false)
// 是否已手动滑动（用于隐藏滑动提示）
const hasScrolled = ref(false)
// 标记是否正在自动滚动
const isAutoScrolling = ref(false)
// 是否显示加载组件
const showLoading = ref(true)
// 是否已完成图片加载
const isImagesLoaded = ref(false)
// 音乐播放状态
const isMusicPlaying = ref(false)
// 音乐播放器实例
const audioPlayer = ref(null)


// 推荐关键词
const recommendedKeywords = ref(['吉祥', '如意', '平安', '健康', '幸福', '快乐', '富贵', '安康'])

// 场景数据数组
// 顺序：结束页 → 东直门 → 隆福寺 → 王府井 → 崇文门 → 前门 → 首页
const scenes = ref([
  {
    id: 'end',
    name: '结束页',
    description: '恭喜完成全部场景游览'
  },
  {
    id: 'dongzhimen',
    name: '东直门商圈',
    description: '京城东部的交通枢纽和商业中心',
    collectedItem: '团圆福筷',
    videoUrl: 'http://192.168.2.149:8090/sample-3.mp4'
  },
  {
    id: 'longfusi',
    name: '隆福寺商圈',
    description: '传统文化与现代艺术融合的潮流地标',
    collectedItem: '文化福灯',
    videoUrl: 'http://192.168.2.149:8090/sample-3.mp4'
  },
  {
    id: 'wangfujing',
    name: '王府井商圈',
    description: '北京最繁华的商业中心之一',
    collectedItem: '金袋福卡',
    videoUrl: 'http://192.168.2.149:8090/sample-3.mp4'
  },
  {
    id: 'chongwen',
    name: '崇文门商圈',
    description: '融合传统文化与现代商业的活力区域',
    collectedItem: '国潮福字',
    videoUrl: 'http://192.168.2.149:8090/sample-3.mp4'
  },
  {
    id: 'qianmen',
    name: '前门商圈',
    description: '北京最具历史文化底蕴的商圈之一',
    collectedItem: '非遗福印',
    videoUrl: 'http://192.168.2.149:8090/sample-3.mp4'
  },
  {
    id: 'home',
    name: '首页',
    description: '马年新春2026'
  }
])

// 交互状态
const sceneInteractiveStates = ref(scenes.value.map(() => false))
// 福印收集状态
const sealCollectedStates = ref(scenes.value.map(() => false))

// 计算当前收集的物品
const collectedItems = computed(() => {
  const items = []
  scenes.value.forEach((scene, index) => {
    if (index > 0 && index < scenes.value.length - 1) {
      if (sealCollectedStates.value[index]) {
        items.push(scene.collectedItem)
      }
    }
  })
  return items
})

// 计算收集进度
const collectionProgress = computed(() => {
  const total = scenes.value.length - 1 // 排除结束页
  const collected = sealCollectedStates.value.filter((state, index) => 
    index > 0 && index < scenes.value.length && state
  ).length
  return Math.round((collected / total) * 100)
})

// 计算福印收集对象（传递给 EndPage）
const collectedSeals = computed(() => {
  return {
    qianmen: sealCollectedStates.value[5] || false,  // 前门 (索引 5)
    chongwen: sealCollectedStates.value[4] || false, // 崇文门 (索引 4)
    wangfujing: sealCollectedStates.value[3] || false, // 王府井 (索引 3)
    longfusi: sealCollectedStates.value[2] || false, // 隆福寺 (索引 2)
    dongzhimen: sealCollectedStates.value[1] || false // 东直门 (索引 1)
  }
})

// 处理加载完成事件
const handleLoadingComplete = () => {
  isImagesLoaded.value = true
  console.log('图片加载完成，准备初始化页面')
  
  // 确保 scrollContainer 已初始化并滚动到最下方
  ensureScrollContainerReady()
}

// 确保 scrollContainer 已初始化并滚动到最下方
const ensureScrollContainerReady = () => {
  // 等待 DOM 渲染完成
  nextTick(() => {
    const checkScrollContainer = () => {
      if (!scrollContainer.value) {
        console.log('scrollContainer 尚未初始化，延迟重试...')
        setTimeout(checkScrollContainer, 100)
        return
      }
      
      const container = scrollContainer.value
      console.log('scrollContainer 已初始化:', {
        scrollHeight: container.scrollHeight,
        clientHeight: container.clientHeight
      })
      
      // 如果 scrollHeight 为 0，说明内容还未渲染
      if (container.scrollHeight === 0) {
        console.log('内容尚未渲染，延迟重试...')
        setTimeout(checkScrollContainer, 100)
        return
      }
      
      // 标记正在自动滚动
      isAutoScrolling.value = true
      
      // 设置首页 section ID，使用 scroll-into-view 滚动到首页
      homeSectionId.value = 'home-section'
      console.log('使用 scroll-into-view 滚动到首页')
      
      // 设置活动场景为首页
      activeSceneIndex.value = scenes.value.length - 1
      
      // 等待 scroll-into-view 生效
      setTimeout(() => {
        // 再次检查并滚动到最下方，确保滚动位置正确
        try {
          const targetScrollTop = container.scrollHeight - container.clientHeight
          if (typeof container.scrollTo === 'function') {
            container.scrollTo({
              top: targetScrollTop,
              duration: 0
            })
          } else {
            container.scrollTop = targetScrollTop
          }
          console.log('已滚动到最下方，scrollTop:', container.scrollTop)
        } catch (error) {
          console.error('滚动失败:', error)
        }
        
        // 自动滚动结束
        isAutoScrolling.value = false
        // 强制将 hasScrolled 设置为 false，确保滑动提示能够显示
        hasScrolled.value = false
        console.log('scrollContainer 准备就绪，hasScrolled:', hasScrolled.value)
      }, 300)
    }
    
    // 开始检查 scrollContainer
    checkScrollContainer()
  })
}

// 处理开始按钮点击事件
const handleStart = () => {
  // 隐藏加载组件
  showLoading.value = false
  
  // 确保滑动提示能够显示
  hasScrolled.value = false
  console.log('点击开始按钮，hasScrolled:', hasScrolled.value)
  
  // 初始化页面
  initPage()
}

// 初始化页面函数
const initPage = () => {
  // 记录页面访问
  recordPageVisit({
    user_agent: navigator.userAgent,
    page_name: 'home'
  }).then(res => {
    if (res && res.uuid) {
      pageVisitUuid.value = res.uuid
      console.log('页面访问UUID:', res.uuid)
    }
  }).catch(err => {
    console.log('页面访问记录失败:', err)
  })
  
  // 检查并初始化场景交互状态
  scenes.value.forEach((scene, index) => {
    if (index > 0 && index < scenes.value.length) {
      const isCollected = collectionStore.isSceneSealCollected(scene.id)
      sealCollectedStates.value[index] = isCollected
    }
  })
  
  // 标记页面准备就绪
  titleImageShown.value = true
  isAutoScrolling.value = false
  console.log('页面准备就绪')
}

// 初始化音乐播放器
const initMusicPlayer = () => {
  try {
    // 创建音频播放器实例
    audioPlayer.value = uni.createInnerAudioContext()
    const bgmUrl = new URL('/static/music/bgm1.mp3', import.meta.url)
    audioPlayer.value.src = bgmUrl.href
    audioPlayer.value.loop = true
    
    // 播放完成事件
    audioPlayer.value.onEnded(() => {
      audioPlayer.value.seek(0)
      audioPlayer.value.play()
    })
    
    // 播放错误事件
    audioPlayer.value.onError((err) => {
      console.error('音乐播放错误:', err)
    })
    
    console.log('音乐播放器初始化完成')
  } catch (error) {
    console.error('初始化音乐播放器失败:', error)
  }
}

// 播放/暂停音乐
const toggleMusic = () => {
  if (!audioPlayer.value) {
    initMusicPlayer()
  }
  
  if (isMusicPlaying.value) {
    // 暂停音乐
    audioPlayer.value.pause()
    isMusicPlaying.value = false
    console.log('音乐已暂停')
  } else {
    // 播放音乐
    audioPlayer.value.play()
    isMusicPlaying.value = true
    console.log('音乐已开始播放')
  }
}

// 组件挂载后初始化
onMounted(() => {
  console.log('SinglePageContainer 组件挂载')
  
  // 初始化音乐播放器
  initMusicPlayer()
  
  // 自动开始播放音乐
  setTimeout(() => {
    toggleMusic()
  }, 1000)
})

// 处理滚动事件（从下往上滑动）
const handleScroll = (event) => {
  if (isScrolling.value) return
  
  // 只有在非自动滚动状态下，才标记为已手动滑动
  if (!isAutoScrolling.value && !hasScrolled.value && event.detail.scrollTop > 50) {
    hasScrolled.value = true
  }
  
  // 在uniapp中，scroll-view的scroll事件传递的是event.detail对象
  const scrollTop = event.detail.scrollTop
  const viewportHeight = window.innerHeight
  const totalHeight = scrollContainer.value.scrollHeight
  const totalScenes = scenes.value.length
  
  // 计算当前活动场景（从下往上滚动）
  // 首页在底部（索引6），向上滑动依次看到：前门(5)、崇文门(4)、王府井(3)、隆福寺(2)、东直门(1)、结束页(0)
  const distanceFromBottom = totalHeight - scrollTop - viewportHeight
  const sceneIndexFromBottom = Math.round(distanceFromBottom / viewportHeight)
  
  // 将索引转换为正确的场景顺序
  // sceneIndexFromBottom: 0=首页, 1=前门, 2=崇文门, 3=王府井, 4=隆福寺, 5=东直门, 6=结束页
  const sceneIndex = totalScenes - 1 - sceneIndexFromBottom
  
  // 确保索引在有效范围内
  const clampedIndex = Math.max(0, Math.min(sceneIndex, totalScenes - 1))
  
  if (clampedIndex !== activeSceneIndex.value) {
    activeSceneIndex.value = clampedIndex
    // 激活当前场景
    if (activeSceneIndex.value > 0 && activeSceneIndex.value < scenes.value.length - 1) {
      sceneStore.activateScene(scenes.value[activeSceneIndex.value].id)
    }
    // 如果滚动到首页，标记标题图片已显示
    if (clampedIndex === 6) {
      titleImageShown.value = true
    }
  }
}

// 滚动到指定场景（从下往上滑动逻辑）
const scrollToScene = (index) => {
  if (!scrollContainer.value || isScrolling.value) return
  
  isScrolling.value = true
  const viewportHeight = window.innerHeight
  const totalHeight = scrollContainer.value.scrollHeight
  const totalScenes = scenes.value.length
  
  // 计算目标滚动位置（从下往上滚动）
  // index=0: 结束页（最顶部）
  // index=6: 首页（最底部）
  const targetScrollTop = totalHeight - (totalScenes - index) * viewportHeight
  
  scrollContainer.value.scrollTo({
    top: targetScrollTop,
    duration: 1000
  })
  
  setTimeout(() => {
    isScrolling.value = false
  }, 1000)
}

// 收集福印
const collectSeal = (index) => {
  if (index < 1 || index >= scenes.value.length - 1) return
  
  const scene = scenes.value[index]
  const success = collectionStore.collectSealBySceneId(scene.id)
  
  if (success) {
    sealCollectedStates.value[index] = true
    uni.showToast({
      title: `恭喜获得${scene.name}的${scene.collectedItem}！`,
      duration: 2000
    })
  }
}

// 打开抽奖留资弹窗
const openLotteryForm = () => {
  showLotteryForm.value = true
}

// 关闭抽奖留资弹窗
const closeLotteryForm = () => {
  showLotteryForm.value = false
}

// 提交抽奖表单
const submitLotteryForm = async (formData) => {
  // 检查是否已经提交过
  if (hasSubmittedUserInfo.value) {
    uni.showToast({
      title: '您已经提交过信息了，请勿重复提交',
      icon: 'none',
      duration: 2000
    })
    return
  }
  
  // 检查是否有UUID
  if (!pageVisitUuid.value) {
    uni.showToast({
      title: '系统错误，请刷新页面重试',
      icon: 'none',
      duration: 2000
    })
    return
  }
  
  uni.showLoading({
    title: '提交中...',
    mask: true
  })
  
  try {
    // 调用用户信息保存接口
    await saveUserInfo({
      name: formData.name,
      phone: formData.phone,
      address: formData.address,
      msg: formData.msg,
      page_visit_uuid: pageVisitUuid.value
    })
    
    // 标记为已提交
    hasSubmittedUserInfo.value = true
    
    uni.hideLoading()
    uni.showToast({
      title: '提交成功！我们将在活动结束后通知您抽奖结果',
      duration: 2000
    })
    showLotteryForm.value = false
  } catch (error) {
    uni.hideLoading()
    console.error('提交用户信息失败:', error)
    
    // 直接展示后端返回的错误信息
    let errorMessage = '提交失败，请稍后重试'
    
    // 检查是否有后端返回的错误信息
    if (error.data && error.data.error) {
      errorMessage = error.data.error
    } else if (error.response && error.response.data && error.response.data.error) {
      errorMessage = error.response.data.error
    } else if (error.message) {
      // 如果是网络错误或其他错误，显示通用提示
      errorMessage = '提交失败，请稍后重试'
    }
    
    uni.showToast({
      title: errorMessage,
      icon: 'none',
      duration: 2000
    })
  }
}

// 打开AI春联生成弹窗
const openAICoupletForm = () => {
  showAICoupletForm.value = true
}

// 处理生成春联
const handleGenerateCouplet = async (keyword) => {
  uni.showLoading({
    title: '生成中...',
    mask: true
  })
  
  try {
    // 调用后端 API 生成春联海报
    const response = await generateCoupletPoster({
      title: keyword,
      page_visit_uuid: pageVisitUuid.value
    })
    
    uni.hideLoading()
    
    // 构建春联数据 - 使用 API 返回的参数
    generatedCouplet.value = {
      share_url: response.share_url,
      image_url: response.image_url
    }
    
    showCoupletDisplay.value = true
    showAICoupletForm.value = false
  } catch (error) {
    uni.hideLoading()
    
    // 显示错误信息
    uni.showToast({
      title: error.message || '生成春联失败，请稍后重试',
      icon: 'none',
      duration: 2000
    })
  }
}

// 处理分享春联
const handleShareCouplet = () => {
  // 分享逻辑可以在这里扩展
  console.log('分享春联:', generatedCouplet.value)
}

// 返回顶部
const scrollToTop = () => {
  scrollToScene(0)
}

// 处理图片加载错误
const handleImageError = (event) => {
  // event.target.src = 'https://placeholder.pics/svg/640x1136/FDE9DF/FF6B35/2026新春东城商圈'
}

// 处理前门板块高度变化
const handleQianmenHeightChanged = (height) => {
  qianmenSceneHeight.value = height
  // 这里可以添加逻辑，将所有其他场景的高度设置为与前门板块相同的高度
  // 可以通过CSS变量或直接修改DOM元素的高度
  document.documentElement.style.setProperty('--scene-height', `${height}px`)
  console.log('前门板块高度变化:', height, 'px')
  console.log('当前CSS变量:', getComputedStyle(document.documentElement).getPropertyValue('--scene-height'))
}

// 使用scroll-view组件后，不再需要手动处理触摸事件
// scroll-view会自动处理触摸滚动

// 组件卸载前清理资源
onUnmounted(() => {
  // 无需手动移除事件监听器，uniapp会自动处理
})
</script>

<template>
  <div class="single-page-wrapper">
    <!-- 音乐控制按钮 -->
    <div 
      class="music-control"
      :class="{ 'music-playing': isMusicPlaying }"
      @click="toggleMusic"
    >
      <img src="/static/images/music_on.png" alt="音乐" class="music-icon" />
    </div>
    
    <!-- 加载组件 -->
    <LoadingComponent
      v-if="showLoading"
      @loaded="handleLoadingComplete"
      @start="handleStart"
    />
    
    <scroll-view
      class="single-page-container"
      ref="scrollContainer"
      scroll-y="true"
      scroll-with-animation="true"
      enhanced="true"
      :refresher-enabled="false"
      :refresher-triggered="false"
      show-scrollbar="false"
      :bounce="false"
      @scroll="handleScroll"
      :scroll-into-view="homeSectionId"
    >
      <!-- 结束页 -->
      <EndPage
        :is-active="activeSceneIndex === 0"
        :title="scenes[0].description"
        :collection-progress="collectionProgress"
        :collected-count="collectedItems.length"
        :total-count="scenes.length - 1"
        :collected-seals="collectedSeals"
        :has-submitted="hasSubmittedUserInfo"
        :generated-couplet="generatedCouplet"
        @lottery="openLotteryForm"
        @couplet="openAICoupletForm"
        @show-couplet="showCoupletDisplay = true"
        @restart="scrollToTop"
      />

      <!-- 东直门商圈 -->
      <DongzhimenScene 
        :active="activeSceneIndex === 1"
        :scroll-position="scrollContainer && scrollContainer.value ? scrollContainer.value.scrollTop : 0"
        :video-url="scenes[1].videoUrl"
        @collect-seal="collectSeal(1)"
      />

      <!-- 隆福寺商圈 -->
      <LongfusiScene 
        :active="activeSceneIndex === 2"
        :scroll-position="scrollContainer && scrollContainer.value ? scrollContainer.value.scrollTop : 0"
        :video-url="scenes[2].videoUrl"
        @collect-seal="collectSeal(2)"
      />

      <!-- 王府井商圈 -->
      <WangfujingScene 
        :active="activeSceneIndex === 3"
        :scroll-position="scrollContainer?.value?.scrollTop || 0"
        :video-url="scenes[3].videoUrl"
        @collect-seal="collectSeal(3)"
      />

      <!-- 崇文门商圈 -->
      <ChongwenScene 
        :active="activeSceneIndex === 4"
        :scroll-position="scrollContainer?.value?.scrollTop || 0"
        :video-url="scenes[4].videoUrl"
        @collect-seal="collectSeal(4)"
      />

      <!-- 前门商圈 -->
      <QianmenScene 
        :active="activeSceneIndex === 5"
        :scroll-position="scrollContainer?.value?.scrollTop || 0"
        :video-url="scenes[5].videoUrl"
        @collect-seal="collectSeal(5)"
        @height-changed="handleQianmenHeightChanged"
      />
      
      <!-- 新年文案模块 -->
      <section class="new-year-section">
        <div class="new-year-content">
          <img 
            src="/static/images/main_text.png" 
            alt="新年文案" 
            class="new-year-text"
          />
        </div>
      </section>
      
      <!-- 首页 -->
      <section id="home-section" class="scene-section home-section" :class="{ 'active': activeSceneIndex === 6 }">
        <!-- 背景图片层 -->
        <div class="home-bg">
          <img 
            src="/static/bg/bg_main.jpg" 
            alt="2026新春东城商圈"
            class="bg-image"
          />
        </div>
        <!-- 标题图片 -->
        <img 
          src="/static/images/img_title.png" 
          alt="马年新春2026" 
          class="title-image"
          :class="{ 'title-image-active': titleImageShown }"
        />
      </section>

      <!-- 向上滑动提示 -->
      <div class="scroll-tip-bottom" v-if="!hasScrolled">
        <img src="/static/images/icon_hand1.png" class="tip-icon" alt="滑动提示" />
        <p>向上滑动探索商圈</p>
      </div>

    <!-- 抽奖留资弹窗 -->
    <LotteryFormModal
      :visible="showLotteryForm"
      :has-submitted="hasSubmittedUserInfo"
      @close="closeLotteryForm"
      @submit="submitLotteryForm"
    />

    <!-- AI春联生成弹窗 -->
    <AICoupletForm
      :visible="showAICoupletForm"
      @close="showAICoupletForm = false"
      @generate="handleGenerateCouplet"
    />

    <!-- 春联展示页面 -->
    <CoupletDisplay
      :visible="showCoupletDisplay"
      :couplet="generatedCouplet"
      @close="showCoupletDisplay = false"
      @share="handleShareCouplet"
    />
    </scroll-view>
  </div>
</template>

<style scoped>
.single-page-wrapper {
  position: relative;
  width: 100%;
  height: 100vh;
  overflow: hidden;
}

.single-page-container {
  position: relative;
  width: 100%;
  height: 100%;
  overflow-y: scroll; /* 改为 scroll 确保可以滚动 */
  overflow-x: hidden;
  -webkit-overflow-scrolling: touch; /* 启用iOS平滑滚动 */
  touch-action: pan-y; /* 允许垂直方向的触摸滚动 */
  user-select: none; /* 防止触摸时文本被选中 */
}



@keyframes fadeIn {
  from { opacity: 0; }
  to { opacity: 1; }
}

/* ========== 隐藏滚动条样式（所有浏览器）========== */

/* WebKit 浏览器（Chrome、Safari、新版 Edge）*/
.single-page-container::-webkit-scrollbar {
  width: 0 !important;
  height: 0 !important;
  display: none !important;
}

.single-page-container::-webkit-scrollbar-track {
  background: transparent !important;
}

.single-page-container::-webkit-scrollbar-thumb {
  background: transparent !important;
}

.single-page-container::-webkit-scrollbar-corner {
  background: transparent !important;
}

/* Firefox */
.single-page-container {
  scrollbar-width: none !important;
}

/* IE 和旧版 Edge */
.single-page-container {
  -ms-overflow-style: none !important;
}

/* 通用样式 */
.single-page-container {
  scrollbar-color: transparent transparent !important;
}

/* 场景部分样式 */
.scene-section {
  position: relative;
  width: 100%;
  height: var(--scene-height, 100vh);
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: #f5f5f5;
}

/* 首页样式 */
.home-section {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
  height: 100vh;
  overflow: hidden;
}

.home-bg {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 1;
}

.bg-image {
  width: 100%;
  height: 100%;
  object-fit: cover; /* 裁切方式适配不同高度 */
  object-position: center center;
}

/* 向上滑动提示样式 */
.scroll-tip-bottom {
  position: fixed;
  bottom: 20px;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  flex-direction: column;
  align-items: center;
  animation: bounce 1.5s infinite;
  z-index: 100;
  color: white;
}

.tip-icon {
  width: 64rpx;
  height: 78rpx;
}

@keyframes bounce {
  0%, 20%, 50%, 80%, 100% {
    transform: translateX(-50%) translateY(0);
  }
  40% {
    transform: translateX(-50%) translateY(-10px);
  }
  60% {
    transform: translateX(-50%) translateY(-5px);
  }
}

/* 新年文案模块样式 */
.new-year-section {
  width: 100%;
  background-color: #f94332;
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  padding: 15px 0;
}

.new-year-content {
  text-align: center;
}

.new-year-text {
  display: inline-block;
  width: 516rpx;
  height: auto;
  object-fit: contain;
}

/* 标题图片样式 */
.title-image {
  width: 80%;
  max-width: 400px;
  height: auto;
  margin: 40rpx auto 20px;
  display: block;
  transform: scale(0);
  transition: transform 0.8s cubic-bezier(0.175, 0.885, 0.32, 1.275);
  position: relative;
  z-index: 2;
}

.title-image-active {
  transform: scale(1);
}

.scroll-tip {
  position: absolute;
  bottom: 50px;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  flex-direction: column;
  align-items: center;
  animation: bounce 1.5s infinite;
}

@keyframes bounce {
  0%, 20%, 50%, 80%, 100% {
    transform: translateX(-50%) translateY(0);
  }
  40% {
    transform: translateX(-50%) translateY(-20px);
  }
  60% {
    transform: translateX(-50%) translateY(-10px);
  }
}

/* 音乐控制按钮样式 */
.music-control {
  position: fixed;
  top: 20px;
  right: 20px;
  width: 50px;
  height: 50px;
  border-radius: 50%;
  /* background-color: rgba(0, 0, 0, 0.3); */
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 1000;
  cursor: pointer;
}


.music-icon {
  width: 49rpx;
  height: 49rpx;
  transition: transform 0.3s ease;
}

/* 音乐播放时的转动动画 */
.music-playing .music-icon {
  animation: rotate 2s linear infinite;
}

@keyframes rotate {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(360deg);
  }
}

/* 响应式设计 */
@media (max-width: 480px) {
  .scene-title {
    font-size: 24px;
  }
  
  .scene-description {
    font-size: 14px;
  }
  
  .couplet-item {
    font-size: 20px;
  }
  
  .top-couplet, .bottom-couplet {
    margin-right: 20px;
    margin-left: 20px;
  }
  
  .music-control {
    width: 40px;
    height: 40px;
    top: 10px;
    right: 10px;
  }
  
  .music-icon {
    width: 24px;
    height: 24px;
  }
}
</style>