/* ============================================================
   Chinglishtogo · 炫酷特效样式 (A+B 档)
   Canvas 粒子容器 / 鼠标光晕 / 卡片 3D 倾斜光泽
   类名统一 ctg-fx- 前缀。
   ============================================================ */

/* ---- Canvas 粒子容器（hero 内最底层） ---- */
.ctg-fx-canvas{
  position:absolute;
  inset:0;
  z-index:0;
  pointer-events:none;
  display:block;
}

/* ---- 鼠标跟随光晕 ---- */
.ctg-fx-glow{
  position:fixed;
  top:0;
  left:0;
  z-index:40;
  width:560px;
  height:560px;
  margin:-280px 0 0 -280px;
  border-radius:50%;
  pointer-events:none;
  background:radial-gradient(circle,
    rgba(214,147,42,.16) 0%,
    rgba(207,53,41,.08) 38%,
    transparent 68%);
  mix-blend-mode:multiply;
  opacity:0;
  transition:opacity .4s ease;
  will-change:transform;
}

/* ---- 书籍卡片 3D 倾斜 + 跟随光泽 ---- */
.ctg-fx-tilt{
  transform-style:preserve-3d;
  will-change:transform;
  transition:transform .22s ease, box-shadow .3s ease, border-color .3s ease;
}
.ctg-fx-tilt::after{
  content:"";
  position:absolute;
  inset:0;
  z-index:2;
  pointer-events:none;
  border-radius:inherit;
  background:radial-gradient(560px circle at var(--fx-x,50%) var(--fx-y,50%),
    rgba(214,147,42,.22),
    transparent 46%);
  opacity:0;
  transition:opacity .3s ease;
}
.ctg-fx-tilt:hover::after{
  opacity:1;
}

/* 移动端禁用倾斜过渡抖动 */
@media (max-width:920px){
  .ctg-fx-tilt{ transform:none !important; }
  .ctg-fx-glow{ display:none; }
}

/* 尊重系统减弱动效偏好 */
@media (prefers-reduced-motion:reduce){
  .ctg-fx-canvas,
  .ctg-fx-glow{ display:none; }
  .ctg-fx-tilt{ transform:none !important; }
  .ctg-fx-tilt::after{ display:none; }
}