/*
 * 易班工作站网站动画效果样式文件
 * 包含各种动画效果、过渡动画和特效
 */

/* ========================================
   关键帧动画定义
======================================== */

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

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

@keyframes fadeInDown {
  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 slideUp {
  from {
    transform: translateY(100%);
  }
  to {
    transform: translateY(0);
  }
}

@keyframes slideDown {
  from {
    transform: translateY(-100%);
  }
  to {
    transform: translateY(0);
  }
}

@keyframes slideLeft {
  from {
    transform: translateX(100%);
  }
  to {
    transform: translateX(0);
  }
}

@keyframes slideRight {
  from {
    transform: translateX(-100%);
  }
  to {
    transform: translateX(0);
  }
}

/* 缩放动画 */
@keyframes zoomIn {
  from {
    opacity: 0;
    transform: scale(0.8);
  }
  to {
    opacity: 1;
    transform: scale(1);
  }
}

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

/* 翻转动画 */
@keyframes flipInY {
  from {
    opacity: 0;
    transform: perspective(400px) rotateY(90deg);
  }
  to {
    opacity: 1;
    transform: perspective(400px) rotateY(0deg);
  }
}

@keyframes flipInX {
  from {
    opacity: 0;
    transform: perspective(400px) rotateX(90deg);
  }
  to {
    opacity: 1;
    transform: perspective(400px) rotateX(0deg);
  }
}

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

/* 摇摆动画 */
@keyframes shake {
  0%, 100% {
    transform: translateX(0);
  }
  10%, 30%, 50%, 70%, 90% {
    transform: translateX(-10px);
  }
  20%, 40%, 60%, 80% {
    transform: translateX(10px);
  }
}

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

/* 呼吸灯效果 */
@keyframes breathe {
  0%, 100% {
    opacity: 1;
  }
  50% {
    opacity: 0.6;
  }
}

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

/* 彩虹渐变动画 */
@keyframes rainbow {
  0% { background-position: 0% 50%; }
  50% { background-position: 100% 50%; }
  100% { background-position: 0% 50%; }
}

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

@keyframes blink {
  0%, 50% {
    border-color: transparent;
  }
  51%, 100% {
    border-color: var(--primary-color);
  }
}

/* ========================================
   动画类
======================================== */

/* 基础动画类 */
.animate {
  animation-duration: 1s;
  animation-fill-mode: both;
}

.animate-fast {
  animation-duration: 0.5s;
}

.animate-slow {
  animation-duration: 2s;
}

.animate-infinite {
  animation-iteration-count: infinite;
}

/* 淡入动画类 */
.fadeIn {
  animation-name: fadeIn;
}

.fadeInUp {
  animation-name: fadeInUp;
}

.fadeInDown {
  animation-name: fadeInDown;
}

.fadeInLeft {
  animation-name: fadeInLeft;
}

.fadeInRight {
  animation-name: fadeInRight;
}

/* 滑动动画类 */
.slideUp {
  animation-name: slideUp;
}

.slideDown {
  animation-name: slideDown;
}

.slideLeft {
  animation-name: slideLeft;
}

.slideRight {
  animation-name: slideRight;
}

/* 缩放动画类 */
.zoomIn {
  animation-name: zoomIn;
}

.zoomOut {
  animation-name: zoomOut;
}

/* 翻转动画类 */
.flipInY {
  animation-name: flipInY;
}

.flipInX {
  animation-name: flipInX;
}

/* 其他动画类 */
.bounce {
  animation-name: bounce;
}

.shake {
  animation-name: shake;
}

.pulse {
  animation-name: pulse;
}

.breathe {
  animation-name: breathe;
}

.rotate {
  animation-name: rotate;
}

/* ========================================
   特效样式
======================================== */

/* 毛玻璃效果 */
.glass-effect {
  background: rgba(255, 255, 255, 0.1);
  backdrop-filter: blur(10px);
  border: 1px solid rgba(255, 255, 255, 0.2);
}

.glass-effect-dark {
  background: rgba(0, 0, 0, 0.3);
  backdrop-filter: blur(10px);
  border: 1px solid rgba(255, 255, 255, 0.1);
}

/* 霓虹灯效果 */
.neon-glow {
  text-shadow: 
    0 0 5px var(--primary-color),
    0 0 10px var(--primary-color),
    0 0 15px var(--primary-color),
    0 0 20px var(--primary-color);
}

/* 彩虹文字效果 */
.rainbow-text {
  background: linear-gradient(45deg, #ff0000, #ff7f00, #ffff00, #00ff00, #0000ff, #4b0082, #9400d3);
  background-size: 400% 400%;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  animation: rainbow 3s ease infinite;
}

/* 打字机效果 */
.typewriter {
  overflow: hidden;
  border-right: 2px solid var(--primary-color);
  white-space: nowrap;
  margin: 0 auto;
  animation: typing 3s steps(40, end), blink 0.75s step-end infinite;
}

/* 粒子背景效果 */
.particles-bg {
  position: relative;
  overflow: hidden;
}

.particles-bg::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100"><circle cx="20" cy="20" r="1" fill="rgba(46,123,255,0.3)"/><circle cx="80" cy="40" r="1.5" fill="rgba(46,123,255,0.2)"/><circle cx="50" cy="70" r="1" fill="rgba(46,123,255,0.4)"/><circle cx="10" cy="90" r="0.8" fill="rgba(46,123,255,0.3)"/><circle cx="90" cy="10" r="1.2" fill="rgba(46,123,255,0.2)"/></svg>') repeat;
  animation: float 20s ease-in-out infinite;
  pointer-events: none;
}

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

/* ========================================
   3D变换效果
======================================== */

/* 3D翻转卡片 */
.flip-card {
  perspective: 1000px;
  width: 100%;
  height: 200px;
}

.flip-card-inner {
  position: relative;
  width: 100%;
  height: 100%;
  text-align: center;
  transition: transform 0.6s;
  transform-style: preserve-3d;
}

.flip-card:hover .flip-card-inner {
  transform: rotateY(180deg);
}

.flip-card-front,
.flip-card-back {
  position: absolute;
  width: 100%;
  height: 100%;
  backface-visibility: hidden;
  border-radius: var(--border-radius);
  display: flex;
  align-items: center;
  justify-content: center;
}

.flip-card-front {
  background: var(--primary-gradient);
  color: var(--text-white);
}

.flip-card-back {
  background: var(--bg-dark);
  color: var(--text-white);
  transform: rotateY(180deg);
}

/* 3D按钮效果 */
.btn-3d {
  position: relative;
  transform-style: preserve-3d;
  transition: transform 0.2s;
}

.btn-3d:hover {
  transform: translateY(-2px) rotateX(10deg);
}

.btn-3d::before {
  content: '';
  position: absolute;
  top: 100%;
  left: 0;
  width: 100%;
  height: 100%;
  background: linear-gradient(to bottom, rgba(0,0,0,0.1), rgba(0,0,0,0.3));
  transform: rotateX(90deg);
  transform-origin: top;
  border-radius: var(--border-radius);
}

/* ========================================
   悬停效果
======================================== */

/* 卡片悬停效果 */
.hover-lift {
  transition: var(--transition-base);
}

.hover-lift:hover {
  transform: translateY(-10px);
  box-shadow: 0 20px 40px rgba(0, 0, 0, 0.1);
}

/* 图片悬停效果 */
.hover-zoom {
  overflow: hidden;
}

.hover-zoom img {
  transition: var(--transition-slow);
}

.hover-zoom:hover img {
  transform: scale(1.1);
}

/* 文字悬停效果 */
.hover-underline {
  position: relative;
  overflow: hidden;
}

.hover-underline::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: -100%;
  width: 100%;
  height: 2px;
  background: var(--primary-gradient);
  transition: var(--transition-base);
}

.hover-underline:hover::after {
  left: 0;
}

/* 按钮悬停发光效果 */
.hover-glow {
  position: relative;
  overflow: hidden;
}

.hover-glow::before {
  content: '';
  position: absolute;
  top: 0;
  left: -100%;
  width: 100%;
  height: 100%;
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.3), transparent);
  transition: var(--transition-base);
}

.hover-glow:hover::before {
  left: 100%;
}

/* ========================================
   滚动动画
======================================== */

/* 滚动视差效果 */
.parallax {
  background-attachment: fixed;
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
}

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

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

/* 滚动进度条 */
.scroll-progress {
  position: fixed;
  top: 0;
  left: 0;
  width: 0%;
  height: 3px;
  background: var(--primary-gradient);
  z-index: var(--z-index-fixed);
  transition: width 0.1s ease;
}

/* ========================================
   加载动画
======================================== */

/* 波浪加载动画 */
.wave-loader {
  width: 50px;
  height: 50px;
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
}

.wave-loader div {
  width: 8px;
  background: var(--primary-color);
  animation: wave 1.2s infinite ease-in-out;
}

.wave-loader div:nth-child(2) { animation-delay: -1.1s; }
.wave-loader div:nth-child(3) { animation-delay: -1.0s; }
.wave-loader div:nth-child(4) { animation-delay: -0.9s; }
.wave-loader div:nth-child(5) { animation-delay: -0.8s; }

@keyframes wave {
  0%, 40%, 100% {
    transform: scaleY(0.4);
  }
  20% {
    transform: scaleY(1);
  }
}

/* 圆点加载动画 */
.dots-loader {
  display: flex;
  gap: 5px;
}

.dots-loader div {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: var(--primary-color);
  animation: dots 1.4s infinite ease-in-out both;
}

.dots-loader div:nth-child(1) { animation-delay: -0.32s; }
.dots-loader div:nth-child(2) { animation-delay: -0.16s; }

@keyframes dots {
  0%, 80%, 100% {
    transform: scale(0);
  }
  40% {
    transform: scale(1);
  }
}

/* ========================================
   微交互动画
======================================== */

/* 点击波纹效果 */
@keyframes ripple {
  0% {
    transform: scale(0);
    opacity: 0.6;
  }
  100% {
    transform: scale(4);
    opacity: 0;
  }
}

.ripple-effect {
  position: relative;
  overflow: hidden;
}

.ripple-effect::before {
  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%);
  transition: width 0.6s, height 0.6s;
}

.ripple-effect:active::before {
  width: 300px;
  height: 300px;
  transition: 0s;
}

/* 磁性悬停效果 */
.magnetic-hover {
  transition: var(--transition-fast);
}

.magnetic-hover:hover {
  transform: scale(1.05) rotate(1deg);
}

/* 呼吸按钮效果 */
.btn-breathe {
  animation: breatheButton 3s ease-in-out infinite;
}

@keyframes breatheButton {
  0%, 100% {
    box-shadow: 0 0 0 0 rgba(46, 123, 255, 0.4);
  }
  50% {
    box-shadow: 0 0 0 20px rgba(46, 123, 255, 0);
  }
}

/* 浮动动画 */
.float {
  animation: floating 3s ease-in-out infinite;
}

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

/* 倾斜悬停效果 */
.tilt-hover {
  transition: var(--transition-base);
}

.tilt-hover:hover {
  transform: perspective(1000px) rotateX(10deg) rotateY(10deg);
}

/* 文字打字机效果 */
.typewriter-text {
  overflow: hidden;
  border-right: 2px solid var(--primary-color);
  white-space: nowrap;
  margin: 0 auto;
  animation: 
    typing 3.5s steps(40, end),
    blink-caret 0.75s step-end infinite;
}

@keyframes typing {
  from { width: 0 }
  to { width: 100% }
}

@keyframes blink-caret {
  from, to { border-color: transparent }
  50% { border-color: var(--primary-color); }
}

/* 炫光扫过效果 */
.shine-effect {
  position: relative;
  overflow: hidden;
}

.shine-effect::after {
  content: '';
  position: absolute;
  top: 0;
  left: -100%;
  width: 100%;
  height: 100%;
  background: linear-gradient(
    90deg,
    transparent,
    rgba(255, 255, 255, 0.4),
    transparent
  );
  transition: var(--transition-slower);
}

.shine-effect:hover::after {
  left: 100%;
}

/* 弹性缩放 */
.elastic-scale {
  transition: var(--transition-base);
}

.elastic-scale:hover {
  animation: elasticScale 0.6s ease;
}

@keyframes elasticScale {
  0% { transform: scale(1); }
  30% { transform: scale(1.25); }
  40% { transform: scale(1.15); }
  50% { transform: scale(1.25); }
  65% { transform: scale(1.1); }
  75% { transform: scale(1.15); }
  100% { transform: scale(1.1); }
}

/* 摆动效果 */
.swing {
  animation: swing 2s ease-in-out infinite;
  transform-origin: top center;
}

@keyframes swing {
  0%, 100% { transform: rotate(0deg); }
  20% { transform: rotate(15deg); }
  40% { transform: rotate(-10deg); }
  60% { transform: rotate(5deg); }
  80% { transform: rotate(-5deg); }
}

/* 心跳效果 */
.heartbeat {
  animation: heartbeat 1.5s ease-in-out infinite;
}

@keyframes heartbeat {
  0%, 100% { transform: scale(1); }
  14% { transform: scale(1.1); }
  28% { transform: scale(1); }
  42% { transform: scale(1.1); }
  70% { transform: scale(1); }
}

/* 渐变色彩动画 */
.gradient-animation {
  background: linear-gradient(
    45deg,
    #667eea,
    #764ba2,
    #667eea,
    #764ba2
  );
  background-size: 400% 400%;
  animation: gradientShift 4s ease infinite;
}

@keyframes gradientShift {
  0% { background-position: 0% 50%; }
  50% { background-position: 100% 50%; }
  100% { background-position: 0% 50%; }
}

/* 悬浮阴影效果 */
.hover-shadow {
  transition: var(--transition-base);
}

.hover-shadow:hover {
  box-shadow: 
    0 20px 40px rgba(46, 123, 255, 0.2),
    0 0 0 1px rgba(46, 123, 255, 0.1);
}

/* 数字滚动动画 */
@keyframes countUp {
  from {
    transform: translateY(100%);
    opacity: 0;
  }
  to {
    transform: translateY(0);
    opacity: 1;
  }
}

.count-animation {
  animation: countUp 1s ease-out;
}

/* 加载点点动画 */
.loading-dots {
  display: inline-block;
}

.loading-dots::after {
  content: '.';
  animation: loadingDots 2s infinite;
}

@keyframes loadingDots {
  0%, 20% { content: '.'; }
  40% { content: '..'; }
  60%, 100% { content: '...'; }
}

/* 页面加载动画 */
.page-loader {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: var(--bg-primary);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: var(--z-index-max);
  transition: opacity 0.5s ease, visibility 0.5s ease;
}

.page-loader.fade-out {
  opacity: 0;
  visibility: hidden;
}

.loader-circle {
  width: 60px;
  height: 60px;
  border: 4px solid var(--border-color);
  border-top: 4px solid var(--primary-color);
  border-radius: 50%;
  animation: spin 1s linear infinite;
}

/* 视差滚动增强 */
.parallax-slow {
  will-change: transform;
}

.parallax-medium {
  will-change: transform;
}

.parallax-fast {
  will-change: transform;
}

/* 滚动显示动画 */
.reveal-on-scroll {
  opacity: 0;
  transform: translateY(30px);
  transition: all 0.8s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

.reveal-on-scroll.revealed {
  opacity: 1;
  transform: translateY(0);
}

/* 降级方案：如果JavaScript未加载或失败，2秒后自动显示所有内容 */
.no-js .reveal-on-scroll,
.reveal-on-scroll {
  animation: auto-reveal 0.1s ease-in-out 2s forwards;
}

@keyframes auto-reveal {
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* 如果JavaScript已初始化，禁用自动显示 */
.js-initialized .reveal-on-scroll {
  animation: none;
}

/* 降级显示：当JavaScript初始化失败时强制显示内容 */
.fallback-display .reveal-on-scroll {
  opacity: 1 !important;
  transform: none !important;
  animation: none !important;
}

.reveal-left {
  opacity: 0;
  transform: translateX(-30px);
  transition: all 0.8s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

.reveal-left.revealed {
  opacity: 1;
  transform: translateX(0);
}

.reveal-right {
  opacity: 0;
  transform: translateX(30px);
  transition: all 0.8s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

.reveal-right.revealed {
  opacity: 1;
  transform: translateX(0);
}

/* 炫酷按钮效果 */
.btn-neon {
  position: relative;
  background: transparent;
  border: 2px solid var(--primary-color);
  color: var(--primary-color);
  overflow: hidden;
}

.btn-neon::before {
  content: '';
  position: absolute;
  top: 0;
  left: -100%;
  width: 100%;
  height: 100%;
  background: var(--primary-gradient);
  transition: var(--transition-base);
  z-index: -1;
}

.btn-neon:hover::before {
  left: 0;
}

.btn-neon:hover {
  color: var(--text-inverse);
  box-shadow: 
    0 0 10px var(--primary-color),
    0 0 20px var(--primary-color),
    0 0 30px var(--primary-color);
}