/* ============================================================
 * 入场动画样式 - 性能优化版
 *
 * 优化要点：
 * 1. GPU 合成层提升（will-change + backface-visibility）
 * 2. 消除 transition 与 animation 冲突
 * 3. 禁用 transition: all，精确限定属性
 * 4. contain 限制布局/样式影响范围
 * 5. prefers-reduced-motion 无障碍降级
 * ============================================================ */

/* 基础动画样式：默认隐藏 */
.animation {
  opacity: 0;
  /* ⛔ 移除 transition，避免和 @keyframes 动画冲突导致双倍渲染开销 */
  /* 改用 animation-fill-mode: backwards 保证初始帧正确渲染 */
  animation-fill-mode: backwards;
  -webkit-animation-fill-mode: backwards;
  /* 限制重算范围，不与外部产生布局连锁反应 */
  contain: layout style paint;
}

/* ---- 入场动画激活类（统一 GPU 加速） ---- */
.fadeLeft,
.fadeRight,
.fadeUp,
.fadeDown,
.fadeZoom,
.fadeScale {
  opacity: 1;
  /* 提示浏览器提前分配 GPU 合成层 */
  will-change: transform, opacity;
  /* 回退方案：强制 GPU 层提升（兼容旧浏览器） */
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
  -webkit-perspective: 1000;
  perspective: 1000;
}

/* ---- 1. 向上滑入 ---- */
.fadeUp {
  animation: slideInUp ease-out 0.6s forwards;
  -webkit-animation: slideInUp ease-out 0.6s forwards;
}

@keyframes slideInUp {
  from {
    transform: translate3d(0, 50%, 0);
    opacity: 0;
  }
  to {
    opacity: 1;
    transform: translate3d(0, 0, 0);
  }
}

@-webkit-keyframes slideInUp {
  from {
    -webkit-transform: translate3d(0, 50%, 0);
    opacity: 0;
  }
  to {
    opacity: 1;
    -webkit-transform: translate3d(0, 0, 0);
  }
}

/* ---- 2. 向左滑入 ---- */
.fadeLeft {
  animation: slideInLeft ease-out 0.6s forwards;
  -webkit-animation: slideInLeft ease-out 0.6s forwards;
}

@keyframes slideInLeft {
  from {
    transform: translate3d(-50%, 0, 0);
    opacity: 0;
  }
  to {
    opacity: 1;
    transform: translate3d(0, 0, 0);
  }
}

@-webkit-keyframes slideInLeft {
  from {
    -webkit-transform: translate3d(-50%, 0, 0);
    opacity: 0;
  }
  to {
    opacity: 1;
    -webkit-transform: translate3d(0, 0, 0);
  }
}

/* ---- 3. 向右滑入 ---- */
.fadeRight {
  animation: slideInRight ease-out 0.6s forwards;
  -webkit-animation: slideInRight ease-out 0.6s forwards;
}

@keyframes slideInRight {
  from {
    transform: translate3d(50%, 0, 0);
    opacity: 0;
  }
  to {
    opacity: 1;
    transform: translate3d(0, 0, 0);
  }
}

@-webkit-keyframes slideInRight {
  from {
    -webkit-transform: translate3d(50%, 0, 0);
    opacity: 0;
  }
  to {
    opacity: 1;
    -webkit-transform: translate3d(0, 0, 0);
  }
}

/* ---- 4. 向下滑入 ---- */
.fadeDown {
  animation: slideInDown ease-out 0.6s forwards;
  -webkit-animation: slideInDown ease-out 0.6s forwards;
}

@keyframes slideInDown {
  from {
    transform: translate3d(0, -50%, 0);
    opacity: 0;
  }
  to {
    opacity: 1;
    transform: translate3d(0, 0, 0);
  }
}

@-webkit-keyframes slideInDown {
  from {
    -webkit-transform: translate3d(0, -50%, 0);
    opacity: 0;
  }
  to {
    opacity: 1;
    -webkit-transform: translate3d(0, 0, 0);
  }
}

/* ---- 5. 中心放大 ---- */
.fadeZoom {
  animation: zoomIn ease-out 0.6s forwards;
  -webkit-animation: zoomIn ease-out 0.6s forwards;
}

@keyframes zoomIn {
  from {
    transform: scale3d(0.3, 0.3, 0.3);
    opacity: 0;
  }
  to {
    opacity: 1;
    transform: scale3d(1, 1, 1);
  }
}

@-webkit-keyframes zoomIn {
  from {
    -webkit-transform: scale3d(0.3, 0.3, 0.3);
    opacity: 0;
  }
  to {
    opacity: 1;
    -webkit-transform: scale3d(1, 1, 1);
  }
}

/* ---- 6. 轻微缩放淡入 ---- */
.fadeScale {
  animation: fadeScale ease-out 0.7s forwards;
  -webkit-animation: fadeScale ease-out 0.7s forwards;
}

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

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

/* ---- 图片入场缩放（优化版） ---- */
.image-container {
  overflow: hidden;
  /* 限制 Paint 范围，避免溢出影响其他区域 */
  contain: paint;
}

.image-container img {
  width: 100%;
  display: block;
  /* 启用 GPU 渲染 */
  will-change: transform;
  animation: imgZoomIn 2.5s ease-out forwards;
  -webkit-animation: imgZoomIn 2.5s ease-out forwards;
}

@keyframes imgZoomIn {
  0% {
    transform: scale(1.1);
  }
  100% {
    transform: scale(1);
  }
}

@-webkit-keyframes imgZoomIn {
  0% {
    -webkit-transform: scale(1.1);
  }
  100% {
    -webkit-transform: scale(1);
  }
}

/* ---- 图片悬停缩放 ---- */
@media (min-width: 480px) {
  .img-scale {
    overflow: hidden;
  }

  .img-scale img {
    display: block;
    transform: scale(1);
    -webkit-transform: scale(1);
    /* ⛔ 不要用 transition: all，精确限定到 transform */
    transition: transform 0.6s ease-out;
    -webkit-transition: -webkit-transform 0.6s ease-out;
    /* 提示 GPU 加速 */
    will-change: transform;
  }

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

/* ---- 无障碍：用户偏好减少动效时关闭动画 ---- */
@media (prefers-reduced-motion: reduce) {
  .animation,
  .fadeLeft,
  .fadeRight,
  .fadeUp,
  .fadeDown,
  .fadeZoom,
  .fadeScale,
  .image-container img {
    animation: none !important;
    -webkit-animation: none !important;
    transition: none !important;
    -webkit-transition: none !important;
    opacity: 1;
    transform: none;
    -webkit-transform: none;
  }
}