/* ==========================================================================
   Oukerui — 首页动效
   对应参考站的三套机制：WOW.js 滚动入场（且滚回来重播）、
   图片 hover 放大（.5s transition + scale）、首屏视差。
   纯 CSS 驱动，JS 只负责加/删 .is-in（见 assets/js/home.js）。
   ========================================================================== */

/* ---------- 滚动入场 ----------
   元素带 data-reveal="up|left|right|fade"，进入视口时 JS 加 .is-in。
   离开视口时 JS 会摘掉 .is-in —— 于是滚回来会重播，和参考站一致。 */
[data-reveal]{
  opacity:0;
  transition:opacity .7s cubic-bezier(.22,.61,.36,1),
             transform .7s cubic-bezier(.22,.61,.36,1);
  will-change:opacity,transform;
}
[data-reveal="up"]{transform:translate3d(0,30px,0)}
[data-reveal="left"]{transform:translate3d(-34px,0,0)}
[data-reveal="right"]{transform:translate3d(34px,0,0)}
[data-reveal="fade"]{transform:none}
[data-reveal].is-in{opacity:1;transform:translate3d(0,0,0)}

/* 播完之后不再占用合成层，长页面上滚动更稳 */
[data-reveal].is-done{will-change:auto}

/* ---------- 图片 hover 放大 ----------
   容器 overflow:hidden 兜住溢出，图片 .5s 缓动放大。 */
.zoom{overflow:hidden;border-radius:var(--r-lg)}
.zoom img{transition:transform .5s ease;transform-origin:center}
.zoom:hover img,
.card:hover .zoom img,
.post:hover .zoom img{transform:scale(1.08)}

/* 深色区块里图片压暗一点，保证叠加文字可读 */
.media-card img{transition:transform .5s ease}
.media-card:hover img{transform:scale(1.03)}

/* ---------- 首屏轮播：幻灯片之间交叉渐隐 ----------
   服务端一定给第 1 张渲染 .is-active，JS 负责每次只留一个 —— 所以这里不需要
   再加 ":first-child 也可见" 之类的兜底：那会和 JS 打架（把旧的又显示出来）。
   只传 1 张时压根没有切换，opacity 恒为 1。 */
.hero__slide{opacity:0;transition:opacity 1.2s ease}
.hero__slide.is-active{opacity:1}

/* ---------- 首屏视差 ----------
   JS 把 --hero-shift 写在 [data-parallax-scope] 上（不是写在某张图上），
   这样轮播里的每张背景一起位移，且只写一次。 */
.hero__bg{transform:translate3d(0,var(--hero-shift,0),0)}

/* ---------- 滚动提示的心跳 ---------- */
@keyframes okrui-scroll-dot{
  0%,100%{transform:translateY(0);opacity:1}
  50%{transform:translateY(12px);opacity:.35}
}
.hero__scroll span{animation:okrui-scroll-dot 1.8s ease-in-out infinite}

/* ---------- 导航滚动变色（对齐参考站 scrollTop > 30 加 .scroll） ---------- */
.nav{transition:background-color .3s ease,box-shadow .3s ease}
.nav.is-scrolled{background:#1d1d1f;box-shadow:0 1px 0 rgba(255,255,255,.08)}

/* ---------- Tab 切换时重放面板内动画 ----------
   参考站的做法：先摘掉动画类、强制 reflow、再加回来。
   这里 JS 摘掉 .is-in 再加回来，效果等价。 */
.tabs__body{position:relative}
.catpanel.is-switching [data-reveal]{transition-duration:.45s}

/* ---------- 无障碍：系统开了「减少动态效果」就全部关掉 ---------- */
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{
    animation-duration:.001ms !important;
    animation-iteration-count:1 !important;
    transition-duration:.001ms !important;
    scroll-behavior:auto !important;
  }
  [data-reveal]{opacity:1 !important;transform:none !important}
  .hero__bg{transform:none !important}
}