/* ===========================================================
   ARX 方舟无限 — 产品年表
   深色 · 苹果质感 · 项目列表
   =========================================================== */

:root{
  --bg:        #000000;
  --fg:        #f5f5f7;
  --fg-2:      #98989d;
  --fg-3:      #6a6a70;
  --line:      rgba(255,255,255,.11);
  --line-soft: rgba(255,255,255,.06);
  --card:      rgba(255,255,255,.03);
  --accent:    #2997ff;
  --nav-h:     54px;
  --pad:       150px;  /* 页面两侧留白 */
  --gutter:    68px;   /* 左栏与右栏之间的间距 */
  --ease:      cubic-bezier(.22,1,.36,1);
  /* 苹果系统字体：SF Pro */
  --sans:      -apple-system,BlinkMacSystemFont,"SF Pro Display","SF Pro Text",
               "Helvetica Neue","PingFang SC","Hiragino Sans GB","Microsoft YaHei",sans-serif;
}

*,*::before,*::after{ box-sizing:border-box; }

html{
  background:var(--bg);
  scroll-behavior:smooth;
  scroll-padding-top:calc(var(--nav-h) + 28px);
  -webkit-text-size-adjust:100%;
}

body{
  margin:0;
  background:var(--bg);
  color:var(--fg);
  font-family:var(--sans);
  font-size:16px;
  line-height:1.55;
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
  overflow-x:hidden;
}

img,video{ display:block; max-width:100%; }
a{ color:inherit; text-decoration:none; }
h1,h2,h3,p,figure{ margin:0; }
ol,ul{ margin:0; padding:0; list-style:none; }
button{ font:inherit; color:inherit; background:none; border:0; cursor:pointer; }

::selection{ background:rgba(41,151,255,.3); }

.wrap{ width:100%; max-width:1440px; margin:0 auto; padding:0 var(--pad); }

/* 页面主体：左 3/4 年表，右 1/4 常驻信息栏 */
.layout{
  width:100%; max-width:1440px; margin:0 auto; padding:0 var(--pad);
  display:grid;
  grid-template-columns:minmax(0,3fr) minmax(210px,1fr);
  align-items:start;
}
.col{ width:100%; }

.skip{ position:absolute; left:-9999px; top:0; z-index:200; background:var(--fg); color:#000; padding:12px 18px; }
.skip:focus{ left:0; }
:focus-visible{ outline:1px solid var(--fg); outline-offset:4px; border-radius:4px; }

/* 小标签 / 日期：SF Pro，数字等宽对齐 */
.mono{
  font-family:var(--sans);
  font-size:12px; letter-spacing:.01em;
  font-variant-numeric:tabular-nums;
}

/* ───────────────────────── NAV ───────────────────────── */

.nav{
  position:fixed; inset:0 0 auto 0; z-index:100;
  height:var(--nav-h);
  background:rgba(0,0,0,.62);
  -webkit-backdrop-filter:saturate(180%) blur(22px);
  backdrop-filter:saturate(180%) blur(22px);
  border-bottom:1px solid var(--line-soft);
}
.nav-inner{
  height:var(--nav-h); max-width:1440px; margin:0 auto; padding:0 var(--pad);
  display:flex; align-items:center; justify-content:space-between; gap:16px;
}
.brand{ display:flex; align-items:center; }
.brand-logo{
  height:20px; width:auto;
  transition:opacity .35s var(--ease);
}
.brand:hover .brand-logo{ opacity:.75; }

/* 视图切换：Products / Research */
.tabs{
  display:flex; gap:4px;
  padding:3px; border-radius:999px;
  background:rgba(255,255,255,.05);
  border:1px solid var(--line);
}
.tab{
  font-family:var(--sans); font-size:14px; font-weight:500;
  letter-spacing:-.01em;
  color:var(--fg-2); padding:7px 17px; border-radius:999px;
  transition:color .35s var(--ease), background .35s var(--ease);
}
.tab:hover{ color:var(--fg); background:rgba(255,255,255,.1); }
.tab.on{
  color:#000; background:var(--fg);
  box-shadow:0 2px 12px -2px rgba(255,255,255,.28);
}
.tab.on:hover{ background:#fff; }

/* 购买入口：常驻蓝色按钮 */
.tab[data-view="store"]{
  color:#fff; background:#0a84ff;
  box-shadow:0 2px 14px -4px rgba(41,151,255,.8);
}
.tab[data-view="store"]:hover{ color:#fff; background:#2997ff; }
.tab[data-view="store"].on{
  color:#fff;
  background:linear-gradient(180deg,#3aa5ff,#0071e3);
  box-shadow:0 3px 18px -3px rgba(41,151,255,.95);
}

.nav-progress{
  position:absolute; left:0; bottom:-1px; height:1px; width:0%;
  background:linear-gradient(90deg,rgba(41,151,255,.9),#f5f5f7);
  transition:width .1s linear;
}

/* ───────────────────── 年份分组 ───────────────────── */

.view{
  padding:calc(var(--nav-h) + 30px) var(--gutter) 40px 0;
  border-right:1px solid var(--line-soft);
  min-width:0;
}
[hidden]{ display:none !important; }

/* 研究视图顶部说明 */
.view-note{
  font-family:var(--sans); font-size:12px; font-weight:500;
  letter-spacing:.08em; text-transform:uppercase;
  color:var(--fg-3);
  padding-bottom:14px;
  opacity:0; transform:translateY(14px);
}
.view-note.in{ opacity:1; transform:none; transition:opacity .8s var(--ease), transform .8s var(--ease); }
.year{ padding-bottom:26px; }

.year-head{
  position:sticky; top:var(--nav-h); z-index:20;
  background:linear-gradient(180deg,#000 78%,rgba(0,0,0,0));
  padding:24px 0 26px;
  opacity:0; transform:translateY(14px);
}
.year-head.in{ opacity:1; transform:none; transition:opacity .8s var(--ease), transform .8s var(--ease); }
.year-head .col{ display:flex; align-items:center; gap:20px; }
.year-num{
  font-size:clamp(30px,4.4vw,48px);
  font-weight:600; letter-spacing:-.03em;
  background:linear-gradient(180deg,#fff,rgba(255,255,255,.45));
  -webkit-background-clip:text; background-clip:text;
  -webkit-text-fill-color:transparent; color:transparent;
}
.year-rule{ flex:1; height:1px; background:linear-gradient(90deg,var(--line),transparent); }

/* ───────────────────── 项目列表 ───────────────────── */

.grid{
  display:grid;
  grid-template-columns:minmax(0,1fr);   /* 每行一条 */
  gap:80px;
}
.proj{
  opacity:0; transform:translateY(24px);
  scroll-margin-top:calc(var(--nav-h) + 96px);   /* 锚点跳转时避开年份吸顶条 */
}
.proj.in{ opacity:1; transform:none; transition:opacity .9s var(--ease), transform .9s var(--ease); }

/* 视频卡片 */
.player{
  position:relative;
  overflow:hidden;
  border-radius:22px;
  background:#08080a;
  border:1px solid var(--line-soft);
  box-shadow:0 30px 70px -34px rgba(0,0,0,.95);
  aspect-ratio:16/9;
  transition:transform .7s var(--ease), border-color .5s var(--ease), box-shadow .7s var(--ease);
}
.player:hover{
  transform:translateY(-4px);
  border-color:rgba(255,255,255,.17);
  box-shadow:0 44px 90px -36px rgba(0,0,0,1);
}
.player::after{
  content:""; position:absolute; inset:0; border-radius:inherit; pointer-events:none;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.06);
}
.player video{
  width:100%; height:100%; object-fit:cover; background:#08080a;
  transition:transform 1.2s var(--ease), filter .5s var(--ease);
}
.player:hover video{ transform:scale(1.015); }

.player-hit{ position:absolute; inset:0; z-index:2; display:grid; place-items:center; }
.play-badge{
  width:66px; height:66px; border-radius:50%;
  display:grid; place-items:center;
  background:rgba(18,18,20,.5);
  -webkit-backdrop-filter:blur(16px); backdrop-filter:blur(16px);
  border:1px solid rgba(255,255,255,.2);
  opacity:0; transform:scale(.9);
  transition:opacity .4s var(--ease), transform .4s var(--ease);
}
.play-badge svg{ width:22px; height:22px; margin-left:2px; }
.player[data-state="paused"] .play-badge{ opacity:1; transform:scale(1); }
.player[data-state="paused"] video{ filter:brightness(.66); }

.tools{
  position:absolute; right:12px; bottom:12px; z-index:3;
  display:flex; gap:7px;
  opacity:0; transform:translateY(5px);
  transition:opacity .4s var(--ease), transform .4s var(--ease);
}
.player:hover .tools,
.player:focus-within .tools{ opacity:1; transform:none; }
.tool{
  width:34px; height:34px; border-radius:50%;
  display:grid; place-items:center;
  background:rgba(18,18,20,.55);
  -webkit-backdrop-filter:blur(16px); backdrop-filter:blur(16px);
  border:1px solid rgba(255,255,255,.14);
  transition:background .3s var(--ease), border-color .3s var(--ease), transform .3s var(--ease);
}
.tool:hover{ background:rgba(40,40,44,.8); border-color:rgba(255,255,255,.3); transform:scale(1.06); }
.tool svg{ width:16px; height:16px; }

.time-badge{
  position:absolute; left:12px; bottom:12px; z-index:3;
  padding:4px 9px; border-radius:6px;
  background:rgba(18,18,20,.5);
  -webkit-backdrop-filter:blur(16px); backdrop-filter:blur(16px);
  border:1px solid rgba(255,255,255,.12);
  color:var(--fg-2); font-size:10px;
  opacity:0; transition:opacity .4s var(--ease);
}
.player.ready .time-badge{ opacity:1; }

/* 卡片文字 */
.proj-meta{ padding:0 4px 22px; }
.proj-date{
  display:inline-flex; align-items:center; gap:8px;
  color:var(--fg-3);
}
.proj-date::before{
  content:""; width:4px; height:4px; border-radius:50%;
  background:var(--accent); box-shadow:0 0 8px rgba(41,151,255,.8);
}
.proj-name{
  margin-top:12px;
  font-size:clamp(27px,3.8vw,42px);
  font-weight:600; letter-spacing:-.034em; line-height:1.12;
}
.proj-tag{
  margin-top:10px;
  font-size:clamp(15px,1.6vw,18px); color:var(--fg-2); line-height:1.6; max-width:46ch;
}

/* ───────────────────── 研究列表 ───────────────────── */

.rrow{
  display:grid;
  grid-template-columns:180px minmax(0,1fr) auto 18px;
  align-items:baseline; gap:22px;
  padding:19px 14px 19px 4px;
  border-bottom:1px solid var(--line-soft);
  opacity:0; transform:translateY(16px);
  transition:background .4s var(--ease), padding .4s var(--ease);
}
.rrow.in{
  opacity:1; transform:none;
  transition:opacity .7s var(--ease), transform .7s var(--ease),
             background .4s var(--ease), padding .4s var(--ease);
}
.rrow:hover{ background:rgba(255,255,255,.04); padding-left:14px; padding-right:4px; }

.rrow-date{ color:var(--fg-3); white-space:nowrap; }
.rrow:hover .rrow-date{ color:var(--fg-2); }
.rrow-name{
  font-size:clamp(17px,1.9vw,21px); font-weight:520; letter-spacing:-.012em;
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
}
.rrow-host{
  color:var(--fg-3); text-align:right;
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis; max-width:26vw;
}
.rrow-out{
  color:var(--fg-3); align-self:center;
  opacity:0; transform:translate(-3px,3px);
  transition:opacity .35s var(--ease), transform .35s var(--ease), color .35s var(--ease);
}
.rrow-out svg{ width:16px; height:16px; display:block; }
.rrow:hover .rrow-out{ opacity:1; transform:none; color:var(--fg); }

/* ───────────────────── 产品售卖 ───────────────────── */

.buy{
  margin-top:26px;
  border:1px solid var(--line-soft);
  border-radius:22px;
  background:var(--card);
  overflow:hidden;
  opacity:0; transform:translateY(24px);
  transition:border-color .5s var(--ease), box-shadow .7s var(--ease);
}
.buy.in{ opacity:1; transform:none; transition:opacity .9s var(--ease), transform .9s var(--ease), border-color .5s var(--ease); }
.buy:hover{ border-color:rgba(255,255,255,.17); box-shadow:0 40px 90px -40px rgba(0,0,0,1); }

.buy-shot{ background:#000; border-bottom:1px solid var(--line-soft); overflow:hidden; }
.buy-shot img{
  width:100%; height:auto; aspect-ratio:16/9; object-fit:cover;
  transition:transform 1.2s var(--ease);
}
.buy:hover .buy-shot img{ transform:scale(1.015); }

.buy-body{ padding:26px 28px 28px; }
.buy-head{ display:flex; align-items:flex-start; justify-content:space-between; gap:24px; flex-wrap:wrap; }
.buy-name{
  font-size:clamp(27px,3.4vw,38px);
  font-weight:600; letter-spacing:-.034em; line-height:1.12;
}
.buy-tag{ margin-top:9px; font-size:clamp(14px,1.5vw,17px); color:var(--fg-2); max-width:46ch; }
.buy-price{ display:flex; flex-direction:column; align-items:flex-end; gap:5px; }
.buy-price-v{ font-size:clamp(25px,3vw,34px); font-weight:600; letter-spacing:-.03em; }
.buy-price-k{ color:var(--fg-3); }
.buy-price-note{
  margin-top:2px;
  font-size:13px; letter-spacing:-.005em;
  color:var(--fg);
}

.buy-specs{
  margin:26px 0 0; padding-top:8px;
  border-top:1px solid var(--line-soft);
}
.buy-spec{
  display:grid; grid-template-columns:190px minmax(0,1fr); gap:22px;
  padding:14px 0; border-bottom:1px solid var(--line-soft);
}
.buy-spec dt{ color:var(--fg-3); text-transform:uppercase; }
.buy-spec dd{ margin:0; font-size:15px; color:var(--fg); }

.buy-cta{ display:flex; align-items:center; gap:18px; flex-wrap:wrap; margin-top:26px; }
.btn{
  display:inline-flex; align-items:center; justify-content:center;
  padding:11px 24px; border-radius:999px;
  background:var(--fg); color:#000;
  font-size:14px; font-weight:550; letter-spacing:-.01em;
  transition:background .35s var(--ease), transform .35s var(--ease);
}
.btn:hover{ background:#fff; transform:translateY(-2px); }

/* 点击 Contact sales 展开的联系方式 */
.btn.btn-on{
  background:rgba(255,255,255,.1); color:var(--fg);
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.22);
}
.btn.btn-on:hover{ background:rgba(255,255,255,.16); }
.buy-contact{ display:none; }
.buy-contact.open{
  display:block;
  margin-top:24px; padding-top:4px;
  border-top:1px solid var(--line-soft);
  animation:buy-in .5s var(--ease) both;
}
.buy-contact-in{
  display:grid; grid-template-columns:repeat(auto-fit,minmax(200px,1fr));
  column-gap:30px;
}
.buy-contact .ccard{ padding-right:0; }
@keyframes buy-in{
  from{ opacity:0; transform:translateY(-8px); }
  to  { opacity:1; transform:none; }
}

/* ───────────────────── 右栏：联系方式 ───────────────────── */

.rail{
  position:sticky; top:calc(var(--nav-h) + 34px);
  margin-top:calc(var(--nav-h) + 34px);
  padding:0 0 40px var(--gutter);
}
.rail-title{
  font-family:var(--sans); font-size:11px; font-weight:500;
  letter-spacing:.14em; text-transform:uppercase;
  color:var(--fg-3);
  padding-bottom:14px; border-bottom:1px solid var(--line);
}
.ccard{
  display:flex; flex-direction:column; gap:7px;
  padding:18px 10px 18px 0;
  border-bottom:1px solid var(--line-soft);
  transition:background .4s var(--ease), padding .4s var(--ease);
}
a.ccard:hover{ background:rgba(255,255,255,.045); padding-left:10px; padding-right:0; }
.ccard-k{ font-family:var(--sans); font-size:11px; font-weight:500; letter-spacing:.1em; color:var(--fg-3); text-transform:uppercase; }
.ccard-v{ font-size:14px; font-weight:480; letter-spacing:-.005em; line-height:1.45; word-break:break-word; }
a.ccard .ccard-v{ transition:color .35s var(--ease); }
a.ccard:hover .ccard-v{ color:#fff; }

/* 社交图标 */
.social{ padding-top:22px; }
.social-row{ display:flex; gap:10px; margin-top:12px; }
.soc{
  width:38px; height:38px; border-radius:50%;
  display:grid; place-items:center;
  color:var(--fg-2);
  background:rgba(255,255,255,.055);
  border:1px solid var(--line-soft);
  transition:background .35s var(--ease), color .35s var(--ease),
             border-color .35s var(--ease), transform .35s var(--ease);
}
.soc svg{ width:18px; height:18px; }
.soc:hover{
  color:#fff; background:rgba(255,255,255,.12);
  border-color:rgba(255,255,255,.24); transform:translateY(-2px);
}

/* 微信二维码浮层 */
.soc-wrap{ position:relative; }
.qr{
  position:absolute; bottom:calc(100% + 12px); left:0; z-index:40;
  width:186px; padding:12px;
  border-radius:14px;
  background:rgba(22,22,24,.92);
  -webkit-backdrop-filter:blur(20px); backdrop-filter:blur(20px);
  border:1px solid var(--line);
  box-shadow:0 24px 50px -20px rgba(0,0,0,1);
  opacity:0; visibility:hidden; transform:translateY(6px) scale(.97);
  transform-origin:20px 100%;
  transition:opacity .3s var(--ease), transform .3s var(--ease), visibility .3s;
}
.qr img{ width:100%; height:auto; border-radius:8px; background:#fff; }
.qr-cap{
  display:block; margin-top:9px;
  font-size:11px; line-height:1.4; color:var(--fg-3); text-align:center;
}
.qr::after{        /* 小三角 */
  content:""; position:absolute; top:100%; left:14px;
  border:6px solid transparent; border-top-color:rgba(22,22,24,.92);
}
.soc-wrap:hover .qr,
.soc-wrap:has(.soc:focus-visible) .qr,   /* 键盘聚焦才展开，鼠标点击后不会被钉住 */
.soc-wrap.open .qr{ opacity:1; visibility:visible; transform:none; }

/* ───────────────────── 页脚 ───────────────────── */

.foot{ border-top:1px solid var(--line-soft); padding:30px 0 44px; }
.foot-inner{ display:flex; flex-direction:column; gap:6px; }
.foot p{ font-size:12px; color:var(--fg-3); }

/* ───────────────────── 进场 ───────────────────── */

.reveal{ opacity:0; transform:translateY(22px); }
.reveal.in{ opacity:1; transform:none; transition:opacity .9s var(--ease), transform .9s var(--ease); }

/* ───────────────────── 响应式 ───────────────────── */

/* 留白随屏宽收缩 */
@media (max-width:1280px){ :root{ --pad:96px;  --gutter:56px; } }
@media (max-width:1080px){ :root{ --pad:56px;  --gutter:44px; } }
@media (max-width:940px) { :root{ --pad:40px; } }

/* 窄屏：右栏落到年表下面，铺成一排 */
@media (max-width:940px){
  .layout{ grid-template-columns:minmax(0,1fr); }
  .view{ padding-right:0; border-right:0; padding-bottom:20px; }
  .grid{ gap:56px; }
  .rrow{ grid-template-columns:150px minmax(0,1fr) 18px; gap:16px; }
  .rrow-host{ display:none; }
  .rail{
    position:static; margin-top:0; padding:0 0 30px;
    border-top:1px solid var(--line-soft); padding-top:34px;
  }
  .rail-inner{
    display:grid; grid-template-columns:repeat(auto-fit,minmax(170px,1fr));
    column-gap:26px;
  }
  .rail-title{ grid-column:1 / -1; }
}

@media (max-width:640px){
  :root{ --pad:20px; }
  .player{ border-radius:12px; }
  .proj-meta{ padding-bottom:18px; }
  .tab{ padding:8px 10px; letter-spacing:.08em; }
  .rrow{ grid-template-columns:minmax(0,1fr) 18px; row-gap:7px; padding:16px 4px; }
  .rrow-date{ grid-column:1 / -1; }
  .buy{ border-radius:12px; }
  .buy-body{ padding:20px 18px 22px; }
  .buy-price{ align-items:flex-start; }
  .buy-spec{ grid-template-columns:minmax(0,1fr); gap:5px; }
}

@media (prefers-reduced-motion:reduce){
  html{ scroll-behavior:auto; }
  *,*::before,*::after{
    animation-duration:.001ms !important; animation-iteration-count:1 !important;
    transition-duration:.001ms !important;
  }
  .reveal,.proj,.year-head,.rrow,.view-note,.buy{ opacity:1 !important; transform:none !important; }
}