/* ==================== 首屏配置：参考站聚光灯参数 ==================== */
:root {
  --hero-spot-radius:600px;
  --hero-highlight-radius:300px;
  --hero-spot-shadow:4,8,18;
  --hero-spot-glow:200,245,62;
  --hero-title-duration:800ms;
  --hero-title-ease:cubic-bezier(.16,1,.3,1);
}
.showcase-hero { background:#080b12; isolation:isolate; }
.hero-banner { position:absolute; inset:0; --sx:50%; --sy:58%; }
.hero-cover-art {
  object-fit:cover; object-position:center;
  animation:none;
  transform:translate(calc(var(--ghx,0) * 14px),calc(var(--ghy,0) * 10px)) scale(1.06);
}
/* 原画始终在遮罩下，光圈中显示原画，四周压暗。标题与按钮位于遮罩上方。 */
.hero-shading {
  pointer-events:none;
  background:radial-gradient(var(--hero-spot-radius) circle at var(--sx) var(--sy),
    rgba(var(--hero-spot-shadow),0) 0%,rgba(var(--hero-spot-shadow),.08) 30%,
    rgba(var(--hero-spot-shadow),.82) 60%,rgba(var(--hero-spot-shadow),.94) 100%);
}
.hero-shading::before {
  content:"";position:absolute;inset:0;
  background:radial-gradient(var(--hero-spot-radius) circle at var(--sx) var(--sy),
    transparent 29%,rgba(var(--hero-spot-glow),.18) 31.5%,
    rgba(var(--hero-spot-glow),.05) 34%,transparent 38%);
}
.hero-shading::after {
  content:"";position:absolute;inset:0;
  background:radial-gradient(var(--hero-highlight-radius) circle at var(--sx) var(--sy),
    rgba(255,255,255,.14),transparent 60%);
}
.hero-shine {
  position:absolute;inset:-30%;pointer-events:none;
  background:linear-gradient(105deg,transparent 42%,rgba(255,255,255,.14) 50%,transparent 58%);
  transform:translateX(-120%);
  animation:hero-sweep 7s var(--hero-title-ease) infinite 2.2s;
}
@keyframes hero-sweep { 0%{transform:translateX(-120%)}22%,100%{transform:translateX(120%)} }
.hero-cover-copy { z-index:3; }
.hero-scroll-note { z-index:3; }
.hero-cover-copy h1 .hero-letter {
  display:inline-block;margin:0;color:inherit;-webkit-text-stroke:0;
  animation:hero-letter-in var(--hero-title-duration) var(--hero-title-ease) both;
  animation-delay:calc(700ms + var(--letter-index) * 100ms);
}
.hero-cover-copy h1 .hero-letter:last-child { color:transparent;-webkit-text-stroke:1.5px var(--color-accent);margin-left:4px; }
@keyframes hero-letter-in { from{opacity:0;transform:translateY(.7em)}to{opacity:1;transform:none} }
.profile-photo { object-position:center 26%; }
@media(max-width:650px) { .hero-cover-art{object-position:61% center} }
@media(prefers-reduced-motion:reduce) {
  .hero-cover-art{transform:scale(1.06)}
  .hero-shine{display:none}
  .hero-cover-copy h1 .hero-letter{animation:none}
}