/* 星际拓荒者 · 动效层。原则（Emil Kowalski）：进出场 ease-out、画面内移动 ease-in-out；
   只动 transform / opacity / clip-path；按压有反馈；悬停只在精确指针设备上；减少动效时只保留淡入淡出。
   隐藏的初始状态只在 html.js 下生效——脚本没跑起来时页面照样完整可读。 */

/* ---------- 按压反馈 ---------- */
.btn,.play-pill,.tool,.lang-sw button,.gallery button,.feat-img,.build-dots button{transition:transform 160ms var(--ease-out),filter 200ms ease,border-color 200ms ease,box-shadow 300ms ease}
.btn:active,.play-pill:active,.tool:active,.lang-sw button:active,.build-dots button:active{transform:scale(.97)}
.gallery button:active,.feat-img:active{transform:scale(.985)}
@media (hover:hover) and (pointer:fine){
  .play-pill:hover{transform:scale(1.04);box-shadow:inset 0 1px 0 rgba(255,255,255,.55),0 6px 30px rgba(255,122,46,.55)}
  .play-pill:active{transform:scale(.97)}
  .btn-ore:hover{box-shadow:0 10px 38px rgba(255,122,46,.5)}
  .gallery button:hover img{transform:scale(1.05)}
  .perk:hover{transform:translateY(-4px);border-color:rgba(242,164,68,.4)}
}

/* ---------- 导航：下滑收起，上滑出现 ---------- */
.snav{transition:transform 500ms var(--ease-out),opacity 300ms ease}
.snav.hide{transform:translateX(-50%) translateY(-140%);opacity:0}

/* ---------- 首屏：实机循环视频 + 星空 ---------- */
.hero::before{display:none}
.hero-video{position:absolute;inset:-6% 0 0 0;z-index:-4;width:100%;height:106%;object-fit:cover;object-position:72% center;will-change:transform}
.hero-bg{z-index:-5}
.hero-shade{position:absolute;inset:0;z-index:-3;pointer-events:none;background:
  linear-gradient(180deg,rgba(5,7,13,.45) 0%,rgba(5,7,13,.05) 35%,rgba(5,7,13,.7) 78%,var(--ink-0) 100%),
  linear-gradient(90deg,rgba(5,7,13,.94) 0%,rgba(5,7,13,.62) 42%,rgba(5,7,13,.08) 78%)}
.hero-sky{position:absolute;inset:0;z-index:-2;width:100%;height:100%;pointer-events:none;mix-blend-mode:screen}
.hero-inner{will-change:transform,opacity}
.hero .scan{position:absolute;left:0;right:0;bottom:0;height:1px;background:linear-gradient(90deg,transparent,rgba(242,164,68,.6),transparent)}
.hero .footage{position:absolute;right:20px;bottom:22px;font-family:var(--mono);font-size:11px;letter-spacing:.24em;color:var(--txt-low);display:flex;align-items:center;gap:8px}
.hero .footage::before{content:"";width:7px;height:7px;border-radius:50%;background:#ff5a4a;box-shadow:0 0 8px #ff5a4a;animation:rec 1.6s ease-in-out infinite}
@keyframes rec{50%{opacity:.25}}
.scroll-hint{position:absolute;left:50%;bottom:18px;width:1px;height:38px;background:linear-gradient(var(--ore),transparent);transform-origin:top;animation:hintDrop 2.2s var(--ease-in-out) infinite}
@keyframes hintDrop{0%{transform:scaleY(0);opacity:1}60%{transform:scaleY(1);opacity:1}100%{transform:scaleY(1);opacity:0}}

/* 标题逐行上浮 */
html.js .rise{animation:rise 900ms var(--ease-out) both;animation-delay:calc(var(--i,0) * 90ms + 120ms)}
@keyframes rise{from{opacity:0;transform:translateY(26px)}to{opacity:1;transform:none}}
html.js .hero h1{animation:wipe 1200ms var(--ease-in-out) both 150ms}
@keyframes wipe{from{clip-path:inset(-10% 100% -10% 0);opacity:.2}to{clip-path:inset(-10% -2% -10% 0);opacity:1}}

/* ---------- 滚动显现 ---------- */
html.js .rv{opacity:0;transform:translateY(22px);transition:opacity 700ms var(--ease-out),transform 900ms var(--ease-out);transition-delay:calc(var(--d,0) * 70ms)}
html.js .rv.in{opacity:1;transform:none}
html.js .feat-img img{clip-path:inset(0 0 100% 0);transform:scale(1.08);transition:clip-path 1100ms var(--ease-in-out),transform 1400ms var(--ease-out)}
html.js .feat-img.in img{clip-path:inset(0 0 0 0);transform:none}
html.js .feat-img .tagline{opacity:0;transform:translateX(-12px);transition:opacity 500ms var(--ease-out) 700ms,transform 600ms var(--ease-out) 700ms}
html.js .feat-img.in .tagline{opacity:1;transform:none}
html.js .road::before{transform:scaleX(0);transform-origin:left;transition:transform 1600ms var(--ease-in-out)}
html.js .road.in::before{transform:none}
html.js .road li{opacity:0;transform:translateY(12px);transition:opacity 600ms var(--ease-out),transform 700ms var(--ease-out);transition-delay:calc(var(--d,0) * 180ms + 200ms)}
html.js .road.in li{opacity:1;transform:none}
.road li::before{transition:background-color 400ms ease,box-shadow 400ms ease;transition-delay:calc(var(--d,0) * 180ms + 350ms)}
html.js .road.in li::before{background:var(--ore);box-shadow:0 0 14px rgba(242,164,68,.8)}
@media (max-width:900px){html.js .road::before{transform:scaleY(0);transform-origin:top}html.js .road.in::before{transform:none}}

/* 宣传片取景框：角标从外侧收拢 */
html.js .trailer-frame i{transition:transform 900ms var(--ease-out) 150ms,opacity 600ms ease 150ms;opacity:0}
html.js .trailer-frame .c1{transform:translate(-18px,-18px)}html.js .trailer-frame .c2{transform:translate(18px,-18px)}
html.js .trailer-frame .c3{transform:translate(-18px,18px)}html.js .trailer-frame .c4{transform:translate(18px,18px)}
html.js .trailer-frame.in i{transform:none;opacity:1}
.play-big{position:absolute;inset:10px;display:grid;place-items:center;border:0;cursor:pointer;background:radial-gradient(ellipse at center,rgba(5,7,13,.1),rgba(5,7,13,.55));transition:opacity 300ms var(--ease-out)}
.play-big>span{position:relative;width:88px;height:88px;border-radius:50%;display:grid;place-items:center;background:linear-gradient(160deg,#ffd08a,var(--ore) 55%,var(--ore-hot));box-shadow:0 10px 40px rgba(255,122,46,.5);transition:transform 200ms var(--ease-out)}
.play-big>span::before{content:"";margin-left:6px;border-left:24px solid #1a0c02;border-top:15px solid transparent;border-bottom:15px solid transparent}
.play-big>span::after{content:"";position:absolute;inset:-10px;border-radius:50%;border:2px solid rgba(242,164,68,.7);animation:pulse 2.4s var(--ease-out) infinite}
@keyframes pulse{from{transform:scale(.9);opacity:1}to{transform:scale(1.45);opacity:0}}
.play-big em{position:absolute;bottom:14%;font-style:normal;font-family:var(--mono);font-size:12px;letter-spacing:.3em;color:var(--txt-hi)}
@media (hover:hover) and (pointer:fine){.play-big:hover>span{transform:scale(1.06)}}
.play-big:active>span{transform:scale(.96)}
.play-big.gone{opacity:0;pointer-events:none}

/* 优点卡：指针跟随的微光 */
.perk{position:relative;overflow:hidden}
@media (hover:hover) and (pointer:fine){
  .perk::after{content:"";position:absolute;inset:0;pointer-events:none;opacity:0;transition:opacity 300ms ease;
    background:radial-gradient(260px circle at var(--mx,50%) var(--my,50%),rgba(242,164,68,.14),transparent 60%)}
  .perk:hover::after{opacity:1}
}

/* ---------- 招牌段落：殖民地随滚动建成 ---------- */
.build-grid{display:grid;grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr);gap:56px;margin-top:36px;align-items:start}
.build-steps{display:grid}
.bstep{min-height:74vh;display:flex;flex-direction:column;justify-content:center;padding:24px 0;opacity:.28;transition:opacity 400ms var(--ease-out)}
.bstep.cur{opacity:1}
.bstep .idx{font-family:var(--mono);font-size:12px;letter-spacing:.24em;color:var(--ore)}
.bstep h3{font-size:clamp(26px,3vw,36px);margin:10px 0 12px}
.bstep p{margin:0 0 14px;max-width:46ch}
.bstep .tip{font-size:13.5px;color:var(--txt-low);border-left:2px solid rgba(242,164,68,.5);padding-left:12px;max-width:46ch}
.bstep .tip b{color:var(--gold-soft);font-weight:600}
.build-stage{position:sticky;top:88px;height:min(720px,calc(100vh - 120px))}
.build-sticky{position:relative;height:100%;background:radial-gradient(ellipse at 50% 45%,#120d2a,#05070d 70%);border:1px solid rgba(141,107,255,.18);overflow:hidden}
.build-sticky canvas{position:absolute;inset:0;width:100%;height:100%;display:block}
.hud{position:absolute;left:14px;right:14px;top:14px;display:flex;gap:8px;flex-wrap:wrap;pointer-events:none}
.hud .chip{display:flex;align-items:baseline;gap:8px;padding:6px 12px;background:rgba(10,14,28,.78);border:1px solid rgba(190,210,255,.14);border-left:2px solid var(--c,var(--ore));font-variant-numeric:tabular-nums}
.hud .chip i{font-style:normal;font-size:11px;color:var(--txt-low);letter-spacing:.08em}
.hud .chip b{color:var(--txt-hi);font-size:17px;font-weight:700;min-width:4ch}
.hud .chip small{color:#9fe0a8;font-size:11.5px}
.hud .chip.on{animation:chipPing 600ms var(--ease-out)}
@keyframes chipPing{30%{border-color:rgba(242,164,68,.7)}}
.build-dots{position:absolute;left:50%;bottom:16px;transform:translateX(-50%);display:flex;gap:6px;padding:5px;background:rgba(10,14,28,.7);border:1px solid rgba(190,210,255,.12);border-radius:999px}
.build-dots button{font:600 12px var(--sans);color:var(--txt-low);background:transparent;border:0;border-radius:999px;padding:6px 12px;cursor:pointer;white-space:nowrap}
.build-dots button[aria-current="true"]{color:#1a0c02;background:var(--ore)}
.demo-tag{position:absolute;right:14px;bottom:62px;font-family:var(--mono);font-size:10.5px;letter-spacing:.2em;color:var(--txt-low)}
.caption-live{position:absolute;left:18px;bottom:62px;font-size:13px;color:var(--txt-hi);max-width:60%;text-shadow:0 1px 8px #000}
@media (max-width:900px){
  .build-grid{grid-template-columns:1fr;gap:0}
  .build-stage{order:-1;top:64px;height:48vh;z-index:3}
  .bstep{min-height:62vh;background:linear-gradient(180deg,transparent,rgba(5,7,13,.9) 18%)}
  .demo-tag,.caption-live{display:none}
  .build-dots button{padding:5px 9px}
}

/* ---------- 弹窗 / 大图 ---------- */
.acct-modal{animation:fadeIn 250ms var(--ease-out)}
.acct-card{animation:modalIn 250ms var(--ease-out)}
@keyframes fadeIn{from{opacity:0}}
@keyframes modalIn{from{opacity:0;transform:scale(.96)}}
.lightbox{transition:background-color 300ms var(--ease-out)}
.lightbox.opening,.lightbox.closing{background-color:rgba(3,5,10,0)}
.lightbox img{transform-origin:0 0}

/* ---------- 减少动效：只留淡入 ---------- */
@media (prefers-reduced-motion:reduce){
  html.js .rise,html.js .hero h1{animation:fadeIn 400ms ease both}
  html.js .rv,html.js .road li{transform:none}
  html.js .feat-img img{clip-path:none;transform:none}
  html.js .road::before{transform:none;transition:none}
  html.js .trailer-frame i{transform:none}
  .scroll-hint,.play-big>span::after,.hero .footage::before{animation:none}
  .snav,.bstep{transition:opacity 200ms ease}
  .acct-card{animation:fadeIn 200ms ease}
}

@media (max-width:600px){.play-big em{display:none}.play-big>span{width:68px;height:68px}}