/* welcome.css —— 欢迎页样式：深空背景 + 霓虹标题 + 玻璃拟态模块卡片 */

*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0; color:#E8EEF9; overflow-x:hidden;
  font:15px/1.65 -apple-system,"Segoe UI","Microsoft YaHei",sans-serif;
  background:#05060E;
  -webkit-font-smoothing:antialiased;
}

/* ================= 背景层 ================= */
.bg{position:fixed;inset:0;z-index:0;overflow:hidden}
/* AI 生成的星空主图 */
.bg-img{
  position:absolute;inset:0;
  background:url('../assets-welcome/hero-bg.jpg') center center / cover no-repeat;
  /* 轻微缓慢推移，产生视差呼吸感 */
  animation:drift 60s ease-in-out infinite alternate;
}
@keyframes drift{
  from{transform:scale(1.06) translate3d(-1%, 0, 0)}
  to  {transform:scale(1.12) translate3d(1%, -1%, 0)}
}
/* 压暗 + 向中心聚光的遮罩，保证文字可读 */
.bg-veil{
  position:absolute;inset:0;
  /* 径向遮罩压暗四周、线性遮罩压暗上下带；中心不再全透明，
     否则背景里的银色山峰会顶在统计数字后面吃掉对比度 */
  background:
    radial-gradient(ellipse 72% 58% at 50% 40%, #05060E3D 0%, #05060EAA 62%, #05060Eee 100%),
    linear-gradient(180deg, #05060Ecc 0%, #05060E66 30%, #05060E99 72%, #05060E 100%);
}
/* 星点 canvas */
#stars{position:absolute;inset:0;width:100%;height:100%}
/* 霓虹光晕 */
.glow{position:absolute;border-radius:50%;filter:blur(90px);opacity:.5;pointer-events:none}
.g1{width:46vw;height:46vw;left:-12vw;top:-10vw;background:#4338CA77;animation:float1 22s ease-in-out infinite}
.g2{width:40vw;height:40vw;right:-10vw;top:6vh;background:#0E749066;animation:float2 26s ease-in-out infinite}
.g3{width:52vw;height:34vw;left:26vw;bottom:-16vw;background:#7C3AED55;animation:float3 30s ease-in-out infinite}
@keyframes float1{50%{transform:translate3d(6vw,4vh,0) scale(1.12)}}
@keyframes float2{50%{transform:translate3d(-5vw,6vh,0) scale(1.1)}}
@keyframes float3{50%{transform:translate3d(3vw,-5vh,0) scale(1.08)}}

/* ================= 布局 ================= */
.wrap{
  position:relative;z-index:1;min-height:100%;
  display:flex;flex-direction:column;justify-content:center;align-items:center;
  padding:56px 28px 40px;gap:44px;
}

/* ================= 标题区 ================= */
.hero{text-align:center;max-width:1000px;animation:riseIn .9s cubic-bezier(.2,.7,.3,1) both}
@keyframes riseIn{from{opacity:0;transform:translateY(26px)}to{opacity:1;transform:none}}

.badge{
  display:inline-flex;align-items:center;gap:8px;
  font-size:12.5px;letter-spacing:.4px;color:#A5B4FC;
  background:linear-gradient(90deg,#4338CA33,#7C3AED22);
  border:1px solid #818CF844;border-radius:100px;padding:6px 16px;
  backdrop-filter:blur(6px);margin-bottom:26px;
}
.badge::before{content:"";width:6px;height:6px;border-radius:50%;
  background:#22D3EE;box-shadow:0 0 10px #22D3EE,0 0 20px #22D3EEAA;
  animation:pulse 2s ease-in-out infinite}
@keyframes pulse{50%{opacity:.35;transform:scale(.75)}}

.title{margin:0;display:flex;flex-direction:column;gap:10px}
.t-cn{
  font-size:clamp(38px,7.2vw,86px);font-weight:800;letter-spacing:.02em;line-height:1.05;
  background:linear-gradient(100deg,#FFFFFF 0%,#C7D2FE 26%,#67E8F9 50%,#A78BFA 74%,#FFFFFF 100%);
  background-size:220% 100%;
  -webkit-background-clip:text;background-clip:text;color:transparent;
  filter:drop-shadow(0 6px 30px #4338CA88) drop-shadow(0 0 60px #22D3EE44);
  animation:sheen 7s linear infinite;
}
@keyframes sheen{to{background-position:220% 0}}
.t-en{
  font-size:clamp(11px,1.5vw,15px);font-weight:600;letter-spacing:.42em;
  color:#7DD3FC;text-indent:.42em;opacity:.9;
}
.sub{
  margin:20px 0 0;font-size:clamp(14px,1.5vw,17px);color:#B7C3D8;line-height:1.7;
}

/* 统计条 */
.stat-row{display:flex;justify-content:center;gap:46px;flex-wrap:wrap;margin-top:32px}
.stat{text-align:center;min-width:96px;position:relative}
/* 统计项之间的分隔竖线 */
.stat + .stat::before{
  content:"";position:absolute;left:-23px;top:14%;height:72%;width:1px;
  background:linear-gradient(180deg,#0000,#818CF855,#0000);
}
.stat b{display:block;font-size:clamp(21px,2.5vw,30px);font-weight:700;line-height:1.2;
  font-variant-numeric:tabular-nums;letter-spacing:.01em;
  background:linear-gradient(180deg,#FFFFFF,#A5B4FC);
  -webkit-background-clip:text;background-clip:text;color:transparent;
  filter:drop-shadow(0 2px 10px #05060Ecc)}
.stat span{display:block;margin-top:3px;font-size:11.5px;color:#9FAFC8;
  letter-spacing:.5px;white-space:nowrap;text-shadow:0 1px 6px #05060Eee}

/* ================= 模块卡片 ================= */
.cards{
  display:grid;grid-template-columns:repeat(auto-fit,minmax(268px,1fr));
  gap:22px;width:100%;max-width:1060px;
}
.card{
  position:relative;display:flex;flex-direction:column;overflow:hidden;
  border-radius:20px;text-decoration:none;color:inherit;
  background:linear-gradient(160deg,#151C3Acc 0%,#0B1020dd 100%);
  border:1px solid #FFFFFF1F;
  backdrop-filter:blur(14px);
  box-shadow:0 18px 44px #00000066, inset 0 1px 0 #FFFFFF14;
  transition:transform .34s cubic-bezier(.2,.7,.3,1), box-shadow .34s, border-color .34s;
  animation:riseIn .8s cubic-bezier(.2,.7,.3,1) both;
}
.card:nth-child(1){animation-delay:.10s}
.card:nth-child(2){animation-delay:.20s}
.card:nth-child(3){animation-delay:.30s}
.card:hover{
  transform:translateY(-8px);border-color:#67E8F966;
  box-shadow:0 26px 60px #00000088, 0 0 0 1px #67E8F933, inset 0 1px 0 #FFFFFF22;
}
/* 顶部插画 */
.card-art{
  height:150px;overflow:hidden;position:relative;
  background:#0B1020;
  /* 插画底部渐隐，与卡片主体融合 */
  mask-image:linear-gradient(180deg,#000 58%,#0000 100%);
  -webkit-mask-image:linear-gradient(180deg,#000 58%,#0000 100%);
}
.card-art img{
  width:100%;height:100%;object-fit:cover;object-position:center 42%;
  transition:transform .5s cubic-bezier(.2,.7,.3,1);
}
.card:hover .card-art img{transform:scale(1.07)}

.card-body{padding:6px 22px 22px;display:flex;flex-direction:column;flex:1}
.card-kicker{
  font-size:11px;letter-spacing:.16em;color:#67E8F9;font-weight:600;
  text-transform:uppercase;margin-bottom:7px;
}
.card h2{margin:0 0 9px;font-size:21px;font-weight:700;color:#F1F5FF;letter-spacing:.01em}
.card p{margin:0;font-size:13.5px;line-height:1.7;color:#9BABC7;flex:1}
.card-foot{margin-top:16px;display:flex;align-items:center}
.go{
  font-size:13.5px;font-weight:600;color:#A5B4FC;
  transition:color .3s, transform .3s;display:inline-block;
}
.card:hover .go{color:#67E8F9;transform:translateX(5px)}

/* 悬浮高光扫过 */
.card-shine{
  position:absolute;inset:0;pointer-events:none;opacity:0;
  background:linear-gradient(105deg,#0000 38%,#FFFFFF1F 50%,#0000 62%);
  transition:opacity .3s;
}
.card:hover .card-shine{opacity:1;animation:shineMove .9s ease-out}
@keyframes shineMove{from{transform:translateX(-40%)}to{transform:translateX(40%)}}

/* ================= 右上角登录入口 ================= */
/* 桌面端：固定悬浮在视口右上角，不占内容流 */
.top-auth{
  position:fixed;top:20px;right:26px;z-index:10;
  display:flex;align-items:center;gap:12px;
  animation:riseIn .9s cubic-bezier(.2,.7,.3,1) both;
}
.login-btn{
  display:inline-flex;align-items:center;justify-content:center;
  padding:13px 38px;border-radius:100px;
  font-size:17px;font-weight:700;letter-spacing:.3em;text-indent:.3em;
  color:#FFFFFF;text-decoration:none;white-space:nowrap;
  background:linear-gradient(120deg,#4F46E5 0%,#7C3AED 48%,#0E7490 100%);
  border:1px solid #FFFFFF2E;
  box-shadow:0 10px 30px #4F46E566, inset 0 1px 0 #FFFFFF3D;
  transition:transform .3s cubic-bezier(.2,.7,.3,1), box-shadow .3s, filter .3s;
}
.login-btn:hover{
  transform:translateY(-2px);filter:brightness(1.15);
  box-shadow:0 14px 40px #7C3AED88, 0 0 24px #22D3EE44, inset 0 1px 0 #FFFFFF4D;
}
/* 已登录时右上角换成身份徽章 + 退出 */
.auth-user{
  display:inline-flex;align-items:center;gap:8px;
  padding:11px 24px;border-radius:100px;
  font-size:14px;font-weight:600;color:#F1F5FF;
  background:linear-gradient(160deg,#151C3Acc,#0B1020dd);
  border:1px solid #FFFFFF2E;backdrop-filter:blur(10px);
  box-shadow:0 8px 24px #00000059;
  max-width:260px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
}
.role-tag{
  font-style:normal;font-size:11px;font-weight:600;color:#67E8F9;
  border:1px solid #67E8F966;border-radius:100px;padding:1px 8px;letter-spacing:.1em;
}
.auth-out{
  display:inline-flex;align-items:center;
  padding:11px 22px;border-radius:100px;
  font-size:14px;font-weight:600;color:#A5B4FC;text-decoration:none;
  background:#FFFFFF0A;border:1px solid #FFFFFF24;backdrop-filter:blur(10px);
  transition:color .3s, border-color .3s, transform .3s;
}
.auth-out:hover{color:#FCA5A5;border-color:#FCA5A566;transform:translateY(-2px)}

/* ================= 页脚 ================= */
.foot{
  font-size:12.5px;color:#7C8AA5;text-align:center;
  display:flex;gap:10px;flex-wrap:wrap;justify-content:center;align-items:center;
}
.foot a{color:#818CF8;text-decoration:none;border-bottom:1px solid #818CF866}
.foot a:hover{color:#A5B4FC;border-color:#A5B4FC}
.foot .dot{opacity:.4}
.foot .muted{color:#5E6B82}

/* ================= 响应式 ================= */
@media (max-width:720px){
  .wrap{padding:24px 18px 32px;gap:32px}
  .stat-row{gap:22px}
  .card-art{height:126px}
  /* 窄屏标题占满整行，悬浮按钮会压住字尾：改为内容流内右对齐的独立一行 */
  .top-auth{position:static;align-self:flex-end;margin:-8px 0 -12px;gap:8px}
  .login-btn{padding:10px 26px;font-size:15px}
  .auth-user{padding:9px 18px;font-size:13px;max-width:56vw}
  .auth-out{padding:9px 16px;font-size:13px}
}
/* 尊重「减少动效」偏好 */
@media (prefers-reduced-motion:reduce){
  .bg-img,.glow,.t-cn,.badge::before,.card,.top-auth{animation:none!important}
  .card:hover,.login-btn:hover,.auth-out:hover{transform:none}
}