/*
* GPT5中文官网 - 动画效果样式表
* 创建日期：2025年1月27日
* 作者：GPT5.top
* 功能：网站动画效果定义，包含过渡动画、悬停效果等
*/

/* 页面加载动画 */
@keyframes fadeInUp {
  from {
    opacity: 0;
    transform: translateY(30px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes fadeInLeft {
  from {
    opacity: 0;
    transform: translateX(-30px);
  }
  to {
    opacity: 1;
    transform: translateX(0);
  }
}

@keyframes fadeInRight {
  from {
    opacity: 0;
    transform: translateX(30px);
  }
  to {
    opacity: 1;
    transform: translateX(0);
  }
}

@keyframes scaleIn {
  from {
    opacity: 0;
    transform: scale(0.8);
  }
  to {
    opacity: 1;
    transform: scale(1);
  }
}

/* 脉冲动画 */
@keyframes pulse {
  0% {
    transform: scale(1);
  }
  50% {
    transform: scale(1.05);
  }
  100% {
    transform: scale(1);
  }
}

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

/* 旋转动画 */
@keyframes rotate {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(360deg);
  }
}

/* 弹跳动画 */
@keyframes bounce {
  0%, 20%, 53%, 80%, 100% {
    transform: translate3d(0, 0, 0);
  }
  40%, 43% {
    transform: translate3d(0, -8px, 0);
  }
  70% {
    transform: translate3d(0, -4px, 0);
  }
  90% {
    transform: translate3d(0, -2px, 0);
  }
}

/* 页面元素入场动画 */
.hero-content {
  animation: fadeInLeft 0.8s ease-out;
}

.hero-image {
  animation: fadeInRight 0.8s ease-out 0.2s both;
}

/* 简洁英雄区动画 */
.hero-title-clean {
  animation: fadeInUp 0.8s ease-out 0.3s both;
}

.hero-subtitle-clean {
  animation: fadeInUp 0.8s ease-out 0.5s both;
}

.hero-highlights {
  animation: fadeInUp 0.8s ease-out forwards;
}

.hero-buttons-clean {
  animation: fadeInUp 0.8s ease-out 0.9s both;
}

/* 简洁图标悬停动画 */
.highlight-icon {
  transition: all 0.3s ease;
}

.highlight-item:hover .highlight-icon {
  transform: scale(1.1);
  background: rgba(16, 163, 127, 0.2);
}

.gpt5-logo {
  animation: scaleIn 1s ease-out 0.4s both;
  transition: all 0.3s ease;
}

.gpt5-logo:hover {
  animation: pulse 2s infinite;
  box-shadow: 0 25px 50px rgba(16, 163, 127, 0.3);
}

/* 卡片动画效果 */
.feature-card,
.pricing-card,
.highlight-item,
.testimonial-card {
  animation: fadeInUp 0.6s ease-out;
  transition: all 0.3s ease;
}

.feature-card:hover {
  animation: bounce 0.6s ease;
}

/* 按钮动画效果 */
.btn-primary,
.btn-secondary,
.recharge-btn {
  position: relative;
  overflow: hidden;
  transition: all 0.3s ease;
}

.btn-primary::before,
.btn-secondary::before,
.recharge-btn::before {
  content: '';
  position: absolute;
  top: 0;
  left: -100%;
  width: 100%;
  height: 100%;
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.2), transparent);
  transition: left 0.5s ease;
}

.btn-primary:hover::before,
.btn-secondary:hover::before,
.recharge-btn:hover::before {
  left: 100%; /* 光泽扫过效果 */
}

/* 导航链接悬停动画 */
.nav-link {
  position: relative;
  transition: all 0.3s ease;
}

.nav-link::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 50%;
  width: 0;
  height: 2px;
  background: var(--primary-color);
  transition: all 0.3s ease;
  transform: translateX(-50%);
}

.nav-link:hover::after,
.nav-link.active::after {
  width: 100%; /* 下划线展开效果 */
}

/* 价格卡片特殊动画 */
.pricing-card.featured {
  animation: pulse 3s infinite;
}

.pricing-card:hover .price {
  animation: bounce 0.6s ease;
}

/* 模态框动画 */
.modal {
  animation: fadeIn 0.3s ease;
}

.modal-content {
  animation: scaleIn 0.3s ease;
}

@keyframes fadeIn {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

/* 页脚链接悬停效果 */
.footer-section ul li a {
  position: relative;
  transition: all 0.3s ease;
}

.footer-section ul li a::before {
  content: '→';
  position: absolute;
  left: -20px;
  opacity: 0;
  transition: all 0.3s ease;
}

.footer-section ul li a:hover::before {
  opacity: 1;
  left: -15px;
}

/* 滚动触发动画类 */
.animate-on-scroll {
  opacity: 0;
  transform: translateY(30px);
  transition: all 0.6s ease;
}

.animate-on-scroll.animated {
  opacity: 1;
  transform: translateY(0);
}

/* 特色图标旋转效果 */
.feature-icon {
  transition: all 0.3s ease;
}

.feature-card:hover .feature-icon {
  animation: rotate 0.6s ease;
}

/* 加载动画 */
.loading {
  display: inline-block;
  width: 20px;
  height: 20px;
  border: 3px solid rgba(16, 163, 127, 0.3);
  border-radius: 50%;
  border-top-color: var(--primary-color);
  animation: rotate 1s linear infinite;
}

/* 渐变背景动画 */
.hero-section {
  background: linear-gradient(-45deg, #fefefe, #f9fafb, #f3f4f6, #e5e7eb);
  background-size: 400% 400%;
  animation: gradientShift 15s ease infinite;
}

/* 文字打字机效果 */
@keyframes typing {
  from {
    width: 0;
  }
  to {
    width: 100%;
  }
}

@keyframes blink {
  50% {
    border-color: transparent;
  }
}

.typewriter {
  overflow: hidden;
  border-right: 2px solid var(--primary-color);
  white-space: nowrap;
  animation: typing 3s steps(40, end), blink 0.75s step-end infinite;
}

/* 悬浮效果 */
.float {
  animation: float 3s ease-in-out infinite;
}

@keyframes float {
  0%, 100% {
    transform: translateY(0px);
  }
  50% {
    transform: translateY(-10px);
  }
}

/* 页面切换动画 */
.page-transition {
  animation: pageSlideIn 0.5s ease-out;
}

@keyframes pageSlideIn {
  from {
    opacity: 0;
    transform: translateX(20px);
  }
  to {
    opacity: 1;
    transform: translateX(0);
  }
}

/* AI对话界面动画关键帧 */
@keyframes chatFadeIn {
  0% {
    opacity: 0;
    transform: translateY(20px);
  }
  100% {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes messageSlideIn {
  0% {
    opacity: 0;
    transform: translateX(-30px);
  }
  100% {
    opacity: 1;
    transform: translateX(0);
  }
}

@keyframes brainPulse {
  0%, 100% {
    transform: scale(1);
    box-shadow: 0 0 0 0 rgba(251, 191, 36, 0.4);
  }
  50% {
    transform: scale(1.1);
    box-shadow: 0 0 0 8px rgba(251, 191, 36, 0);
  }
}

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

@keyframes typeWriter {
  0% {
    width: 0;
  }
  100% {
    width: 100%;
  }
}

@keyframes indicatorShow {
  0% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}

@keyframes typingDots {
  0%, 60%, 100% {
    transform: translateY(0);
    opacity: 0.4;
  }
  30% {
    transform: translateY(-10px);
    opacity: 1;
  }
}

@keyframes codeSlideUp {
  0% {
    opacity: 0;
    transform: translateY(30px);
  }
  100% {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes codeLine {
  0% {
    opacity: 0;
    transform: translateX(-20px);
  }
  100% {
    opacity: 1;
    transform: translateX(0);
  }
}

/* 响应式动画控制 */
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}

/* 移动端动画优化 */
@media screen and (max-width: 768px) {
  .hero-content,
  .hero-image {
    animation-duration: 0.6s;
  }
  
  .feature-card,
  .pricing-card,
  .highlight-item,
  .testimonial-card {
    animation-duration: 0.4s;
  }
  
  /* 减少移动端复杂动画 */
  .gpt5-logo:hover {
    animation: none;
  }
  
  .hero-section {
    animation: none;
    background: linear-gradient(135deg, #fefefe 0%, #f9fafb 50%, #f3f4f6 100%);
  }
  
  /* 移动端AI对话动画优化 */
  .ai-chat-container {
    animation-duration: 1.5s;
  }
  
  .message {
    animation-duration: 1s;
  }
  
  .typing-text {
    animation-duration: 1.5s;
  }
  
  .code-generation {
    animation-duration: 1.2s;
  }
  

}