/* =========================================================
   Cartoon Theme
   Palette: #A8F4FF, #FFCCFF, #A2FCDB, #FCFF7D
   Text & borders: #000000
   ========================================================= */

/* ====== 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] 增加内边距，防止 Fixed 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; }

/* Headings */
.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;
}

/* Scroll Offset - adjusted for fixed header */
#home, #gallery-preview, #projects, #links, #about, #studios { scroll-margin-top: 100px; }

/* ====== Backgrounds ====== */
.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{
  /* [修复2] 使用 Fixed 定位，永远钉在顶部 */
  position:fixed; 
  top:0; 
  left:0;
  width: 100%;
  height: 80px;
  /* [修复1] 层级极高，确保压在灰色遮罩上面 */
  z-index: 5000; 
  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); }

/* Mobile Toggle Base */
.nav-toggle{ display:none; background:none; border:0; cursor:pointer; }

/* 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, box-shadow .12s ease, filter .12s ease;
}
.btn--ghost{ background:#fff; }


.btn:hover{
  transform: translateY(-4px);
  box-shadow: 6px 10px 0 var(--ink);
}

.btn:active{
  transform: translateY(0);
  box-shadow: var(--shadow);
  filter: brightness(.97);
}
/* ====== Layouts ====== */
.about-grid { display: grid; grid-template-columns: 1fr 1fr; gap: var(--gap); align-items: center; }
.about-card { background: #fff; border: 4px solid var(--ink); border-radius: var(--radius); box-shadow: var(--shadow); padding: 24px; }
.about__img { width: 100%; height: auto; border-radius: var(--radius); border: 4px solid var(--ink); box-shadow: var(--shadow); background: #fff; }
@media (max-width: 820px) { .about-grid { grid-template-columns: 1fr; } }

.section__bar{ display:flex; align-items:center; justify-content:space-between; gap:16px; flex-wrap:wrap; margin: 8px 0 20px; }
.section__title--left{ margin:0; }
.section__actions{ display:flex; align-items:center; gap:10px; }
.section__bar + .grid{ margin-top: 6px; }

.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, box-shadow .12s ease, filter .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; }
.studio-cta{ display:flex; justify-content:flex-end; gap:14px; flex-wrap:wrap; margin-top:auto; }

.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); }
.btn--mint{background:#fff5d3;color:#0e2a25}
.btn--amber{background:#bdffba;color:#3a2b00}
@media (max-width: 900px){ .studio-cards, .studio-grid{ grid-template-columns: 1fr; } }

.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, box-shadow .12s ease, filter .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); }



/* =========================================================
   Gallery Preview (Home)
   - preview grid + CTA button
   ========================================================= */
.gallery-preview__grid{
  display:grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: var(--gap);
  align-items: stretch;
  margin-top: 10px;
}

.gallery-preview__item{
  display:block;
  background:#fff;
  border:4px solid var(--ink);
  border-radius:20px;
  box-shadow:var(--shadow);
  overflow:hidden;
  transition:transform .12s ease;
}

.gallery-preview__item:hover{
  transform:translateY(-4px) rotate(-0.5deg);
}

.gallery-preview__item img{
  width:100%;
  height:170px;
  object-fit:cover;
  background:#fff;
  display:block;
}

.gallery-preview__cta{
  text-align:center;
  margin-top: 18px;
}

/* Yellow background + subtle pattern for the gallery preview section */
#gallery-preview{
  background-color: var(--c4);
  position: relative;
  overflow: hidden;
}

/* pattern overlay */
#gallery-preview::before{
  content:"";
  position:absolute;
  inset:0;
  background-repeat: repeat;
  background-size: 160px 160px;
  opacity: .18;
  pointer-events:none;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='160' height='160' viewBox='0 0 160 160'><g fill='none' stroke='%23000' stroke-width='4' stroke-linecap='round' stroke-linejoin='round' opacity='.9'><path d='M20 40 q10 -14 20 0 t20 0 t20 0 t20 0'/><path d='M18 118 q12 10 24 0 t24 0'/><path d='M112 44 q10 12 20 0 t20 0'/></g><g stroke='%23000' stroke-width='4' fill='white'><path d='M55 75 l6 10 l12 2 l-9 8 l2 12 l-11 -6 l-11 6 l2 -12 l-9 -8 l12 -2 z'/><circle cx='126' cy='108' r='8'/><circle cx='34' cy='92' r='6'/></g></svg>");
}

#gallery-preview > *{
  position: relative;
  z-index: 1;
}
/* =========================================================
   [修复版] Background FX - 无缝云朵动画
   ========================================================= */
#about, #projects, #studios, .stripe.s1 { position: relative; overflow: hidden; }
#about > *, #projects > *, #studios > *, .stripe.s1 > * { position: relative; z-index: 1; }

#about { background-color: var(--c1); border-bottom: 3px solid var(--ink); }

/* 通用云朵设置：让宽度填满容器 */
#about::before, #about::after { 
  content: ""; 
  position: absolute; 
  left: 0; 
  right: 0; 
  background-repeat: repeat-x; 
  pointer-events: none; 
}

/* 第一层云朵 (宽320px) */
#about::before { 
  top: 10%; 
  height: 120px; 
  opacity: .9; 
  background-size: 320px 120px; 
  /* [提速] 80s -> 40s */
  animation: cloud-loop-320 3s 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>"); 
}

/* 第二层云朵 (宽260px) */
#about::after { 
  top: 22%; 
  height: 100px; 
  opacity: .7; 
  background-size: 260px 100px; 
  /* [提速] 45s -> 25s */
  animation: cloud-loop-260 5s 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>"); 
}

/* [核心] 定义基于像素的无缝循环动画 */
@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; } 
}

/* 其他背景样式保持不变 */
#projects { background: var(--c3); position: relative; overflow: hidden; }
#projects::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>"); }

.stripe.s1, #studios{ 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; }

#links { background-color: var(--c4); position: relative; overflow: hidden; }
#links::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>"); }
#links > * { position: relative; z-index: 1; }

/* =========================================================
   MOBILE UI REPAIR (FINAL FIX)
   ========================================================= */

@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);
  }
}