/* ========================================
   Home.html 超明显星空效果
   ======================================== */

/* 深色背景 */
.bee-page-container {
  background: #0a0e27 !important;
  position: relative;
  overflow: hidden;
}

/* 确保标题可见 */
.bee-row-1 {
  position: relative;
  z-index: 100;
  background: linear-gradient(135deg, rgba(102, 126, 234, 0.3) 0%, rgba(118, 75, 162, 0.3) 100%);
  padding: 40px 20px;
  border-radius: 15px;
  margin: 20px;
}

.bee-row-1 h1 {
  color: #ffffff !important;
  text-shadow: 
    0 0 20px rgba(0, 242, 254, 0.8),
    0 0 40px rgba(102, 126, 234, 0.6),
    0 4px 8px rgba(0, 0, 0, 0.5);
  position: relative;
  z-index: 101;
}

.bee-row-1 h1 strong {
  color: #00f2fe !important;
  text-shadow: 0 0 30px rgba(0, 242, 254, 1);
}

/* 星空层1 - 大星星慢速移动 */
.bee-page-container::before {
  content: '';
  position: fixed;
  width: 1px;
  height: 1px;
  background: transparent;
  box-shadow: 
    /* 金色大星星 */
    100px 200px 0 4px rgba(255, 215, 0, 1),
    300px 400px 0 3px rgba(255, 200, 50, 1),
    500px 100px 0 4px rgba(255, 223, 0, 1),
    700px 300px 0 3px rgba(255, 210, 30, 1),
    900px 500px 0 4px rgba(255, 215, 0, 1),
    1100px 150px 0 3px rgba(255, 200, 50, 1),
    1300px 350px 0 4px rgba(255, 223, 0, 1),
    1500px 250px 0 3px rgba(255, 210, 30, 1),
    /* 蓝色大星星 */
    200px 300px 0 4px rgba(102, 126, 234, 1),
    400px 500px 0 3px rgba(0, 242, 254, 1),
    600px 200px 0 4px rgba(102, 126, 234, 1),
    800px 400px 0 3px rgba(0, 242, 254, 1),
    1000px 600px 0 4px rgba(102, 126, 234, 1),
    1200px 250px 0 3px rgba(0, 242, 254, 1),
    1400px 450px 0 4px rgba(102, 126, 234, 1),
    1600px 350px 0 3px rgba(0, 242, 254, 1);
  animation: starsMove1 50s linear infinite;
  border-radius: 50%;
}

@keyframes starsMove1 {
  from { transform: translateY(0); }
  to { transform: translateY(-1000px); }
}

/* 星空层2 - 中等星星中速移动 */
.bee-page-container::after {
  content: '';
  position: fixed;
  width: 2px;
  height: 2px;
  background: transparent;
  box-shadow: 
    /* 金色中星星 */
    150px 250px 0 2px rgba(255, 215, 0, 0.8),
    350px 450px 0 2px rgba(255, 200, 50, 0.8),
    550px 150px 0 2px rgba(255, 223, 0, 0.8),
    750px 350px 0 2px rgba(255, 210, 30, 0.8),
    950px 550px 0 2px rgba(255, 215, 0, 0.8),
    1150px 200px 0 2px rgba(255, 200, 50, 0.8),
    1350px 400px 0 2px rgba(255, 223, 0, 0.8),
    1550px 300px 0 2px rgba(255, 210, 30, 0.8),
    250px 100px 0 2px rgba(255, 215, 0, 0.8),
    450px 300px 0 2px rgba(255, 200, 50, 0.8),
    /* 蓝色中星星 */
    250px 350px 0 2px rgba(102, 126, 234, 0.8),
    450px 550px 0 2px rgba(0, 242, 254, 0.8),
    650px 250px 0 2px rgba(102, 126, 234, 0.8),
    850px 450px 0 2px rgba(0, 242, 254, 0.8),
    1050px 650px 0 2px rgba(102, 126, 234, 0.8),
    1250px 300px 0 2px rgba(0, 242, 254, 0.8),
    1450px 500px 0 2px rgba(102, 126, 234, 0.8),
    1650px 400px 0 2px rgba(0, 242, 254, 0.8),
    300px 150px 0 2px rgba(102, 126, 234, 0.8),
    500px 350px 0 2px rgba(0, 242, 254, 0.8);
  animation: starsMove2 35s linear infinite;
  border-radius: 50%;
}

@keyframes starsMove2 {
  from { transform: translateY(0); }
  to { transform: translateY(-800px); }
}

/* 视频区域样式 */
.bee-row-2 {
  position: relative;
  z-index: 50;
  background: rgba(26, 31, 58, 0.6);
  backdrop-filter: blur(10px);
  border: 2px solid rgba(0, 242, 254, 0.3);
  border-radius: 20px;
  padding: 30px;
  margin: 40px 20px;
  box-shadow: 
    0 10px 40px rgba(0, 242, 254, 0.2),
    inset 0 0 60px rgba(0, 242, 254, 0.05);
}

/* 视频iframe边框 */
.bee-video iframe {
  border: 2px solid rgba(0, 242, 254, 0.4);
  border-radius: 15px;
  box-shadow: 0 8px 30px rgba(0, 242, 254, 0.3);
}

/* 星空层3 - 小星星快速移动 */
.bee-row::before {
  content: '';
  position: absolute;
  width: 1px;
  height: 1px;
  background: transparent;
  box-shadow: 
    /* 金色小星星 */
    80px 180px 0 1px rgba(255, 215, 0, 0.6),
    180px 280px 0 1px rgba(255, 200, 50, 0.6),
    280px 80px 0 1px rgba(255, 223, 0, 0.6),
    380px 180px 0 1px rgba(255, 210, 30, 0.6),
    480px 280px 0 1px rgba(255, 215, 0, 0.6),
    580px 380px 0 1px rgba(255, 200, 50, 0.6),
    680px 180px 0 1px rgba(255, 223, 0, 0.6),
    780px 280px 0 1px rgba(255, 210, 30, 0.6),
    880px 80px 0 1px rgba(255, 215, 0, 0.6),
    980px 180px 0 1px rgba(255, 200, 50, 0.6),
    1080px 280px 0 1px rgba(255, 223, 0, 0.6),
    1180px 380px 0 1px rgba(255, 210, 30, 0.6),
    1280px 180px 0 1px rgba(255, 215, 0, 0.6),
    1380px 280px 0 1px rgba(255, 200, 50, 0.6),
    1480px 80px 0 1px rgba(255, 223, 0, 0.6),
    /* 蓝色小星星 */
    120px 220px 0 1px rgba(102, 126, 234, 0.6),
    220px 320px 0 1px rgba(0, 242, 254, 0.6),
    320px 120px 0 1px rgba(102, 126, 234, 0.6),
    420px 220px 0 1px rgba(0, 242, 254, 0.6),
    520px 320px 0 1px rgba(102, 126, 234, 0.6),
    620px 420px 0 1px rgba(0, 242, 254, 0.6),
    720px 220px 0 1px rgba(102, 126, 234, 0.6),
    820px 320px 0 1px rgba(0, 242, 254, 0.6),
    920px 120px 0 1px rgba(102, 126, 234, 0.6),
    1020px 220px 0 1px rgba(0, 242, 254, 0.6),
    1120px 320px 0 1px rgba(102, 126, 234, 0.6),
    1220px 420px 0 1px rgba(0, 242, 254, 0.6),
    1320px 220px 0 1px rgba(102, 126, 234, 0.6),
    1420px 320px 0 1px rgba(0, 242, 254, 0.6),
    1520px 120px 0 1px rgba(102, 126, 234, 0.6);
  animation: starsMove3 20s linear infinite;
  border-radius: 50%;
  pointer-events: none;
  z-index: 0;
}

@keyframes starsMove3 {
  from { transform: translateY(0); }
  to { transform: translateY(-600px); }
}

/* 闪烁效果 */
.bee-page-container::before {
  animation: starsMove1 50s linear infinite, starTwinkle 3s ease-in-out infinite;
}

.bee-page-container::after {
  animation: starsMove2 35s linear infinite, starTwinkle 2s ease-in-out infinite;
}

@keyframes starTwinkle {
  0%, 100% { opacity: 0.8; }
  50% { opacity: 1; }
}

/* 确保所有内容在星星之上 */
.bee-row-content {
  position: relative;
  z-index: 10;
}

.bee-col {
  position: relative;
  z-index: 10;
}

.bee-block {
  position: relative;
  z-index: 10;
}

/* 标题文字增强 */
.bee-heading h1 {
  position: relative;
  z-index: 102;
}