/* ==========================================================================
   VPNFL — home.css(首页专属)
   首屏骨架(hero / hero-grid)+ 缓滚带 + 线路状态网格 + 首页补充排布
   颜色 / 圆角 / 阴影一律引用 base.css 的 :root 令牌
   ========================================================================== */

/* --------------------------------------------------------------------------
   Hero 外壳(渐变底 + 两团光斑;光斑只在装饰层,不承载内容)
   -------------------------------------------------------------------------- */

.hero{
  position:relative;
  overflow-x:clip;
  max-width:100%;
  min-height:calc(100svh - var(--nav-h) - var(--peek));
  display:flex;
  align-items:center;
  background:linear-gradient(180deg,var(--bg-top) 0%,var(--bg) 55%,var(--bg-bottom) 100%);
}
.hero::before,
.hero::after{
  content:"";
  position:absolute;
  pointer-events:none;
  z-index:0;
}
.hero::before{
  inset:-18% -8% auto 46%;
  height:78%;
  background:radial-gradient(closest-side,var(--aqua-06) 0%,var(--accent-06) 45%,transparent 100%);
}
.hero::after{
  inset:auto 55% -20% -10%;
  height:64%;
  background:radial-gradient(closest-side,var(--peri-10) 0%,var(--peri-05) 45%,transparent 100%);
}

.hero-grid{
  position:relative;
  z-index:1;
  width:100%;
  display:grid;
  grid-template-columns:minmax(0,44fr) minmax(0,52fr);
  column-gap:4%;
  align-items:center;
  padding-top:24px;
  padding-bottom:40px;
}

/* --------------------------------------------------------------------------
   横向缓滚带(内容为静态事实,装饰层 aria-hidden)
   -------------------------------------------------------------------------- */

.ticker{
  overflow:hidden;
  max-width:100%;
  border-top:1px solid var(--border);
  border-bottom:1px solid var(--border);
  background:var(--bg-panel);
}
.ticker-track{
  display:flex;
  width:max-content;
  will-change:transform;
}
.ticker-unit{
  display:flex;
  align-items:center;
  gap:34px;
  padding:14px 17px;
  white-space:nowrap;
  font-size:13.5px;
  color:var(--muted);
}
.ticker-unit span{
  display:inline-flex;
  align-items:center;
  gap:8px;
}

/* --------------------------------------------------------------------------
   线路状态网格(内容由 servers.js 注入,容器自占高度,不覆盖后文)
   -------------------------------------------------------------------------- */

.server-status{
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:10px 16px;
  margin-top:26px;
  overflow:hidden;
  max-width:100%;
}
.server-status:empty{display:none}

.srv-row{
  display:flex;
  align-items:center;
  gap:9px;
  min-width:0;
  padding:10px 14px;
  border-radius:var(--r-sm);
  background:var(--bg-panel);
  border:1px solid var(--border);
  box-shadow:var(--shadow-card), inset 0 1px 0 var(--white);
  font-size:13.5px;
  color:var(--text);
}
.srv-dot{
  width:8px;
  height:8px;
  border-radius:50%;
  background:var(--success);
  flex:none;
  animation:srv-pulse 2.8s ease-in-out infinite;
}
@keyframes srv-pulse{
  0%,100%{opacity:.45;transform:scale(.86)}
  50%{opacity:1;transform:scale(1)}
}
.srv-flag{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  flex:none;
  font-size:15px;
  line-height:1;
}
.srv-flag svg{
  width:22px;
  height:15px;
  border-radius:3px;
  box-shadow:inset 0 0 0 1px var(--border);
}
.srv-name{
  flex:1;
  min-width:0;
  font-weight:600;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
}
.srv-type{
  flex:none;
  display:inline-flex;
  align-items:center;
  min-height:20px;
  padding:1px 8px;
  border-radius:6px;
  background:var(--bg-panel2);
  font-size:11px;
  font-weight:600;
  color:var(--accent-dark);
  white-space:nowrap;
}
.srv-ms{
  flex:none;
  font-family:var(--font-mono);
  font-size:12.5px;
  font-weight:700;
  color:var(--accent-dark);
  white-space:nowrap;
}
.srv-bw{
  flex:none;
  font-family:var(--font-mono);
  font-size:12.5px;
  color:var(--muted);
  white-space:nowrap;
}

/* --------------------------------------------------------------------------
   首页补充排布
   -------------------------------------------------------------------------- */

.routes-note{
  margin-top:22px;
  max-width:78ch;
}
.plans-note{
  margin-top:26px;
  display:flex;
  flex-direction:column;
  gap:14px;
  max-width:78ch;
  font-size:15.5px;
  line-height:1.75;
  color:var(--muted);
}
.plans-note strong{color:var(--text);font-weight:600}
.plans-note + .notice-strip{margin-top:22px}
.routes-more{margin-top:26px}
.routes-more .btn svg{width:17px;height:17px}

.why-grid{
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:18px;
}
.why-grid .card{display:flex;flex-direction:column;gap:10px}
.why-grid .card p{font-size:14.5px;line-height:1.75;color:var(--muted)}

/* --------------------------------------------------------------------------
   响应式
   -------------------------------------------------------------------------- */

@media (max-width:1180px){
  .hero-grid{column-gap:3%}
}

@media (max-width:1024px){
  .hero{min-height:auto}
  .hero-grid{
    grid-template-columns:minmax(0,1fr);
    row-gap:56px;
    padding-top:32px;
    padding-bottom:48px;
  }
  .why-grid{grid-template-columns:minmax(0,1fr)}
}

@media (max-width:860px){
  .server-status{grid-template-columns:minmax(0,1fr)}
}

@media (max-width:768px){
  .hero-grid{row-gap:40px;padding-top:24px;padding-bottom:36px}
  .ticker-unit{gap:24px;font-size:13px}
}

@media (max-width:640px){
  .srv-bw{display:none}
  .why-grid{gap:14px}
}

@media (prefers-reduced-motion:reduce){
  .srv-dot{animation:none}
  .ticker-track{transform:none}
}