/* ========================================
   Polish layer — 全站最后加载。
   只负责：网格漂移与光标光晕、页面/主题转场、
   首页入场编排、导航下划线、头像动效、打字机光标、
   以及 reveal 滚动显现的恢复（默认可见，.js 下未到场才隐藏）。
   ======================================== */

/* ---------- 网格漂移 + 光标光晕 ---------- */

:root {
  --glow-tint: rgba(201, 100, 66, 0.05);
}

[data-theme="dark"] {
  --glow-tint: rgba(217, 119, 87, 0.08);
}

body {
  background:
    radial-gradient(720px circle at var(--glow-x, 50vw) var(--glow-y, 30vh), var(--glow-tint), transparent 72%),
    linear-gradient(var(--grid-line) 1px, transparent 1px),
    linear-gradient(90deg, var(--grid-line) 1px, transparent 1px),
    var(--bg);
  background-size: auto, 44px 44px, 44px 44px, auto;
  background-position:
    0 0,
    var(--grid-shift-x, 0px) var(--grid-shift-y, 0px),
    var(--grid-shift-x, 0px) var(--grid-shift-y, 0px),
    0 0;
  background-repeat: no-repeat, repeat, repeat, repeat;
  background-attachment: fixed, scroll, scroll, scroll;
}

/* ---------- 页面转场（ClientRouter 全站启用） ---------- */

@keyframes page-fade-out {
  to { opacity: 0; }
}

@keyframes page-fade-in {
  from { opacity: 0; transform: translateY(12px); }
}

::view-transition-old(root) {
  animation: page-fade-out 140ms ease-out both;
  mix-blend-mode: normal;
}

::view-transition-new(root) {
  animation: page-fade-in 300ms cubic-bezier(0.16, 1, 0.3, 1) both;
  mix-blend-mode: normal;
}

/* 产品星环转场期间（works ↔ projects）：恢复 online-refinement 的环形揭示，
   该文件里同名规则未做作用域，这里按标记属性重新挂回。 */

html[data-product-transition-direction]::view-transition-group(root) {
  animation-duration: var(--product-transition-duration, 960ms);
}

html[data-product-transition-direction]::view-transition-old(root) {
  z-index: 1;
  animation: product-old-root-fade 240ms ease-out both;
  mix-blend-mode: normal;
}

@keyframes product-old-root-fade {
  from { opacity: 1; }
  to { opacity: 0; }
}

html[data-product-transition-direction]::view-transition-new(root) {
  z-index: 2;
  animation: product-new-root-fade 420ms ease-out both;
  mix-blend-mode: normal;
}

@keyframes product-new-root-fade {
  from { opacity: 0; }
  to { opacity: 1; }
}

@media (prefers-reduced-motion: reduce) {
  ::view-transition-old(root),
  ::view-transition-new(root) {
    animation-duration: 0.01ms !important;
    animation-delay: 0ms !important;
  }
}

/* 主题切换：圆形展开期间关闭 root 交叉淡入淡出，由 JS 驱动 clip-path。 */

html.theme-transitioning::view-transition-old(root),
html.theme-transitioning::view-transition-new(root) {
  animation: none;
  mix-blend-mode: normal;
}

html.theme-transitioning::view-transition-old(root) {
  z-index: 1;
}

html.theme-transitioning::view-transition-new(root) {
  z-index: 2147483646;
}

/* ---------- 首页入场编排 ----------
   全部用 backwards fill：动画前套用 from 态，播完回到天然可见态，
   不干扰 hover transform 等后续交互。 */

@media (prefers-reduced-motion: no-preference) {
  .js .hero-kicker {
    animation: hero-fade-in 0.8s ease backwards;
  }

  .js .hero-title-line {
    animation: hero-line-in 0.95s cubic-bezier(0.16, 1, 0.3, 1) backwards;
  }

  .js .hero-title-line--offset {
    animation-delay: 0.15s;
  }

  .js .hero-desc--home {
    animation: hero-fade-in 0.8s ease 0.38s backwards;
  }

  .js .hero-summary .summary-card--linked {
    animation: hero-card-in 0.85s cubic-bezier(0.16, 1, 0.3, 1) backwards;
  }

  .js .hero-summary .summary-card--linked:nth-child(1) {
    animation-delay: 0.55s;
  }

  .js .hero-summary .summary-card--linked:nth-child(2) {
    animation-delay: 0.68s;
  }
}

@keyframes hero-line-in {
  from { opacity: 0; transform: translateY(0.4em); }
}

@keyframes hero-fade-in {
  from { opacity: 0; transform: translateY(10px); }
}

@keyframes hero-card-in {
  from { opacity: 0; transform: translateY(20px); }
}

/* ---------- 导航下划线 ---------- */

.nav-links a {
  position: relative;
}

.nav-links a::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: -6px;
  height: 1px;
  background: currentColor;
  transform: scaleX(0);
  transform-origin: left center;
  transition: transform 0.4s cubic-bezier(0.16, 1, 0.3, 1);
}

.nav-links a:hover::after,
.nav-links a:focus-visible::after,
.nav-links a.nav-active::after {
  transform: scaleX(1);
}

/* ---------- 头像：呼吸 + 点击彩蛋 ---------- */

.hero-visual {
  cursor: pointer;
}

@media (prefers-reduced-motion: no-preference) {
  .js .hero-avatar-wrapper {
    animation: avatar-breathe 7.5s ease-in-out 2.4s infinite;
  }
}

@keyframes avatar-breathe {
  0%, 100% { transform: scale(1); }
  50% { transform: scale(1.016); }
}

.hero-avatar-wrapper.is-poked .hero-avatar {
  animation: avatar-poke 0.5s cubic-bezier(0.16, 1, 0.3, 1);
}

@keyframes avatar-poke {
  0% { transform: scale(1); }
  35% { transform: scale(0.93); }
  100% { transform: scale(1); }
}

.avatar-ripple {
  position: absolute;
  inset: -18px;
  border-radius: 50%;
  border: 1.5px solid var(--accent);
  pointer-events: none;
  z-index: 3;
  animation: avatar-ripple-out 0.9s ease-out forwards;
}

@keyframes avatar-ripple-out {
  from { opacity: 0.85; transform: scale(1); }
  to { opacity: 0; transform: scale(1.5); }
}

/* ---------- 打字机光标 ---------- */

.is-typewriter::after {
  content: "";
  display: inline-block;
  width: 2px;
  height: 1em;
  margin-left: 3px;
  vertical-align: -0.12em;
  background: currentColor;
  animation: caret-blink 1.05s steps(2, start) infinite;
}

@keyframes caret-blink {
  50% { opacity: 0; }
}

/* ---------- reveal 滚动显现恢复 ----------
   默认可见（no-JS / 无 IO 兜底），.js 环境下未入场才隐藏，
   由 script.js 的 IntersectionObserver 加 .visible 触发过渡。 */

.reveal {
  opacity: 1;
  transform: none;
}

.js .reveal:not(.visible) {
  opacity: 0;
  transform: translateY(50px);
}