/* ==========================================================================
 * 本樱动漫社 · 全站共享样式表
 * --------------------------------------------------------------------------
 * 文件位置 : assets/css/style.css
 * 作用范围 : 所有页面（首页 / 5 个板块页 / 关于 / 联系 / 404）
 *
 * 目录大纲 :
 *   1. 设计变量（:root）        —— 全站配色 / 玻璃拟态参数，改色只动这里
 *   2. 基础重置与排版           —— *、body、标题、链接
 *   3. 通用工具类               —— .container / .glass / .accent / .btn
 *   4. 飘落樱花特效             —— 首页与各页面背景装饰
 *   5. 玻璃导航栏               —— 桌面端横排 + 移动端抽屉
 *   6. Hero 主视觉              —— 首页大图标题区
 *   7. 内页页头（page-hero）    —— 板块页 / 关于 / 联系 顶部横幅
 *   8. 首页：社团介绍 + 数据    —— .about / .stats
 *   9. 首页：板块入口卡片       —— .dept-grid
 *  10. 大图视差板块（.feature） —— 首页 5 连板块长图
 *  11. 正文内容组件            —— .prose / .gallery / .timeline / .faq
 *  12. （联系页表单已移除，无后端不设留言功能）
 *  13. 页脚                    —— 全站统一
 *  14. 首页宣传片板块          —— .video-embed 内嵌播放器
 *  15. 进场动画（.reveal）      —— 滚动渐显
 *  16. 响应式（移动端）          —— @media max-width: 860px
 * ========================================================================== */


/* ---------- 1. 设计变量：全站配色集中管理，换主题只改这里 ---------- */
:root{
  --pink:#ffb7d5;               /* 主色 · 樱花粉 */
  --pink-deep:#ff8fbe;          /* 强调 · 深粉 */
  --violet:#c9b6ff;             /* 辅助 · 紫 */
  --blue:#8fd0ff;               /* 点缀 · 蓝 */
  --ink:#2b2333;                /* 文字深色底 */
  --bg:#1b1526;                 /* 页面底色 · 深紫黑 */
  --bg-alt:#221a30;             /* 次级区块底色 */
  --glass-bg:rgba(255,255,255,.12);        /* 玻璃面片底色 */
  --glass-bg-strong:rgba(255,255,255,.18); /* 玻璃面片 hover 底色 */
  --glass-border:rgba(255,255,255,.35);    /* 玻璃描边 */
  --glass-shadow:0 8px 32px rgba(80,40,90,.18); /* 玻璃投影 */
  --text:#fdf8ff;               /* 主文字 */
  --text-dim:rgba(253,248,255,.82); /* 次级文字 */
  --nav-h:64px;                 /* 导航栏高度，JS 滚动偏移会用到 */
}


/* ---------- 2. 基础重置与排版 ---------- */
*{margin:0;padding:0;box-sizing:border-box}
html{
  scroll-behavior:smooth;       /* 锚点平滑滚动 */
  /* 滚动定位时预留固定导航的高度，防止标题被导航遮住 */
  scroll-padding-top:calc(var(--nav-h) + 12px);
}
body{
  font-family:"PingFang SC","Microsoft YaHei","Noto Sans SC","Hiragino Sans GB",sans-serif;
  color:var(--text);
  background:var(--bg);
  overflow-x:hidden;
  -webkit-font-smoothing:antialiased;
}
img{max-width:100%;display:block}
a{text-decoration:none;color:inherit}
ul{list-style:none}
/* 页面主体：留出顶部导航高度，避免内容被固定导航盖住 */
.page-main{padding-top:var(--nav-h)}


/* ---------- 3. 通用工具类 ---------- */
.container{width:min(1180px,92%);margin:0 auto}

/* 玻璃拟态面片：全站卡片通用的半透明毛玻璃效果 */
.glass{
  background:var(--glass-bg);
  border:1px solid var(--glass-border);
  border-radius:24px;
  box-shadow:var(--glass-shadow);
  backdrop-filter:blur(18px) saturate(150%);
  -webkit-backdrop-filter:blur(18px) saturate(150%);
}

/* 渐变文字（粉→紫→蓝），用于标题里需要强调的词 */
.accent{
  background:linear-gradient(120deg,var(--pink),var(--violet),var(--blue));
  -webkit-background-clip:text;
  background-clip:text;
  color:transparent;
}

/* 通用按钮：实心渐变按钮 + 描边幽灵按钮两种形态 */
.btn{
  display:inline-block;
  padding:12px 30px;
  border-radius:999px;
  font-size:15px;
  letter-spacing:2px;
  transition:transform .3s,box-shadow .3s,background .3s;
}
.btn-primary{
  background:linear-gradient(120deg,var(--pink-deep),var(--violet));
  color:#2b1530;font-weight:700;
  box-shadow:0 6px 22px rgba(255,143,190,.35);
}
.btn-primary:hover{transform:translateY(-3px);box-shadow:0 10px 30px rgba(255,143,190,.55)}
.btn-ghost{
  border:1px solid var(--glass-border);
  background:var(--glass-bg);
  backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);
}
.btn-ghost:hover{transform:translateY(-3px);background:var(--glass-bg-strong)}


/* ---------- 4. 飘落樱花特效：纯 CSS 动画，JS 不参与，性能友好 ---------- */
.petals{position:fixed;inset:0;pointer-events:none;z-index:5;overflow:hidden}
.petals span{
  position:absolute;top:-8vh;
  width:14px;height:11px;
  background:radial-gradient(circle at 30% 30%,#ffd9ea,var(--pink-deep));
  border-radius:80% 10% 80% 10%;
  opacity:.7;
  animation:fall linear infinite;
}
/* 18 片花瓣：各自固定水平位置 / 下落时长 / 延迟，营造随机感 */
.petals span:nth-child(1){left:4%;animation-duration:14s;animation-delay:0s;transform:scale(.9)}
.petals span:nth-child(2){left:10%;animation-duration:18s;animation-delay:3s;transform:scale(.7)}
.petals span:nth-child(3){left:16%;animation-duration:12s;animation-delay:6s}
.petals span:nth-child(4){left:22%;animation-duration:20s;animation-delay:1s;transform:scale(1.2)}
.petals span:nth-child(5){left:29%;animation-duration:15s;animation-delay:8s;transform:scale(.8)}
.petals span:nth-child(6){left:36%;animation-duration:19s;animation-delay:2s}
.petals span:nth-child(7){left:43%;animation-duration:13s;animation-delay:9s;transform:scale(1.1)}
.petals span:nth-child(8){left:50%;animation-duration:17s;animation-delay:4s;transform:scale(.75)}
.petals span:nth-child(9){left:57%;animation-duration:21s;animation-delay:0s}
.petals span:nth-child(10){left:63%;animation-duration:14s;animation-delay:7s;transform:scale(.85)}
.petals span:nth-child(11){left:70%;animation-duration:18s;animation-delay:5s}
.petals span:nth-child(12){left:76%;animation-duration:12s;animation-delay:10s;transform:scale(1.15)}
.petals span:nth-child(13){left:82%;animation-duration:16s;animation-delay:2s;transform:scale(.65)}
.petals span:nth-child(14){left:88%;animation-duration:20s;animation-delay:6s}
.petals span:nth-child(15){left:93%;animation-duration:15s;animation-delay:11s;transform:scale(.95)}
.petals span:nth-child(16){left:7%;animation-duration:22s;animation-delay:12s;transform:scale(1.05)}
.petals span:nth-child(17){left:33%;animation-duration:16s;animation-delay:13s}
.petals span:nth-child(18){left:66%;animation-duration:23s;animation-delay:14s;transform:scale(.7)}
@keyframes fall{
  0%{top:-8vh;transform:translateX(0) rotate(0deg)}
  25%{transform:translateX(4vw) rotate(90deg)}
  50%{transform:translateX(-2vw) rotate(180deg)}
  75%{transform:translateX(3vw) rotate(260deg)}
  100%{top:108vh;transform:translateX(0) rotate(360deg)}
}


/* ---------- 5. 玻璃导航栏 ---------- */
.nav{
  position:fixed;top:0;left:0;right:0;z-index:50; /* 固定悬浮在所有内容之上 */
  height:var(--nav-h);
  transition:background .4s,box-shadow .4s;
}
/* 向下滚动超过 40px 后（JS 加 .scrolled 类）导航加深成毛玻璃 */
.nav.scrolled{
  background:rgba(30,22,44,.55);
  backdrop-filter:blur(16px) saturate(160%);
  -webkit-backdrop-filter:blur(16px) saturate(160%);
  box-shadow:0 4px 24px rgba(0,0,0,.25);
}
.nav-inner{
  width:min(1180px,94%);margin:0 auto;height:100%;
  display:flex;align-items:center;justify-content:space-between;
}
.logo{display:flex;align-items:center;gap:10px}
.logo-mark{font-size:26px;filter:drop-shadow(0 2px 6px rgba(255,143,190,.6))}
/* 社徽 logo：导航与页脚共用的小圆图 */
.logo-img{
  width:34px;height:34px;border-radius:50%;object-fit:cover;display:block;
  border:1px solid var(--glass-border);
  box-shadow:0 2px 8px rgba(255,143,190,.5);
}
.footer-logo-img{
  width:30px;height:30px;border-radius:50%;object-fit:cover;
  display:inline-block;vertical-align:-7px;margin-right:8px;
  border:1px solid var(--glass-border);
}
.logo-text{font-size:20px;font-weight:700;letter-spacing:2px}
.nav-links{display:flex;align-items:center;gap:26px}
.nav-links a{
  font-size:15px;color:var(--text-dim);
  position:relative;padding:6px 2px;transition:color .3s;
}
/* 链接下方的渐变下划线：hover 时从左到右展开 */
.nav-links a::after{
  content:"";position:absolute;left:0;bottom:0;height:2px;width:0;
  background:linear-gradient(90deg,var(--pink),var(--violet));
  border-radius:2px;transition:width .3s;
}
.nav-links a:hover{color:#fff}
.nav-links a:hover::after{width:100%}
/* 当前页面所在导航项高亮（各页面自己给对应链接加 .active） */
.nav-links a.active{color:#fff}
.nav-links a.active::after{width:100%}
.nav-links .btn{font-size:13px;padding:8px 20px}
/* 汉堡按钮：仅移动端显示 */
.nav-toggle{display:none;flex-direction:column;gap:5px;background:none;border:0;cursor:pointer;padding:6px}
.nav-toggle span{width:24px;height:2px;background:#fff;border-radius:2px;transition:.3s}


/* ---------- 5c. 浅底 Hero 专用导航配色（仅首页 body.hero-light） ----------
 * 首页大图换成浅粉色后，顶部导航在「未滚动」状态下换深色文字保证可读；
 * 滚动超过 40px 后恢复默认的毛玻璃深色样式（.scrolled 由 main.js 控制）。 */
body.hero-light .nav:not(.scrolled){--text-dim:rgba(91,40,74,.85)}
body.hero-light .nav:not(.scrolled) .logo-text{color:#7a205a}
body.hero-light .nav:not(.scrolled) .nav-links a{color:rgba(91,40,74,.85)}
body.hero-light .nav:not(.scrolled) .nav-links a:hover{color:#7a205a}
body.hero-light .nav:not(.scrolled) .nav-toggle span{background:#7a205a}
/* 幽灵按钮在浅底 Hero 上：深色文字 */
body.hero-light .hero .btn-ghost{color:#7a205a;border-color:rgba(122,32,90,.4);background:rgba(255,255,255,.55)}


/* ---------- 6. Hero 主视觉（仅首页） ---------- */
.hero{position:relative;min-height:100vh;display:flex;align-items:center;justify-content:center;overflow:hidden}
/* 背景图缓慢缩放呼吸；只作用于 hero，feature 板块的背景位移交给 JS 视差，互不冲突 */
.hero-bg{
  position:absolute;inset:-4%;
  /* ?v=2 是缓存版本号：下次换图时把数字 +1，老访客立即看到新图 */
  background:url("../img/hero.jpg?v=4") center/cover no-repeat;
  animation:heroZoom 22s ease-in-out infinite alternate;
}
@keyframes heroZoom{from{transform:scale(1)}to{transform:scale(1.08)}}
.hero-overlay{
  position:absolute;inset:0;
  /*
   * 适配说明：首页大图换成社团原创浅粉图后，遮罩从「深色压暗」改为「轻提亮」：
   * 上方保持粉色通透，底部渐落到网站底色 #1b1526，滚动时无缝衔接深色主题。
   */
  background:
    radial-gradient(ellipse at 30% 45%,rgba(255,255,255,.28),transparent 55%),
    linear-gradient(180deg,rgba(255,183,213,.12) 0%,rgba(255,183,213,.05) 40%,rgba(27,21,38,.35) 78%,#1b1526 100%);
}
/*
 * 浅粉大图的配色适配：文字全部换成深色系保证对比度，
 * 内容左对齐，把画面右侧的看板娘露出来。
 */
.hero-content{
  position:relative;z-index:2;
  width:min(1180px,92%);margin:0 auto;
  text-align:left;padding:120px 0 80px;
}
.hero-kicker{
  font-size:15px;letter-spacing:6px;color:#c2427f;font-weight:700;
  text-shadow:0 1px 8px rgba(255,255,255,.6);margin-bottom:22px;
}
.hero-title{
  font-size:clamp(48px,9vw,104px);font-weight:800;letter-spacing:.08em;
  line-height:1.1;margin-bottom:26px;
  text-shadow:0 2px 18px rgba(255,255,255,.5);
}
/* 浅底用深粉→深紫渐变文字（原来是白→粉，浅底上看不清） */
.hero-title span{
  background:linear-gradient(160deg,#a1206b 5%,#d63384 55%,#7b4fd0 95%);
  -webkit-background-clip:text;background-clip:text;color:transparent;
  display:inline-block;
}
.hero-sub{
  font-size:clamp(15px,2vw,19px);line-height:2;color:#5b3a52;font-weight:500;
  margin-bottom:34px;text-shadow:0 1px 6px rgba(255,255,255,.55);
}
.hero-badges{display:flex;flex-wrap:wrap;gap:12px}
/* 徽章：浅底上的玻璃片换成白底深字 */
.hero-badges .badge{
  color:#8a2f63;font-weight:600;
  background:rgba(255,255,255,.65);border:1px solid rgba(255,143,190,.6);
  backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);
  box-shadow:0 4px 18px rgba(255,143,190,.35);
}
.hero-badges .badge:hover{transform:translateY(-3px);box-shadow:0 8px 26px rgba(255,143,190,.55)}
.hero-cta{display:flex;gap:16px;margin-top:36px}

/* 底部滚动提示：小鼠标图标，滚轮点上下滚动（浅底上换深色边框） */
.scroll-hint{position:absolute;bottom:34px;left:50%;transform:translateX(-50%);z-index:2}
.mouse{
  display:block;width:26px;height:42px;border:2px solid rgba(122,32,90,.55);
  border-radius:14px;position:relative;
}
.wheel{
  position:absolute;top:7px;left:50%;margin-left:-2px;width:4px;height:8px;
  background:#a1206b;border-radius:2px;animation:wheel 1.6s ease-in-out infinite;
}
@keyframes wheel{0%{opacity:1;transform:translateY(0)}70%{opacity:0;transform:translateY(12px)}100%{opacity:0}}


/* ---------- 7. 内页页头：板块页 / 关于 / 联系 顶部统一横幅 ---------- */
.page-hero{
  position:relative;
  min-height:52vh;
  display:flex;align-items:center;justify-content:center;
  text-align:center;
  overflow:hidden;
}
.page-hero-bg{
  position:absolute;inset:-4%;
  background-size:cover;background-position:center;
  animation:heroZoom 22s ease-in-out infinite alternate;
}
.page-hero-mask{
  position:absolute;inset:0;
  background:linear-gradient(180deg,rgba(27,21,38,.55) 0%,rgba(27,21,38,.35) 45%,var(--bg) 100%);
}
.page-hero-content{position:relative;z-index:2;padding:100px 20px 60px}
.page-hero-kicker{
  font-size:13px;letter-spacing:5px;color:var(--pink);margin-bottom:16px;
  text-shadow:0 2px 12px rgba(255,143,190,.5);
}
.page-hero-title{
  font-size:clamp(36px,7vw,72px);font-weight:800;letter-spacing:.1em;
  text-shadow:0 6px 40px rgba(180,120,255,.45);
}
.page-hero-sub{
  margin-top:18px;font-size:clamp(14px,1.8vw,17px);line-height:2;color:var(--text-dim);
}


/* ---------- 8. 首页：社团介绍 + 数据 ---------- */
.section{padding:110px 0}
.section-title{
  font-size:clamp(30px,4.5vw,44px);font-weight:800;letter-spacing:4px;margin-bottom:28px;
}
.section-head{text-align:center;margin-bottom:56px}
.section-desc{max-width:44em;margin:0 auto;color:var(--text-dim);line-height:2}

/* 「关于」区块：深色底 + 两团彩色氛围光 */
.about{background:
  radial-gradient(1200px 500px at 15% 20%,rgba(201,182,255,.16),transparent 60%),
  radial-gradient(1000px 500px at 85% 80%,rgba(255,183,213,.14),transparent 60%),
  var(--bg-alt);
}
.about-panel{padding:56px 60px}
.about-text{font-size:16px;line-height:2.2;color:var(--text-dim);max-width:52em}

/* 数据统计：4 宫格玻璃卡片；数字由 JS 滚动计数（data-count 属性） */
.stats{display:grid;grid-template-columns:repeat(4,1fr);gap:20px;margin-top:44px}
.stat{
  text-align:center;padding:26px 10px;border-radius:18px;
  background:var(--glass-bg);border:1px solid var(--glass-border);
  backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);
  transition:transform .35s;
}
.stat:hover{transform:translateY(-6px)}
.stat-num{
  font-size:clamp(30px,4vw,42px);font-weight:800;
  background:linear-gradient(120deg,var(--pink),var(--violet));
  -webkit-background-clip:text;background-clip:text;color:transparent;
}
.stat-label{margin-top:8px;font-size:13px;color:var(--text-dim);letter-spacing:1px}


/* ---------- 9. 首页：板块入口卡片（5 个板块点进去是各自详情页） ---------- */
.dept-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:24px}
.dept-card{
  position:relative;display:block;overflow:hidden;
  border-radius:24px;border:1px solid var(--glass-border);
  min-height:340px;
  transition:transform .4s,box-shadow .4s;
}
.dept-card:hover{transform:translateY(-8px);box-shadow:0 18px 48px rgba(255,143,190,.3)}
.dept-card-img{
  position:absolute;inset:0;
  background-size:cover;background-position:center;
  transition:transform .6s;
}
.dept-card:hover .dept-card-img{transform:scale(1.08)}
.dept-card-mask{
  position:absolute;inset:0;
  background:linear-gradient(180deg,rgba(27,21,38,.05) 30%,rgba(27,21,38,.92) 100%);
}
.dept-card-body{position:absolute;left:0;right:0;bottom:0;padding:28px}
.dept-card-index{font-size:12px;letter-spacing:4px;color:var(--pink);margin-bottom:8px}
.dept-card-title{font-size:24px;font-weight:800;letter-spacing:2px;margin-bottom:10px}
.dept-card-desc{font-size:13.5px;line-height:1.9;color:var(--text-dim);margin-bottom:14px}
.dept-card-more{
  font-size:13px;letter-spacing:2px;color:var(--pink);
  display:inline-flex;align-items:center;gap:6px;
}
/* 卡片右下角「→」箭头，hover 时右移 */
.dept-card-more::after{content:"→";transition:transform .3s}
.dept-card:hover .dept-card-more::after{transform:translateX(5px)}


/* ---------- 10. 大图视差板块（首页 5 连板块长图） ---------- */
.feature{position:relative;min-height:88vh;display:flex;align-items:center;overflow:hidden}
/*
 * 注意：.feature-bg 的 transform 完全交给 main.js 的视差逻辑控制，
 * 这里【不能】再写 CSS transform 动画，否则两者互相覆盖（原版 bug 所在）。
 * 背景缓慢缩放的效果改由 .feature-zoom 子元素承担。
 */
.feature-bg{position:absolute;inset:-6%;will-change:transform}
.feature-zoom{
  position:absolute;inset:0;
  background-size:cover;background-position:center;
  animation:heroZoom 24s ease-in-out infinite alternate;
}
.feature-mask{
  position:absolute;inset:0;
  background:linear-gradient(90deg,rgba(27,21,38,.88) 0%,rgba(27,21,38,.45) 48%,rgba(27,21,38,.15) 100%);
}
/* 奇偶板块交替：文字卡左右互换，长图更有节奏 */
.feature.alt .feature-mask{
  background:linear-gradient(270deg,rgba(27,21,38,.88) 0%,rgba(27,21,38,.45) 48%,rgba(27,21,38,.15) 100%);
}
.feature-body{position:relative;z-index:2;width:100%;padding:90px 0}
.feature-card{max-width:520px;padding:46px 48px;background:rgba(255,255,255,.14)}
.feature.alt .feature-card{margin-left:auto}
.feature-index{font-size:13px;letter-spacing:4px;color:var(--pink);margin-bottom:14px}
.feature-title{font-size:clamp(28px,4vw,40px);font-weight:800;letter-spacing:3px;margin-bottom:20px}
.feature-desc{font-size:15.5px;line-height:2.1;color:var(--text-dim);margin-bottom:24px}
.feature-tags{display:flex;flex-wrap:wrap;gap:10px;margin-bottom:26px}
.feature-tags li{
  font-size:12.5px;letter-spacing:1.5px;padding:6px 16px;border-radius:999px;
  background:rgba(255,255,255,.12);border:1px solid rgba(255,255,255,.3);
}
.feature-link{font-size:13px;letter-spacing:2px;color:var(--pink)}


/* ---------- 11. 正文内容组件（板块详情页 / 关于页共用） ---------- */

/* 两栏布局：图文并排，窄屏自动折成单栏（见第 15 节媒体查询） */
.split{display:grid;grid-template-columns:1fr 1fr;gap:48px;align-items:center}
.split-img{border-radius:24px;overflow:hidden;border:1px solid var(--glass-border);box-shadow:var(--glass-shadow)}
.split-img img{width:100%;height:100%;object-fit:cover}

/* 正文文字排版 */
.prose h3{
  font-size:clamp(22px,3vw,28px);font-weight:800;letter-spacing:2px;margin-bottom:18px;
}
.prose p{font-size:15.5px;line-height:2.1;color:var(--text-dim);margin-bottom:16px}

/* 要点列表：左侧小方块标记 */
.check-list li{
  position:relative;padding-left:26px;margin-bottom:12px;
  font-size:15px;line-height:1.9;color:var(--text-dim);
}
.check-list li::before{
  content:"";position:absolute;left:0;top:.62em;
  width:10px;height:10px;border-radius:3px;
  background:linear-gradient(120deg,var(--pink),var(--violet));
  box-shadow:0 2px 8px rgba(255,143,190,.5);
}

/* 玻璃信息条：展示「时间 / 地点 / 频次」等关键信息 */
.info-bar{
  display:grid;grid-template-columns:repeat(3,1fr);gap:16px;margin-top:28px;
}
.info-item{
  padding:18px 16px;border-radius:16px;text-align:center;
  background:var(--glass-bg);border:1px solid var(--glass-border);
  backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);
}
.info-item b{display:block;font-size:15px;margin-bottom:6px;letter-spacing:1px}
.info-item span{font-size:12.5px;color:var(--text-dim);letter-spacing:1px}

/* 发展历程时间线（关于页）：中间竖线 + 左右交替节点 */
.timeline{position:relative;max-width:760px;margin:0 auto;padding:20px 0}
.timeline::before{
  content:"";position:absolute;left:50%;top:0;bottom:0;width:2px;
  background:linear-gradient(180deg,transparent,var(--pink),var(--violet),transparent);
  transform:translateX(-50%);
}
.timeline-item{position:relative;width:50%;padding:0 40px 48px}
.timeline-item:nth-child(odd){left:0;text-align:right}
.timeline-item:nth-child(even){left:50%}
.timeline-dot{
  position:absolute;top:6px;width:14px;height:14px;border-radius:50%;
  background:linear-gradient(120deg,var(--pink),var(--violet));
  box-shadow:0 0 14px rgba(255,143,190,.8);
}
.timeline-item:nth-child(odd) .timeline-dot{right:-7px}
.timeline-item:nth-child(even) .timeline-dot{left:-7px}
.timeline-year{
  font-size:14px;letter-spacing:3px;color:var(--pink);margin-bottom:8px;font-weight:700;
}
.timeline-title{font-size:18px;font-weight:800;letter-spacing:1px;margin-bottom:8px}
.timeline-text{font-size:13.5px;line-height:1.9;color:var(--text-dim)}

/* 常见问题手风琴（关于页）：纯 CSS 实现，checkbox 控制开合 */
.faq{max-width:760px;margin:0 auto}
.faq-item{margin-bottom:14px;border-radius:18px;overflow:hidden}
.faq-item input{position:absolute;opacity:0;pointer-events:none}
.faq-question{
  display:flex;justify-content:space-between;align-items:center;
  padding:20px 26px;cursor:pointer;
  font-size:16px;font-weight:700;letter-spacing:1px;
  background:var(--glass-bg);border:1px solid var(--glass-border);
  backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);
  transition:background .3s;
}
.faq-question:hover{background:var(--glass-bg-strong)}
/* 「+」号展开指示，打开时旋转 45° 变 × */
.faq-question::after{
  content:"+";font-size:22px;color:var(--pink);transition:transform .3s;flex:none;margin-left:16px;
}
.faq-item input:checked ~ .faq-question::after{transform:rotate(45deg)}
.faq-answer{
  max-height:0;overflow:hidden;transition:max-height .4s ease;
  background:rgba(27,21,38,.5);
}
.faq-item input:checked ~ .faq-answer{max-height:300px}
.faq-answer p{padding:20px 26px;font-size:14px;line-height:2;color:var(--text-dim)}

/* 友站/社群链接卡片（联系页） */
.link-cards{display:grid;grid-template-columns:repeat(3,1fr);gap:20px}
.link-card{
  display:block;padding:28px 24px;border-radius:20px;text-align:center;
  background:var(--glass-bg);border:1px solid var(--glass-border);
  backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);
  transition:transform .35s,background .35s;
}
.link-card:hover{transform:translateY(-6px);background:var(--glass-bg-strong)}
.link-card-icon{font-size:34px;margin-bottom:12px}
.link-card b{display:block;font-size:16px;letter-spacing:2px;margin-bottom:8px}
.link-card span{font-size:12.5px;color:var(--text-dim);letter-spacing:1px}


/* ---------- 12. 联系页表单：已按社团要求移除（纯静态站无后端，不设留言功能） ----------
 * 如将来需要留言表单，可用 Formspree 托管：https://formspree.io 注册后拿一个
 * 提交地址，写普通 <form action="该地址" method="POST"> 即可，无需本站样式。 */


/* ---------- 13. 页脚：全站统一 ---------- */
.footer{
  padding:90px 0 60px;
  background:
    radial-gradient(900px 400px at 50% 120%,rgba(255,143,190,.2),transparent 65%),
    #17111f;
}
.footer-panel{padding:48px;text-align:center}
.footer-logo{font-size:26px;font-weight:800;letter-spacing:3px;margin-bottom:14px}
.footer-slogan{color:var(--text-dim);letter-spacing:2px;margin-bottom:22px}
.footer-nav{display:flex;flex-wrap:wrap;gap:20px;justify-content:center;margin-bottom:24px}
.footer-nav a{font-size:13.5px;color:var(--text-dim);letter-spacing:1px;transition:color .3s}
.footer-nav a:hover{color:var(--pink)}
.footer-divider{
  width:120px;height:2px;margin:0 auto 22px;border-radius:2px;
  background:linear-gradient(90deg,transparent,var(--pink),transparent);
}
.footer-note{font-size:12.5px;color:rgba(253,248,255,.5);letter-spacing:1px}


/* ---------- 13b. 首页宣传片板块（B 站内嵌播放器 + 观看按钮） ---------- */
/* 节标题下的一行说明文字 */
.section-sub{
  text-align:center;color:var(--text-dim);font-size:15px;
  letter-spacing:2px;margin:-8px 0 34px;
}
/* 16:9 响应式播放器外框：宽度自适应、高度按宽高比自动撑开，手机端不会溢出 */
.video-embed{
  position:relative;width:100%;max-width:960px;margin:0 auto;
  aspect-ratio:16/9;border-radius:18px;overflow:hidden;
  background:#000;box-shadow:0 24px 60px rgba(0,0,0,.5);
}
/* 老浏览器不支持 aspect-ratio 时的兜底：用 padding 撑出 16:9 高度 */
@supports not (aspect-ratio:16/9){
  .video-embed{padding-top:56.25%;aspect-ratio:auto}
}
.video-embed iframe{position:absolute;inset:0;width:100%;height:100%;border:0}
/* B 站 / 抖音观看按钮组 */
.video-actions{display:flex;gap:16px;justify-content:center;flex-wrap:wrap;margin-top:28px}


/* ---------- 14. 进场动画：JS 加 .visible 类后渐显上移 ---------- */
.reveal{opacity:0;transform:translateY(34px);transition:opacity .9s cubic-bezier(.2,.7,.3,1),transform .9s cubic-bezier(.2,.7,.3,1)}
.reveal.visible{opacity:1;transform:none}
/* 级联延迟：同屏多个元素依次出现 */
.d1{transition-delay:.08s}.d2{transition-delay:.16s}.d3{transition-delay:.24s}
.d4{transition-delay:.32s}.d5{transition-delay:.4s}.d6{transition-delay:.55s}
.d7{transition-delay:.7s}
/* 尊重系统的「减少动态效果」无障碍设置：用户开了就直接显示，不播动画 */
@media (prefers-reduced-motion:reduce){
  .reveal{opacity:1;transform:none;transition:none}
  .petals span{animation:none;display:none}
  .hero-bg,.page-hero-bg,.feature-zoom{animation:none}
}


/* ---------- 5b. 导航下拉菜单（成员 / 五大板块 分组） ---------- */
/* 桌面端：hover 展开；移动端：菜单内静态展开（见第 15 节媒体查询） */
.nav-drop{position:relative}
.nav-drop > a::before{
  content:"▾";margin-right:4px;font-size:11px;color:var(--pink);
  display:inline-block;transition:transform .3s;
}
.nav-drop:hover > a::before{transform:rotate(180deg)}
.nav-drop-menu{
  position:absolute;top:100%;left:50%;transform:translate(-50%,8px);
  min-width:150px;padding:10px;
  display:flex;flex-direction:column;gap:2px;
  background:rgba(30,22,44,.92);border:1px solid var(--glass-border);
  border-radius:16px;box-shadow:0 12px 36px rgba(0,0,0,.45);
  backdrop-filter:blur(20px);-webkit-backdrop-filter:blur(20px);
  opacity:0;visibility:hidden;transition:opacity .25s,transform .25s,visibility .25s;
}
.nav-drop:hover .nav-drop-menu,
.nav-drop:focus-within .nav-drop-menu{
  opacity:1;visibility:visible;transform:translate(-50%,0);
}
.nav-drop-menu a{
  white-space:nowrap;padding:9px 16px !important;border-radius:10px;
  transition:background .25s;
}
.nav-drop-menu a::after{display:none} /* 下拉项不用下划线动画 */
.nav-drop-menu a:hover{background:var(--glass-bg-strong)}


/* ---------- 14b. 成员展示页：筛选栏 + 成员卡片 ---------- */

/* 筛选按钮栏：居中一排胶囊按钮 */
.filter-bar{display:flex;flex-wrap:wrap;gap:12px;justify-content:center;margin-bottom:44px}
.filter-btn{
  padding:10px 26px;border-radius:999px;cursor:pointer;
  font-size:14px;letter-spacing:2px;font-family:inherit;color:var(--text-dim);
  background:var(--glass-bg);border:1px solid var(--glass-border);
  backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);
  transition:all .3s;
}
.filter-btn:hover{color:#fff;background:var(--glass-bg-strong)}
.filter-btn.active{
  color:#2b1530;font-weight:700;border-color:transparent;
  background:linear-gradient(120deg,var(--pink-deep),var(--violet));
  box-shadow:0 6px 20px rgba(255,143,190,.4);
}

/* 成员卡片网格：自适应列数，至少 260px 一列 */
.member-grid{
  display:grid;gap:22px;
  grid-template-columns:repeat(auto-fill,minmax(260px,1fr));
}
.member-empty{grid-column:1/-1;text-align:center;color:var(--text-dim);padding:40px 0}
.member-card{
  position:relative;padding:36px 26px 30px;text-align:center;
  background:var(--glass-bg);border:1px solid var(--glass-border);
  border-radius:22px;
  backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);
  transition:transform .35s,box-shadow .35s;
}
.member-card:hover{transform:translateY(-6px);box-shadow:0 14px 40px rgba(255,143,190,.25)}
/* 圆形头像占位：真实照片就绪后可换成 <img> 圆形裁切 */
.member-avatar{
  width:88px;height:88px;margin:0 auto 16px;
  display:flex;align-items:center;justify-content:center;
  font-size:44px;border-radius:50%;
  background:linear-gradient(140deg,rgba(255,183,213,.25),rgba(201,182,255,.25));
  border:1px solid var(--glass-border);
}
/* 右上角身份小标签（COSER / 摄影 / 干部…） */
.member-role{
  position:absolute;top:14px;right:14px;
  padding:4px 12px;border-radius:999px;font-size:11px;letter-spacing:1px;
  color:var(--pink);
  background:rgba(255,143,190,.12);border:1px solid rgba(255,143,190,.35);
}
.member-name{font-size:19px;font-weight:800;letter-spacing:2px;margin-bottom:6px}
.member-title{
  font-size:13px;letter-spacing:1px;margin-bottom:10px;
  background:linear-gradient(120deg,var(--pink),var(--violet));
  -webkit-background-clip:text;background-clip:text;color:transparent;
}
.member-dept{font-size:12px;color:var(--text-dim);letter-spacing:2px;margin-bottom:14px}
.member-desc{font-size:13px;line-height:1.9;color:var(--text-dim)}


/* ---------- 14c. 成员页 v2：大卡片 + 正片/作品网格 ---------- */

/* 成员三页（干部/COSER/摄影）顶部的大按钮切换条 */
.member-pages-nav{display:flex;flex-wrap:wrap;gap:14px;justify-content:center;margin-bottom:48px}

/* 成员大卡：整卡通栏，内部图文分区 */
.member-grid-wide{display:flex;flex-direction:column;gap:28px}
.member-block{padding:40px 44px}
.member-head{display:flex;align-items:center;gap:22px;margin-bottom:18px;flex-wrap:wrap}
.member-avatar{
  width:88px;height:88px;flex:none;
  display:flex;align-items:center;justify-content:center;
  font-size:44px;border-radius:50%;
  background:linear-gradient(140deg,rgba(255,183,213,.25),rgba(201,182,255,.25));
  border:1px solid var(--glass-border);
}
.member-meta{min-width:0}
/* 圈名 CN：成员卡片的大标题 */
.member-cn{font-size:24px;font-weight:800;letter-spacing:2px;margin-bottom:4px}
.member-title{
  font-size:14px;letter-spacing:1px;margin-bottom:6px;
  background:linear-gradient(120deg,var(--pink),var(--violet));
  -webkit-background-clip:text;background-clip:text;color:transparent;
}
.member-dept{font-size:12.5px;color:var(--text-dim);letter-spacing:2px}
/* 兼任身份小标签（如干部页显示"兼·摄影"） */
.member-roles{display:flex;gap:8px;margin-top:8px}
.member-role-chip{
  font-size:11px;letter-spacing:1px;padding:3px 12px;border-radius:999px;
  color:var(--pink);
  background:rgba(255,143,190,.12);border:1px solid rgba(255,143,190,.35);
}
.member-block .member-desc{font-size:14px;line-height:2;color:var(--text-dim);margin-bottom:16px}

/* B 站 / 抖音主页按钮行 */
.member-sns-row{display:flex;flex-wrap:wrap;gap:10px;margin-bottom:8px}
.member-sns{
  display:inline-flex;align-items:center;gap:6px;
  padding:7px 18px;border-radius:999px;font-size:13px;letter-spacing:1px;
  background:var(--glass-bg);border:1px solid var(--glass-border);
  transition:transform .3s,background .3s;
}
.member-sns:hover{transform:translateY(-2px);background:var(--glass-bg-strong)}

/* 正片 / 作品网格：等宽大缩略图，整卡可点击 */
.works-grid{
  display:grid;gap:14px;margin-top:20px;
  grid-template-columns:repeat(auto-fill,minmax(200px,1fr));
}
.work-card{
  position:relative;display:block;overflow:hidden;
  border-radius:16px;border:1px solid var(--glass-border);
  aspect-ratio:4/3;
  transition:transform .35s,box-shadow .35s;
}
.work-card:hover{transform:translateY(-4px);box-shadow:0 12px 32px rgba(255,143,190,.28)}
.work-card img{width:100%;height:100%;object-fit:cover}
.work-title{
  position:absolute;left:0;right:0;bottom:0;padding:22px 14px 10px;
  font-size:12.5px;letter-spacing:1px;
  background:linear-gradient(180deg,transparent,rgba(27,21,38,.9));
}


/* ---------- 14d. （原联系页宣传片两栏列表样式已删除：
     宣传片统一内嵌在首页，联系页不再放视频链接 ---------- */


/* ---------- 14e. 乐队页：按乐队分组（队名横幅 + 成员网格） ---------- */

/* 乐队之间的间距 */
#bandsContainer{display:flex;flex-direction:column;gap:56px}

/* 乐队横幅：左文字右封面 */
.band-banner{
  display:flex;align-items:stretch;gap:28px;
  padding:34px 38px;margin-bottom:26px;overflow:hidden;
}
.band-banner-text{flex:1;min-width:0;display:flex;flex-direction:column;justify-content:center}
.band-index{font-size:12px;letter-spacing:4px;color:var(--pink);margin-bottom:8px}
.band-name{
  font-size:clamp(22px,3.4vw,32px);font-weight:800;letter-spacing:2px;margin-bottom:12px;
  background:linear-gradient(120deg,var(--pink),var(--violet));
  -webkit-background-clip:text;background-clip:text;color:transparent;
}
.band-desc{font-size:14px;line-height:2;color:var(--text-dim)}
.band-cover{
  flex:none;width:220px;border-radius:16px;overflow:hidden;
  border:1px solid var(--glass-border);
}
.band-cover img{width:100%;height:100%;object-fit:cover;display:block}

/* 队内成员网格：2 列大卡 */
.band-members{
  display:grid;grid-template-columns:1fr 1fr;gap:20px;
}


/* 联系页两卡居中专用：桌面端两列，移动端由媒体查询收成单栏 */
.link-cards-duo{grid-template-columns:repeat(2,minmax(0,340px));justify-content:center}


/* ---------- 15. 响应式：屏幕宽度 ≤ 860px 时的移动端适配 ---------- */
@media (max-width:860px){
  /* 导航链接收成右侧抽屉 */
  .nav-links{
    position:fixed;top:0;right:-100%;height:100vh;width:min(300px,78vw);
    flex-direction:column;align-items:flex-start;gap:8px;padding:90px 30px 30px;
    background:rgba(30,22,44,.9);
    backdrop-filter:blur(20px);-webkit-backdrop-filter:blur(20px);
    transition:right .4s;box-shadow:-10px 0 40px rgba(0,0,0,.4);
  }
  .nav-links.open{right:0}
  .nav-links a{font-size:17px;padding:12px 4px}
  /* 移动端：下拉菜单在抽屉里静态展开为缩进列表，不用 hover */
  .nav-drop{width:100%}
  .nav-drop > a::before{float:right;margin-top:6px}
  .nav-drop-menu{
    position:static;transform:none;opacity:1;visibility:visible;
    min-width:0;margin:2px 0 8px 14px;padding:4px 0 4px 12px;
    background:transparent;border:none;border-left:1px solid var(--glass-border);
    border-radius:0;box-shadow:none;backdrop-filter:none;-webkit-backdrop-filter:none;
  }
  .nav-drop-menu a{padding:8px 12px !important;font-size:15px}
  .nav-toggle{display:flex;z-index:60;position:relative}
  /* 汉堡按钮变 X */
  .nav-toggle.open span:nth-child(1){transform:translateY(7px) rotate(45deg)}
  .nav-toggle.open span:nth-child(2){opacity:0}
  .nav-toggle.open span:nth-child(3){transform:translateY(-7px) rotate(-45deg)}

  .about-panel{padding:36px 26px}
  .stats{grid-template-columns:repeat(2,1fr)}
  .dept-grid{grid-template-columns:1fr}
  .split{grid-template-columns:1fr}
  .info-bar{grid-template-columns:1fr}
  .link-cards{grid-template-columns:1fr}
  .feature{min-height:78vh}
  .feature-card{padding:32px 26px;max-width:100%}
  /* 移动端视差背景统一压暗，保证文字可读 */
  .feature-mask{background:linear-gradient(180deg,rgba(27,21,38,.5),rgba(27,21,38,.9))}
  .feature.alt .feature-mask{background:linear-gradient(180deg,rgba(27,21,38,.5),rgba(27,21,38,.9))}
  /* 时间线收为单侧 */
  .timeline::before{left:8px}
  .timeline-item{width:100%;padding:0 0 40px 36px;text-align:left}
  .timeline-item:nth-child(odd){text-align:left}
  .timeline-item:nth-child(odd) .timeline-dot,
  .timeline-item:nth-child(even) .timeline-dot{left:1px;right:auto}
  .contact-form{padding:32px 24px}
  /* 乐队横幅移动端：封面隐藏，文字通栏 */
  .band-banner{padding:26px 22px}
  .band-cover{display:none}
  /* 队内成员网格移动端单栏 */
  .band-members{grid-template-columns:1fr}
  /* 樱花太多影响性能，只留前 10 片 */
  .petals span:nth-child(n+11){display:none}

  /* 手机竖屏：Hero 背景换竖版看板娘立绘（横版大图的看板娘在右侧会被裁掉），
     右上方定位保住头部，深色文字在白色背景上天然可读 */
  .hero-bg{background-image:url("../img/mascot.jpg?v=4");background-position:right top}
  /* 移动端遮罩大幅减淡：白底立绘本身够亮，桌面端那条「底部沉入深色主题」的
     重渐变会把画面下半截压成暗灰色、把看板娘身体糊掉，这里只在最底部留一小段衔接 */
  .hero-overlay{
    background:linear-gradient(180deg,
      rgba(255,183,213,.06) 0%,
      rgba(255,255,255,0) 55%,
      rgba(27,21,38,.22) 86%,
      #1b1526 100%);
  }
  /* 手机顶部导航压在立绘头发（深色）区域时，深色 logo 字会看不清，
     垫一层白色毛玻璃保证「本樱动漫社」和汉堡按钮始终可读 */
  body.hero-light .nav:not(.scrolled){
    background:rgba(255,255,255,.55);
    backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);
  }
  /* 文字区垫一层白色半透明底，确保压在看板娘身上也清晰 */
  .hero-content{
    background:rgba(255,255,255,.55);
    backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);
    border-radius:24px;padding:36px 24px;width:92%;
  }
}