/* 全站 3D 动态视觉效果
 * 由 assets/fx3d.js 注入控制；尊重 prefers-reduced-motion，触屏自动禁用倾斜。
 */

/* —— 3D 倾斜卡片（鼠标跟随 rotateX/rotateY + 高光 + 深度阴影） —— */
.fx-tilt { position: relative; transform-style: preserve-3d; will-change: transform; }
.fx-tilt::after {
  content: ""; position: absolute; inset: 0; border-radius: inherit;
  pointer-events: none; opacity: 0; transition: opacity .2s ease; z-index: 2;
  background: radial-gradient(circle at var(--fx-glare-x, 50%) var(--fx-glare-y, 50%), rgba(255, 255, 255, .30), transparent 58%);
}
.fx-tilt.fx-tilting { z-index: 6; box-shadow: 0 24px 50px rgba(20, 30, 12, .20); }
.fx-tilt.fx-tilting::after { opacity: 1; }

/* —— 滚动显现（fade + 上浮 + 轻微 rotateX） —— */
body.fx3d .fx-reveal {
  opacity: 0; transform: translateY(28px) rotateX(7deg) scale(.965); transform-origin: center top;
  transition: opacity .75s cubic-bezier(.16, .8, .26, 1), transform .75s cubic-bezier(.16, .8, .26, 1);
  will-change: opacity, transform;
}
body.fx3d .fx-reveal.fx-in { opacity: 1; transform: none; }

/* —— Hero 花瓣容器 3D 视差 —— */
body.fx3d .petals { transform-style: preserve-3d; will-change: transform; transition: transform .35s ease-out; }

/* —— 动效减弱偏好：全部禁用 —— */
@media (prefers-reduced-motion: reduce) {
  body.fx3d .fx-reveal { opacity: 1 !important; transform: none !important; transition: none; }
  .fx-tilt::after { display: none; }
  body.fx3d .petals { transition: none; }
}