/**
 * 星星动画按钮样式
 */

/* 预防闪烁：在JavaScript加载前隐藏所有轮播图按钮 */
.hero-buttons .btn {
  opacity: 0 !important;
  transition: opacity 0.5s ease;
}

/* 页面完全加载后显示按钮 */
.hero-buttons.loaded .btn {
  opacity: 1 !important;
}

/* 加载指示器样式 */
.hero-buttons-loading {
  position: relative;
  display: flex;
  justify-content: center;
  align-items: center;
  min-height: 60px;
  margin: 20px 0;
}

.loading-spinner {
  width: 40px;
  height: 40px;
  border: 4px solid rgba(255, 255, 255, 0.3);
  border-top: 4px solid #ffffff;
  border-radius: 50%;
  animation: spin 1s linear infinite;
  margin-right: 10px;
}

.loading-text {
  color: #ffffff;
  font-size: 14px;
  font-weight: 500;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.5);
}

@keyframes spin {
  0% { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}

/* 隐藏加载指示器当按钮加载完成后 */
.hero-buttons.loaded + .hero-buttons-loading {
  display: none;
}

/* 星星按钮基础样式 */
.star-btn {
  position: relative;
  border: none;
  background: transparent;
  padding: 0;
  cursor: pointer;
  outline-offset: 4px;
  transition: filter 250ms;
  user-select: none;
  touch-action: manipulation;
  overflow: hidden;
}

/* 星星按钮初始化完成后显示 */
.star-btn.initialized {
  opacity: 1 !important;
}

/* 星星按钮内容样式 */
.star-btn-content {
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  padding: 0.7em 1.8em;
  width: 100%;
  height: 100%;
  border-radius: 0.375rem;
  font-weight: 600;
  color: #fff;
  z-index: 1;
  transition: all 0.3s ease;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.5); /* 添加文字阴影，增强可读性 */
}

/* 主要按钮样式 */
.star-btn.btn-primary .star-btn-content {
  background: #0d6efd;
}

/* 轮廓按钮样式 */
.star-btn.btn-outline-light .star-btn-content {
  background: rgba(0, 0, 0, 0.2); /* 半透明黑色背景，增强文字可见性 */
  border: 1px solid #fff;
  box-shadow: 0 0 10px rgba(255, 255, 255, 0.3); /* 添加发光效果 */
}

/* 星星元素基础样式 */
.star-btn .star-1,
.star-btn .star-2,
.star-btn .star-3,
.star-btn .star-4,
.star-btn .star-5,
.star-btn .star-6 {
  position: absolute;
  z-index: 2; /* 确保星星在内容之上 */
  transform: translateX(50px);
  opacity: 0;
  transition: all 0.4s ease;
  pointer-events: none; /* 确保星星不会干扰点击 */
}

/* 星星SVG填充颜色 */
.star-btn.btn-primary .fil0 {
  fill: #ffcc00; /* 蓝色按钮上使用金黄色星星 */
  filter: drop-shadow(0 0 2px rgba(255, 255, 255, 0.8));
}

.star-btn.btn-outline-light .fil0 {
  fill: #ffcc00; /* 透明按钮上使用金黄色星星 */
  filter: drop-shadow(0 0 2px rgba(0, 0, 0, 0.5));
}

/* 星星1样式 */
.star-btn .star-1 {
  top: 20%;
  left: 20%;
  width: 25px;
  height: 25px;
  filter: drop-shadow(0 0 3px rgba(255, 204, 0, 0.8));
}

/* 星星2样式 */
.star-btn .star-2 {
  top: 45%;
  left: 0%;
  width: 15px;
  height: 15px;
}

/* 星星3样式 */
.star-btn .star-3 {
  top: 40%;
  left: 40%;
  width: 5px;
  height: 5px;
}

/* 星星4样式 */
.star-btn .star-4 {
  top: 20%;
  left: 70%;
  width: 8px;
  height: 8px;
}

/* 星星5样式 */
.star-btn .star-5 {
  top: 65%;
  left: 10%;
  width: 15px;
  height: 15px;
}

/* 星星6样式 */
.star-btn .star-6 {
  top: 75%;
  left: 80%;
  width: 10px;
  height: 10px;
}

/* 悬停时的按钮内容效果 */
.star-btn:hover .star-btn-content {
  transform: scale(1.05);
  box-shadow: 0 5px 15px rgba(0, 0, 0, 0.3);
}

/* 确保按钮内的文本始终可见 */
.star-btn:hover .star-btn-content {
  background-color: rgba(13, 110, 253, 0.9); /* 蓝色按钮悬停时稍微透明 */
  font-weight: 700; /* 加粗文字 */
  text-shadow: 0 0 5px rgba(255, 255, 255, 0.8); /* 增强文字发光效果 */
}

.star-btn.btn-outline-light:hover .star-btn-content {
  background-color: rgba(0, 0, 0, 0.4); /* 透明按钮悬停时背景更深 */
}

/* 悬停时的星星动画效果 */
.star-btn:hover .star-1 {
  transform: translate(-20px, -30px) rotate(-35deg);
  opacity: 1;
  animation: twinkle 1.5s infinite alternate;
}

.star-btn:hover .star-2 {
  transform: translate(-25px, 5px) rotate(-35deg);
  opacity: 1;
}

.star-btn:hover .star-3 {
  transform: translate(-15px, 5px) rotate(-35deg);
  opacity: 1;
}

.star-btn:hover .star-4 {
  transform: translate(20px, -30px) rotate(-35deg);
  opacity: 1;
}

.star-btn:hover .star-5 {
  transform: translate(5px, 20px) rotate(-35deg);
  opacity: 1;
}

.star-btn:hover .star-6 {
  transform: translate(25px, 5px) rotate(-35deg);
  opacity: 1;
}

/* 点击时的效果 */
.star-btn:active .star-btn-content {
  transform: scale(0.95);
}

/* 添加星星闪烁动画 */
@keyframes twinkle {
  0% {
    opacity: 0.4;
    transform: translate(-20px, -30px) rotate(-35deg) scale(0.8);
  }
  100% {
    opacity: 1;
    transform: translate(-20px, -30px) rotate(-35deg) scale(1.2);
  }
}

.star-btn:hover .star-2 {
  transform: translate(-25px, 5px) rotate(-35deg);
  opacity: 1;
  animation: twinkle 2s infinite alternate 0.3s;
}

.star-btn:hover .star-3 {
  transform: translate(-15px, 5px) rotate(-35deg);
  opacity: 1;
  animation: twinkle 1.8s infinite alternate 0.5s;
}

.star-btn:hover .star-4 {
  transform: translate(20px, -30px) rotate(-35deg);
  opacity: 1;
  animation: twinkle 1.6s infinite alternate 0.2s;
}

.star-btn:hover .star-5 {
  transform: translate(5px, 20px) rotate(-35deg);
  opacity: 1;
  animation: twinkle 1.7s infinite alternate 0.4s;
}

.star-btn:hover .star-6 {
  transform: translate(25px, 5px) rotate(-35deg);
  opacity: 1;
  animation: twinkle 1.9s infinite alternate 0.1s;
}

/* 增加星星大小 */
.star-btn .star-1,
.star-btn .star-2,
.star-btn .star-5 {
  width: 28px;
  height: 28px;
}

/* 适配轮播图中的按钮 */
.hero-buttons .star-btn {
  margin-right: 0.5rem;
  margin-left: 0.5rem;
}

/* 确保按钮内的文本居中 */
.star-btn-content span {
  position: relative;
  z-index: 2;
}