/* === Minimal CSS: Grid Background + Header Coloring === */

/* 字体设置（可选） */
body {
  font-family: "Segoe UI", "PingFang SC", "Microsoft YaHei", sans-serif;
  background-color: #fafafa;
  background-image:
    linear-gradient(rgba(0, 0, 0, 0.04) 1px, transparent 1px),
    linear-gradient(90deg, rgba(0, 0, 0, 0.04) 1px, transparent 1px);
  background-size: 28px 28px;
  background-attachment: fixed;
  margin: 0;
  padding: 0;
}

/* 顶部导航栏保持基础风格 */
.header-wrapper {
  background: linear-gradient(to right, #f0f4ff, #ffffff);
  border-bottom: 2px solid rgba(0, 0, 0, 0.05);
  position: sticky;
  top: 0;
  z-index: 999;
}

.menu-item a {
  display: inline-block;
  padding: 10px 16px;
  color: #1f2937;
  font-weight: 500;
  border-radius: 6px;
  transition: background 0.2s ease, color 0.2s ease;
}

.menu-item a:hover {
  background: rgba(59, 130, 246, 0.1);
  color: #3b82f6;
}

/* 底部波浪效果 */
.footer{position:relative;z-index:3;background:transparent;}

/* ========== 第①层（深色主浪） ========== */
.footer::before{
  content:"";position:fixed;left:0;bottom:-40px;
  width:100%;height:180px;
  background-size:1200px 180px;background-position:0 100%;background-repeat:repeat-x;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1200 140'%3E%3Cpath fill='%2393c5fd' d='M0 80 C200 10 400 10 600 80 S1000 150 1200 80 V140 H0 Z'/%3E%3C/svg%3E");
  opacity:.55;pointer-events:none;z-index:1;
  animation:waveX 22s linear infinite,
           waveY 6s ease-in-out infinite alternate;
}

/* ========== 第②层（中浅浪） ========== */
.footer::after{
  content:"";position:fixed;left:0;bottom:-40px;
  width:100%;height:180px;
  background-size:1200px 140px;background-position:0 100%;background-repeat:repeat-x;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1200 140'%3E%3Cpath fill='%2393c5fd' d='M0 80 C200 10 400 10 600 80 S1000 150 1200 80 V140 H0 Z'/%3E%3C/svg%3E");
  opacity:.4;pointer-events:none;z-index:1;
  animation:waveXrev 28s linear infinite reverse,
           waveY2   5s ease-in-out infinite alternate;
}

/* ========== 第③层（最浅慢浪） ========== */
body::after{
  content:"";position:fixed;left:0;bottom:-40px; /* fixed ⇒ 随滚动常驻底部 */
  width:100%;height:180px;
  background-size:1200px 140px;background-position:0 100%;background-repeat:repeat-x;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1200 140'%3E%3Cpath fill='%2393c5fd' d='M0 80 C200 10 400 10 600 80 S1000 150 1200 80 V140 H0 Z'/%3E%3C/svg%3E");
  opacity:.25;pointer-events:none;z-index:0;       /* 在最底层 */
  animation:waveX 38s linear infinite,
           waveY3 7s ease-in-out infinite alternate;
}

/*—————————— 关键帧 ——————————*/
@keyframes waveX    {from{background-position-x:0;} to{background-position-x:-1200px;}}
@keyframes waveXrev {from{background-position-x:0;} to{background-position-x: 1200px;}}

@keyframes waveY  {from{transform:translateY(10px);} to{transform:translateY(-10px);} }
@keyframes waveY2 {from{transform:translateY( 4px);} to{transform:translateY(-14px);} }
@keyframes waveY3 {from{transform:translateY( 2px);} to{transform:translateY(- 8px);} }