/* =====================================================
   Griffin Federal Republic - Base UI System
   version: 1.0
   ===================================================== */

/* ========== 全局重置 ========== */

*{
box-sizing:border-box;
margin:0;
padding:0;
}

html{
scroll-behavior:smooth;
}

body{
font-family:"PingFang TC","Microsoft JhengHei",
"Noto Sans TC", Arial, sans-serif;
color:#222;
background:#07101f;
overflow-x:hidden;
}

/* ========== 背景系统 ========== */

body::before{
content:"";
position:fixed;
inset:0;

background:
linear-gradient(rgba(20,35,70,.45),rgba(0,0,0,.55)),
url("background.png");

background-size:cover;
background-position:center;
filter:brightness(1.15);
z-index:-2;
}

body::after{
content:"";
position:fixed;
inset:0;

background:
radial-gradient(circle at top,rgba(100,170,255,.35),transparent 45%);

animation:gf-glow 8s infinite alternate;
z-index:-1;
}

@keyframes gf-glow{
from{opacity:.4;}
to{opacity:.9;}
}

/* ========== 页面进入动画 ========== */

body{
animation:gf-pageIn .8s ease;
}

@keyframes gf-pageIn{
from{opacity:0;}
to{opacity:1;}
}

/* ========== 文字基础 ========== */

h1,h2,h3{
color:#273c75;
}

p{
line-height:1.8;
}

/* ========== 导航系统（基础层） ========== */

nav{
position:sticky;
top:0;
z-index:20;

display:flex;
justify-content:center;
gap:10px;

padding:16px 10px;

background:rgba(255,255,255,.82);
backdrop-filter:blur(22px);
}

/* 导航按钮基础 */

nav a{
position:relative;
padding:10px 18px;
border-radius:12px;

text-decoration:none;
color:#273c75;
font-weight:bold;

transition:.25s;

overflow:hidden;

/* 入场动画 */
opacity:0;
animation:gf-menuIn .6s ease forwards;
transform:translateY(-10px);
}

/* 逐个延迟 */
nav a:nth-child(1){animation-delay:.05s;}
nav a:nth-child(2){animation-delay:.10s;}
nav a:nth-child(3){animation-delay:.15s;}
nav a:nth-child(4){animation-delay:.20s;}
nav a:nth-child(5){animation-delay:.25s;}

@keyframes gf-menuIn{
to{
opacity:1;
transform:translateY(0);
}
}

/* hover滑动效果 */

nav a::before{
content:"";
position:absolute;
inset:0;

background:linear-gradient(90deg,rgba(64,115,158,.18),rgba(64,115,158,.05));
transform:translateX(-100%);
transition:.35s;
z-index:-1;
border-radius:12px;
}

nav a:hover::before{
transform:translateX(0);
}

nav a:hover{
transform:translateY(-2px);
color:#1e3a8a;
}

nav a:active{
transform:scale(.92);
}

nav a.active{
background:rgba(64,115,158,.18);
}

/* ========== 按钮系统 ========== */

.button{
display:inline-block;
padding:12px 30px;
border-radius:30px;

background:#273c75;
color:white;
text-decoration:none;

transition:.3s;
}

.button:hover{
transform:scale(1.08);
}

/* ========== 卡片基础 ========== */

.card{
background:rgba(255,255,255,.92);
backdrop-filter:blur(20px);
border-radius:25px;
padding:35px;

box-shadow:0 20px 60px rgba(0,0,0,.3);

transition:.4s;
}

.card:hover{
transform:translateY(-10px);
}

/* ========== 社交图标 ========== */

.social{
display:flex;
gap:25px;
}

.social a{
width:60px;
height:60px;

border-radius:50%;
background:white;

display:flex;
align-items:center;
justify-content:center;

transition:.35s;
box-shadow:0 10px 30px rgba(0,0,0,.35);
}

.social a:hover{
transform:translateY(-8px) scale(1.1);
}

.social img{
width:32px;
height:32px;
}

/* ========== footer ========== */

footer{
background:#050505;
color:white;
text-align:center;
padding:40px;
}

/* ========== 工具类 ========== */

.fade-in{
animation:gf-fadeIn .8s ease;
}

@keyframes gf-fadeIn{
from{opacity:0; transform:translateY(20px);}
to{opacity:1; transform:translateY(0);}
}