/* ===========================================================================
   jlt-reveal —— 全站滚动入场
   ---------------------------------------------------------------------------
   背景：此前全站只有 wow.js，而它被三处 !important 规则整体关掉了
   （body:not(.jlt-home) :is(article,main,.jlt-about-content) .wow{animation:none!important}），
   结果是除首屏外整站没有任何入场动效，页面读起来很死板。这里用一套轻量的
   IntersectionObserver 机制替代它。

   约定：
   - 隐藏只发生在 html.jlt-reveal-on 存在时，而这一类由 JS 添加 =>
     脚本没跑、被拦、或报错时内容照常可见（fail-open），不会重演 wow 时代
     「脚本一挂内容永久不可见」的问题。
   - 位移 + 透明度都用 transform/opacity，只走合成层，不触发重排。
   - 尊重 prefers-reduced-motion：直接不隐藏也不位移。
   - 缓动与首屏文案入场保持同一条曲线，全站观感一致。
   =========================================================================== */

:root {
  --jlt-reveal-ease: cubic-bezier(.16, 1, .3, 1);
  --jlt-reveal-rise: 22px;
  --jlt-reveal-duration: .68s;
  --jlt-reveal-fade: .52s;
}

.jlt-reveal-on [data-jlt-reveal] {
  opacity: 0;
  transform: translate3d(0, var(--jlt-reveal-rise), 0) scale(var(--jlt-reveal-scale, 1));
}

.jlt-reveal-on [data-jlt-reveal].is-in {
  opacity: 1;
  transform: none;
  transition:
    opacity var(--jlt-reveal-fade) ease-out var(--jlt-delay, 0ms),
    transform var(--jlt-reveal-duration) var(--jlt-reveal-ease) var(--jlt-delay, 0ms);
}

/* 设备/场景图这类主体的入场：升起的同时极轻微放大，像「落位」而不是「飘过」 */
.jlt-reveal-on [data-jlt-reveal][data-reveal-scale] {
  --jlt-reveal-scale: .965;
  --jlt-reveal-rise: 34px;
  --jlt-reveal-duration: .82s;
}

/* 数字卡片、图标这类小体量元素少移一点，避免「跳」 */
.jlt-reveal-on [data-jlt-reveal][data-reveal-tight] { --jlt-reveal-rise: 14px; }
/* 大图/整块内容多移一点，让「进入」更明确 */
.jlt-reveal-on [data-jlt-reveal][data-reveal-wide] { --jlt-reveal-rise: 30px; }

@media (max-width: 750px) {
  :root { --jlt-reveal-rise: 16px; }
  .jlt-reveal-on [data-jlt-reveal][data-reveal-wide] { --jlt-reveal-rise: 22px; }
}

@media (prefers-reduced-motion: reduce) {
  .jlt-reveal-on [data-jlt-reveal],
  .jlt-reveal-on [data-jlt-reveal].is-in {
    opacity: 1;
    transform: none;
    transition: none;
  }
}