/* ============================================================
   GNKA 官网特效层 effects.css  (v2 · 可见性加强版)
   - 上层 HUD 网格 + 扫描光带（覆盖全屏，首屏也可见）
   - 科技感发光粒子背景（#fx-bg canvas）
   - 主按钮呼吸光 / 悬停发光 / 卡片上浮
   - 滚动渐显 + 入场动画
   ============================================================ */

:root{ --gnka-accent:#007bff; --gnka-accent2:#2ad1ff; }

/* ---------- 底层：粒子画布 ---------- */
#fx-bg{ position:fixed; inset:0; width:100%; height:100%; z-index:-1; pointer-events:none; display:block; }

/* 底色必须在 html，body 透明，否则 body 背景会盖住 z-index:-1 画布 */
html{ background-color:#1a1a1a; }
body{ position:relative; background-color:transparent !important; }

/* 底层柔光 */
body::before{
  content:""; position:fixed; inset:0; z-index:-2; pointer-events:none;
  background:
    radial-gradient(1200px 620px at 82% -12%, rgba(0,123,255,.14), transparent 60%),
    radial-gradient(900px 520px at 0% 100%, rgba(42,209,255,.10), transparent 55%);
}

/* ---------- 上层：HUD 网格（覆盖全屏，任何页面/首屏都可见） ---------- */
body::after{
  content:""; position:fixed; inset:0; z-index:9; pointer-events:none;
  background:
    repeating-linear-gradient(0deg,  rgba(0,150,255,.10) 0 1px, transparent 1px 46px),
    repeating-linear-gradient(90deg, rgba(0,150,255,.10) 0 1px, transparent 1px 46px);
  -webkit-mask-image:radial-gradient(ellipse at 50% 38%, #000 25%, transparent 80%);
          mask-image:radial-gradient(ellipse at 50% 38%, #000 25%, transparent 80%);
  animation:gnkaGridDrift 16s linear infinite;
}
@keyframes gnkaGridDrift{
  from{ background-position:0 0, 0 0; }
  to  { background-position:0 46px, 46px 0; }
}

/* ---------- 扫描光带 ---------- */
#fx-scan{ position:fixed; left:0; right:0; height:38vh; z-index:10; pointer-events:none;
  background:linear-gradient(180deg, transparent 0%, rgba(0,170,255,.06) 50%, transparent 100%);
  animation:gnkaScan 8s linear infinite; }
@keyframes gnkaScan{ from{ transform:translateY(-120%); } to{ transform:translateY(340%); } }

/* ---------- 主按钮呼吸光（首屏"加入我们"立刻可见） ---------- */
@keyframes gnkaBtnPulse{
  0%,100%{ box-shadow:0 0 8px rgba(0,123,255,.55); }
  50%    { box-shadow:0 0 24px rgba(0,123,255,.95); }
}
.btn-primary, .btn-success, .carousel-content .btn{ animation:gnkaBtnPulse 2.4s ease-in-out infinite; }

/* ---------- 悬停辉光 ---------- */
.card{
  border:1px solid rgba(0,123,255,.14);
  background-color:#232323;
  transition:transform .25s ease, box-shadow .25s ease, border-color .25s ease;
}
.card:hover{
  transform:translateY(-6px);
  box-shadow:0 12px 34px rgba(0,0,0,.5), 0 0 24px rgba(0,123,255,.45);
  border-color:var(--gnka-accent) !important;
}
.card-img-top, .card img{ transition:transform .45s ease; }
.card:hover .card-img-top, .card:hover img{ transform:scale(1.05); }
.card-title{ color:var(--gnka-accent2); }

.btn{ transition:box-shadow .25s ease, transform .15s ease; }
.btn:hover{ box-shadow:0 0 16px rgba(0,123,255,.6); transform:translateY(-1px); }
.btn:active{ transform:translateY(0); }

a{ transition:color .2s ease, text-shadow .2s ease; }
a:hover{ text-shadow:0 0 8px rgba(0,123,255,.5); }
.navbar .nav-link{ transition:text-shadow .25s ease, color .2s ease; }
.navbar .nav-link:hover, .navbar .nav-link.active{ text-shadow:0 0 10px rgba(0,123,255,.95); }

/* 标题微光 */
body.js-loaded h2{ text-shadow:0 0 14px rgba(0,123,255,.35); }

/* ============================================================
   导航栏特效
   - 毛玻璃 + 滚动后加深 + 底部流光扫过
   - 品牌呼吸辉光
   - 菜单项悬停下划线从中间展开 + 当前页指示点
   - 顶部滚动进度条
   ============================================================ */
.navbar{
  position:sticky; top:0; z-index:1030;
  background:rgba(20,22,26,.72) !important;
  -webkit-backdrop-filter:blur(14px) saturate(160%);
          backdrop-filter:blur(14px) saturate(160%);
  border-bottom:1px solid rgba(0,150,255,.25);
  box-shadow:0 6px 24px rgba(0,0,0,.45);
  transition:background .35s ease, box-shadow .35s ease, border-color .35s ease;
  overflow:hidden;
}
/* 滚动后加深，增强对比 */
body.nav-scrolled .navbar{
  background:rgba(12,14,18,.92) !important;
  border-bottom-color:rgba(0,150,255,.5);
  box-shadow:0 8px 30px rgba(0,0,0,.6), 0 0 18px rgba(0,123,255,.15);
}
/* 底部流光扫过 */
.navbar::after{
  content:""; position:absolute; left:0; bottom:0; height:2px; width:38%;
  background:linear-gradient(90deg, transparent, #0dcaf0, #007bff, transparent);
  animation:gnkaNavSweep 5.5s linear infinite;
}
@keyframes gnkaNavSweep{ from{ transform:translateX(-100%);} to{ transform:translateX(360%);} }

/* 品牌呼吸辉光 */
.navbar-brand{
  font-weight:700; letter-spacing:.5px;
  text-shadow:0 0 10px rgba(0,150,255,.55);
  animation:gnkaBrandGlow 3.2s ease-in-out infinite;
  transition:text-shadow .25s ease, transform .25s ease;
}
.navbar-brand:hover{ transform:translateY(-1px); text-shadow:0 0 18px rgba(0,150,255,.95); }
@keyframes gnkaBrandGlow{
  0%,100%{ text-shadow:0 0 10px rgba(0,150,255,.45); }
  50%    { text-shadow:0 0 20px rgba(0,150,255,.9); }
}

/* 菜单项：下划线从中间展开 */
.navbar .nav-link{
  position:relative; padding-top:.55rem !important; padding-bottom:.55rem !important;
  transition:color .25s ease, text-shadow .25s ease;
}
.navbar .nav-link::after{
  content:""; position:absolute; left:50%; bottom:2px;
  width:0; height:2px; border-radius:2px;
  background:linear-gradient(90deg,#0dcaf0,#007bff);
  box-shadow:0 0 8px rgba(0,150,255,.8);
  transform:translateX(-50%);
  transition:width .3s ease;
}
.navbar .nav-link:hover::after,
.navbar .nav-link.active::after{ width:70%; }
/* 当前页指示点 */
.navbar .nav-link.active{ color:#fff !important; }
.navbar .nav-item{ position:relative; }
.navbar .nav-link.active::before{
  content:""; position:absolute; left:50%; top:-2px; transform:translateX(-50%);
  width:5px; height:5px; border-radius:50%;
  background:#0dcaf0; box-shadow:0 0 8px #0dcaf0;
  animation:gnkaDot 1.8s ease-in-out infinite;
}
@keyframes gnkaDot{ 0%,100%{opacity:.4;} 50%{opacity:1;} }

/* 汉堡按钮微光 */
.navbar-toggler{ border-color:rgba(0,150,255,.4) !important; }
.navbar-toggler:focus{ box-shadow:0 0 0 .2rem rgba(0,123,255,.25) !important; }

/* 顶部滚动进度条 */
#fx-progress{
  position:fixed; top:0; left:0; height:3px; width:0%;
  background:linear-gradient(90deg,#0dcaf0,#007bff);
  box-shadow:0 0 10px rgba(0,150,255,.9);
  z-index:2050; pointer-events:none;
  transition:width .12s linear;
}

/* ============================================================
   追加特效 v6：服务器卡片 / 按钮波纹 / 标题 / 链接 / 入场错峰
   ============================================================ */

/* 服务器状态卡片：顶部细流光 + 悬停更强 */
.card.server-card, .card .server-status, #server-info .card,
.fx-panel{
  position:relative; overflow:hidden;
  transition:transform .25s ease, box-shadow .25s ease, border-color .25s ease;
}
.card.server-card::before, #server-info .card::before, .fx-panel::before{
  content:""; position:absolute; top:0; left:0; right:0; height:2px;
  background:linear-gradient(90deg,transparent,#0dcaf0,#007bff,transparent);
  background-size:200% 100%;
  animation:gnkaCardTop 3.6s linear infinite;
  opacity:.75;
}
.fx-panel:hover{
  transform:translateY(-5px);
  box-shadow:0 12px 30px rgba(0,0,0,.5), 0 0 22px rgba(0,123,255,.4);
  border-color:#0dcaf0 !important;
}
@keyframes gnkaCardTop{ from{ background-position:200% 0;} to{ background-position:-200% 0;} }

/* 在线小圆点脉冲（服务器状态/在线标记） */
.badge.bg-success, .text-success, .online-dot{
  animation:gnkaPulseDot 2s ease-in-out infinite;
}
@keyframes gnkaPulseDot{ 0%,100%{ opacity:1;} 50%{ opacity:.45;} }

/* 按钮点击波纹（JS 动态加 .ripple） */
.btn{ position:relative; overflow:hidden; }
.ripple{
  position:absolute; border-radius:50%; transform:scale(0);
  background:rgba(255,255,255,.55); pointer-events:none;
  animation:gnkaRipple .6s ease-out forwards;
}
@keyframes gnkaRipple{ to{ transform:scale(2.6); opacity:0; } }

/* 页面主标题 / 区块标题微光强调 */
h1, h2{ position:relative; }
body.js-loaded h1{ text-shadow:0 0 18px rgba(0,150,255,.4); }
h2::after{
  content:""; position:absolute; left:0; bottom:-6px; height:2px; width:56px;
  background:linear-gradient(90deg,#0dcaf0,#007bff);
  box-shadow:0 0 10px rgba(0,150,255,.7);
  border-radius:2px;
}

/* 链接箭头微动 */
a[href]:not(.nav-link):not(.navbar-brand):not(.btn):hover::after{ content:" →"; }

/* 入场错峰：reveal 元素按序延迟 */
body.js-loaded [data-reveal].is-visible{ transition-delay:0s; }
.card[data-reveal]{ transition-delay:.05s; }
.row [data-reveal]{ transition-delay:.1s; }

/* 区块 hover 抬升 + 左侧高亮条 */
.container section:hover, section:hover .card-title{ text-shadow:0 0 14px rgba(0,150,255,.5); }

/* 滚动渐显加强：轻微缩放进入 */
body.js-loaded [data-reveal]{ transform:translateY(30px) scale(.985); }
body.js-loaded [data-reveal].is-visible{ transform:none; }

/* ---------- 滚动渐显 ---------- */
body.js-loaded [data-reveal]{
  opacity:0; transform:translateY(30px);
  transition:opacity .7s ease, transform .7s ease;
  will-change:opacity, transform;
}
body.js-loaded [data-reveal].is-visible{ opacity:1; transform:none; }

/* ---------- 入场动画 ---------- */
@keyframes gnkaDrop{ from{opacity:0; transform:translateY(-22px);} to{opacity:1; transform:none;} }
@keyframes gnkaFade{ from{opacity:0;} to{opacity:1;} }
body.js-loaded .navbar{ animation:gnkaDrop .7s ease both; }
body.js-loaded .hero-carousel, body.js-loaded .hero{ animation:gnkaFade 1s ease both; }

/* ---------- 减少动态：只去动画，保留视觉（网格/粒子/按钮辉光仍在） ---------- */
@media (prefers-reduced-motion: reduce){
  body.js-loaded [data-reveal]{ opacity:1 !important; transform:none !important; }
  .card:hover,.btn:hover{ transform:none !important; box-shadow:0 0 18px rgba(0,123,255,.55) !important; }
  .btn-primary,.btn-success,.carousel-content .btn{ animation:none !important; box-shadow:0 0 14px rgba(0,123,255,.6) !important; }
  body.js-loaded .navbar, body.js-loaded .hero-carousel, body.js-loaded .hero{ animation:none !important; opacity:1 !important; }
  body::after{ animation:none !important; }   /* 静态网格，仍可见 */
  .navbar::after{ animation:none; opacity:.5; }  /* 流光停在中段/淡出 */
  .navbar-brand{ animation:none !important; text-shadow:0 0 14px rgba(0,150,255,.8) !important; }
  .navbar .nav-link.active::before{ animation:none !important; opacity:1 !important; }
  #fx-scan{ display:none; }                   /* 仅隐藏移动的扫描带 */
  #fx-bg{ display:block !important; }         /* 粒子仍显示 */
  .navbar::after{ animation:none; opacity:.5; }
  .navbar-brand{ animation:none !important; text-shadow:0 0 14px rgba(0,150,255,.8) !important; }
  .navbar .nav-link.active::before{ animation:none !important; opacity:1 !important; }
  #server-info .card::before, .card.server-card::before, .fx-panel::before{ animation:none !important; }
  .badge.bg-success,.text-success,.online-dot{ animation:none !important; }
  .ripple{ display:none; }
  body.js-loaded [data-reveal]{ transform:none !important; }
}