/* CAY —— 红黑白剪切版
   版式语言：强倾斜、剪纸拼贴、网点纸、撞击式落字。
   Local outline pixel fonts; no bitmap masks or resampled system glyphs. */

@font-face {
  font-family: "Monocraft";
  src: url("assets/fonts/monocraft-regular.woff2") format("woff2");
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  unicode-range: U+20-7E,U+A0-AC,U+AE-10F,U+112-125,U+128-12D,U+130-13E,U+141-148,U+14C-155,U+158-161,U+164-165,U+168-171,U+174-17F,U+181,U+184-186,U+189,U+18E-191,U+19A-19B,U+19E-19F,U+1A7-1AA,U+1B2,U+1B7-1B9,U+1BB-1C3,U+1C9,U+1CD-1D4,U+1DD,U+1E2-1E3,U+1E6-1E9,U+1EE-1F0,U+1F4-1F5,U+1F7-1F9,U+1FC-1FD,U+218-221,U+224-227,U+22E-22F,U+232-236,U+23A-23E,U+241-262,U+264-268,U+26A-275,U+277-27C,U+27E-281,U+284-28F,U+291-2A2,U+2AC,U+2BB,U+2CC,U+2D9,U+37E,U+387,U+391-3A1,U+3A3-3A9,U+3B1-3C9,U+3DB,U+400-45F,U+462-463,U+472-475,U+490-493,U+496-497,U+49A-49B,U+4A2-4A3,U+4AE-4B1,U+4BA-4BB,U+4C0-4C2,U+4D0-4D3,U+4D6-4DF,U+4E2-4F5,U+4F8-4F9,U+500,U+531-556,U+559-588,U+58A,U+58F,U+5BE,U+5C3,U+5C6,U+5D0-5EA,U+5F0-5F4,U+7C8,U+10A0-10C5,U+10C7,U+10CD,U+10D0-10FF,U+15E1,U+15FA,U+1614,U+16A0,U+16A2-16B4,U+16B6-16F8,U+1D00,U+1D04-1D05,U+1D07,U+1D09-1D0B,U+1D0D,U+1D0F,U+1D18,U+1D1A-1D1C,U+1D20-1D22,U+1D77,U+1D91,U+1E02-1E03,U+1E0A-1E0B,U+1E1E-1E23,U+1E26-1E27,U+1E30-1E31,U+1E3E-1E41,U+1E44-1E45,U+1E54-1E59,U+1E60-1E61,U+1E6A-1E6B,U+1E7C-1E7D,U+1E80-1E87,U+1E8A-1E91,U+1E97-1E99,U+1E9B-1E9F,U+1EBC-1EBD,U+1EF2-1EF3,U+1EF8-1EF9,U+1EFC-1EFF,U+1FB1,U+1FB9,U+1FD1,U+1FD9,U+1FE1,U+1FE9,U+2011,U+2013-2014,U+2018-201A,U+201C-201E,U+2020-2022,U+2026,U+2030-2037,U+2039-203D,U+2042,U+2048-204B,U+204E-204F,U+2051-2052,U+2057,U+2070-2071,U+2074-207E,U+2080-208E,U+20A0-20A6,U+20A9-20AE,U+20B0-20BF,U+2117,U+2122,U+2132,U+2141,U+2144,U+214B,U+2150-2151,U+2153-2157,U+2159-215F,U+2189,U+2190-2194,U+21C4,U+21CF-21D4,U+21F5,U+2200-2204,U+2209,U+220B-220C,U+2211-2213,U+221B-221E,U+2225,U+2227-2229,U+222B,U+222E,U+2234-2235,U+2237,U+2254,U+2260,U+2262,U+2282-2287,U+22A2,U+22A4-22A5,U+22A8,U+22BB-22BD,U+22C3,U+22C6,U+2300,U+2302,U+2318,U+231A-231B,U+23CF,U+23E9-23EA,U+23ED-23EF,U+23F3-23FD,U+25A1,U+25B2-25B3,U+25B6-25B7,U+25BC-25BD,U+25C0-25C1,U+25C6-25C7,U+25CB,U+25CE-25CF,U+25D8,U+25E6,U+2600-2606,U+2608,U+2614,U+2620,U+2630-2637,U+2639-263B,U+263D,U+2640,U+2642,U+2660-2667,U+2669-266F,U+2680-2685,U+2690-2691,U+2693-2694,U+2697,U+26A1,U+26A5,U+26C4,U+26C8,U+26CF,U+26E8,U+2702,U+2709,U+270E,U+2714,U+2718,U+2744,U+274C,U+2763-2764,U+27D8,U+295D,U+29C8,U+2A30,U+2A51-2A52,U+2AC3-2AC4,U+2B50,U+2B58,U+2BEA-2BEB,U+2C65-2C66,U+2C6D,U+2C6F,U+2C71,U+2D00-2D25,U+2E18,U+2E1A,U+2E2E,U+2E35,U+2E38,U+2E41,U+2E4B,U+3012,U+3125,U+A726-A729,U+A730-A731,U+A739,U+A73B,U+A75A-A75B,U+A779,U+A780-A781,U+A7A8-A7A9,U+A7AF-A7B0,U+EB40-EB59,U+FB00-FB03,U+FB05,U+FB1D,U+FB1F,U+FB2B,U+FB31,U+FB35,U+FB3B,U+FB44,U+FB4A-FB4C,U+FB4E,U+FF0B,U+FFFD;
}
@font-face {
  font-family: "Fusion Pixel";
  src: url("assets/fonts/fusion-pixel-12px-zh-hans.woff2") format("woff2");
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
}

/* CAY generated page font subsets: start */
@font-face {
  font-family: "Monocraft";
  src: url("assets/fonts/monocraft-regular-cay.woff2") format("woff2");
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  unicode-range: U+20-7E,U+A0,U+B7,U+2014,U+201C-201D;
}
@font-face {
  font-family: "Fusion Pixel";
  src: url("assets/fonts/fusion-pixel-12px-zh-hans-cay.woff2") format("woff2");
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  unicode-range: U+20-7E,U+A0,U+B7,U+2014,U+201C-201D,U+2550,U+3001-3002,U+4E00,U+4E09-4E0B,U+4E0D-4E0E,U+4E14,U+4E16,U+4E1C,U+4E24,U+4E2A,U+4E2D,U+4E3A-4E3B,U+4E48,U+4E4B,U+4E5D,U+4E5F,U+4E86,U+4E8B-4E8C,U+4E92,U+4EA4,U+4EA7,U+4EAE,U+4EBA,U+4EC0,U+4EC5,U+4ECD-4ECE,U+4EE5,U+4EF6,U+4EFB,U+4F0D,U+4F1A,U+4F38,U+4F4D,U+4F4F,U+4F60,U+4F7F,U+4FA7,U+4FDD,U+503E,U+505A,U+505C,U+50CF,U+5143,U+5149,U+514D,U+5165,U+5168,U+516D,U+5185,U+518D,U+51FA-51FB,U+5206-5207,U+5219-521A,U+5224,U+522B,U+5230,U+5236,U+5238,U+523B,U+524D,U+5251,U+526A,U+529B,U+52A0-52A1,U+52A8-52A9,U+5316-5317,U+533A,U+5341,U+534A,U+5355,U+5357,U+5361,U+5382,U+538B,U+539A,U+539F,U+53C1,U+53CD,U+53D1,U+53D6,U+53D8,U+53E3,U+53E6,U+53EA,U+53EF,U+53F3,U+53F7,U+5403,U+5408,U+540C-540E,U+5411,U+5426,U+547D,U+548C,U+54AC,U+54C1,U+54CD,U+5668,U+56DB,U+56DE,U+56F1,U+56FE,U+5706,U+5728,U+5730,U+573A,U+5740,U+5750,U+5757,U+5782,U+57CE,U+58F9,U+5904,U+590D,U+5927,U+5929,U+5934,U+5B50,U+5B54,U+5B57,U+5B66,U+5B83,U+5B89,U+5B8C,U+5B98,U+5B9A,U+5B9E,U+5BA2,U+5BA4,U+5BAB,U+5BF8-5BF9,U+5C0F,U+5C3A,U+5C3E,U+5C40,U+5C42,U+5C4F,U+5C71,U+5DE5,U+5DE8,U+5DF1-5DF2,U+5E01,U+5E03,U+5E26-5E27,U+5E38,U+5E73,U+5E8F,U+5E94-5E95,U+5EA6-5EA7,U+5EF6,U+5EFA,U+5F00,U+5F0F,U+5F39-5F3A,U+5F53,U+5F62,U+5F71,U+5F80-5F81,U+5F8B,U+5F97,U+5FAA,U+5FC3,U+5FEB,U+5FFD,U+6001,U+6015,U+6027,U+60AC,U+60F3,U+6162,U+620F-6210,U+6237,U+6241,U+624B,U+624D,U+628A,U+62A2,U+62A5,U+62C6,U+62C9,U+62FC,U+6301-6302,U+6307,U+6309,U+6316,U+6324,U+632A,U+6362,U+6392,U+63A5,U+63A8,U+63CF,U+63ED,U+649E,U+64AD,U+6539,U+653E,U+6548,U+6570,U+6574,U+659C,U+65B0,U+65B9,U+65CB,U+65F6,U+660E,U+666F,U+667A,U+66F4,U+6708-6709,U+670D,U+672A,U+673A,U+6761,U+6765,U+679A,U+67A2,U+67B6,U+67D3,U+6807,U+680F,U+6837,U+683C,U+6846,U+6868,U+68B0,U+69FD,U+6A21,U+6A2A,U+6B21,U+6B62-6B63,U+6BB5,U+6C89,U+6CA1,U+6CD5,U+6D41,U+6D4E,U+6D77,U+6E05,U+6E32,U+6E38,U+6ED1,U+6EDA,U+6EDE,U+6EE1,U+706F,U+7089,U+70B9,U+70DF,U+70ED,U+7164,U+7247-7248,U+724C,U+7269,U+7279,U+72B6,U+73A9,U+73AF-73B0,U+73ED,U+751F,U+7528,U+7531,U+753B,U+754C,U+7565,U+767D-767E,U+7684,U+76D6,U+76EE,U+76F4,U+76F8,U+770B,U+771F,U+77E9,U+77F3,U+7801,U+7968,U+79BB,U+79F0,U+79FB,U+7A0B,U+7A7A,U+7A7F,U+7A97,U+7AD9,U+7AEF,U+7B26,U+7B2C,U+7B54,U+7B7E,U+7B97,U+7C73,U+7C92,U+7CFB,U+7D20,U+7D2F,U+7EA2,U+7EB8-7EB9,U+7EBD,U+7EBF,U+7EC4,U+7EC8,U+7ECF,U+7ED8,U+7EDF,U+7EED,U+7F51,U+7F6E,U+7FA4,U+7FC5,U+7FFC,U+8086,U+80CC,U+80FD,U+810A,U+81EA,U+81F4,U+822A,U+8237,U+8272,U+82E6,U+843D,U+8513,U+878D,U+87BA,U+8840,U+884C,U+88AB,U+88C5,U+897F,U+8981,U+89C1,U+89C6,U+89D2,U+8A00,U+8BA1,U+8BA9,U+8BBE,U+8BC6,U+8BED,U+8BEF,U+8BFB,U+8D2F-8D30,U+8D34,U+8D77,U+8D8A,U+8DD1,U+8DDF,U+8DEF,U+8EAB,U+8F66,U+8F68,U+8F6C,U+8F6E,U+8F7D,U+8FB9,U+8FC7,U+8FD0,U+8FD8-8FD9,U+8FDB,U+9009,U+9010,U+901A,U+901F-9020,U+907F,U+90A3,U+90E8,U+90FD,U+91CC-91CD,U+91CF,U+91D1,U+9488,U+94A9,U+94AE,U+94BB,U+94C1,U+94FA,U+9501,U+9505,U+951A,U+952E,U+9550,U+955C,U+957F,U+95EE,U+95F4,U+9635,U+9645,U+968F,U+9694,U+96F6,U+9759,U+975E,U+9762,U+9798,U+9875-9876,U+9897-9898,U+989C,U+98DE-98DF,U+9970-9971,U+9996,U+9A6C,U+9A71,U+9A76,U+9A7B,U+9A7E-9A7F,U+9ED1,U+9F20,U+9F7F,U+FF08-FF09,U+FF0C,U+FF0F,U+FF1A-FF1B;
}
/* CAY generated page font subsets: end */

:root {
  --black: #0c0c0c;
  --ink: #121212;
  --red: #d4201f;
  --red-deep: #9e1717;
  --cream: #f2ebdd;
  --cream-2: #e2d9c6;
  --white: #fffdf7;
  --line: rgba(12, 12, 12, 0.16);

  --ease-slam: cubic-bezier(0.16, 1, 0.3, 1);
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --ease-impact: cubic-bezier(0.65, 0, 0.9, 0.55);

  --f-pixel: "Monocraft", "Fusion Pixel", monospace;
  --f-display: var(--f-pixel);
  --f-black: "Fusion Pixel", "Monocraft", monospace;
  --f-body: var(--f-black);
  --f-mono: var(--f-pixel);
}

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0; background: var(--cream); color: var(--ink);
  font-family: var(--f-body); font-size: 12px; line-height: 2; overflow-x: hidden;
  font-synthesis: none;
  font-variant-ligatures: none;
  -webkit-font-smoothing: auto;
}
@media (pointer: fine) {
  body.has-cursor, body.has-cursor * { cursor: none !important; }
}
a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; background: none; border: 0; padding: 0; cursor: pointer; }
::selection { background: var(--red); color: var(--white); }

/* 装饰层一律不吃指针事件 */
.hero__halftone, .hero__burst, .hero__band, .hero__slash, .join__halftone,
.verse__num, .card__lines, .line::before, .grain, .speedlines, .paper, .vignette {
  pointer-events: none !important;
}
.px, .pxscene, .sil, .join__stripes, .join__ghost, .join__board { pointer-events: none !important; }

/* 持续动画的装饰层做渲染隔离，别让样式重算蔓延到整页 */
.ticker, .ticker__track, .hero__burst, .hero__slash, .hero__band,
.join__halftone, .join__seal, .join__stripes, .pxscene, .sil, .px,
.foot::after, .hero__scroll i::after {
  contain: layout style paint;
}

/* 网点颗粒 */
.grain {
  position: fixed; inset: 0; z-index: 60; pointer-events: none;
  opacity: 0.16; mix-blend-mode: multiply;
  background-image: radial-gradient(rgba(12,12,12,0.55) 0.5px, transparent 0.6px);
  background-size: 3px 3px;
}

/* 速度线 */
.speedlines {
  position: fixed; inset: 0; z-index: 55; pointer-events: none; opacity: 0;
  transition: opacity 0.25s;
  background-image: repeating-conic-gradient(from 0deg at 50% 50%, rgba(12,12,12,0.5) 0deg 0.35deg, transparent 0.35deg 3.2deg);
  mask-image: radial-gradient(circle at 50% 50%, transparent 24%, #000 68%);
  -webkit-mask-image: radial-gradient(circle at 50% 50%, transparent 24%, #000 68%);
  mix-blend-mode: multiply;
}

/* 光标 */
.cursor {
  position: fixed; left: 0; top: 0; z-index: 999; width: 10px; height: 10px;
  margin: -5px 0 0 -5px; pointer-events: none; opacity: 0; display: none;
  will-change: transform; mix-blend-mode: difference;
  transition: opacity 0.25s;
}
body.has-cursor .cursor { display: block; }
.cursor::before, .cursor::after { content: ""; position: absolute; border-radius: 50%; }
.cursor::before {
  inset: 0; background: #fff;
  transition: transform 0.35s var(--ease-slam);
}
.cursor::after {
  inset: -7px; border: 2px solid #fff; opacity: 0; transform: scale(0.6);
  transition: opacity 0.3s, transform 0.4s var(--ease-slam);
}
.cursor.is-on { opacity: 1; }
.cursor.is-hot::before { transform: scale(0.55); }
.cursor.is-hot::after { opacity: 0.85; transform: scale(1); }

.progress { position: fixed; left: 0; top: 0; right: 0; height: 3px; z-index: 90; pointer-events: none; }
.progress i { display: block; height: 100%; width: 0; background: var(--red); }

/* ══════ 载入 ══════ */
.loader { position: fixed; inset: 0; z-index: 300; display: grid; place-items: center; background: var(--black); transition: transform 0.9s cubic-bezier(0.76,0,0.24,1) 0.15s, visibility 0.9s; }
.loader.is-done { transform: translateY(-101%) skewY(-2deg); visibility: hidden; }
.loader__slab { position: absolute; inset: 0; background: repeating-linear-gradient(-8deg, var(--red) 0 40px, var(--red-deep) 40px 44px, var(--red) 44px 84px); opacity: 0.9; }
.loader__seal {
  position: relative; z-index: 2; font-family: var(--f-display); font-size: clamp(52px, 9vw, 96px);
  letter-spacing: 0.04em; color: var(--black); background: var(--cream); padding: 6px 22px 10px;
  transform: rotate(-5deg) skewX(-6deg); animation: slamIn 0.7s var(--ease-slam) 0.15s both;
  box-shadow: 8px 8px 0 var(--black);
}
.loader__line { position: absolute; bottom: 18%; width: min(46vw, 240px); height: 3px; background: rgba(242,235,221,0.25); overflow: hidden; }
.loader__line i { display: block; height: 100%; width: 0; background: var(--cream); transition: width 0.4s var(--ease-out); }

@keyframes slamUp {
  0% { opacity: 0; transform: translateY(26px) scale(1.05); filter: blur(5px); }
  100% { opacity: 1; transform: none; filter: blur(0); }
}
@keyframes slamIn {
  0% { opacity: 0; transform: rotate(-5deg) skewX(-6deg) translateY(-40px) scale(1.7); filter: blur(6px); }
  100% { opacity: 1; transform: rotate(-5deg) skewX(-6deg) translateY(0) scale(1); filter: blur(0); }
}

/* ══════ 顶栏 ══════ */
.top {
  position: fixed; left: 0; right: 0; top: 0; z-index: 120;
  display: flex; align-items: center; gap: 28px; padding: 16px clamp(16px, 3.4vw, 44px);
  transition: background 0.4s, border-color 0.4s;
  background: var(--cream); border-bottom: 2px solid var(--black);
}
.brand { display: flex; align-items: center; gap: 10px; }
.brand__seal {
  display: inline-grid; place-items: center; width: 40px; height: 34px;
  background: var(--black); color: var(--cream); font-family: var(--f-display); font-size: 18px;
  letter-spacing: 0.02em; transform: skewX(-9deg);
  transition: background 0.3s, transform 0.4s var(--ease-slam);
}
.brand:hover .brand__seal { background: var(--red); transform: skewX(-9deg) rotate(-4deg); }
.brand__txt { font-family: var(--f-black); font-size: 12px; letter-spacing: 0; }
.nav { display: flex; gap: 6px; margin-left: auto; }
.nav a {
  position: relative; padding: 4px 14px; font-family: var(--f-black); font-size: 12px; letter-spacing: 0;
  transform: skewX(-9deg); transition: color 0.2s, background 0.2s;
}
.nav a::before {
  content: ""; position: absolute; inset: 0; background: var(--red); transform: scaleX(0); transform-origin: right;
  transition: transform 0.34s var(--ease-slam); z-index: -1;
}
.nav a:hover { color: var(--cream); }
.nav a:hover::before { transform: scaleX(1); transform-origin: left; }
.top__meta {
  font-family: var(--f-black); font-size: 12px; letter-spacing: 0;
  background: var(--red); color: var(--cream); padding: 3px 9px; transform: skewX(-9deg) rotate(-2deg);
}

.tag {
  display: inline-block; font-family: var(--f-black); font-size: 12px; letter-spacing: 0;
  background: var(--black); color: var(--cream); padding: 4px 12px; transform: skewX(-10deg);
}
.tag--light { background: var(--cream); color: var(--black); }

/* ══════ 壹 · 首 ══════ */
.hero {
  position: relative; min-height: 100vh; height: 100vh; overflow: hidden;
  display: flex; flex-direction: column; justify-content: flex-end;
  background: var(--black); color: var(--cream);
  padding: 76px clamp(16px, 3.4vw, 44px) clamp(20px, 3.4vh, 36px);
}
.hero__halftone {
  position: absolute; inset: 0; z-index: 0; opacity: 0.5;
  background-image: radial-gradient(rgba(242,235,221,0.5) 1px, transparent 1.4px);
  background-size: 6px 6px;
  mask-image: radial-gradient(90% 70% at 78% 18%, #000 0%, transparent 72%);
  -webkit-mask-image: radial-gradient(90% 70% at 78% 18%, #000 0%, transparent 72%);
}
.hero__burst {
  position: absolute; right: -30vw; top: -24vh; width: 104vw; aspect-ratio: 1; z-index: 0;
  background: var(--red);
  clip-path: polygon(50% 50%, 100% 0%, 100% 100%, 0% 100%, 0% 62%);
  transform: rotate(-14deg); opacity: 0.96;
  animation: burstIn 1.4s var(--ease-out) 0.2s both;
}
@keyframes burstIn { from { transform: rotate(-14deg) scale(1.4); opacity: 0; } to { transform: rotate(-14deg) scale(1); opacity: 0.96; } }
.hero__band {
  position: absolute; left: -6%; top: 20%; width: 58%; height: 15px; background: var(--cream);
  transform: rotate(-7deg); z-index: 1; display: flex; align-items: center;
  animation: wipeIn 0.8s var(--ease-out) 0.6s both;
}
.hero__bandNo { font-family: var(--f-black); font-size: 12px; color: var(--black); padding-left: clamp(16px, 3.4vw, 44px); transform: skewX(-10deg); }
@keyframes wipeIn { from { transform: rotate(-7deg) scaleX(0); transform-origin: left; } to { transform: rotate(-7deg) scaleX(1); } }
.hero__slash {
  position: absolute; right: 4%; bottom: 0; width: 26vw; height: 130%; z-index: 0;
  background: rgba(12,12,12,0.55); transform: rotate(16deg) translateY(10%);
  animation: slashIn 1.2s var(--ease-out) 0.35s both;
}
@keyframes slashIn { from { transform: rotate(16deg) translateY(60%); opacity: 0; } to { transform: rotate(16deg) translateY(10%); opacity: 1; } }

.hero__body { position: relative; z-index: 3; }
.hero__kicker {
  display: inline-flex; align-items: center; gap: 10px; margin: 0 0 clamp(8px, 1.8vh, 18px);
  font-family: var(--f-black); font-size: 12px; letter-spacing: 0;
  background: var(--cream); color: var(--black); padding: 4px 14px 5px;
  transform: skewX(-10deg) rotate(-1.2deg);
  animation: slamUp 0.7s var(--ease-slam) 0.5s both;
}
.hero__kicker .tick { color: var(--red); font-family: var(--f-display); font-size: 18px; }

.hero__title {
  display: flex; margin: 0; font-family: var(--f-display); font-weight: 400;
  line-height: 0.8; letter-spacing: 0;
  font-size: 324px;
  text-shadow: 8px 8px 0 rgba(212,32,31,0.9);
}
.hero__title .ch { display: inline-block; transform-origin: 50% 100%; animation: heroCut 0.42s var(--ease-impact) both; }
.hero__title .ch:nth-child(1) { animation-delay: 0.62s; }
.hero__title .ch:nth-child(2) { animation-delay: 0.76s; }
.hero__title .ch:nth-child(3) { animation-delay: 0.9s; }
.hero__title .ch--red { --impact-ink: var(--cream); color: var(--red); text-shadow: 8px 8px 0 rgba(242,235,221,0.92); }
@keyframes heroCut {
  0% { opacity: 0; transform: translate3d(-18%, 8%, 0) rotate(-6deg); clip-path: polygon(-20% -20%, -20% -20%, -40% 120%, -40% 120%); }
  8% { opacity: 1; }
  72%, 100% { opacity: 1; transform: none; clip-path: polygon(-20% -20%, 120% -20%, 120% 120%, -20% 120%); }
}
@keyframes charSlam {
  0% { opacity: 0; transform: translate3d(-28%, -80%, 0) rotate(-14deg); filter: drop-shadow(-14px 4px 0 var(--impact-ink, var(--red))); }
  8% { opacity: 1; }
  64% { opacity: 1; transform: none; filter: drop-shadow(-4px 1px 0 var(--impact-ink, var(--red))); }
  65%, 100% { opacity: 1; transform: none; filter: none; }
}
.hero__sub {
  display: inline-block; margin: clamp(10px, 2vh, 20px) 0 0;
  font-family: var(--f-black); font-size: 12px; letter-spacing: 0;
  color: var(--black); background: var(--cream); padding: 5px 16px 6px;
  transform: skewX(-10deg); animation: slamUp 0.7s var(--ease-slam) 1.15s both;
}
.hero__foot {
  position: absolute; left: clamp(16px, 3.4vw, 44px); right: clamp(16px, 3.4vw, 44px);
  bottom: clamp(18px, 3.2vh, 34px); z-index: 3;
  display: flex; align-items: center; justify-content: space-between; gap: 20px;
  padding-top: 14px; border-top: 2px solid rgba(242,235,221,0.22);
  animation: slamUp 0.7s var(--ease-slam) 1.3s both;
}
.hero__body { margin-bottom: clamp(64px, 9vh, 96px); }
.addr { display: flex; align-items: center; gap: 12px; text-align: left; white-space: nowrap; }
.addr__k {
  font-family: var(--f-black); font-size: 12px; letter-spacing: 0;
  color: var(--cream); border: 1.5px solid var(--cream); padding: 2px 9px;
  transform: skewX(-10deg);
}
.addr b { font-family: var(--f-mono); font-weight: 400; font-size: 18px; color: var(--cream); position: relative; letter-spacing: 0; }
.addr b::after { content: ""; position: absolute; left: 0; right: 0; bottom: -2px; height: 3px; background: var(--red); transform: scaleX(0); transform-origin: left; transition: transform 0.4s var(--ease-out); }
.addr:hover b::after, .addr.is-copied b::after { transform: scaleX(1); }
.addr__hint { font-style: normal; font-size: 12px; letter-spacing: 0; color: rgba(242,235,221,0.6); }
.addr:hover .addr__hint, .addr.is-copied .addr__hint { color: var(--red); }
.hero__scroll { display: flex; align-items: center; gap: 9px; font-family: var(--f-black); font-size: 12px; letter-spacing: 0; color: var(--cream); }
.hero__scroll i { display: block; width: 44px; height: 3px; background: var(--cream); position: relative; overflow: hidden; }
.hero__scroll i::after { content: ""; position: absolute; inset: 0; background: var(--red); transform: translateX(-100%); animation: sweep 2.2s var(--ease-out) infinite; }
@keyframes sweep { 0% { transform: translateX(-100%); } 60%,100% { transform: translateX(100%); } }

/* ══════ MC 像素层（融进 P5 版式，不改设计语言） ══════ */
/* 首屏物品栏：站在画面右侧，斜切后压扁，当成一块“贴纸” */
.px {
  position: absolute; right: clamp(48px, 11vw, 190px); bottom: clamp(96px, 19vh, 210px);
  z-index: 2; display: grid; gap: 9px; justify-items: start;
  transform-origin: 100% 100%;
  transform: rotate(-3.5deg) skewX(-6deg);
  pointer-events: none;
  animation: pxIn 0.8s var(--ease-slam) 1.55s both;
}
@keyframes pxIn {
  0% { opacity: 0; transform: rotate(-3.5deg) skewX(-6deg) translateY(-26px) scale(1.25); filter: blur(5px); }
  100% { opacity: 1; transform: rotate(-3.5deg) skewX(-6deg) translateY(0) scale(1); filter: blur(0); }
}
.px__row { display: flex; align-items: center; gap: 10px; }
.px__hearts, .px__hunger { display: flex; gap: 1px; align-items: center; }
.px__hunger { flex-direction: row; }
.px__hunger .px__heart svg { transform: scaleX(-1); }
.px__hud { display: flex; justify-content: space-between; gap: 22px; width: 100%; }
.px__heart {
  display: block; width: calc(var(--u, 22px) * 0.62); aspect-ratio: 1; opacity: 0;
  image-rendering: pixelated; background: center / 100% 100% no-repeat;
  animation: pxPop 0.4s var(--ease-slam) both;
}
.px__heart svg { display: none; }
/* 血量：空槽 + 满/半 */
.px__heart { background-image: url("assets/mc/container.png"); }
.px__heart.is-full { background-image: url("assets/mc/full.png"), url("assets/mc/container.png"); background-size: 100% 100%, 100% 100%; }
.px__heart.is-half { background-image: url("assets/mc/half.png"), url("assets/mc/container.png"); background-size: 100% 100%, 100% 100%; }
/* 饱食度 */
.px__hunger .px__heart { background-image: url("assets/mc/food_empty.png"); }
.px__hunger .px__heart.is-full { background-image: url("assets/mc/food_full.png"), url("assets/mc/food_empty.png"); background-size: 100% 100%, 100% 100%; }
.px__hunger .px__heart.is-half { background-image: url("assets/mc/food_half.png"), url("assets/mc/food_empty.png"); background-size: 100% 100%, 100% 100%; }
.px__heart.is-half { opacity: 0.25 !important; }
@keyframes pxPop { 0% { opacity: 0; transform: scale(0.2); } 100% { opacity: 1; transform: scale(1); } }
/* 物品栏：直接用游戏原版的 hotbar 贴图九宫格拉伸 */
.px__bar {
  --u: clamp(26px, 2.35vw, 34px);          /* 一格的实际尺寸 */
  position: relative; display: flex;
  padding: calc(var(--u) * 0.14) calc(var(--u) * 0.06);
  image-rendering: pixelated;
  background-image: url("assets/mc/hotbar.png");
  background-size: 100% 100%;
  background-repeat: no-repeat;
  filter: brightness(0.82) contrast(1.05);
  transform: translate(var(--u), 0);
}
.px__slot {
  position: relative; display: grid; place-items: center;
  width: var(--u); height: var(--u);
  opacity: 0; animation: pxPop 0.35s var(--ease-slam) both;
}
.px__slot.is-sel::after {
  content: ""; position: absolute; left: 50%; top: 50%;
  width: calc(var(--u) * 1.44); height: calc(var(--u) * 1.38);
  transform: translate(-50%, -50%); image-rendering: pixelated;
  background: url("assets/mc/hotbar_selection.png") center / 100% 100% no-repeat;
}
.px__count {
  position: absolute; right: 1px; bottom: 0;
  font-family: var(--f-mono); font-size: 9px; line-height: 1;
  color: #fff; text-shadow: 1px 1px 0 #3f3f3f, 2px 2px 0 #000;
  text-decoration: none; letter-spacing: 0;
}
.px__icon { width: 84%; height: 84%; image-rendering: pixelated; background: center / contain no-repeat; }
.px__icon[data-item="sword"] { background-image: url("assets/mc/diamond_sword.png"); }
.px__icon[data-item="pick"] { background-image: url("assets/mc/diamond_pickaxe.png"); }
.px__icon[data-item="alloy"] { background-image: url("assets/mc/andesite_alloy.png"); }
.px__icon[data-item="cobble"] { background-image: url("assets/mc/cobblestone.png"); }
.px__coord {
  font-family: var(--f-mono); font-size: 9px; letter-spacing: 0;
  color: rgba(242,235,221,0.72); text-shadow: 2px 2px 0 rgba(12,12,12,0.85);
}

/* 题目段：一轮像素月亮 + 块状山脊，压在“02”后面 */
.pxscene {
  position: absolute; right: 0; bottom: 0; width: min(46%, 620px); aspect-ratio: 208 / 120;
  height: auto; max-height: 62%;
  z-index: 0; pointer-events: none; opacity: 0.9;
  mask-image: linear-gradient(255deg, #000 55%, transparent 92%);
  -webkit-mask-image: linear-gradient(255deg, #000 55%, transparent 92%);
}
.pxscene canvas { display: block; width: 100%; height: 100%; image-rendering: pixelated; }

/* 苦力怕 / 鞘翅：块状剪影 */
.sil--creeper {
  right: 20%; top: 46%; width: clamp(110px, 12vw, 190px);
  opacity: 0.95;
  animation: creeperBob 7s ease-in-out infinite;
}
@keyframes creeperBob {
  0%, 100% { transform: translateY(0) rotate(-2deg); }
  50% { transform: translateY(-12px) rotate(2deg); }
}
.sil--elytra {
  right: 4%; bottom: 12%; width: clamp(120px, 15vw, 230px);
  opacity: 0.2;
  animation: elytraFlap 5.5s ease-in-out infinite;
}
@keyframes elytraFlap {
  0%, 100% { transform: rotate(-6deg) scaleY(1); }
  50% { transform: rotate(-2deg) scaleY(0.92); }
}

/* 卡片：字形加一层“方块斜切”，像 MC 的方块贴图厚边 */
.card__glyph {
  filter: drop-shadow(4px 4px 0 rgba(12,12,12,0.18));
}
.card--red .card__glyph { filter: drop-shadow(4px 4px 0 rgba(242,235,221,0.4)); }
/* 卡片悬停时出现选中的方块框（MC 的 block outline） */
.card::after {
  content: ""; position: absolute; inset: 7px; pointer-events: none;
  border: 2px solid rgba(12,12,12,0.85); opacity: 0;
  transition: opacity 0.14s var(--ease-out), inset 0.2s var(--ease-slam);
}
.card:hover::after { opacity: 1; inset: 4px; }
.card--red::after { border-color: rgba(12,12,12,0.9); }

/* 载入条改成方块分段 */
.loader__line {
  height: 12px; background: rgba(242,235,221,0.18);
  box-shadow: inset 0 0 0 2px rgba(12,12,12,0.45);
}
.loader__line i {
  background: repeating-linear-gradient(90deg, var(--cream) 0 8px, rgba(242,235,221,0.25) 8px 11px);
  box-shadow: 0 0 0 1px rgba(12,12,12,0.3);
}

/* 剪影：机械动力 / 航空学（块状剪影，做背景层） */
.sil { position: absolute; z-index: 0; pointer-events: none; display: block; }
.sil__svg { display: block; width: 100%; height: auto; shape-rendering: crispEdges; }

/* 题目段：一架方块飞机穿过像素山脊上空 */
.sil--plane {
  right: 30%; top: 9%; width: clamp(90px, 11vw, 170px);
  opacity: 0.38;
  animation: planeDrift 26s linear infinite;
}
@keyframes planeDrift {
  0% { transform: translate(-40px, 26px) rotate(-3deg); opacity: 0; }
  8% { opacity: 0.5; }
  50% { transform: translate(60px, -8px) rotate(3deg); }
  92% { opacity: 0.5; }
  100% { transform: translate(140px, 18px) rotate(-2deg); opacity: 0; }
}

/* 线路段：齿轮沉底慢转，机车在底部横移 */
.sil--gear {
  right: -4%; bottom: -10%; width: clamp(180px, 22vw, 340px);
  opacity: 0.13;
  animation: gearTurn 26s steps(20, end) infinite;
}
@keyframes gearTurn { from { transform: rotate(0deg); } to { transform: rotate(360deg); } }

.sil--train {
  left: 6%; bottom: 7%; width: clamp(150px, 18vw, 270px);
  opacity: 0.16;
  animation: trainMove 34s linear infinite alternate;
}
@keyframes trainMove {
  0% { transform: translateX(-36px); }
  100% { transform: translateX(92px); }
}

/* 红底加入区：一枚压住角落的齿轮 */
.sil--gear2 {
  left: -6%; bottom: -14%; width: clamp(170px, 20vw, 300px);
  opacity: 0.16;
  animation: gearTurn 40s steps(24, end) infinite reverse;
}

/* ══════ 跑马灯 ══════ */
.ticker { background: var(--red); color: var(--cream); overflow: hidden; padding: 9px 0; transform: skewY(-1.4deg); margin: -1px 0; }
.ticker__track {
  display: flex; align-items: center; gap: 26px; width: max-content; white-space: nowrap;
  animation: marquee 22s linear infinite;
  font-family: var(--f-black); font-size: 12px; letter-spacing: 0;
}
.ticker__track b { font-family: var(--f-display); font-weight: 400; opacity: 0.65; }
@keyframes marquee { from { transform: translateX(0); } to { transform: translateX(-50%); } }

/* ══════ 贰 · 题 ══════ */
.verse { position: relative; padding: calc(76px + clamp(64px, 11vh, 150px)) clamp(16px, 3.4vw, 44px); overflow: hidden; }
.verse__num {
  position: absolute; right: 2%; top: -4%; font-family: var(--f-display); font-size: 360px;
  color: transparent; -webkit-text-stroke: 2px rgba(212,32,31,0.35); line-height: 1; pointer-events: none; user-select: none;
}
.verse__line { margin: 0; font-family: var(--f-black); font-size: 120px; line-height: 1.2; letter-spacing: 0; }
.verse__line--red { color: var(--red); text-shadow: 5px 5px 0 rgba(12,12,12,0.92); }
.verse__line--small {
  margin-top: clamp(16px, 3vh, 32px); font-family: var(--f-black); font-size: 12px;
  letter-spacing: 0; color: var(--ink);
}

/* 刚性斜切后直接定格：字形不挤压、不拉伸、不越过终点回弹。 */
[data-split] .ch { display: inline-block; opacity: 0; transform-origin: 50% 80%; }
.verse__line--red, .join__title [data-split] { --impact-ink: var(--black); }
[data-split].in.reveal-down .ch { animation: charSlam 0.32s var(--ease-impact) both; animation-name: var(--char-enter-down, charSlam); animation-delay: var(--char-delay); }
[data-split].in.reveal-up .ch { animation: charSlamUp 0.32s var(--ease-impact) both; animation-name: var(--char-enter-up, charSlamUp); animation-delay: var(--char-delay-up); }
@keyframes charSlamUp {
  0% { opacity: 0; transform: translate3d(36%, 85%, 0) rotate(14deg); filter: drop-shadow(14px -4px 0 var(--impact-ink, var(--red))); }
  8% { opacity: 1; }
  64% { opacity: 1; transform: none; filter: drop-shadow(4px -1px 0 var(--impact-ink, var(--red))); }
  65%, 100% { opacity: 1; transform: none; filter: none; }
}

/* ══════ 叁 · 城 ══════ */
.city { position: relative; padding: calc(76px + clamp(56px, 10vh, 130px)) clamp(16px, 3.4vw, 44px) clamp(90px, 16vh, 190px); }
.city__head { display: flex; align-items: center; gap: 20px; margin-bottom: clamp(36px, 7vh, 78px); }
.city__title { margin: 0; font-family: var(--f-black); font-size: 120px; line-height: 1; letter-spacing: 0; }

.deck { display: grid; grid-template-columns: repeat(3, 1fr); column-gap: clamp(14px, 1.8vw, 26px); row-gap: clamp(52px, 6.5vw, 96px); }
.card {
  position: relative; aspect-ratio: 3 / 4; padding: clamp(14px, 1.6vw, 22px);
  background: var(--white); border: 3px solid var(--black);
  transform: rotate(var(--r, -3deg)) skewY(var(--sy, 2deg)) translateY(var(--ty, 0));
  box-shadow: 12px 14px 0 var(--black);
  transition: transform 0.24s var(--ease-slam), box-shadow 0.24s var(--ease-slam), background 0.2s;
  overflow: hidden; opacity: 0;
}
.deck { align-items: start; padding-bottom: 42px; }
.deck .card:nth-child(even) { box-shadow: 14px 10px 0 var(--black); }
.deck .card:nth-child(3n) { box-shadow: 9px 17px 0 var(--black); }
.card:nth-child(3n + 1) { --card-x: -110px; --card-y: 100px; --card-angle: -14deg; }
.card:nth-child(3n + 2) { --card-x: 0px; --card-y: 150px; --card-angle: 9deg; }
.card:nth-child(3n) { --card-x: 110px; --card-y: 85px; --card-angle: 14deg; }
.card.is-in.reveal-down { opacity: 1; animation: cardSlam 0.36s var(--ease-impact) both; animation-delay: var(--card-delay); }
.card.is-in.reveal-up { opacity: 1; animation: cardSlamUp 0.36s var(--ease-impact) both; animation-delay: var(--card-delay); }
.card.is-out { opacity: 0; transition: opacity 0.3s, transform 0.4s var(--ease-out); }
@keyframes cardSlamUp {
  0% { opacity: 0; translate: calc(0px - var(--card-x)) calc(0px - var(--card-y)); rotate: calc(0deg - var(--card-angle)); }
  8% { opacity: 1; }
  68%, 100% { opacity: 1; translate: 0 0; rotate: 0deg; }
}
@keyframes cardSlam {
  0% { opacity: 0; translate: var(--card-x) var(--card-y); rotate: var(--card-angle); }
  8% { opacity: 1; }
  68%, 100% { opacity: 1; translate: 0 0; rotate: 0deg; }
}
.card::before {
  content: ""; position: absolute; inset: -12% -30%; z-index: 4; pointer-events: none;
  background: var(--red); opacity: 0;
  clip-path: polygon(0 40%, 100% 16%, 100% 50%, 0 74%);
}
.card.is-in::before { animation: cardCut 0.24s linear both; animation-delay: var(--card-delay); }
.card.is-in.reveal-up::before { animation-direction: reverse; }
@keyframes cardCut {
  0%, 10% { opacity: 0; transform: translateX(-110%); }
  24% { opacity: 0.94; transform: translateX(-18%); }
  52% { opacity: 0.94; transform: translateX(46%); }
  74%, 100% { opacity: 0; transform: translateX(115%); }
}
.card.is-in .card__glyph { animation: glyphStamp 0.28s var(--ease-impact) backwards; animation-delay: calc(var(--card-delay) + 0.06s); }
@keyframes glyphStamp {
  0% { opacity: 0; transform: translate(15%, -24%) rotate(-10deg); }
  8% { opacity: 1; }
  64%, 100% { opacity: 1; transform: none; }
}
.card:hover { transform: rotate(var(--r, -3deg)) skewY(var(--sy, 2deg)) translateY(calc(var(--ty, 0px) - 10px)); box-shadow: 20px 22px 0 var(--red); z-index: 3; }

.card__no {
  position: absolute; left: clamp(12px, 1.4vw, 18px); top: clamp(8px, 1vw, 14px);
  font-family: var(--f-mono); font-size: 18px; letter-spacing: 0; opacity: 0.85;
}
.card__glyph {
  position: absolute; left: 50%; top: 42%; translate: -50% -50%;
  font-family: var(--f-black); font-weight: 400; font-size: 120px; line-height: 1;
  color: var(--black); transition: color 0.14s, transform 0.22s var(--ease-slam);
}
.card--red .card__glyph { color: var(--red); }
.card:hover .card__glyph { color: var(--red); transform: rotate(-4deg); }
.card--red:hover .card__glyph { color: var(--black); }
.card__seal {
  position: absolute; right: clamp(12px, 1.4vw, 18px); bottom: 31%;
  display: grid; place-items: center; width: clamp(24px, 2.4vw, 32px); aspect-ratio: 1;
  background: var(--red); color: var(--cream); font-family: var(--f-black); font-size: 12px;
  transform: rotate(-8deg); transition: transform 0.22s var(--ease-slam);
}
.card:hover .card__seal { transform: rotate(8deg); }
.card__meta { position: absolute; left: clamp(12px, 1.4vw, 18px); right: clamp(12px, 1.4vw, 18px); bottom: clamp(12px, 1.4vw, 18px); }
.card__meta h3 {
  margin: 0; font-family: var(--f-black); font-size: 24px; letter-spacing: 0;
  border-top: 2px solid var(--black); padding-top: 8px;
}
.card__meta p { margin: 4px 0 0; font-size: 12px; letter-spacing: 0; color: #4a4640; line-height: 2; }
.card__lines {
  position: absolute; inset: 0; pointer-events: none; opacity: 0.1;
  background-image: repeating-linear-gradient(-18deg, var(--black) 0 1px, transparent 1px 7px);
}
.card:hover .card__lines { opacity: 0.22; }

/* ══════ 肆 · 线 ══════ */
.line { position: relative; padding: calc(76px + clamp(56px, 10vh, 130px)) clamp(16px, 3.4vw, 44px); background: var(--black); color: var(--cream); overflow: hidden; }
.line::before {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background-image: radial-gradient(rgba(242,235,221,0.28) 1px, transparent 1.3px);
  background-size: 5px 5px; opacity: 0.35;
  mask-image: linear-gradient(180deg, transparent, #000 30%, #000 70%, transparent);
  -webkit-mask-image: linear-gradient(180deg, transparent, #000 30%, #000 70%, transparent);
}
.line__head { position: relative; z-index: 2; display: flex; align-items: flex-start; gap: 20px; margin-bottom: clamp(40px, 8vh, 90px); }
.line__title { margin: 0; font-family: var(--f-black); font-size: 96px; line-height: 1.25; letter-spacing: 0; }

.lanes { position: relative; z-index: 2; display: flex; flex-direction: column; gap: clamp(38px, 7vh, 78px); }
.lane { display: grid; grid-template-columns: clamp(52px, 6vw, 84px) 1fr; align-items: center; gap: clamp(12px, 2vw, 26px); }
.lane__no { font-family: var(--f-display); font-size: 36px; letter-spacing: 0; color: var(--cream); }
.lane__no--red { color: var(--red); }
.lane__track { position: relative; height: 4px; background: rgba(242,235,221,0.2); transform: skewY(-1.2deg); }
.lane__fill { position: absolute; inset: 0; background: var(--cream); transform: scaleX(0); transform-origin: left; transition: transform 0.36s var(--ease-impact); }
.lane.reveal-up .lane__fill { transform-origin: right; }
.lane__track--red .lane__fill { background: var(--red); }
.lane.is-in .lane__fill { transform: scaleX(1); }
.lane__dot {
  position: absolute; top: 50%; left: 0; width: 14px; height: 14px; translate: -50% -50%;
  background: var(--red); clip-path: polygon(50% 0%, 100% 50%, 50% 100%, 0% 50%); opacity: 0;
}
.lane__track--red .lane__dot { background: var(--cream); }
.lane.is-in .lane__dot { opacity: 1; animation: ride 11s linear infinite 1s; }
.lane.is-in.reveal-up .lane__dot { animation-direction: reverse; }
@keyframes ride { 0% { left: 0%; } 100% { left: 100%; } }
.lane__stops {
  grid-column: 2 / 3; display: flex; justify-content: space-between; margin-top: 12px;
  font-family: var(--f-black); font-size: 12px; letter-spacing: 0; color: rgba(242,235,221,0.86);
}
.line__foot { position: relative; z-index: 2; margin: clamp(44px, 9vh, 100px) 0 0; font-family: var(--f-black); font-size: 12px; letter-spacing: 0; }

/* ══════ 伍 · 入 ══════ */
.join { position: relative; padding: calc(76px + clamp(16px, 4vh, 44px)) clamp(16px, 3.4vw, 44px) calc(48px + clamp(28px, 6vh, 70px)); background: var(--red); color: var(--cream); overflow: hidden; }
.join__halftone {
  position: absolute; inset: 0; opacity: 0.4;
  background-image: radial-gradient(rgba(12,12,12,0.4) 1px, transparent 1.4px);
  background-size: 5px 5px;
  mask-image: linear-gradient(200deg, #000 0%, transparent 62%);
  -webkit-mask-image: linear-gradient(200deg, #000 0%, transparent 62%);
}
/* 右侧拼贴：斜纹带 + 巨大描边号码 + 站牌 */
.join__stripes {
  position: absolute; right: -8%; top: -12%; width: 46%; height: 132%;
  background: repeating-linear-gradient(112deg, rgba(12,12,12,0.13) 0 10px, transparent 10px 26px);
  pointer-events: none;
}
.join__ghost {
  position: absolute; right: clamp(-30px, 1vw, 40px); bottom: -6%;
  font-family: var(--f-display); font-size: 432px; line-height: 0.8;
  color: transparent; -webkit-text-stroke: 3px rgba(12,12,12,0.22);
  pointer-events: none; user-select: none;
}
.join__board {
  position: absolute; right: clamp(28px, 7vw, 130px); top: clamp(96px, 16%, 180px);
  display: grid; justify-items: start; gap: 2px; padding: 14px 26px 16px;
  background: var(--cream); color: var(--black); border: 4px solid var(--black);
  box-shadow: 11px 11px 0 rgba(12,12,12,0.85);
  transform: rotate(4deg); pointer-events: none;
  animation: boardSway 9s ease-in-out infinite;
}
.join__board b { font-family: var(--f-display); font-size: 36px; line-height: 1; letter-spacing: 0; }
.join__board span { font-family: var(--f-black); font-size: 12px; letter-spacing: 0; }
.join__board span:last-child { color: var(--red); font-size: 12px; }
@keyframes boardSway {
  0%, 100% { transform: rotate(4deg) translateY(0); }
  50% { transform: rotate(2deg) translateY(-10px); }
}
.join > *:not(.join__halftone):not(.join__stripes):not(.join__ghost):not(.join__board):not(.join__seal) { position: relative; z-index: 2; }
.join__title {
  margin: 18px 0 clamp(34px, 7vh, 70px); max-width: min(760px, 64vw); font-family: var(--f-black); font-weight: 400;
  font-size: 168px; line-height: 1; letter-spacing: 0;
  text-shadow: 7px 7px 0 var(--black);
}
.join__row { display: flex; flex-wrap: wrap; gap: clamp(12px, 2vw, 22px); max-width: min(720px, 62vw); }
.join__cell {
  display: flex; flex-direction: column; gap: 6px; text-align: left;
  padding: 16px 22px; background: var(--cream); color: var(--black);
  border: 3px solid var(--black); box-shadow: 8px 8px 0 var(--black);
  transform: skewX(-6deg);
  transition: transform 0.2s var(--ease-slam), box-shadow 0.2s var(--ease-slam);
}
.join__cell:hover { transform: skewX(-6deg) translate(-4px, -4px); box-shadow: 13px 13px 0 var(--black); }
.join__cell.is-copied { background: var(--black); color: var(--cream); }
.join__cell b { font-family: var(--f-mono); font-weight: 400; font-size: 18px; }
/* 米白卡片上的标签要反成黑色，否则看不见 */
.join__cell .addr__k {
  color: var(--black); border-color: var(--black);
  font-size: 12px; letter-spacing: 0; padding: 2px 8px; align-self: flex-start;
}
.join__cell.is-copied .addr__k { color: var(--cream); border-color: var(--cream); }
.join__cell--dim { background: rgba(242,235,221,0.45); }
.join__cell--dim b { font-family: var(--f-black); }
.join__hint { font-style: normal; font-size: 12px; letter-spacing: 0; opacity: 0.6; }
.join__note { margin: 22px 0 0; font-family: var(--f-black); font-size: 12px; letter-spacing: 0; opacity: 0.85; }
.join__seal {
  position: absolute; right: clamp(120px, 21vw, 340px); bottom: clamp(24px, 6vh, 70px); translate: 0 0;
  display: grid; place-items: center; width: clamp(96px, 13vw, 190px); aspect-ratio: 1;
  border: 8px solid var(--black); color: var(--black); font-family: var(--f-display);
  font-size: 36px; letter-spacing: 0;
  transform: rotate(-11deg); opacity: 0.92; z-index: 3;
  box-shadow: 10px 10px 0 rgba(12,12,12,0.18);
}
.join__seal::after {
  content: "EST. 2021"; position: absolute; bottom: -26px; right: -8px;
  font-family: var(--f-black); font-size: 12px; letter-spacing: 0; color: var(--black); opacity: 0.75;
}

.foot {
  display: flex; align-items: center; justify-content: space-between; gap: 16px;
  padding: 16px clamp(16px, 3.4vw, 44px); background: var(--black); color: rgba(242,235,221,0.7);
  font-family: var(--f-black); font-size: 12px; letter-spacing: 0;
}
.foot__mid { color: var(--red); }

/* 分区使用不同运动语言；动画方向锁定在进入视口的那一刻。 */
.city__title, .line__title, .line__foot, .join__title [data-split] {
  --char-enter-down: none; --char-enter-up: none; opacity: 0;
}
.city__title .ch, .line__title .ch, .line__foot .ch, .join__title [data-split] .ch { opacity: 1; }

/* 城：标题像纸片被揭开，卡片从三个不同角度发牌式切入。 */
.city__title.in.reveal-down { animation: titleSlice 0.3s var(--ease-impact) both; }
.city__title.in.reveal-up { animation: titleSliceUp 0.3s var(--ease-impact) both; }
@keyframes titleSlice {
  0% { opacity: 0; transform: translate3d(-42px, 0, 0); clip-path: polygon(-20% -20%, -20% -20%, -40% 120%, -40% 120%); }
  8% { opacity: 1; }
  72%, 100% { opacity: 1; transform: none; clip-path: polygon(-20% -20%, 120% -20%, 120% 120%, -20% 120%); }
}
@keyframes titleSliceUp {
  0% { opacity: 0; transform: translate3d(42px, 0, 0); clip-path: polygon(140% -20%, 140% -20%, 120% 120%, 120% 120%); }
  8% { opacity: 1; }
  72%, 100% { opacity: 1; transform: none; clip-path: polygon(-20% -20%, 120% -20%, 120% 120%, -20% 120%); }
}

/* 线：横向贯穿，标题、线路和站名以同一个方向快速铺开。 */
.line__title { --rail-travel: 100px; }
.line__foot { --rail-travel: 40px; }
.lane { --rail-travel: 70px; opacity: 0; }
.line__title.in.reveal-down, .line__foot.in.reveal-down, .lane.in.reveal-down { animation: railCut 0.34s var(--ease-impact) both; }
.line__title.in.reveal-up, .line__foot.in.reveal-up, .lane.in.reveal-up { animation: railCutUp 0.34s var(--ease-impact) both; }
@keyframes railCut {
  0% { opacity: 0; transform: translate3d(calc(0px - var(--rail-travel)), 0, 0); clip-path: inset(-20% 100% -20% -20%); }
  8% { opacity: 1; }
  72%, 100% { opacity: 1; transform: none; clip-path: inset(-20%); }
}
@keyframes railCutUp {
  0% { opacity: 0; transform: translate3d(var(--rail-travel), 0, 0); clip-path: inset(-20% -20% -20% 100%); }
  8% { opacity: 1; }
  72%, 100% { opacity: 1; transform: none; clip-path: inset(-20%); }
}

/* 入：两行海报从相反侧对切，入口按钮另以整排票券的方式推入。 */
.join__title [data-split] { display: inline-block; --poster-x: -110px; --poster-angle: -7deg; }
.join__title [data-split]:last-child { --poster-x: 110px; --poster-angle: 7deg; }
.join__title [data-split].in.reveal-down { animation: posterCut 0.36s var(--ease-impact) both; }
.join__title [data-split].in.reveal-up { animation: posterCutUp 0.36s var(--ease-impact) both; }
@keyframes posterCut {
  0% { opacity: 0; transform: translate3d(var(--poster-x), 32px, 0) rotate(var(--poster-angle)); clip-path: inset(100% -20% -20%); }
  8% { opacity: 1; }
  68%, 100% { opacity: 1; transform: none; clip-path: inset(-20%); }
}
@keyframes posterCutUp {
  0% { opacity: 0; transform: translate3d(calc(0px - var(--poster-x)), -32px, 0) rotate(calc(0deg - var(--poster-angle))); clip-path: inset(-20% -20% 100%); }
  8% { opacity: 1; }
  68%, 100% { opacity: 1; transform: none; clip-path: inset(-20%); }
}
.join__row[data-reveal] { opacity: 0; }
.join__row.in.reveal-down { animation: ticketCut 0.28s var(--ease-impact) both; }
.join__row.in.reveal-up { animation: ticketCutUp 0.28s var(--ease-impact) both; }
@keyframes ticketCut {
  0% { opacity: 0; transform: translate3d(36px, 48px, 0) rotate(-3deg); }
  8% { opacity: 1; }
  72%, 100% { opacity: 1; transform: none; }
}
@keyframes ticketCutUp {
  0% { opacity: 0; transform: translate3d(-36px, -48px, 0) rotate(3deg); }
  8% { opacity: 1; }
  72%, 100% { opacity: 1; transform: none; }
}

/* ══════ 响应式 ══════ */
@media (max-width: 1200px) {
  .hero__title { font-size: 252px; }
  .verse__line, .city__title { font-size: 96px; }
  .verse__line--small { font-size: 12px; }
  .line__title { font-size: 72px; }
  .join__title { font-size: 120px; }
  .card__glyph { font-size: 96px; }
  .verse__num, .join__ghost { font-size: 288px; }
}
@media (max-width: 1000px) {
  .deck { grid-template-columns: repeat(2, 1fr); }
  .nav { display: none; }
  .top__meta { margin-left: auto; }
  .join__seal { display: none; }
}
@media (max-width: 800px) {
  .px { top: 24%; bottom: auto; right: 24px; }
  .hero__title { font-size: 216px; }
  .verse__line, .city__title { font-size: 72px; }
  .verse__line--small { font-size: 12px; }
  .line__title { font-size: 48px; }
  .join__title { font-size: 96px; }
}
@media (max-width: 620px) {
  body { cursor: auto; }
  .cursor { display: none; }
  button, a { cursor: pointer; }
  .sil--creeper { right: 6%; width: 96px; }
  .hero__title { font-size: 144px; }
  .hero__scroll { display: none; }
  .addr { display: grid; grid-template-columns: auto 1fr; gap: 4px 12px; }
  .addr__hint { grid-column: 2; }
  .verse__line, .city__title { font-size: 48px; }
  .verse__line--small { font-size: 12px; }
  .verse__num, .join__ghost { font-size: 180px; }
  .line__title { font-size: 36px; }
  .lane__no { font-size: 27px; }
  .join__title { font-size: 72px; max-width: 100%; }
  .join__row { max-width: 100%; }
  .join__board b { font-size: 27px; }
  .join__board { top: 80px; right: 24px; }
  .deck { grid-template-columns: 1fr; }
  .card { aspect-ratio: 4 / 3.2; }
  .lane { grid-template-columns: 44px 1fr; }
}
@media (max-width: 380px) {
  .sil--creeper { right: 16px; width: 80px; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: 0.001ms !important; animation-delay: 0ms !important; animation-iteration-count: 1 !important; transition-duration: 0.001ms !important; }
  [data-split] .ch { opacity: 1; transform: none; filter: none; }
  .hero__title .ch { opacity: 1; }
  .card { opacity: 1; }
  .city__title, .line__title, .join__title, .line__foot { opacity: 1; transform: none; }
  .join__title [data-split], .lane, .join__row[data-reveal] { opacity: 1; transform: none; clip-path: none; }
}


/* ══════ 尾部常驻动效 ══════ */
.join__seal { animation: sealBreath 7s ease-in-out infinite; }
@keyframes sealBreath {
  0%,100% { transform: rotate(-11deg) scale(1); }
  50% { transform: rotate(-7deg) scale(1.04); }
}
.join__halftone { animation: halftoneShift 18s linear infinite; }
@keyframes halftoneShift {
  0% { background-position: 0 0; }
  100% { background-position: 60px 60px; }
}
.foot { position: relative; overflow: hidden; }
.foot::after {
  content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 30%;
  background: linear-gradient(90deg, transparent, rgba(212,32,31,0.35), transparent);
  animation: footSweep 6s var(--ease-out) infinite;
}
@keyframes footSweep { 0% { transform: translateX(-120%); } 60%,100% { transform: translateX(420%); } }

/* 回滚时的镜像速度线 */
body.dir-up .speedlines { transform: scaleY(-1); }

.card > span, .join__cell > span, .join__cell > i { pointer-events: none; }