<template>
    <div class="starry-bg">
      <!-- 星空层 -->
      <div class="stars"></div>
      <div class="twinkling"></div>
      <div class="gradient-overlay"></div>
    </div>
  </template>
  
  <script setup>
  // 无需脚本逻辑，这个是纯背景效果
  </script>
  
  <style scoped>
  /* 全屏容器 */
  .starry-bg {
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    overflow: hidden;
  }
  
  /* 背景渐变层（以紫色为主） */
  .gradient-overlay {
    position: absolute;
    width: 100%;
    height: 100%;
    background: radial-gradient(circle at center, #a48cf2 0%, #5b34b1 50%, #1a093f 100%);
    z-index: 1;
  }
  
  /* 星星层（淡黄色点点） */
  .stars {
    width: 100%;
    height: 100%;
    background: transparent;
    background-image: radial-gradient(#fff7b3 1px, transparent 1px),
                      radial-gradient(#fff7b3 1px, transparent 1px);
    background-size: 2px 2px, 3px 3px;
    background-position: 0 0, 50px 50px;
    animation: moveStars 200s linear infinite;
    z-index: 0;
    opacity: 0.7;
  }
  
  /* 闪烁层 */
  .twinkling {
    width: 100%;
    height: 100%;
    background: transparent;
    background-image: radial-gradient(#fff9c4 1px, transparent 1px),
                      radial-gradient(#fff7b3 1px, transparent 1px);
    background-size: 3px 3px, 2px 2px;
    animation: twinkle 3s infinite ease-in-out alternate;
    z-index: 2;
    opacity: 0.5;
  }
  
  /* 星星轻微移动模拟流动的感觉 */
  @keyframes moveStars {
    from { background-position: 0 0, 50px 50px; }
    to { background-position: 10000px 10000px, 10050px 10050px; }
  }
  
  /* 闪烁动画 */
  @keyframes twinkle {
    from { opacity: 0.3; }
    to { opacity: 0.7; }
  }
  </style>
  