/* Animations */

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

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

/* 从下方滑入 */
@keyframes slideInUp {
  from {
    transform: translateY(20px);
    opacity: 0;
  }
  to {
    transform: translateY(0);
    opacity: 1;
  }
}

/* 从上方滑入 */
@keyframes slideInDown {
  from {
    transform: translateY(-20px);
    opacity: 0;
  }
  to {
    transform: translateY(0);
    opacity: 1;
  }
}

/* 缩放进入 */
@keyframes zoomIn {
  from {
    transform: scale(0.9);
    opacity: 0;
  }
  to {
    transform: scale(1);
    opacity: 1;
  }
}

/* 缩放退出 */
@keyframes zoomOut {
  from {
    transform: scale(1);
    opacity: 1;
  }
  to {
    transform: scale(0.9);
    opacity: 0;
  }
}

/* 脉冲动画 */
@keyframes pulse {
  0%, 100% {
    opacity: 1;
  }
  50% {
    opacity: 0.5;
  }
}

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

/* 闪烁提示 */
@keyframes blink {
  0%, 50%, 100% {
    opacity: 1;
  }
  25%, 75% {
    opacity: 0.3;
  }
}

/* 工具类：动画应用 */
.fade-in {
  animation: fadeIn var(--duration-normal) var(--easing-default);
}

.fade-out {
  animation: fadeOut var(--duration-normal) var(--easing-default);
}

.slide-in-up {
  animation: slideInUp var(--duration-normal) var(--easing-default);
}

.slide-in-down {
  animation: slideInDown var(--duration-normal) var(--easing-default);
}

.zoom-in {
  animation: zoomIn var(--duration-normal) var(--easing-default);
}

.zoom-out {
  animation: zoomOut var(--duration-normal) var(--easing-default);
}

/* 移动端动画优化 */
@media (max-width: 768px) {
  .fade-in,
  .fade-out,
  .slide-in-up,
  .slide-in-down,
  .zoom-in,
  .zoom-out {
    animation-duration: var(--duration-mobile-normal);
  }
}

/* 减少动画模式 */
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01s !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01s !important;
  }

  .work-image,
  .lightbox-image,
  .lightbox-overlay {
    transition: none !important;
  }
}

/* 过渡效果工具类 */
.transition-transform {
  transition: transform var(--duration-normal) var(--easing-default);
}

.transition-opacity {
  transition: opacity var(--duration-normal) var(--easing-default);
}

.transition-all {
  transition: all var(--duration-normal) var(--easing-default);
}

/* 性能提示 */
.will-change-transform {
  will-change: transform;
}

.will-change-opacity {
  will-change: opacity;
}

/* 移除 will-change（动画结束后） */
.will-change-auto {
  will-change: auto;
}

/* 硬件加速 */
.gpu-accelerated {
  transform: translateZ(0);
  -webkit-transform: translateZ(0);
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
  perspective: 1000px;
  -webkit-perspective: 1000px;
}

/* 灯箱打开/关闭动画 */
.lightbox.opening .lightbox-overlay {
  animation: fadeIn var(--duration-normal) var(--easing-default);
}

.lightbox.closing .lightbox-overlay {
  animation: fadeOut var(--duration-normal) var(--easing-default);
}

.lightbox.opening .lightbox-image {
  animation: zoomIn var(--duration-normal) var(--easing-default);
}

.lightbox.closing .lightbox-image {
  animation: zoomOut var(--duration-normal) var(--easing-default);
}

/* 图片切换动画 */
.lightbox-image.transitioning-out {
  animation: fadeOut var(--duration-fast) var(--easing-default);
}

.lightbox-image.transitioning-in {
  animation: fadeIn var(--duration-fast) var(--easing-default);
}

/* 加载动画 */
.loading {
  position: relative;
  pointer-events: none;
}

.loading::after {
  content: '';
  position: absolute;
  inset: 0;
  background-color: rgba(255, 255, 255, 0.8);
  display: flex;
  align-items: center;
  justify-content: center;
  animation: fadeIn var(--duration-fast) var(--easing-default);
}