/* =====================
   顶部导航栏
===================== */
.navbar{
   position:fixed;
   top:20px;
   left:50%;
   transform:translateX(-50%);
   width:90%;
   height:70px;
   display:flex;
   align-items:center;
   justify-content:space-between;
   padding:0 30px;
   background:
   rgba(20,15,50,.55);
   border:
   1px solid rgba(255,220,120,.35);
   border-radius:40px;
   backdrop-filter:
   blur(20px);
   box-shadow:
   0 0 30px rgba(255,210,100,.15);
   z-index:100;
   animation:
   navShow 1.5s ease;
}
@keyframes navShow{
   from{
      opacity:0;
      transform:
      translateX(-50%)
      translateY(-40px);
   }
   to{
      opacity:1;
      transform:
      translateX(-50%)
      translateY(0);
   }
}
/* 左侧头像 */
.nav-left{
   display:flex;
   align-items:center;
   gap:15px;
}
.avatar{
   width:45px;
   height:45px;
   border-radius:50%;
   object-fit:cover;
   border:
   2px solid #ffd65a;
   box-shadow:
   0 0 15px #ffd65a;
   transition:.4s;
}
.avatar:hover{
   transform:
   scale(1.15)
   rotate(10deg);
}
.author{
   font-size:18px;
   color:#fff;
}
/* 中间Logo */
.nav-center{
   display:flex;
   align-items:center;
   gap:12px;
   font-size:22px;
   font-weight:bold;
   color:#ffd65a;
}
.nav-logo{
   width:45px;
   height:45px;
   border-radius:50%;
   object-fit:cover;
   border:
   2px solid rgba(255,220,120,.8);
   box-shadow:
   0 0 20px #ffd65a;
   animation:
   logoFloat 4s infinite;
}
@keyframes logoFloat{
   50%{
      transform:
      translateY(-5px);
   }
}
/* 右侧菜单 */
.nav-right{
   display:flex;
   gap:30px;
}
.nav-right a{
   text-decoration:none;
   color:white;
   font-size:16px;
   position:relative;
   transition:.3s;
}
.nav-right a::after{
   content:"";
   position:absolute;
   bottom:-8px;
   left:0;
   width:0;
   height:2px;
   background:#ffd65a;
   transition:.3s;
}
.nav-right a:hover{
   color:#ffd65a;
}
.nav-right a:hover::after{
   width:100%;
}
*{
   margin:0;
   padding:0;
   box-sizing:border-box;
   font-family:
   "Microsoft YaHei",
   "Segoe UI",
   sans-serif;
}
body{
   background:
   radial-gradient(
      circle at top,
      #35205c,
      #080010 70%
      );
      color:white;
      overflow-x:hidden;
   }
/* =====================
   天空岛天空背景
===================== */
.sky{
   position:fixed;
   inset:0;
   background:
   linear-gradient(
      180deg,
      rgba(20,10,60,.2),
      rgba(5,0,20,.9)
      ),
      url("../img/sky.png");
      background-size:
      cover;
      background-position:center;
      animation:
      skyMove 30s infinite alternate;
      z-index:-10;
}
@keyframes skyMove{
   from{
      transform:scale(1);
   }
   to{
      transform:scale(1.08);
   }
}
/* =====================
   天空岛云海
===================== */
.cloud{
   position:fixed;
   width:1200px;
   height:400px;
   background:
   url("../img/cloud.png")
   center/
   contain
   no-repeat;
   opacity:.35;
   z-index:-5;
}
.cloud1{
   bottom:5%;
   left:-500px;
   animation:
   cloudMove1 60s linear infinite;
}
.cloud2{
   bottom:20%;
   right:-600px;
   opacity:.25;
   animation:
   cloudMove2 80s linear infinite;
}
.cloud3{
   bottom:-100px;
   left:20%;
   opacity:.2;
   animation:
   cloudMove3 100s linear infinite;
}
@keyframes cloudMove1{
   from{
      transform:translateX(0);
   }
   to{
      transform:translateX(1500px);
   }
}
@keyframes cloudMove2{
   from{
      transform:translateX(0);
   }
   to{
      transform:translateX(-1600px);
   }
}
@keyframes cloudMove3{
   from{
      transform:
      translateX(0)
      scale(1);
   }
   to{
      transform:
      translateX(800px)
      scale(1.2);
   }
}
/* 粒子层 */
#particle{
   position:fixed;
   top:0;
   left:0;
   width:100%;
   height:100%;
   z-index:-3;
}
/* 普通星空 */
.stars{
   position:fixed;
   width:100%;
   height:100%;
   background-image:
   radial-gradient(
      white 1px,
      transparent 1px);
      background-size:
      70px 70px;
      opacity:.18;
      animation:
      starsMove 40s linear infinite;
      z-index:-2;
}
@keyframes starsMove{
   from{
      transform:translateY(0);
   }
   to{
      transform:translateY(150px);
   }
}
/* 金色流光 */
.gold-light{
   position:fixed;
   width:700px;
   height:700px;
   top:50%;
   left:50%;
   transform:
   translate(-50%,-50%);
   background:
   radial-gradient(
      circle,
      rgba(255,220,120,.35),
      transparent 65%
      );
      filter:
      blur(30px);
      animation:
      celestiaGlow 8s infinite;
      z-index:-4;
}
@keyframes celestiaGlow{
   0%,100%{
      opacity:.5;
      transform:
      translate(-50%,-50%) 
      scale(1);
   }
   50%{
      opacity:1;
      transform:
      translate(-50%,-50%)
      scale(1.3);
   }
}
@keyframes lightPulse{
   50%{
      opacity:.4;
      transform:
      translateX(-50%)
      scale(1.3);
   }
}
/* 首屏 */
.hero{
   min-height:100vh;
   display:flex;
   justify-content:center;
   align-items:center;
   text-align:center;
   padding:50px;
   animation:
   fadeIn 2s ease;
}
@keyframes fadeIn{
   from{
      opacity:0;
      transform:translateY(50px);
   }
   to{
      opacity:1;
      transform:none;
   }
}
.container{
   max-width:1100px;
}
.logo{
   width:260px;
   height:260px;
   border-radius:50%;
   object-fit:cover;
   border:
   4px solid rgba(255,215,90,.8);
   box-shadow:
   0 0 40px #ffd65a,
   0 0 100px rgba(255,215,90,.5);
   animation:
   float 4s infinite,
   logoGlow 3s infinite;
}
@keyframes float{
   50%{
      transform:translateY(-20px);
   }
}
@keyframes logoGlow{
   50%{
      filter:
      brightness(1.25);
   }
}
h1{
   font-size:70px;
   margin-top:30px;
   background:
   linear-gradient(
      90deg,
      #fff,
      #ffd65a,
      #fff
      );
      background-size:200%;
      animation:
      titleMove 4s infinite;
      -webkit-background-clip:text;
      color:transparent;
   }
@keyframes titleMove{
   to{
      background-position:200%;
   }
}
.subtitle{
   font-size:25px;
   margin-top:20px;
   color:#ddd;
}
.buttons{
   margin-top:40px;
}
.btn{
   display:inline-block;
   padding:15px 40px;
   margin:10px;
   border-radius:35px;
   text-decoration:none;
   font-size:18px;
   transition:.4s;
   position:relative;
   overflow:hidden;
}
.btn::before{
   content:"";
   position:absolute;
   top:0;
   left:-100%;
   width:100%;
   height:100%;
   background:
   linear-gradient(
      120deg,
      transparent,
      rgba(255,255,255,.5),
      transparent
      );
      transition:.5s;
}
.btn:hover::before{
   left:100%;
}
.github{
   background:#ffd65a;
   color:#241400;
   box-shadow:
   0 0 20px #ffd65a;
}
.download{
   border:
   1px solid #ffd65a;
   color:#ffd65a;
}
.section{
   padding:100px 10%;
   background:
   rgba(255,255,255,.04);
}
.title{
   font-size:40px;
   text-align:center;
   margin-bottom:50px;
}
.cards{
   display:grid;
   grid-template-columns:
   repeat(auto-fit,minmax(250px,1fr));
   gap:30px;
}
.card{
   background:
   rgba(255,255,255,.08);
   border:
   1px solid rgba(255,215,90,.3);
   border-radius:25px;
   padding:30px;
   backdrop-filter:blur(15px);
   transition:.5s;
}
.card:hover{
   transform:
   translateY(-15px)
   scale(1.03);
   box-shadow:
   0 0 40px rgba(255,215,90,.3);
}
.card h3{
   color:#ffd65a;
   margin-bottom:15px;
}
.join-text{
   text-align:center;
   font-size:20px;
}
footer{
   padding:30px;
   text-align:center;
   color:#aaa;
}
/* =====================
   手机端适配
===================== */
@media(max-width:768px){
/* 导航栏 */
.navbar{
   width:95%;
   height:60px;
   padding:0 15px;
   top:10px;
}
/* 隐藏部分菜单 */
.nav-right{
   gap:15px;
}
.nav-right a{
   font-size:14px;
}
/* 主页面 */
.hero{
   padding:
   100px 20px 40px;
}
/* 主Logo */
.logo{
   width:
   200px;
   height:
   200px;
}
/* 标题 */
h1{
   font-size:
   42px;
   line-height:
   1.2;
}
.subtitle{
   font-size:
   18px;
   padding:
   0 20px;
}
/* 按钮 */
.buttons{
   display:flex;
   flex-direction:column;
   align-items:center;
}
.btn{
   width:
   90%;
   max-width:
   320px;
   text-align:center;
}
/* 卡片 */
.cards{
   grid-template-columns:
   1fr;
}
.section{
   padding:
   60px 20px;
}
.title{
   font-size:
   30px;
}
}
.menu-btn{
   display:none;
   font-size:28px;
   color:#ffd65a;
}
@media(max-width:768px){
.menu-btn{
   display:block;
}
.nav-right{
   position:absolute;
   top:70px;
   right:0;
   width:180px;
   display:none;
   flex-direction:column;
   gap:20px;
   padding:25px;
   background:
   rgba(20,15,50,.95);
   border-radius:20px;
   border:
   1px solid rgba(255,215,90,.5);
   box-shadow:
   0 0 30px rgba(255,215,90,.3);
}
.nav-right.active{
   display:flex;
}
}