/* style.css */
@import url('https://cdn.jsdelivr.net/npm/font-awesome@4.7.0/css/font-awesome.min.css');

:root {
    --cyber-dark:#050b18;
    --cyber-bg:#0a1020;
    --cyber-card:#0f1a30;
    --cyber-primary:#0099ff;
    --cyber-glow:#00ccff;
    --cyber-text:#c5e1ff;
}

*{box-sizing:border-box;margin:0;padding:0;}
body{
    font-family: "JetBrains Mono",Consolas,monospace;
    background-color: var(--cyber-dark);
    color: var(--cyber-text);
    min-height:100vh;
    overflow-x:hidden;
}

/* 导航栏 */
.navbar{
    position:sticky;
    top:0;
    z-index:999;
    background:rgba(15, 26, 48, 0.72);
    backdrop-filter: blur(14px);
    -webkit-backdrop-filter: blur(14px);
    border-bottom:1px solid rgba(0,153,255,0.22);
}
.navbar-container{
    max-width:1200px;
    margin:0 auto;
    padding:0 1rem;
    display:flex;
    justify-content:space-between;
    align-items:center;
    height:64px;
}
.navbar-logo{
    font-size:1.25rem;
    color:var(--cyber-glow);
    text-shadow:0 0 8px rgba(0,204,255,0.6);
    font-weight:bold;
}
.nav-links{
    display:flex;
    gap:1.2rem;
}
.nav-links a{
    color:var(--cyber-text);
    text-decoration:none;
    font-size:0.9rem;
    padding:6px 10px;
    border-radius:4px;
    transition:0.25s;
}
.nav-links a:hover, .nav-links a.active{
    background:rgba(0,153,255,0.18);
    color:var(--cyber-glow);
}

/* 容器 */
.container{
    max-width:1100px;
    margin:0 auto;
    padding:2rem 1rem;
}

/* 玻璃卡片 */
.glass{
    background: rgba(15, 26, 48, 0.65);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    border: 1px solid rgba(0, 153, 255, 0.2);
    border-radius:12px;
}
.glow-border{
    box-shadow: 0 0 12px rgba(0, 153, 255, 0.35);
}
.text-glow{
    text-shadow: 0 0 8px rgba(0, 204, 255, 0.6);
}
.page-card{
    padding:2rem;
    margin-bottom:1.8rem;
}

/* 标签tag */
.tag{
    display:inline-block;
    background:rgba(0,153,255,0.15);
    padding:4px 8px;
    border-radius:4px;
    font-size:0.85rem;
    margin:0.2rem;
}

/* 时间线 */
.timeline-wrap{
    border-left:2px solid rgba(0,153,255,0.4);
    padding-left:1.4rem;
    position:relative;
    margin-bottom:2rem;
}
.timeline-dot{
    width:12px;height:12px;
    background:var(--cyber-glow);
    border-radius:50%;
    position:absolute;
    left:-7px;
    top:4px;
}

/* 粒子画布 */
#bgCanvas{
    position:fixed;
    inset:0;
    width:100%;
    height:100%;
    z-index:-1;
}

/* 页脚 */
footer{
    text-align:center;
    color:rgba(197,225,255,0.55);
    font-size:0.85rem;
    padding:2rem 0;
}

/* 滚动条 */
::-webkit-scrollbar {width:6px}
::-webkit-scrollbar-track {background:#050b18}
::-webkit-scrollbar-thumb {background:#0099ff;border-radius:3px}

/* 响应式导航简单适配 */
@media(max-width:768px){
    .nav-links{gap:0.4rem;}
    .nav-links a{padding:4px 6px;font-size:0.78rem;}
}



/* ========== 迪迦悬浮按钮 & dj.png放大动画 ========== */
.diga-float-btn {
  position: fixed;
  right: 16px;
  top: 50%;
  transform: translateY(-50%);
  z-index: 9999;
  width: 52px;
  height: 52px;
  border-radius: 50%;
  border: 1px solid var(--cyber-glow);
  background-color: rgba(0,153,255,0.22);
  backdrop-filter: blur(8px);
  color: var(--cyber-glow);
  font-size:22px;
  cursor: pointer;
  box-shadow: 0 0 14px rgba(0,204,255,0.45);
  transition: all 0.25s ease-out;
  display:flex;
  align-items:center;
  justify-content:center;
}
.diga-float-btn:hover{
  transform: translateY(-50%) scale(1.12);
  box-shadow: 0 0 22px rgba(0,204,255,0.7);
}

/*迪迦图片遮罩层 半透明背景*/
.diga-mask{
  position:fixed;
  inset:0;
  background:rgba(0, 0, 0, 0.65);  /*半透明黑色，可以修改0.65调整透明度，数值越大越暗*/
  z-index:10000;
  display:none;
  align-items:center;
  justify-content:center;
}
.diga-mask.active{
  display:flex;
}

.diga-img{
  max-width:90vw;
  max-height:90vh;
}

@keyframes digaZoom {
  0% {
    transform: scale(0.01);
    opacity: 1;
  }
  75% {
    transform: scale(5);
    opacity: 1;
  }
  100% {
    transform: scale(8);
    opacity: 0;
  }
}