/**
 * BTCY 前端优化 - 动画系统
 * 包含：关键帧动画、AOS增强、滚动指示器、视差效果
 */

/* ==========================================
   1. 关键帧动画库
   ========================================== */

/* 淡入动画 */
@keyframes btcy-fadeIn {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

@keyframes btcy-fadeInUp {
  from {
    opacity: 0;
    transform: translate3d(0, 40px, 0);
  }
  to {
    opacity: 1;
    transform: translate3d(0, 0, 0);
  }
}

@keyframes btcy-fadeInDown {
  from {
    opacity: 0;
    transform: translate3d(0, -40px, 0);
  }
  to {
    opacity: 1;
    transform: translate3d(0, 0, 0);
  }
}

@keyframes btcy-fadeInLeft {
  from {
    opacity: 0;
    transform: translate3d(-40px, 0, 0);
  }
  to {
    opacity: 1;
    transform: translate3d(0, 0, 0);
  }
}

@keyframes btcy-fadeInRight {
  from {
    opacity: 0;
    transform: translate3d(40px, 0, 0);
  }
  to {
    opacity: 1;
    transform: translate3d(0, 0, 0);
  }
}

/* 缩放动画 */
@keyframes btcy-zoomIn {
  from {
    opacity: 0;
    transform: scale3d(0.3, 0.3, 0.3);
  }
  50% {
    opacity: 1;
  }
}

@keyframes btcy-zoomInUp {
  from {
    opacity: 0;
    transform: scale3d(0.1, 0.1, 0.1) translate3d(0, 40px, 0);
    transform-origin: center bottom;
    animation-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19);
  }
  60% {
    opacity: 1;
    transform: scale3d(0.475, 0.475, 0.475) translate3d(0, -20px, 0);
    animation-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1);
  }
}

/* 滑动动画 */
@keyframes btcy-slideInLeft {
  from {
    transform: translate3d(-100%, 0, 0);
    visibility: visible;
  }
  to {
    transform: translate3d(0, 0, 0);
  }
}

@keyframes btcy-slideInRight {
  from {
    transform: translate3d(100%, 0, 0);
    visibility: visible;
  }
  to {
    transform: translate3d(0, 0, 0);
  }
}

/* 脉冲发光动画 */
@keyframes btcy-pulseGlow {
  0%, 100% {
    box-shadow: 0 0 10px rgba(180, 160, 120, 0.4);
  }
  50% {
    box-shadow: 0 0 20px rgba(180, 160, 120, 0.8);
  }
}

@keyframes btcy-pulseGlow-mall {
  0%, 100% {
    box-shadow: 0 0 10px rgba(102, 126, 234, 0.4);
  }
  50% {
    box-shadow: 0 0 20px rgba(102, 126, 234, 0.8);
  }
}

@keyframes btcy-pulseGlow-news {
  0%, 100% {
    box-shadow: 0 0 10px rgba(0, 198, 251, 0.4);
  }
  50% {
    box-shadow: 0 0 20px rgba(0, 198, 251, 0.8);
  }
}

@keyframes btcy-pulseGlow-metaverse {
  0%, 100% {
    box-shadow: 0 0 15px rgba(102, 126, 234, 0.5);
  }
  50% {
    box-shadow: 0 0 30px rgba(102, 126, 234, 1);
  }
}

/* 浮动动画 */
@keyframes btcy-floatUpDown {
  0%, 100% {
    transform: translateY(0);
  }
  50% {
    transform: translateY(-10px);
  }
}

@keyframes btcy-floatLeftRight {
  0%, 100% {
    transform: translateX(0);
  }
  50% {
    transform: translateX(-10px);
  }
}

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

@keyframes btcy-rotateBorder {
  0% {
    border-color: rgba(102, 126, 234, 0.3);
  }
  33% {
    border-color: rgba(118, 75, 162, 0.5);
  }
  66% {
    border-color: rgba(161, 140, 209, 0.7);
  }
  100% {
    border-color: rgba(102, 126, 234, 0.3);
  }
}

/* 渐变流动动画 */
@keyframes btcy-gradientFlow {
  0% {
    background-position: 0% 50%;
  }
  50% {
    background-position: 100% 50%;
  }
  100% {
    background-position: 0% 50%;
  }
}

/* 闪光扫过效果 */
@keyframes btcy-shimmer {
  0% {
    background-position: -200% 0;
  }
  100% {
    background-position: 200% 0;
  }
}

/* 心跳动画 */
@keyframes btcy-heartbeat {
  0%, 100% {
    transform: scale(1);
  }
  14% {
    transform: scale(1.3);
  }
  28% {
    transform: scale(1);
  }
  42% {
    transform: scale(1.3);
  }
  70% {
    transform: scale(1);
  }
}

/* 数字滚动动画占位 */
@keyframes btcy-countUp {
  from {
    opacity: 0;
    transform: translateY(20px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* ==========================================
   2. 动画工具类
   ========================================== */

/* 淡入动画类 */
.btcy-animate-fadeIn {
  animation: btcy-fadeIn 0.6s ease-in-out;
}

.btcy-animate-fadeInUp {
  animation: btcy-fadeInUp 0.8s ease-out;
}

.btcy-animate-fadeInDown {
  animation: btcy-fadeInDown 0.8s ease-out;
}

.btcy-animate-fadeInLeft {
  animation: btcy-fadeInLeft 0.8s ease-out;
}

.btcy-animate-fadeInRight {
  animation: btcy-fadeInRight 0.8s ease-out;
}

/* 缩放动画类 */
.btcy-animate-zoomIn {
  animation: btcy-zoomIn 0.6s ease-out;
}

.btcy-animate-zoomInUp {
  animation: btcy-zoomInUp 0.8s ease-out;
}

/* 滑动动画类 */
.btcy-animate-slideInLeft {
  animation: btcy-slideInLeft 0.8s ease-out;
}

.btcy-animate-slideInRight {
  animation: btcy-slideInRight 0.8s ease-out;
}

/* 脉冲发光类 */
.btcy-animate-pulseGlow {
  animation: btcy-pulseGlow 2s ease-in-out infinite;
}

.btcy-animate-pulseGlow-mall {
  animation: btcy-pulseGlow-mall 2s ease-in-out infinite;
}

.btcy-animate-pulseGlow-news {
  animation: btcy-pulseGlow-news 2s ease-in-out infinite;
}

.btcy-animate-pulseGlow-metaverse {
  animation: btcy-pulseGlow-metaverse 2s ease-in-out infinite;
}

/* 浮动动画类 */
.btcy-animate-float {
  animation: btcy-floatUpDown 3s ease-in-out infinite;
}

.btcy-animate-float-slow {
  animation: btcy-floatUpDown 5s ease-in-out infinite;
}

/* 旋转动画类 */
.btcy-animate-rotate {
  animation: btcy-rotateSlow 20s linear infinite;
}

.btcy-animate-rotate-border {
  animation: btcy-rotateBorder 6s ease-in-out infinite;
}

/* 渐变流动背景 */
.btcy-animate-gradient {
  background-size: 200% 200%;
  animation: btcy-gradientFlow 15s ease infinite;
}

/* 闪光扫过效果 */
.btcy-animate-shimmer {
  background: linear-gradient(90deg, transparent 25%, rgba(255, 255, 255, 0.3) 50%, transparent 75%);
  background-size: 200% 100%;
  animation: btcy-shimmer 2s infinite;
}

/* 心跳动画 */
.btcy-animate-heartbeat {
  animation: btcy-heartbeat 1.5s ease-in-out infinite;
}

/* ==========================================
   3. AOS动画增强
   ========================================== */

/* AOS动画延迟工具类 */
.btcy-delay-100 {
  animation-delay: 0.1s;
}

.btcy-delay-200 {
  animation-delay: 0.2s;
}

.btcy-delay-300 {
  animation-delay: 0.3s;
}

.btcy-delay-400 {
  animation-delay: 0.4s;
}

.btcy-delay-500 {
  animation-delay: 0.5s;
}

/* AOS动画持续时间工具类 */
.btcy-duration-fast {
  animation-duration: 0.4s;
}

.btcy-duration-normal {
  animation-duration: 0.8s;
}

.btcy-duration-slow {
  animation-duration: 1.2s;
}

/* ==========================================
   4. 滚动指示器
   ========================================== */

.btcy-scroll-indicator {
  position: fixed;
  top: 0;
  left: 0;
  width: 0%;
  height: 3px;
  background: linear-gradient(90deg, #b4a078, #d4a574);
  z-index: 9999;
  transition: width 0.1s ease;
}

.btcy-scroll-indicator-mall {
  background: linear-gradient(90deg, #667eea, #764ba2);
}

.btcy-scroll-indicator-news {
  background: linear-gradient(90deg, #00c6fb, #005bea);
}

.btcy-scroll-indicator-metaverse {
  background: linear-gradient(90deg, #667eea, #2d1b69);
}

/* ==========================================
   5. 视差滚动效果
   ========================================== */

.btcy-parallax {
  will-change: transform;
  transition: transform 0.1s ease-out;
}

.btcy-parallax-slow {
  will-change: transform;
  transition: transform 0.15s ease-out;
}

/* ==========================================
   6. 加载状态动画
   ========================================== */

.btcy-loading {
  position: relative;
  overflow: hidden;
}

.btcy-loading::after {
  content: '';
  position: absolute;
  top: 0;
  left: -100%;
  width: 100%;
  height: 100%;
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.4), transparent);
  animation: btcy-shimmer 1.5s infinite;
}

/* ==========================================
   7. 交互动画
   ========================================== */

/* 按钮点击波纹效果 */
.btcy-ripple {
  position: relative;
  overflow: hidden;
}

.btcy-ripple::after {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  width: 0;
  height: 0;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.5);
  transform: translate(-50%, -50%);
  opacity: 0;
}

.btcy-ripple:active::after {
  width: 200px;
  height: 200px;
  opacity: 1;
  transition: width 0.3s ease, height 0.3s ease, opacity 0.3s ease;
}

/* 图标脉冲效果 */
.btcy-icon-pulse {
  position: relative;
}

.btcy-icon-pulse::before {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 100%;
  height: 100%;
  border-radius: 50%;
  background: currentColor;
  opacity: 0.3;
  animation: btcy-iconPulse 2s ease-out infinite;
}

@keyframes btcy-iconPulse {
  0% {
    transform: translate(-50%, -50%) scale(1);
    opacity: 0.3;
  }
  100% {
    transform: translate(-50%, -50%) scale(2);
    opacity: 0;
  }
}

/* ==========================================
   8. 特殊效果
   ========================================== */

/* 玻璃拟态效果 */
.btcy-glassmorphism {
  background: rgba(255, 255, 255, 0.1);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border: 1px solid rgba(255, 255, 255, 0.2);
}

/* 霓虹灯效果 */
.btcy-neon {
  text-shadow: 
    0 0 5px currentColor,
    0 0 10px currentColor,
    0 0 20px currentColor,
    0 0 40px currentColor;
}

/* 渐变边框旋转 */
.btcy-gradient-border-rotate {
  position: relative;
  border-radius: 8px;
}

.btcy-gradient-border-rotate::before {
  content: '';
  position: absolute;
  top: -2px;
  left: -2px;
  right: -2px;
  bottom: -2px;
  background: linear-gradient(90deg, #667eea, #764ba2, #2d1b69, #667eea);
  background-size: 400%;
  border-radius: 10px;
  z-index: -1;
  animation: btcy-gradientFlow 20s linear infinite;
}

/* ==========================================
   9. 性能优化
   ========================================== */

/* GPU加速优化 */
.btcy-gpu-accelerated {
  will-change: transform, opacity;
  transform: translateZ(0);
  backface-visibility: hidden;
  perspective: 1000px;
}

/* 减少动画（用户偏好） */
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}

/* ==========================================
   10. 响应式适配
   ========================================== */

@media (max-width: 767px) {
  /* 移动端简化动画 */
  .btcy-animate-float,
  .btcy-animate-float-slow {
    animation: none;
  }
  
  .btcy-animate-rotate {
    animation: none;
  }
  
  .btcy-animate-gradient {
    animation: none;
    background-size: 100% 100%;
  }
  
  /* 移动端滚动指示器 */
  .btcy-scroll-indicator {
    height: 2px;
  }
}