/* ============================================================
   官网动效库 · anim.css（2026-10-30）
   ------------------------------------------------------------------
   用法：给任意元素加
       data-anim="fade-up"
       data-anim-delay="200"      （可选，毫秒）
   后台「页面编辑 / 专题页设计 → 动效」面板会自动写入这两个属性。

   ★ 设计原则一：渐进增强。
     默认状态下内容【完整可见】，只有 JS 成功接管后才通过 .anim-ready
     施加初始隐藏态，再由 .anim-in 播放。JS 被拦、CSS 未加载、观察器
     不支持 —— 任何一种情况都只是「没有动画」，绝不会白屏。
     （对比：旧的 .reveal{opacity:0} 在观察器不触发时会整块不可见，
       10-27 与 10-30 各踩过一次。）

   ★ 设计原则二：尊重系统「减少动态效果」。
     开启该系统设置时整库失效，内容直接呈现，不做位移与淡入。

   ★ 设计原则三：入场类与悬停/持续类互斥使用。
     入场类由 JS 加 .anim-ready / .anim-in；
     悬停类、持续类纯 CSS 驱动，不依赖 JS，也不需要 .anim-ready。
   ============================================================ */

/* ---------- 入场类：初始态（仅在 JS 已接管时生效） ---------- */
.anim-ready[data-anim]:not(.anim-in) {
  opacity: 0;
  will-change: opacity, transform, filter;
}
.anim-ready[data-anim="fade-up"]:not(.anim-in)    { transform: translateY(32px); }
.anim-ready[data-anim="fade-down"]:not(.anim-in)  { transform: translateY(-32px); }
.anim-ready[data-anim="fade-left"]:not(.anim-in)  { transform: translateX(-44px); }
.anim-ready[data-anim="fade-right"]:not(.anim-in) { transform: translateX(44px); }
.anim-ready[data-anim="zoom-in"]:not(.anim-in)    { transform: scale(.93); }
.anim-ready[data-anim="blur-in"]:not(.anim-in)    { filter: blur(12px); }
.anim-ready[data-anim="count-up"]:not(.anim-in)   { transform: translateY(18px); }

/* ---------- 入场类：完成态 ---------- */
[data-anim].anim-in {
  opacity: 1;
  transform: none;
  filter: none;
  transition:
    opacity .78s cubic-bezier(.22, .61, .36, 1),
    transform .78s cubic-bezier(.22, .61, .36, 1),
    filter .78s ease;
}

/* ---------- 持续类：不依赖 JS ---------- */
[data-anim="float"] { animation: km-float 4.6s ease-in-out infinite; }
@keyframes km-float {
  0%, 100% { transform: translateY(0); }
  50%      { transform: translateY(-10px); }
}

[data-anim="pulse"] { animation: km-pulse 3.2s ease-in-out infinite; }
@keyframes km-pulse {
  0%, 100% { box-shadow: 0 0 0 0 rgba(0, 128, 192, .38); }
  55%      { box-shadow: 0 0 0 16px rgba(0, 128, 192, 0); }
}

/* ---------- 悬停类：不依赖 JS ---------- */
[data-anim="hover-lift"] {
  transition: transform .34s ease, box-shadow .34s ease;
}
[data-anim="hover-lift"]:hover {
  transform: translateY(-8px);
  box-shadow: 0 18px 44px rgba(11, 26, 43, .15);
}

[data-anim="hover-zoom"] { overflow: hidden; }
[data-anim="hover-zoom"] img {
  transition: transform .6s cubic-bezier(.22, .61, .36, 1);
}
[data-anim="hover-zoom"]:hover img { transform: scale(1.07); }

[data-anim="hover-glow"] { position: relative; overflow: hidden; }
[data-anim="hover-glow"]::after {
  content: "";
  position: absolute;
  top: 0;
  left: -140%;
  width: 60%;
  height: 100%;
  background: linear-gradient(100deg, transparent, rgba(255, 255, 255, .42), transparent);
  transform: skewX(-18deg);
  pointer-events: none;
}
[data-anim="hover-glow"]:hover::after {
  animation: km-glow .9s ease;
}
@keyframes km-glow {
  0%   { left: -140%; }
  100% { left: 130%; }
}

/* ---------- 系统级降级 ---------- */
@media (prefers-reduced-motion: reduce) {
  [data-anim],
  .anim-ready[data-anim] {
    opacity: 1 !important;
    transform: none !important;
    filter: none !important;
    animation: none !important;
    transition: none !important;
  }
  [data-anim="hover-glow"]::after { display: none; }
}