/* =========================================================
   Cartoon Theme (Projects)
   ========================================================= */

/* ====== Tokens ====== */
:root{
  --c1:#A8F4FF;  /* aqua */
  --c2:#FFCCFF;  /* pink */
  --c3:#A2FCDB;  /* mint */
  --c4:#FCFF7D;  /* lemon */

  --ink:#000000;           /* text & border */
  --radius:18px;           /* rounded corners */
  --gap:18px;              /* grid spacing */
  --shadow:4px 6px 0 var(--ink); /* comic offset shadow */
}

/* ====== Base ====== */
*{ box-sizing:border-box; }
html,body{ height:100%; }

body{
  margin:0;
  color:var(--ink);
  background:var(--c1);
  font-family: Nunito, system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
  font-weight:700;
  /* [修复2] 防止内容被 Header 挡住 */
  padding-top: 80px;
}

img, video{ max-width:100%; height:auto; display:block; }

.container{ width:min(1120px,92%); margin-inline:auto; }
.section{ padding:80px 0; }

.section__title{ font-family:"Baloo 2", cursive; font-weight:800; letter-spacing:.2px; font-size:32px; margin:0 0 16px; line-height:1.1; text-shadow:2px 3px 0 var(--ink); }
.section__lead{ margin:0 0 12px; font-weight:700; text-align:center; }

#home, #projects, #links, #about, #studios { scroll-margin-top: 100px; }

.stripe{ position:relative; isolation:isolate; }
.s1{ background-color:var(--c2); }
.s2{ background-color:var(--c3); }
.s3{ background-color:var(--c4); }
.s4{ background-color:var(--c1); }

/* ====== Header / Nav (CRITICAL FIXES) ====== */
.site-header{
  position:fixed; /* [修复2] */
  top:0; 
  left:0;
  width: 100%;
  height: 80px;
  z-index: 5000; /* [修复1] */
  background:var(--c2);
  border-bottom:3px solid var(--ink);
  box-shadow: 0 4px 10px rgba(0,0,0,0.1);
}

.nav-inner{
  display:flex; align-items:center; justify-content:space-between; gap:16px;
  padding:0 4%;
  height: 100%;
}
.brand{ display:flex; align-items:center; gap:10px; text-decoration:none; color:var(--ink); font-family:"Baloo 2", cursive; font-weight:800; }
.brand__logo{ width:52px; height:52px; border-radius:16px; border:3px solid var(--ink); background:#fff; object-fit:cover; box-shadow:var(--shadow); }
.brand__name{ letter-spacing:.3px; }

.nav{ display:flex; align-items:center; gap:14px; }
.nav__link{ display:inline-block; padding:10px 14px; text-decoration:none; color:var(--ink); background:var(--c4); border:3px solid var(--ink); border-radius:var(--radius); box-shadow:var(--shadow); font-weight:800; }
.nav__link:hover{ transform:translateY(-2px); }
.nav-toggle{ display:none; background:none; border:0; cursor:pointer; }
.nav-toggle__bar{ display:block; width:24px; height:3px; background:var(--ink); margin:5px 0; border-radius:2px; }

/* Buttons */
.btn{ display:inline-block; padding:12px 18px; border:4px solid var(--ink); border-radius:20px; background:var(--c3); color:var(--ink); font-weight:900; text-decoration:none; box-shadow:var(--shadow); transition:transform .12s ease; }
.btn--ghost{ background:#fff; }

/* ====== Grid ====== */
.grid{ display:grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: var(--gap); align-items: stretch; }
.card{ display:flex; flex-direction:column; background:var(--c1); border:4px solid var(--ink); border-radius:24px; overflow:hidden; box-shadow:var(--shadow); transition:transform .12s ease; height:100%; }
.card:hover{ transform:translateY(-4px) rotate(-0.5deg); }
.card__img{ width:100%; height:auto; object-fit:contain; max-height:420px; background:#fff; border-bottom:4px solid var(--ink); flex:0 0 auto; }
.card__body{ padding:14px; display:flex; flex-direction:column; min-height: 220px; flex:1 1 auto; }
.card__title{ margin:6px 0 6px; font-size:20px; font-family:"Baloo 2", cursive; }
.card__desc{ margin:0 0 12px; flex:1; }
.chip{ display:inline-block; padding:8px 12px; background:var(--c4); border:3px solid var(--ink); border-radius:999px; color:var(--ink); text-decoration:none; font-weight:800; box-shadow:var(--shadow); margin-top:auto; align-self:flex-start; }

.studio-cards{ display:grid; grid-template-columns: 1fr 1fr; gap: var(--gap); margin-top: 8px; }
.studio-card{ background:#fff; border:4px solid var(--ink); border-radius:24px; box-shadow:var(--shadow); padding:18px; height:100%; display:flex; }
.studio-grid{ display:grid; grid-template-columns: 1fr 1fr; gap: var(--gap); align-items:start; flex:1 1 auto; min-height:100%; }
.studio-grid__img{ width:100%; border-radius: var(--radius); border: 4px solid var(--ink); box-shadow: var(--shadow); background:#fff; align-self:start; }
.studio-grid > div{ display:flex; flex-direction:column; min-height:100%; }
.studio-card__header{ display:flex; align-items:center; justify-content:space-between; gap:12px; margin:0 0 8px; }
.studio-card__title{ font-family:"Baloo 2", cursive; font-size:22px; margin:0; }
.studio-card__tag{ display:inline-block; padding:6px 10px; background:var(--c4); border:3px solid var(--ink); border-radius:999px; font-weight:900; }
.studio-card__desc{ margin:8px 0 12px; }
.pill-list{ display:flex; flex-wrap:wrap; gap:10px; list-style:none; padding:0; margin:0 0 12px; }
.pill-list li{ padding:8px 12px; background:#fff; border:3px solid var(--ink); border-radius:999px; box-shadow:var(--shadow); font-weight:900; }
.studio-cta{ display:flex; gap:10px; flex-wrap:wrap; margin-top:auto; }

@media (max-width: 900px){ .studio-cards{ grid-template-columns: 1fr; } .studio-grid{ grid-template-columns: 1fr; } }
.studio-cta{ display:flex; justify-content:flex-end; gap:14px; flex-wrap:wrap; }
.studio-cta .btn{ display:inline-flex; align-items:center; justify-content:center; min-width:160px; padding:12px 20px; font-weight:700; text-decoration:none; border:3px solid #000; border-radius:20px; box-shadow:0 6px 0 #000; transform:translateY(0); transition:transform .12s, box-shadow .12s, filter .12s; }
.studio-cta .btn:hover{ transform:translateY(-4px); box-shadow:0 10px 0 #000; }
.studio-cta .btn:active{ transform:translateY(0); box-shadow:0 6px 0 #000; filter:brightness(.97); }
.studio-cta .btn:focus-visible{ outline:2px solid #000; outline-offset:3px; }
.studio-cta .btn:nth-child(1){ background:#fff5d3; color:#0e2a25; }
.studio-cta .btn:nth-child(2){ background:#bdffba; color:#3a2b00; }
@media (max-width: 640px){ .studio-cta{ justify-content:stretch; } .studio-cta .btn{ flex:1 1 100%; min-width:0; } }

.tabs{ display:inline-flex; gap:10px; background:rgba(0,0,0,0.05); padding:6px; border-radius:14px; border:3px solid var(--ink); box-shadow:var(--shadow); }
.tab{ padding:8px 14px; background:var(--c2); color:var(--ink); border:3px solid var(--ink); border-radius:12px; cursor:pointer; font-weight:900; box-shadow:var(--shadow); }
.tab.is-active{ background:var(--c3); }
.social-grid{ margin-top:16px; display:grid; gap:14px; }
.social-panel{ display:none; grid-template-columns:repeat(3, minmax(0,1fr)); gap:12px; }
.social-panel[data-visible="true"]{ display:grid; }
.sbtn{ display:flex; align-items:center; gap:10px; justify-content:center; padding:12px 14px; border:4px solid var(--ink); border-radius:18px; background:var(--c1); color:var(--ink); font-weight:900; text-decoration:none; box-shadow:var(--shadow); transition:transform .12s ease; }
.sbtn:hover{ transform:translateY(-3px) rotate(-0.5deg); }
.sbtn--logo img{ width:22px; height:22px; display:block; filter:none; }

.site-footer{ padding:32px 0; border-top:3px solid var(--ink); }
.site-footer small{ font-weight:800; }
.section, .site-footer { border-top: 4px solid var(--ink); }

/* =========================================================
   [修复版] Backgrounds - 无缝云朵动画
   ========================================================= */
.section.stripe { position: relative; overflow: hidden; }
.section.stripe > * { position: relative; z-index: 1; }

.section.stripe.s4 { 
  background-color: var(--c1); 
  border-bottom: 3px solid var(--ink); 
  padding-top: 180px; 
}

/* 通用云朵设置 */
.section.stripe.s4::before, .section.stripe.s4::after { 
  content: ""; 
  position: absolute; 
  left: 0;
  right: 0; /* 宽度填满 */
  background-repeat: repeat-x; 
  pointer-events: none; 
  z-index: 0; 
}

/* 第一层云朵 (这里是 260px) */
.section.stripe.s4::before { 
  top: 22%; 
  height: 100px; 
  opacity: .7; 
  background-size: 260px 100px; 
  /* [提速] 45s -> 25s */
  animation: cloud-loop-260 3s linear infinite; 
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='260' height='100' viewBox='0 0 260 100'><g fill='white' stroke='%23000' stroke-width='3'><circle cx='30' cy='50' r='18'/><circle cx='54' cy='46' r='22'/><circle cx='82' cy='52' r='18'/><rect x='24' y='52' width='70' height='18' rx='9'/></g></svg>"); 
}

/* 第二层云朵 (这里是 320px) */
.section.stripe.s4::after { 
  top: 10%; 
  height: 120px; 
  opacity: .9; 
  background-size: 320px 120px; 
  /* [提速] 80s -> 40s */
  animation: cloud-loop-320 5s linear infinite; 
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='320' height='120' viewBox='0 0 320 120'><g fill='white' stroke='%23000' stroke-width='4'><circle cx='40' cy='60' r='26'/><circle cx='70' cy='55' r='32'/><circle cx='105' cy='62' r='26'/><rect x='30' y='60' width='90' height='24' rx='12'/></g></svg>"); 
}

@keyframes cloud-loop-320 { 
  0% { background-position-x: 0; } 
  100% { background-position-x: -320px; } 
}
@keyframes cloud-loop-260 { 
  0% { background-position-x: 0; } 
  100% { background-position-x: -260px; } 
}

/* 之前定义的 drift 动画可以不用管了，或者为了兼容性保留 prj-clouds */
@media (max-width: 680px){ .section.stripe.s4{ padding-top: 150px; } }

/* 其他样式保持不变... */
.section.stripe.s2{ background: var(--c3); }
.section.stripe.s2::after{ content:""; position:absolute; left:0; right:0; bottom:0; height:140px; background-repeat: repeat-x; background-size: 300px 140px; background-position: bottom; pointer-events:none; background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='300' height='140'><path d='M0 100 Q75 40, 150 100 T300 100 V140 H0 Z' fill='%23A2FCDB' stroke='%23000' stroke-width='4'/></svg>"); }

.section.stripe.s1{ background-color: var(--c2); border-bottom: 3px solid var(--ink); --cbg-bottle: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='80' height='80' viewBox='0 0 80 80'><rect width='80' height='80' fill='%23FFCCFF'/><g transform='translate(12,10) rotate(-12 28 30)'><g fill='white' stroke='%23000' stroke-width='3'><rect x='8' y='18' width='32' height='34' rx='10'/><rect x='12' y='8' width='24' height='12' rx='6'/></g><g stroke='%23000' stroke-width='3' fill='%23FCFF7D'><path d='M20 4 h8 a6 6 0 0 1 6 6 v4 h-20 v-4 a6 6 0 0 1 6-6z'/></g><g stroke='%23000' stroke-width='3'><line x1='16' y1='26' x2='32' y2='26'/><line x1='16' y1='32' x2='32' y2='32'/><line x1='16' y1='38' x2='32' y2='38'/></g></g></svg>"); background-image: radial-gradient(circle at 20% 10%, rgba(255,255,255,.6), rgba(255,255,255,0) 40%), var(--cbg-bottle); background-size: auto, 80px 80px; }
.section.stripe.s3{ background-color: var(--c4); }
.section.stripe.s3::before{ content:""; position:absolute; inset:0; background-repeat: repeat; background-size: 140px 140px; opacity: .25; pointer-events:none; background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='140' height='140'><circle cx='70' cy='70' r='60' fill='%23FCFF7D' stroke='%23000' stroke-width='4'/><circle cx='70' cy='70' r='50' fill='white' stroke='%23000' stroke-width='3'/><circle cx='70' cy='70' r='46' fill='%23FCFF7D' stroke='%23000' stroke-width='2'/><g stroke='%23000' stroke-width='2'><line x1='70' y1='24' x2='70' y2='116'/><line x1='24' y1='70' x2='116' y2='70'/><line x1='36' y1='36' x2='104' y2='104'/><line x1='104' y1='36' x2='36' y2='104'/></g></svg>"); }

/* =========================================================
   MOBILE UI REPAIR (FINAL FIX)
   ========================================================= */
/* =========================================================
   MOBILE UI REPAIR (FINAL FIX - BURGER IMAGE EDITION)
   ========================================================= */

@media (max-width: 768px) {
  /* 1. 汉堡按钮容器 */
  .nav-toggle {
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 6000;
    position: relative;
    background: none;
    border: 0;
    width: 44px; /* 调整大小以适应图片 */
    height: 44px;
    padding: 0;
    cursor: pointer;
  }

  /* 2. 汉堡图片 (默认显示) */
  .nav-toggle__burger {
    width: 100%;
    height: 100%;
    object-fit: contain;
    display: block;
    transition: opacity 0.3s ease, transform 0.3s ease;
    opacity: 1;
    transform: scale(1) rotate(0deg);
  }

  /* 3. 关闭图标 X (默认隐藏) */
  .nav-toggle__close {
    position: absolute;
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
    transform: scale(0.5) rotate(-90deg);
    transition: opacity 0.3s ease, transform 0.3s ease;
    pointer-events: none;
  }

  .nav-toggle__close span {
    position: absolute;
    display: block;
    width: 28px;
    height: 4px;
    background: var(--ink);
    border-radius: 2px;
  }
  .nav-toggle__close span:nth-child(1) { transform: rotate(45deg); }
  .nav-toggle__close span:nth-child(2) { transform: rotate(-45deg); }

  /* 交互状态切换 */
  .nav-toggle.is-active .nav-toggle__burger {
    opacity: 0;
    transform: scale(0.5) rotate(90deg);
  }
  .nav-toggle.is-active .nav-toggle__close {
    opacity: 1;
    transform: scale(1) rotate(0deg);
  }

  /* 菜单面板 */
  .nav {
    display: flex;
    position: fixed;
    top: 0;
    right: 0;
    width: 260px;
    height: 100vh;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    background: var(--c2);
    border-left: 4px solid var(--ink);
    box-shadow: -10px 0 0 rgba(0,0,0,0.1);
    transform: translateX(110%);
    transition: transform 0.3s cubic-bezier(0.165, 0.84, 0.44, 1);
    z-index: 5500; 
  }
  .nav.is-open { transform: translateX(0); }

  /* 遮罩层 */
  .nav-overlay {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.6);
    backdrop-filter: blur(3px);
    display: none;
    z-index: 4500; 
  }
  .nav-overlay.is-visible { display: block; }
  
  /* 链接样式 */
  .nav__link {
    position: relative;
    z-index: 1;
    width: 80%;
    margin: 12px 0;
    text-align: center;
    background: var(--c4);
    padding: 12px;
    border: 3px solid var(--ink);
    border-radius: 15px;
    box-shadow: 4px 4px 0 var(--ink);
  }
}