/* ==========================================================================
   首页 · 首屏专属样式
   （单位系统 / 全出血视频 / 顶部栏 / 标题 / 移动菜单）
   仅 index.html 引入；令牌与通用组件见 style.css
   ========================================================================== */

/* --------------------------------------------------------------------------
   响应式单位系统 — 1 设计 px 锁定屏幕高度（参考画布 1487 × 1058）
   -------------------------------------------------------------------------- */
:root{
  --u: calc(100vh / 1058);
  --uw: calc(100vw / 1487);
  --h: clamp(var(--u), calc(var(--u) * .65 + var(--uw) * .35), calc(var(--u) * 1.16));
}
@supports (height: 100dvh){
  :root{ --u: calc(100dvh / 1058); }
}

/* --------------------------------------------------------------------------
   首屏容器
   -------------------------------------------------------------------------- */
.stage{
  position:relative;
  height:100dvh;
  overflow:hidden;
  background:#050505;
}
@supports not (height:100dvh){ .stage{ height:100vh; } }

/* --------------------------------------------------------------------------
   视频层
   -------------------------------------------------------------------------- */
.plate{position:absolute;inset:0;overflow:hidden;z-index:0}
.plate-video{
  position:absolute;
  left:50%;
  top:calc(1 * var(--u));
  width:calc(1492 * var(--u));
  height:calc(1054 * var(--u));
  max-width:none;              /* 覆盖通用 img/svg/video{max-width:100%}，保住 1492u 精确宽度 */
  transform:translateX(calc(-50% - (0.5 * var(--u))));
  object-fit:cover;
  pointer-events:none;
}
/* 底部渐隐 + 两侧遮幅（两层均保留） */
.plate::after{
  content:"";
  position:absolute;inset:0;pointer-events:none;
  background:
    linear-gradient(to bottom,
      rgba(5,5,5,0) 78.8%, rgba(5,5,5,.23) 79.6%, rgba(5,5,5,.45) 81.4%,
      rgba(5,5,5,.75) 83.3%, rgba(5,5,5,.84) 85.2%, rgba(5,5,5,.888) 88%,
      rgba(5,5,5,.905) 91%, rgba(5,5,5,.96) 95%, #050505 100%),
    linear-gradient(to right,
      #050505 calc(50% - (746 * var(--u))),
      transparent calc(50% - (676 * var(--u))),
      transparent calc(50% + (676 * var(--u))),
      #050505 calc(50% + (746 * var(--u))));
}

/* --------------------------------------------------------------------------
   顶部栏 — 品牌 / 导航 / 胶囊按钮 / 汉堡
   -------------------------------------------------------------------------- */
.topbar{position:absolute;inset:0;z-index:20;pointer-events:none}
.topbar a,.topbar button{pointer-events:auto}

.brand{
  position:absolute;
  left:calc(75 * var(--u));
  top:calc(27 * var(--u));
  width:calc(31.5 * var(--u));
  height:calc(48.5 * var(--u));
  display:block;
  line-height:0;
}
.brand svg{width:100%;height:100%}

.links{
  position:absolute;
  left:50%;
  top:calc(51 * var(--u));
  transform:translate(-50%,-50%);
  display:flex;
  align-items:center;
  font-size:calc(19 * var(--u));
  font-weight:400;
  color:var(--nav);
  white-space:nowrap;
}
.links a{line-height:1;transition:color .3s var(--ease)}
.links a:hover{color:var(--ink)}
.links a:nth-child(2){margin-left:calc(24.5 * var(--u))}
.links a:nth-child(3){margin-left:calc(23.5 * var(--u))}
.links a:nth-child(4){margin-left:calc(26.0 * var(--u))}

.pill-nav{
  position:absolute;
  right:calc(75.4 * var(--u));
  top:calc(27 * var(--u));
  width:calc(175 * var(--u));
  height:calc(49 * var(--u));
  padding:0;
  font-size:calc(20.6 * var(--u));
  transition:transform .3s var(--ease);
}
.pill-nav span,.pill-cta span{display:inline-block;transform:translateY(calc(1 * var(--u)))}
.pill-nav:hover{transform:scale(1.02)}

.burger{display:none;border:0;background:transparent}

/* --------------------------------------------------------------------------
   首屏文字区
   -------------------------------------------------------------------------- */
.hero{position:absolute;inset:0;z-index:15;pointer-events:none}
.hero a{pointer-events:auto}

.headline{
  position:absolute;
  left:calc(75.5 * var(--u));
  top:calc(230.5 * var(--u));
  font-size:calc(71.6 * var(--h));
  line-height:calc(80.5 * var(--h));
  font-weight:400;
  letter-spacing:calc(0.3 * var(--h));
  color:var(--ink);
  white-space:nowrap;
}
.headline span{display:block}

.sub{
  position:absolute;
  left:calc(75.5 * var(--u));
  top:calc(230.5 * var(--u) + 189 * var(--h));
  font-size:calc(20.7 * var(--h));
  line-height:calc(23.5 * var(--h));
  font-weight:400;
  word-spacing:calc(1.8 * var(--h));
  color:var(--muted);
  white-space:nowrap;
}
.sub span{display:block}

.pill-cta{
  position:absolute;
  left:calc(74.9 * var(--u));
  top:calc(230.5 * var(--u) + 264.5 * var(--h));
  width:calc(175.6 * var(--h));
  height:calc(50 * var(--h));
  padding:0;
  font-size:calc(20.6 * var(--h));
  transition:transform .3s var(--ease);
}
.pill-cta:hover{transform:scale(1.02)}
.pill-cta span{transform:translateY(calc(1 * var(--h)))}

.ghost{
  position:absolute;
  left:calc(74.9 * var(--u) + 220.6 * var(--h));
  top:calc(230.5 * var(--u) + 279.5 * var(--h));
  font-size:calc(20.6 * var(--h));
  font-weight:500;
  letter-spacing:calc(0.12 * var(--h));
  color:#fff;
  white-space:nowrap;
  transition:opacity .3s var(--ease);
}
.ghost:hover{opacity:.82}

/* 移动端菜单在桌面默认隐藏 */
.menu{display:none}

/* --------------------------------------------------------------------------
   入场动画（仅无减少动效偏好时）
   -------------------------------------------------------------------------- */
@media (prefers-reduced-motion: no-preference){
  @keyframes rise{
    from{opacity:0;transform:translateY(calc(14 * var(--u)))}
  }
  @keyframes riseNav{
    from{opacity:0;transform:translate(calc(-50% + 0px), calc(-50% + 14 * var(--u)))}
    to{opacity:1;transform:translate(-50%,-50%)}
  }

  .brand,.links,.pill-nav{animation:rise .8s var(--ease) both}
  .links{animation-name:riseNav}
  .headline{animation:rise .9s var(--ease) .06s both}
  .sub{animation:rise .9s var(--ease) .14s both}
  .pill-cta,.ghost{animation:rise .9s var(--ease) .22s both}
}

/* --------------------------------------------------------------------------
   竖屏 / 窄屏（宽高比 ≤ 11/10）
   -------------------------------------------------------------------------- */
@media (max-aspect-ratio: 11/10){
  :root{
    --m: min(calc(100vw / 430), 1.34px);
    --u: var(--m);
  }

  .stage{
    display:flex;
    flex-direction:column;
    min-height:100dvh;
    height:auto;
    padding:
      env(safe-area-inset-top) env(safe-area-inset-right)
      env(safe-area-inset-bottom) env(safe-area-inset-left);
  }

  /* 视频满幅 */
  .plate-video{
    left:auto;top:auto;inset:0;
    width:100%;height:100%;
    transform:none;
    object-fit:cover;
    object-position:43% center;
  }
  .plate::after{
    background:
      linear-gradient(to right,
        rgba(5,5,5,.86), rgba(5,5,5,.66) 42%, rgba(5,5,5,.20) 78%, rgba(5,5,5,.10) 100%),
      linear-gradient(to bottom,
        rgba(5,5,5,.72) 0%, rgba(5,5,5,.34) 24%, rgba(5,5,5,.34) 56%,
        rgba(5,5,5,.80) 82%, rgba(5,5,5,.97) 94%, #050505 100%);
  }

  /* 顶部栏转为流式 */
  .topbar{
    position:relative;inset:auto;
    display:flex;align-items:center;justify-content:space-between;
    padding:calc(22 * var(--u)) calc(22 * var(--u)) 0;
    pointer-events:auto;
  }
  .brand{position:relative;left:auto;top:auto;width:calc(26 * var(--u));height:calc(40 * var(--u))}
  .links,.pill-nav{display:none}

  .burger{
    display:flex;flex-direction:column;align-items:center;justify-content:center;
    gap:calc(5.6 * var(--u));
    width:calc(46 * var(--u));height:calc(46 * var(--u));
    border-radius:999px;
    background:rgba(255,255,255,.06);
    border:1px solid rgba(255,255,255,.14);
    backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);
    transition:background .3s var(--ease),opacity .3s var(--ease);
  }
  .burger i{
    display:block;width:calc(18 * var(--u));height:calc(1.7 * var(--u));
    background:var(--ink);border-radius:2px;
    transition:transform .34s var(--ease);
  }
  .stage.is-open .burger i:nth-child(1){transform:translateY(calc(4.3 * var(--u))) rotate(45deg)}
  .stage.is-open .burger i:nth-child(2){transform:translateY(calc(-4.3 * var(--u))) rotate(-45deg)}

  /* 文字区转为流式 */
  .hero{
    position:relative;inset:auto;
    flex:1 1 auto;
    display:flex;flex-direction:column;justify-content:center;
    padding:calc(28 * var(--u)) calc(22 * var(--u)) calc(8 * var(--u));
    pointer-events:auto;
  }
  .headline{
    position:relative;left:auto;top:auto;
    white-space:normal;
    font-size:calc(47 * var(--u));
    line-height:calc(53 * var(--u));
    letter-spacing:calc(.2 * var(--u));
  }
  .headline span{display:inline}
  .headline span:first-child::after{content:" "}

  .sub{
    position:relative;left:auto;top:auto;
    white-space:normal;
    font-size:calc(16 * var(--u));
    line-height:calc(24 * var(--u));
    word-spacing:normal;
    margin-top:calc(18 * var(--u));
  }
  .sub span{display:inline}
  .sub span:first-child::after{content:" "}

  .pill-cta,.ghost{
    position:relative;left:auto;top:auto;
    width:auto;height:auto;
    font-size:calc(16 * var(--u));
    letter-spacing:normal;
  }
  .pill-cta{padding:calc(15 * var(--u)) calc(26 * var(--u))}
  .pill-cta span{transform:translateY(calc(.5 * var(--u)))}
  .ghost{padding:calc(15 * var(--u)) 0;margin-top:calc(14 * var(--u))}

  /* 全屏菜单 */
  .menu{
    display:block;
    position:fixed;inset:0;z-index:30;
    background:linear-gradient(180deg,rgba(5,5,5,.72),rgba(5,5,5,.95));
    backdrop-filter:blur(22px);-webkit-backdrop-filter:blur(22px);
    opacity:0;visibility:hidden;
    transition:opacity .42s var(--ease),visibility .42s var(--ease);
  }
  .stage.is-open .menu{opacity:1;visibility:visible}
  .menu-inner{
    height:100%;
    padding:calc(96 * var(--u)) calc(26 * var(--u)) calc(38 * var(--u));
    display:flex;flex-direction:column;
  }
  .menu-eyebrow{
    font-size:calc(12 * var(--u));letter-spacing:.22em;text-transform:uppercase;
    color:var(--muted);margin-bottom:calc(16 * var(--u));
  }
  .menu-list{display:flex;flex-direction:column}
  .menu-list a{
    display:flex;align-items:center;justify-content:space-between;
    font-size:max(25px,calc(31 * var(--u)));
    font-weight:500;color:var(--ink);
    padding:calc(13 * var(--u)) 0;
    border-bottom:1px solid rgba(255,255,255,.08);
  }
  .menu-list a::after{content:"›";color:var(--muted);font-size:calc(24 * var(--u));line-height:1}
  .menu-foot{margin-top:auto;display:flex;flex-direction:column;gap:calc(12 * var(--u))}
  .menu-foot .pill{width:100%;height:calc(52 * var(--u));font-size:calc(17 * var(--u));padding:0}
  .menu-foot .ghost{
    position:relative;left:auto;top:auto;text-align:center;
    font-size:calc(16 * var(--u));padding:calc(8 * var(--u)) 0;margin-top:0;
  }

  .menu-eyebrow,.menu-list li,.menu-foot{
    opacity:0;transform:translateY(calc(14 * var(--u)));
    transition:opacity .5s var(--ease),transform .5s var(--ease);
  }
  .stage.is-open .menu-eyebrow{opacity:1;transform:none;transition-delay:.06s}
  .stage.is-open .menu-list li:nth-child(1){opacity:1;transform:none;transition-delay:.10s}
  .stage.is-open .menu-list li:nth-child(2){opacity:1;transform:none;transition-delay:.16s}
  .stage.is-open .menu-list li:nth-child(3){opacity:1;transform:none;transition-delay:.22s}
  .stage.is-open .menu-list li:nth-child(4){opacity:1;transform:none;transition-delay:.28s}
  .stage.is-open .menu-foot{opacity:1;transform:none;transition-delay:.34s}
}

/* --------------------------------------------------------------------------
   平板竖向
   -------------------------------------------------------------------------- */
@media (min-width:600px) and (max-aspect-ratio: 11/10){
  :root{
    --m: min(calc(100vw / 860), calc(100vh / 760), 1.25px);
    --u: var(--m);
  }
  .plate-video{object-position:44% center}
  .plate::after{
    background:
      linear-gradient(to right,
        rgba(5,5,5,.84), rgba(5,5,5,.60) 42%, rgba(5,5,5,.16) 78%, rgba(5,5,5,.06) 100%),
      linear-gradient(to bottom,
        rgba(5,5,5,.66) 0%, rgba(5,5,5,.28) 24%, rgba(5,5,5,.30) 56%,
        rgba(5,5,5,.78) 82%, rgba(5,5,5,.96) 94%, #050505 100%);
  }
  .headline span{display:block}
  .headline span:first-child::after{content:none}
  .sub span{display:block}
  .sub span:first-child::after{content:none}
}