/* =========================================================
   一周年庆典（独立版）— 原皮基础层
   =========================================================
   这是从主站主题 alphaweb-theme/assets/css/main.css 里「抽出来」的一层，
   不是整份拷贝：只保留庆典页真正会命中的规则（约 100 行 / 原文件 1049 行）。

   保留清单（行号为抽取时 main.css 的原文行号）：
     :root 变量块                       6–41   整块，含 JS 取用的 --amber
     *, *::before, *::after 重置       44–46
     html                              48
     body                              50–61 + 64
     img                               68
     a / a:hover                       70–71
     h1, h2, h3, h4                    73
     .screen-reader-text               77–81
     @keyframes floaty                 200–203
     .btn / .btn--primary / .btn--ghost 288–313
     .glass-card                       355–361

   两处容易漏、漏了就出错的：
   · a { text-decoration: none } —— 尾声那两个 <a class="btn"> 没有它就会带
     浏览器默认下划线（.btn 自己不设 text-decoration）。
   · h1~h4 的字重 800 / 行高 1.3 / 字距 —— 7 个标题全靠这条，
     celebration.css 只覆盖了 font-size 和 margin。

   刻意不抄的：
   · body 的 display:flex / flex-direction:column（原 62–63）—— 那是给
     「页头 + 内容 + 页脚」三明治用的。本页 body 下只有 .celebration 一个
     子元素，不需要；万一以后往 body 加兄弟元素会被弹成 flex item。
   · .container / .skip-link / .site-main —— 庆典页 markup 里没有这些元素。

   ⚠️ 这是一份**快照**，不会跟随主题 main.css 更新。
      主站改配色/按钮样式时，这里要手动同步（改哪几行见上面的清单）。
   ========================================================= */

/* ── 变量（原皮）───────────────────────────────── */
:root {
	--bg: #0a0a15;
	--bg-2: #11102a;
	--surface: rgba(255, 255, 255, 0.045);
	--surface-strong: rgba(255, 255, 255, 0.07);
	--border: rgba(255, 255, 255, 0.09);
	--border-glow: rgba(157, 107, 255, 0.45);

	--text: #eef0ff;
	--muted: #a3a6c4;
	--muted-2: #6f7291;

	--primary: #9d6bff;
	--cyan: #22d3ee;
	--pink: #ff4fa3;
	--green: #34d399;
	--amber: #fbbf24;

	--grad: linear-gradient(135deg, #9d6bff 0%, #22d3ee 100%);
	--grad-2: linear-gradient(135deg, #ff4fa3 0%, #9d6bff 100%);

	--radius: 16px;
	--radius-sm: 10px;
	--shadow: 0 18px 50px rgba(0, 0, 0, 0.45);
	--glow: 0 0 24px rgba(var(--primary-rgb), 0.35);

	/* RGB 通道，供 rgba(var(--x-rgb), a) 使用 */
	--primary-rgb: 157, 107, 255;
	--cyan-rgb: 34, 211, 238;
	--green-rgb: 52, 211, 153;
	--bg-rgb: 10, 10, 21;
	--on-grad: #0a0a15; /* 渐变上的文字色 */

	--font: "Segoe UI", "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei",
		"Noto Sans CJK SC", "Helvetica Neue", Arial, sans-serif;
}

/* ── 基础重置 ─────────────────────────────────── */
*,
*::before,
*::after { box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
	margin: 0;
	font-family: var(--font);
	font-size: 16px;
	line-height: 1.7;
	color: var(--text);
	background:
		radial-gradient(1200px 800px at 85% -10%, rgba(var(--primary-rgb), 0.14), transparent 60%),
		radial-gradient(900px 700px at -10% 20%, rgba(var(--cyan-rgb), 0.10), transparent 55%),
		var(--bg);
	-webkit-font-smoothing: antialiased;
	min-height: 100vh;
}

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

a { color: var(--cyan); text-decoration: none; transition: color 0.2s; }
a:hover { color: var(--pink); }

h1, h2, h3, h4 { line-height: 1.3; margin: 0 0 0.5em; font-weight: 800; letter-spacing: 0.01em; }

.screen-reader-text {
	border: 0; clip: rect(1px, 1px, 1px, 1px); clip-path: inset(50%);
	height: 1px; width: 1px; margin: -1px; overflow: hidden;
	padding: 0; position: absolute !important; word-wrap: normal !important;
}

/* 封面光晕的浮动动画。定义在主站 main.css 里，celebration.css 只引用不定义
   —— 不抄过来的话光晕是静止的（不报错，纯静默失效）。 */
@keyframes floaty {
	0%, 100% { transform: translateY(0) scale(1); }
	50% { transform: translateY(26px) scale(1.06); }
}

/* ── 按钮 ─────────────────────────────────────── */
.btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 8px;
	padding: 12px 26px;
	border-radius: 999px;
	border: none;
	font-weight: 700;
	font-size: 15px;
	cursor: pointer;
	transition: transform 0.2s, box-shadow 0.2s, background 0.2s;
	color: var(--text);
}
.btn--primary {
	background: var(--grad);
	color: var(--on-grad);
	box-shadow: 0 8px 30px rgba(var(--primary-rgb), 0.4);
}
.btn--primary:hover { transform: translateY(-2px); box-shadow: 0 12px 40px rgba(var(--primary-rgb), 0.55); color: var(--on-grad); }
.btn--ghost {
	background: transparent;
	border: 1px solid var(--border-glow);
	color: var(--text);
}
.btn--ghost:hover { background: var(--surface-strong); transform: translateY(-2px); }

/* ── 玻璃卡片 ─────────────────────────────────── */
.glass-card {
	background: var(--surface);
	border: 1px solid var(--border);
	border-radius: var(--radius);
	backdrop-filter: blur(6px);
	-webkit-backdrop-filter: blur(6px);
}