/* ============================================================
   网页端首页动效（web/home-motion.css）—— 只给网页端首页用
   配合 web/home-motion.js：光标光晕、卡片高光、轻微倾斜、逐字问候、渐显、极光漂移
   ============================================================ */

/* 页面不再出现横向滚动条 */
#view-home.web-home { overflow-x: clip; }

/* 极光：固定铺满视口，缓慢漂移，替换首页外壳的静态色块 */
#view-home.web-home::before {
  content: ""; position: fixed; inset: -20vmax; z-index: -1; pointer-events: none; filter: none; height: auto;
  background:
    radial-gradient(40vmax 40vmax at 15% 20%, rgba(61,122,104,.20), transparent 62%),
    radial-gradient(34vmax 34vmax at 85% 30%, rgba(227,162,122,.12), transparent 62%),
    radial-gradient(30vmax 30vmax at 50% 90%, rgba(168,203,189,.10), transparent 62%);
  animation: webDrift 26s ease-in-out infinite alternate;
}
@keyframes webDrift { to { transform: translate3d(6vmax, 4vmax, 0) scale(1.08); } }

/* 光标光晕 */
.web-cursor {
  position: fixed; left: 0; top: 0; width: 520px; height: 520px; margin: -260px 0 0 -260px;
  border-radius: 50%; pointer-events: none; z-index: 2; opacity: 0; transition: opacity .6s;
  background: radial-gradient(circle, rgba(168,203,189,.12), transparent 60%);
}
.web-cursor.on { opacity: 1; }

/* 卡片：跟随鼠标的高光 */
#view-home .hm-grid > .card,
#view-home .hm-side .task-btn,
#view-home .hm-row > .card { position: relative; overflow: hidden; }
#view-home .hm-grid > .card::after,
#view-home .hm-side .task-btn::after,
#view-home .hm-row > .card::after {
  content: ""; position: absolute; inset: 0; border-radius: inherit; pointer-events: none;
  background: radial-gradient(360px circle at var(--mx, 50%) var(--my, 50%), rgba(168,203,189,.16), transparent 60%);
  opacity: 0; transition: opacity .6s;
}
#view-home .hm-grid > .card:hover::after,
#view-home .hm-side .task-btn:hover::after,
#view-home .hm-row > .card:hover::after { opacity: 1; }

/* 轻微 3D 倾斜（由 JS 写入 transform） */
#view-home .tilt { transition: transform .5s var(--ease-out); will-change: transform; }

/* 渐显：进入时逐块浮现（类名由 JS 切换，初始 opacity 0） */
#view-home .reveal { opacity: 0; transform: translate3d(0, 28px, 0); transition: opacity 1.1s var(--ease-out), transform 1.1s var(--ease-out); transition-delay: var(--d, 0s); }
#view-home .reveal.in { opacity: 1; transform: none; }

/* 问候语逐字浮现 */
#view-home .greet .gc { display: inline-block; opacity: 0; transform: translate3d(0, .3em, 0); animation: gIn 1.2s var(--ease-out) forwards; animation-delay: calc(.1s + var(--i) * 60ms); }
@keyframes gIn { to { opacity: 1; transform: none; } }

@media (prefers-reduced-motion: reduce) {
  #view-home.web-home::before, .web-cursor { animation: none; }
  #view-home .reveal { opacity: 1; transform: none; transition: none; }
  #view-home .greet .gc { opacity: 1; transform: none; animation: none; }
  #view-home .tilt { transition: none; }
}