@charset "UTF-8";
/* 主页动效层：不改变原有布局和内容。 */

.nav::after {
  content: "";
  position: absolute;
  right: 0;
  bottom: -1px;
  left: 0;
  height: 2px;
  background: linear-gradient(90deg, #39a9ff, #0071e3 55%, #8c74ff);
  transform: scaleX(var(--page-progress, 0));
  transform-origin: left;
  pointer-events: none;
}

.hero--card::before,
.hero--card::after {
  content: "";
  position: absolute;
  width: min(62vw, 820px);
  aspect-ratio: 1;
  border-radius: 50%;
  pointer-events: none;
  z-index: 0;
  opacity: .42;
  will-change: transform;
}
.hero--card::before {
  top: -37%;
  right: -13%;
  background: radial-gradient(circle, rgba(45, 138, 255, .18), transparent 66%);
  animation: hero-light-drift 19s ease-in-out infinite alternate;
}
.hero--card::after {
  bottom: -43%;
  left: -20%;
  background: radial-gradient(circle, rgba(125, 101, 255, .14), transparent 65%);
  animation: hero-light-drift 23s ease-in-out infinite alternate-reverse;
}
html[data-theme="dark"] .hero--card::before { opacity: .62; }
html[data-theme="dark"] .hero--card::after { opacity: .52; }
.hero--card > .hero__inner { position: relative; z-index: 1; }
.hero--card.is-motion-paused::before,
.hero--card.is-motion-paused::after { animation-play-state: paused; }

@keyframes hero-light-drift {
  from { transform: translate3d(-3%, 0, 0) scale(.94); }
  to { transform: translate3d(8%, 6%, 0) scale(1.08); }
}
@keyframes hero-clarify {
  from { opacity: 0; filter: blur(12px); transform: translateY(18px); }
  to { opacity: 1; filter: blur(0); transform: translateY(0); }
}
@keyframes hero-caption-enter {
  from { opacity: 0; transform: translateY(15px); }
  to { opacity: 1; transform: translateY(0); }
}
.motion-enabled .hero__copy .eyebrow { animation: hero-clarify .72s both; }
.motion-enabled .hero__name { animation: hero-clarify .9s .1s both; }
.motion-enabled .hero__role { animation: hero-clarify .8s .3s both; }
.motion-enabled .hero-card__meta { animation: hero-caption-enter .75s .5s both; }

/* 章节沿用原有可见性观察，只缩短距离并在内部轻微错峰。 */
.reveal {
  transform: translateY(18px);
  transition-duration: .68s;
}
.section-head.is-visible > .eyebrow,
.section-head.is-visible > .h-section,
.section-head.is-visible > .lead {
  animation: hero-caption-enter .62s both;
}
.section-head.is-visible > .h-section { animation-delay: .08s; }
.section-head.is-visible > .lead { animation-delay: .15s; }

/* 只给重点卡片局部追光，保留原本的圆角和悬停位移。 */
.motion-spot { isolation: isolate; }
.motion-spot::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: radial-gradient(360px circle at var(--spot-x, 50%) var(--spot-y, 50%), rgba(67, 152, 255, .16), transparent 70%);
  opacity: 0;
  pointer-events: none;
  z-index: 0;
  transition: opacity .3s ease;
}
.motion-spot > * { position: relative; z-index: 1; }
.motion-spot:hover::before { opacity: 1; }
.motion-spot:hover { border-color: rgba(78, 151, 245, .34); }
html[data-theme="dark"] .motion-spot::before {
  background: radial-gradient(360px circle at var(--spot-x, 50%) var(--spot-y, 50%), rgba(93, 173, 255, .2), transparent 70%);
}
.project-feature.motion-spot:hover,
.research-feature.motion-spot:hover { box-shadow: var(--shadow-3), 0 0 0 1px rgba(80, 149, 247, .12); }

@media (max-width: 760px), (hover: none) {
  .hero--card::before,
  .hero--card::after { width: 85vw; opacity: .26; animation: none; }
  .motion-spot::before { display: none; }
}
@media (max-width: 640px) {
  /* 人像会从卡片上沿溢出，给标题区留出完整的阅读空间。 */
  .hero--card .hero-card { margin-top: clamp(72px, 18vw, 90px); }
}
@media (prefers-reduced-motion: reduce) {
  .hero--card::before,
  .hero--card::after { animation: none !important; will-change: auto; }
  .motion-enabled .hero__copy .eyebrow,
  .motion-enabled .hero__name,
  .motion-enabled .hero__role,
  .motion-enabled .hero-card__meta,
  .section-head.is-visible > .eyebrow,
  .section-head.is-visible > .h-section,
  .section-head.is-visible > .lead { animation: none !important; opacity: 1; filter: none; transform: none; }
  .motion-spot::before { display: none; }
}
@media print {
  .hero--card::before,
  .hero--card::after,
  .nav::after,
  .motion-spot::before { display: none !important; }
}