/* ========== Hyper主题联系客服按钮高级动态效果 ========== */

/* 强制重置信息推送按钮样式 */
.telegram-info-btn,
a.telegram-info-btn,
.nav-telegram-btn.telegram-info-btn {
  background: linear-gradient(135deg, #ff6b6b 0%, #ee5a52 25%, #e74c3c 50%, #ff6b6b 75%, #ee5a52 100%) !important;
  background-size: 400% 400% !important;
  border: 2px solid #ff6b6b !important;
  border-color: #ff6b6b !important;
  color: white !important;
  animation: hyperInfoFloat 3s ease-in-out infinite,
             hyperInfoGradient 4s linear infinite,
             hyperInfoPulse 3s ease-in-out infinite,
             hyperInfoBreath 2.5s ease-in-out infinite alternate,
             hyperInfoGlow 3s ease-in-out infinite !important;
  overflow: hidden !important;
  position: relative !important;
  transition: all 0.3s cubic-bezier(0.25, 0.46, 0.45, 0.94) !important;
}

/* Telegram客服按钮动态效果 */
.telegram-support-btn {
  animation: hyperTelegramPulse 3s ease-in-out infinite, 
             hyperTelegramGradient 4s ease infinite,
             hyperTelegramFloat 6s ease-in-out infinite,
             hyperTelegramBreath 2.5s ease-in-out infinite alternate,
             hyperTelegramGlow 3s ease-in-out infinite !important;
  overflow: hidden !important;
  position: relative !important;
  transition: all 0.3s cubic-bezier(0.25, 0.46, 0.45, 0.94) !important;
}

/* 增强版脉冲动画 */
@keyframes hyperTelegramPulse {
  0%, 100% {
    box-shadow: 0 6px 20px rgba(102, 126, 234, 0.4), 
                0 0 0 0 rgba(102, 126, 234, 0.2),
                0 0 25px rgba(102, 126, 234, 0.3) !important;
  }
  25% {
    box-shadow: 0 8px 25px rgba(102, 126, 234, 0.5), 
                0 0 0 4px rgba(102, 126, 234, 0.15),
                0 0 35px rgba(102, 126, 234, 0.4) !important;
  }
  50% {
    box-shadow: 0 10px 30px rgba(102, 126, 234, 0.6), 
                0 0 0 8px rgba(102, 126, 234, 0.1),
                0 0 45px rgba(102, 126, 234, 0.5) !important;
  }
  75% {
    box-shadow: 0 8px 25px rgba(102, 126, 234, 0.5), 
                0 0 0 4px rgba(102, 126, 234, 0.15),
                0 0 35px rgba(102, 126, 234, 0.4) !important;
  }
}

/* 背景渐变动画 */
@keyframes hyperTelegramGradient {
  0% {
    background-position: 0% 50%;
  }
  50% {
    background-position: 100% 50%;
  }
  100% {
    background-position: 0% 50%;
  }
}

/* 浮动动画 */
@keyframes hyperTelegramFloat {
  0%, 100% {
    transform: translateY(0px) scale(1.05) !important;
  }
  33% {
    transform: translateY(-4px) scale(1.06) !important;
  }
  66% {
    transform: translateY(-2px) scale(1.055) !important;
  }
}

/* 呼吸动画 */
@keyframes hyperTelegramBreath {
  0% {
    filter: brightness(1) saturate(1) !important;
  }
  100% {
    filter: brightness(1.2) saturate(1.3) !important;
  }
}

/* 发光动画 */
@keyframes hyperTelegramGlow {
  0%, 100% {
    text-shadow: 0 0 5px rgba(255, 255, 255, 0.3) !important;
  }
  50% {
    text-shadow: 0 0 15px rgba(255, 255, 255, 0.6), 
                 0 0 25px rgba(102, 126, 234, 0.4) !important;
  }
}

/* 悬停效果 */
.telegram-support-btn:hover {
  transform: scale(1.08) translateY(-2px) !important;
  box-shadow: 0 12px 40px rgba(102, 126, 234, 0.8), 0 0 0 12px rgba(102, 126, 234, 0.15) !important;
  animation: none !important;
  background: linear-gradient(135deg, #764ba2, #667eea, #5a67d8, #667eea) !important;
  background-size: 400% 400% !important;
  color: white !important;
  border-color: #667eea !important;
}

/* 点击效果 */
.telegram-support-btn:active {
  transform: scale(1.02) translateY(1px) !important;
  transition: all 0.1s ease !important;
}

/* 图标旋转动画 */
.telegram-support-btn .uil-telegram-alt {
  transition: all 0.3s ease !important;
}

.telegram-support-btn:hover .uil-telegram-alt {
  transform: rotate(15deg) scale(1.1) !important;
  filter: drop-shadow(0 0 8px rgba(255, 255, 255, 0.5)) !important;
}

/* 移动端优化 */
@media screen and (max-width: 768px) {
  .telegram-support-btn {
    animation: hyperTelegramPulseMobile 4s ease-in-out infinite !important;
    padding: 10px 16px !important;
    font-size: 14px !important;
  }
  
  @keyframes hyperTelegramPulseMobile {
    0%, 100% {
      box-shadow: 0 4px 15px rgba(102, 126, 234, 0.4), 0 0 0 0 rgba(102, 126, 234, 0.2) !important;
    }
    50% {
      box-shadow: 0 6px 25px rgba(102, 126, 234, 0.6), 0 0 0 6px rgba(102, 126, 234, 0.1) !important;
    }
  }
  
  .telegram-support-btn:hover {
    transform: scale(1.05) !important;
  }
}

/* 无障碍优化 */
@media (prefers-reduced-motion: reduce) {
  .telegram-support-btn {
    animation: none !important;
  }
  
  .telegram-support-btn:hover {
    transform: scale(1.02) !important;
  }
}

/* ========== 信息推送按钮动态效果 ========== */

/* 信息推送按钮动态效果 */
.telegram-info-btn {
  animation: hyperInfoPulse 3s ease-in-out infinite, 
             hyperInfoGradient 4s ease infinite,
             hyperInfoFloat 6s ease-in-out infinite,
             hyperInfoBreath 2.5s ease-in-out infinite alternate,
             hyperInfoGlow 3s ease-in-out infinite !important;
  overflow: hidden !important;
  position: relative !important;
  transition: all 0.3s cubic-bezier(0.25, 0.46, 0.45, 0.94) !important;
}

/* 强制应用动画效果 */
a.telegram-info-btn,
.nav-telegram-btn.telegram-info-btn {
  animation: hyperInfoPulse 3s ease-in-out infinite, 
             hyperInfoGradient 4s ease infinite,
             hyperInfoFloat 6s ease-in-out infinite,
             hyperInfoBreath 2.5s ease-in-out infinite alternate,
             hyperInfoGlow 3s ease-in-out infinite !important;
}

/* 信息推送脉冲动画 */
@keyframes hyperInfoPulse {
  0%, 100% {
    box-shadow: 0 6px 20px rgba(255, 107, 107, 0.4), 
                0 0 0 0 rgba(255, 107, 107, 0.2),
                0 0 25px rgba(255, 107, 107, 0.3);
  }
  25% {
    box-shadow: 0 8px 25px rgba(255, 107, 107, 0.5), 
                0 0 0 4px rgba(255, 107, 107, 0.15),
                0 0 35px rgba(255, 107, 107, 0.4);
  }
  50% {
    box-shadow: 0 10px 30px rgba(255, 107, 107, 0.6), 
                0 0 0 8px rgba(255, 107, 107, 0.1),
                0 0 45px rgba(255, 107, 107, 0.5);
  }
  75% {
    box-shadow: 0 8px 25px rgba(255, 107, 107, 0.5), 
                0 0 0 4px rgba(255, 107, 107, 0.15),
                0 0 35px rgba(255, 107, 107, 0.4);
  }
}

/* 信息推送渐变动画 */
@keyframes hyperInfoGradient {
  0% {
    background-position: 0% 50%;
  }
  25% {
    background-position: 50% 25%;
  }
  50% {
    background-position: 100% 50%;
  }
  75% {
    background-position: 50% 75%;
  }
  100% {
    background-position: 0% 50%;
  }
}

/* 信息推送浮动动画 */
@keyframes hyperInfoFloat {
  0%, 100% {
    transform: translateY(0px) scale(1.05);
  }
  33% {
    transform: translateY(-3px) scale(1.06);
  }
  66% {
    transform: translateY(-1px) scale(1.055);
  }
}

/* 信息推送呼吸动画 */
@keyframes hyperInfoBreath {
  0% {
    filter: brightness(1) saturate(1);
  }
  100% {
    filter: brightness(1.2) saturate(1.3);
  }
}

/* 信息推送发光动画 */
@keyframes hyperInfoGlow {
  0%, 100% {
    text-shadow: 0 0 5px rgba(255, 255, 255, 0.3);
  }
  50% {
    text-shadow: 0 0 15px rgba(255, 255, 255, 0.6), 
                 0 0 25px rgba(255, 107, 107, 0.4);
  }
}

/* 信息推送悬停效果 */
.telegram-info-btn:hover {
  transform: scale(1.08) translateY(-2px) !important;
  box-shadow: 0 12px 40px rgba(255, 107, 107, 0.8), 0 0 0 12px rgba(255, 107, 107, 0.15) !important;
  animation: none !important;
  background: linear-gradient(135deg, #ee5a52, #ff6b6b, #e74c3c, #ff6b6b) !important;
  background-size: 400% 400% !important;
  color: white !important;
  border-color: #ff6b6b !important;
}

/* 信息推送点击效果 */
.telegram-info-btn:active {
  transform: scale(1.02) translateY(1px) !important;
  transition: all 0.1s ease !important;
}

/* 信息推送图标旋转动画 */
.telegram-info-btn .uil-telegram-alt {
  transition: all 0.3s ease !important;
}

.telegram-info-btn:hover .uil-telegram-alt {
  transform: rotate(15deg) scale(1.1) !important;
  filter: drop-shadow(0 0 8px rgba(255, 255, 255, 0.5)) !important;
}

/* 信息推送移动端优化 */
@media screen and (max-width: 768px) {
  .telegram-info-btn {
    animation: hyperInfoPulseMobile 4s ease-in-out infinite !important;
    padding: 10px 16px !important;
    font-size: 14px !important;
  }
  
  @keyframes hyperInfoPulseMobile {
    0%, 100% {
      box-shadow: 0 4px 15px rgba(255, 107, 107, 0.4), 0 0 0 0 rgba(255, 107, 107, 0.2) !important;
    }
    50% {
      box-shadow: 0 6px 25px rgba(255, 107, 107, 0.6), 0 0 0 6px rgba(255, 107, 107, 0.1) !important;
    }
  }
  
  .telegram-info-btn:hover {
    transform: scale(1.05) !important;
  }
}

/* 信息推送无障碍优化 */
@media (prefers-reduced-motion: reduce) {
  .telegram-info-btn {
    animation: none !important;
  }
  
  .telegram-info-btn:hover {
    transform: scale(1.02) !important;
  }
}