/* 星群首页 · 社区主视觉（2026-10-22）
   星群是主角，星云退到背景；两项主操作；无 canvas、无逐帧粒子。 */

.hero-static{
  position:relative;z-index:1;min-height:max(620px,72svh);overflow:hidden;isolation:isolate;
  background:
    radial-gradient(52% 48% at 74% 34%,rgba(82,62,96,.22) 0%,rgba(82,62,96,0) 72%),
    radial-gradient(44% 50% at 22% 60%,rgba(28,54,84,.20) 0%,rgba(28,54,84,0) 74%),
    #050508;
  color:#fff;
}
.hero-bg{position:absolute;inset:0;z-index:0;overflow:hidden;pointer-events:none}
.hero-nebula,.hero-stars{position:absolute;pointer-events:none}
.hero-nebula{
  inset:-3%;
  background:rgba(5,5,8,.08) url("/space/nebula-bg-1280.webp") 68% center / cover no-repeat;
  opacity:.82;transform:scale(1.02);
}
.hero-nebula::after{
  content:"";position:absolute;inset:0;
  background:
    linear-gradient(180deg,rgba(5,5,8,.84) 0%,rgba(5,5,8,.26) 30%,rgba(5,5,8,.34) 70%,rgba(5,5,8,.94) 100%),
    radial-gradient(70% 68% at 18% 46%,rgba(0,0,0,.46) 0%,rgba(0,0,0,.10) 60%,rgba(0,0,0,0) 84%);
}
.hero-stars{
  inset:-7%;
  background:url("/space/stars-far.svg") center center / cover no-repeat;
  opacity:.42;
  animation:heroStarsFar 130s ease-in-out infinite alternate;
  will-change:transform;
}
.hero-stars--near{
  background-image:url("/space/stars-near.svg");
  opacity:.72;
  animation:heroStarsNear 84s ease-in-out infinite alternate-reverse;
}
.hero-static.is-out .hero-stars{animation-play-state:paused}
@keyframes heroStarsFar{
  from{transform:translate3d(-1.1%,-.7%,0) scale(1.045)}
  to{transform:translate3d(1.1%,.7%,0) scale(1.045)}
}
@keyframes heroStarsNear{
  from{transform:translate3d(.9%,-.55%,0) scale(1.055)}
  to{transform:translate3d(-.9%,.55%,0) scale(1.055)}
}

.hero-inner{
  position:relative;z-index:2;width:100%;max-width:1500px;min-height:max(620px,72svh);
  margin:0 auto;padding:clamp(92px,12vh,150px) clamp(24px,8vw,124px) clamp(84px,10vh,130px);
  display:flex;flex-direction:column;justify-content:center;align-items:flex-start;
}
.hero-kicker{
  margin:0 0 clamp(16px,2.2vh,24px);font-size:10.5px;line-height:1.6;
  letter-spacing:.2em;font-weight:600;color:rgba(255,255,255,.52);
  animation:heroIn .8s var(--ease-out,cubic-bezier(.16,1,.3,1)) both;
}
.hero-title{
  margin:0;font-size:clamp(42px,14vw,220px);line-height:.9;letter-spacing:-.065em;
  font-weight:600;color:#fff;white-space:nowrap;
  text-shadow:0 2px 30px rgba(0,0,0,.28);
  -webkit-user-select:none;user-select:none;-webkit-touch-callout:none;
  animation:heroIn 1s var(--ease-out,cubic-bezier(.16,1,.3,1)) .08s both;
}
.hero-title .hero-char{
  display:inline-block;transform:translate3d(0,0,0);will-change:transform;
  -webkit-user-select:none;user-select:none;
}
.hero-title--static .hero-char{will-change:auto}
.hero-cn{
  margin:clamp(18px,2.6vh,26px) 0 0;font-size:clamp(18px,2vw,28px);
  letter-spacing:.08em;font-weight:500;color:rgba(255,255,255,.88);
  animation:heroIn .9s var(--ease-out,cubic-bezier(.16,1,.3,1)) .18s both;
}
.hero-lead{
  max-width:44ch;margin:clamp(18px,2.6vh,26px) 0 0;font-size:clamp(13px,1.15vw,15px);
  line-height:1.85;color:rgba(255,255,255,.64);
  animation:heroIn .9s var(--ease-out,cubic-bezier(.16,1,.3,1)) .26s both;
}
.hero-actions{
  display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin-top:clamp(24px,3.6vh,34px);
  animation:heroIn .9s var(--ease-out,cubic-bezier(.16,1,.3,1)) .34s both;
}
.hero-btn{
  display:inline-flex;align-items:center;justify-content:center;min-height:40px;
  padding:0 18px;border:1px solid rgba(255,255,255,.26);border-radius:7px;
  background:rgba(255,255,255,.05);color:#fff;text-decoration:none;font-size:12.5px;
  font-weight:650;letter-spacing:.01em;transition:background .18s,border-color .18s,color .18s;
}
.hero-btn:hover{background:rgba(255,255,255,.13);border-color:rgba(255,255,255,.46)}
.hero-btn--primary{
  background:#fff;border-color:#fff;color:#0b0b0e!important;
  -webkit-text-fill-color:#0b0b0e;
}
.hero-btn--primary:hover{
  background:#ececec;border-color:#ececec;color:#0b0b0e!important;
  -webkit-text-fill-color:#0b0b0e;
}
.hero-btn:focus-visible{outline:2px solid #fff;outline-offset:3px}
.hero-btn--primary:focus-visible{outline-color:#fff}

.hero-foot{
  position:absolute;left:clamp(24px,8vw,124px);right:clamp(24px,8vw,124px);bottom:clamp(20px,3.4vh,36px);
  z-index:2;display:flex;align-items:center;justify-content:space-between;gap:20px;
  font-size:10px;color:rgba(255,255,255,.34);letter-spacing:.03em;
}
.hero-scroll{display:inline-flex;align-items:center;gap:10px;white-space:nowrap}
.hero-scroll i{
  display:block;width:1px;height:30px;background:linear-gradient(180deg,rgba(255,255,255,.62),rgba(255,255,255,0));
  animation:heroScroll 2.6s ease-in-out infinite;
}
.hero-credit{text-align:right;line-height:1.5}
@keyframes heroScroll{
  0%,100%{transform:scaleY(.55);transform-origin:top;opacity:.4}
  50%{transform:scaleY(1);transform-origin:top;opacity:1}
}
@keyframes heroIn{
  from{opacity:0;transform:translateY(12px)}
  to{opacity:1;transform:none}
}

/* 首屏深色 → 浅色内容区的短过渡 */
.hero-to-site{
  position:relative;z-index:2;height:clamp(48px,6vh,70px);
  background:linear-gradient(180deg,#050508 0%,#0a0a0f 44%,var(--hero-fade,#F8F6F1) 100%);
}
/* 首屏收短后，让“最新作品”标题在首页第一屏底部露出，作品先于装饰被看见 */
main.site .band:first-child{padding-top:20px}

/* 大屏换成更高分辨率底图；低配小屏只取 1280 宽 */
@media (min-width:900px){
  .hero-nebula{background-image:url("/space/nebula-bg-1920.webp")}
}
@media (min-width:1700px){
  .hero-nebula{background-image:url("/space/nebula-bg-2560.webp")}
}

@media (max-width:820px){
  .hero-static,.hero-inner{min-height:max(640px,90svh)}
  .hero-inner{padding:132px 22px 118px;justify-content:center}
  .hero-title{font-size:clamp(46px,14vw,124px)}
  .hero-cn{font-size:clamp(17px,4.8vw,22px);letter-spacing:.06em}
  .hero-lead{font-size:13px;line-height:1.85;max-width:34ch}
  .hero-actions{gap:8px}
  .hero-btn{min-height:40px;padding:0 16px;font-size:12.5px}
  .hero-foot{left:22px;right:22px;bottom:22px;align-items:flex-end}
  .hero-credit{max-width:48vw;font-size:9.5px}
  .hero-scroll i{height:24px}
}
@media (max-width:420px){
  .hero-title{font-size:clamp(38px,14vw,60px)}
  .hero-actions{width:100%}
  .hero-btn{flex:1 1 0;min-width:0}
}
@media (prefers-reduced-motion:reduce){
  .hero-stars,.hero-scroll i,.hero-kicker,.hero-title,.hero-cn,.hero-lead,.hero-actions{
    animation:none!important;
  }
}