/* ==========================================================================
 * components/tactile.css — 3D 触感倾角与纸面暖光掠影（Tactile 3D Tilt & Glare）
 *
 * 由 js/modules/tactile-tilt.js 驱动：
 *   指针移动 → 内联 transform 写 rotateX/rotateY/translateY
 *   指针移动 → 内联 --glare-x / --glare-y 写光斑圆心
 * 这里只负责静态表现与光斑渐变本身。
 * 触屏没有悬停概念，掠影只在有指针的设备上出现。
 * ========================================================================== */

.tilt-card-3d {
  position: relative;
  transform-style: preserve-3d;
  will-change: transform;
}

.card-glare {
  position: absolute;
  inset: 0;
  border-radius: inherit;
  pointer-events: none;
  background: radial-gradient(
    480px circle at var(--glare-x, 50%) var(--glare-y, 50%),
    rgba(255, 248, 231, 0.55),
    rgba(255, 248, 231, 0) 70%
  );
  opacity: 0;
  transition: opacity 0.4s ease;
  z-index: 3;
  mix-blend-mode: soft-light;
}

@media (hover: hover) and (pointer: fine) {
  .tilt-card-3d:hover .card-glare {
    opacity: 1;
  }
}