/* 星星闪烁效果 */
.stars {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  z-index: 1;
}

.star {
  position: absolute;
  width: 3px;
  height: 3px;
  background: #fff;
  border-radius: 50%;
  box-shadow: 0 0 10px #fff, 0 0 20px #fff, 0 0 30px #fff;
  animation: twinkle 2s ease-in-out infinite;
}

@keyframes twinkle {
  0%, 100% { opacity: 0.3; transform: scale(1); }
  50% { opacity: 1; transform: scale(1.5); }
}

/* 蜡烛火焰效果 */
.candle-container {
  position: fixed;
  bottom: 20px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 10;
  display: none;
}

.candle {
  width: 40px;
  height: 80px;
  background: linear-gradient(to bottom, #ff6b9d 0%, #c06c84 50%, #6c5b7b 100%);
  border-radius: 10px 10px 5px 5px;
  position: relative;
  margin: 0 10px;
  display: inline-block;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.3);
}

.candle::before {
  content: '';
  position: absolute;
  top: -5px;
  left: 50%;
  transform: translateX(-50%);
  width: 8px;
  height: 15px;
  background: #333;
  border-radius: 2px;
}

.flame {
  position: absolute;
  top: -40px;
  left: 50%;
  transform: translateX(-50%);
  width: 20px;
  height: 40px;
  background: radial-gradient(ellipse at center, #fff 0%, #ffeb3b 20%, #ff9800 50%, #ff5722 100%);
  border-radius: 50% 50% 50% 50% / 60% 60% 40% 40%;
  animation: flicker 0.3s ease-in-out infinite alternate;
  box-shadow: 
    0 -10px 20px rgba(255, 235, 59, 0.8),
    0 0 40px rgba(255, 152, 0, 0.6),
    0 0 60px rgba(255, 87, 34, 0.4);
}

@keyframes flicker {
  0% { transform: translateX(-50%) translateY(0) scale(1); }
  100% { transform: translateX(-50%) translateY(-5px) scale(1.1); }
}

/* 礼物盒动画 */
.gift-box {
  position: fixed;
  bottom: 100px;
  right: 50px;
  width: 80px;
  height: 80px;
  z-index: 10;
  animation: gift-bounce 2s ease-in-out infinite;
  display: none;
}

@keyframes gift-bounce {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-20px); }
}

.gift-box-base {
  width: 100%;
  height: 70%;
  background: linear-gradient(135deg, #ff6b9d 0%, #ffa07a 100%);
  border-radius: 10px;
  position: absolute;
  bottom: 0;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.3);
}

.gift-box-lid {
  width: 110%;
  height: 30%;
  background: linear-gradient(135deg, #ff1744 0%, #ff5252 100%);
  border-radius: 10px 10px 0 0;
  position: absolute;
  top: 0;
  left: -5%;
  box-shadow: 0 5px 15px rgba(0, 0, 0, 0.2);
}

.gift-ribbon {
  width: 20%;
  height: 100%;
  background: #ffd700;
  position: absolute;
  left: 40%;
  box-shadow: 0 0 10px rgba(255, 215, 0, 0.5);
}

.gift-bow {
  width: 40px;
  height: 30px;
  background: #ffd700;
  position: absolute;
  top: -15px;
  left: 50%;
  transform: translateX(-50%);
  border-radius: 50% 50% 0 0;
  box-shadow: 0 0 15px rgba(255, 215, 0, 0.8);
}

.gift-bow::before,
.gift-bow::after {
  content: '';
  position: absolute;
  width: 20px;
  height: 20px;
  background: #ffd700;
  border-radius: 50%;
  top: 5px;
}

.gift-bow::before {
  left: -15px;
}

.gift-bow::after {
  right: -15px;
}

/* 气球飘浮与旋转：作用于 transform，与 GSAP 的 top 上升动画互不冲突 */
.baloons img {
  animation: balloon-float 5s ease-in-out infinite;
}

@keyframes balloon-float {
  0%, 100% { transform: translateY(0) rotate(0deg); }
  25% { transform: translateY(-32px) rotate(7deg); }
  50% { transform: translateY(0) rotate(0deg); }
  75% { transform: translateY(-26px) rotate(-7deg); }
}

/* 心形飘浮 */
.hearts {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  z-index: 2;
  display: none;
}

.heart {
  position: absolute;
  font-size: 30px;
  animation: heart-float 8s ease-in-out infinite;
  opacity: 0.8;
}

@keyframes heart-float {
  0% {
    transform: translateY(100vh) rotate(0deg);
    opacity: 0;
  }
  10% {
    opacity: 0.8;
  }
  90% {
    opacity: 0.8;
  }
  100% {
    transform: translateY(-100px) rotate(360deg);
    opacity: 0;
  }
}

/* 脉冲效果 */
.pulse {
  animation: pulse 1.5s ease-in-out infinite;
}

@keyframes pulse {
  0%, 100% { transform: scale(1); }
  50% { transform: scale(1.05); }
}

/* 彩虹文字效果 */
.rainbow-text {
  background: linear-gradient(90deg, 
    #ff0000 0%, 
    #ff7f00 14%, 
    #ffff00 28%, 
    #00ff00 42%, 
    #0000ff 56%, 
    #4b0082 70%, 
    #9400d3 84%, 
    #ff0000 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  background-size: 200% auto;
  animation: rainbow-flow 3s linear infinite;
}

@keyframes rainbow-flow {
  to { background-position: 200% center; }
}