/* ============================================================
   Clue · fx.css — 轻量高级动效层（灵感来自 threeui.com）
   纯 CSS/Canvas，不引入 Tailwind / Three.js
   鼠标类特效由 fx.js 仅在精确指针设备上启用
   ============================================================ */

/* ---------------- 阅读进度条 ---------------- */
.scroll-progress {
  position: fixed; top: 0; left: 0; right: 0; height: 2.5px; z-index: 120;
  pointer-events: none;
}
.scroll-progress i {
  display: block; height: 100%; width: 100%;
  transform-origin: left; transform: scaleX(0);
  background: linear-gradient(90deg, var(--d-green), var(--d-purple));
  box-shadow: 0 0 10px rgba(111,181,143,.55);
}

/* ---------------- 按钮：定位 + 裁切（涟漪/光束共用） ---------------- */
.btn { position: relative; overflow: hidden; }

/* ---------------- 光束 CTA（threeui gradient-beam 纯 CSS 版） ---------------- */
.btn-beam { --beam: #9BE6BB; isolation: isolate; }
.btn-beam::before {
  content: ""; position: absolute; inset: 0; border-radius: inherit;
  padding: 1.5px; pointer-events: none;
  background: conic-gradient(from 0deg, transparent 0 285deg, var(--beam) 350deg, transparent 360deg);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
          mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
          mask-composite: exclude;
  animation: fx-beam 3.2s linear infinite;
}
@keyframes fx-beam { to { transform: rotate(360deg); } }

/* 悬停扫光 */
.btn-beam::after {
  content: ""; position: absolute; inset: 0; border-radius: inherit; pointer-events: none;
  background: linear-gradient(110deg, transparent 32%, rgba(255,255,255,.38) 50%, transparent 68%);
  transform: translateX(-130%);
}
.btn-beam:hover::after { transform: translateX(130%); transition: transform .75s var(--ease); }

/* ---------------- 点击涟漪 ---------------- */
.fx-ripple {
  position: absolute; border-radius: 50%; transform: scale(0);
  background: rgba(255,255,255,.42); pointer-events: none;
  animation: fx-ripple .6s var(--ease) forwards;
}
@keyframes fx-ripple { to { transform: scale(2.6); opacity: 0; } }

/* ---------------- 磁吸按钮 ---------------- */
.btn.magnetic {
  transform: translate3d(var(--mg-x,0), var(--mg-y,0), 0);
  transition: transform .28s var(--ease), background .2s, border-color .2s, box-shadow .25s, color .2s;
}
.btn.magnetic:active {
  transform: translate3d(var(--mg-x,0), var(--mg-y,0), 0) scale(.95);
}

/* ---------------- 卡片光斑（精确指针才加 .spot） ---------------- */
.spot::before {
  content: ""; position: absolute; inset: 0; border-radius: inherit;
  opacity: 0; transition: opacity .3s; pointer-events: none;
  background: radial-gradient(220px circle at var(--mx,50%) var(--my,50%), rgba(111,181,143,.16), transparent 65%);
}
.spot:hover::before { opacity: 1; }

/* 深色卡片：how / effort */
.how-card, .eff-card { position: relative; }

/* 浅色 bento：柔光 + 跟随描边 */
.bento { position: relative; }
.bento.spot::before {
  background: radial-gradient(260px circle at var(--mx,50%) var(--my,50%), rgba(60,124,89,.12), transparent 60%);
}
.bento.spot::after {
  content: ""; position: absolute; inset: 0; border-radius: inherit;
  padding: 1px; opacity: 0; transition: opacity .3s; pointer-events: none;
  background: radial-gradient(190px circle at var(--mx,50%) var(--my,50%), rgba(60,124,89,.65), transparent 70%);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
          mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
          mask-composite: exclude;
}
.bento.spot:hover::after { opacity: 1; }

/* ---------------- Hero 标题：遮罩逐行升起 ---------------- */
.hero-title .line-mask { display: block; overflow: hidden; padding-bottom: .07em; margin-bottom: -.07em; }
.hero-title .line-in { display: block; transform: translateY(112%); will-change: transform; }
.hero-title.in .line-in { transform: translateY(0); transition: transform .95s var(--ease); }
.hero-title.in .line-b .line-in { transition-delay: .11s; }

/* ---------------- 极光呼吸 ---------------- */
.hero-glow { animation: fx-breathe 9s ease-in-out infinite; }
@keyframes fx-breathe {
  0%,100% { opacity: .8; transform: translate(-50%,-50%) scale(1); }
  50%     { opacity: 1;   transform: translate(-50%,-50%) scale(1.13); }
}
.effort-glow { animation: fx-drift 10s ease-in-out infinite; }
@keyframes fx-drift {
  0%,100% { transform: translateX(-50%) scale(1); }
  50%     { transform: translateX(-50%) scale(1.09); }
}

/* ---------------- Hero 装饰窗口：3D 微倾 + 反光（桌面） ---------------- */
@media (min-width: 960px) {
  .hero-window {
    transform: perspective(1400px) translateX(-50%) rotateX(var(--tw-x,0deg)) rotateY(var(--tw-y,0deg));
    transition: transform .35s var(--ease);
  }
  .hero-window .app-window { position: relative; }
  .hero-window .app-window::after {
    content: ""; position: absolute; inset: 0; border-radius: inherit; pointer-events: none;
    background: radial-gradient(340px circle at var(--gx,50%) var(--gy,50%), rgba(255,255,255,.22), transparent 60%);
    opacity: 0; transition: opacity .3s;
  }
  .hero-window.tilting .app-window::after { opacity: 1; }
}

/* ---------------- 导航：下划线 + 当前栏目（桌面） ---------------- */
@media (min-width: 960px) {
  .nav-links a { position: relative; }
  .nav-links a::after {
    content: ""; position: absolute; left: 13px; right: 13px; bottom: 4px;
    height: 1.5px; border-radius: 2px; background: var(--d-green);
    transform: scaleX(0); transform-origin: left;
    transition: transform .3s var(--ease);
  }
  .nav-links a:hover::after,
  .nav-links a.active::after { transform: scaleX(1); }
  .nav-links a.active { color: var(--d-text); }
}

/* ---------------- 减弱动效：全部关闭 ---------------- */
@media (prefers-reduced-motion: reduce) {
  .btn-beam::before, .hero-glow, .effort-glow { animation: none !important; }
  .btn-beam::after { display: none; }
  .hero-title .line-in { transform: none !important; transition: none !important; }
  .hero-window { transform: translateX(-50%) !important; }
  .hero-window .app-window::after { display: none; }
  .spot::before, .spot::after { display: none !important; }
  .btn.magnetic { transform: none !important; }
  .fx-ripple { display: none; }
}