Почетна Преглед Помоћ
Регистрација Пријавите се
haiany
/
huashu-design
огледало од https://github.com/alchaincyf/huashu-design.git
1
0
Креирај огранак 0
Датотеке Дискусије 0 Вики
Грана: master
Гране Ознаке
huashu-design
/
demos
/
w2-junior-designer-en.html

w2-junior-designer-en.html 31 KB
Пермалинк Историја Датотека

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499500501502503504505506507508509510511512513514515516517518519520521522523524525526527528529530531532533534535536537538539540541542543544545546547548549550551552553554555556557558559560561562563564565566567568569570571572573574575576577578579580581582583584585586587588589590591592593594595596597598599600601602603604605606607608609610611612613614615616617618619620621622623624625626627628629630631632633634635636637638639640641642643644645646647648649650651652653654655656657658659660661662663664665666667668669670671672673674675676677678679680681682683684685686687688689690691692693694695696697698699700701702703704705706707708709710711712713714715716717718719720721722723724725726727728729730731732733734735736737738739740741742743744745746747748749750751752753754755756757758759760761762763764765766767768769770771772773774775776777778779780781782783784785786787788789790791792793794795796797798799800801802803804805806807808809810811812813814815816817818819820821822823824825826827828829830831832833834835836837838839840841842843844845846847848849850851852853854855856857858859860861862863864865866867868869870871872873874875876877878879880881882883884885886887888889890891892893894895896897898899900901902903904905906907908909910911912913914915916917918919920921922923924925926927928929930931932933934935936937938939940941942943944945946947948949950951952953954955956957958959960961962963964965966967968969970971972973974975976977978979980981982983 
  1. <!doctype html>
    2. 

  2. <html lang="en">
    3. 

  3. <head>
    4. 

  4. <meta charset="utf-8" />
    5. 

  5. <title>w2 · Rough draft now beats perfect draft later</title>
    6. 

  6. <link rel="preconnect" href="https://fonts.googleapis.com">
    7. 

  7. <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
    8. 

  8. <link href="https://fonts.googleapis.com/css2?family=Source+Serif+4:ital,opsz,wght@0,8..60,300..700;1,8..60,300..700&family=Noto+Serif+SC:wght@200;300;400;500;600&family=Inter:wght@100;200;300;400;500;600;700;800&family=JetBrains+Mono:wght@400;500&display=swap" rel="stylesheet">
    9. 

  9. <style>
    10. 

  10.   :root {
    11. 

  11.     --bg: #000000;
    12. 

  12.     --ink: #FFFFFF;
    13. 

  13.     --ink-80: rgba(255,255,255,0.82);
    14. 

  14.     --ink-60: rgba(255,255,255,0.58);
    15. 

  15.     --muted: rgba(255,255,255,0.40);
    16. 

  16.     --dim: rgba(255,255,255,0.18);
    17. 

  17.     --hairline: rgba(255,255,255,0.12);
    18. 

  18.     --accent: #D97757;
    19. 

  19.     --accent-deep: #B85D3D;
    20. 

  20.     --bad: #6E3A2E;           /* 失败暗红调，不刺眼 */
    21. 

  21.     --bad-strong: #C85A42;    /* 失败叉号强调，对比度提升 */
    22. 

  22.     --cool: rgba(255,255,255,0.42); /* 冷色参考线（左路径） */
    23. 

  23.     --cd-bg: #F5F4F0;
    24. 

  24.     --cd-panel: #FFFFFF;
    25. 

  25.     --cd-ink: #1A1918;
    26. 

  26. 

  27.     --serif-zh: "Noto Serif SC", "Songti SC", serif;
    28. 

  28.     --serif-en: "Source Serif 4", "Tiempos Headline", Georgia, serif;
    29. 

  29.     --sans: "Inter", -apple-system, "PingFang SC", "HarmonyOS Sans SC", system-ui, sans-serif;
    30. 

  30.     --mono: "JetBrains Mono", "SF Mono", ui-monospace, monospace;
    31. 

  31.   }
    32. 

  32.   html, body {
    33. 

  33.     margin: 0; padding: 0;
    34. 

  34.     background: #000;
    35. 

  35.     overflow: hidden;
    36. 

  36.     font-family: var(--sans);
    37. 

  37.     color: var(--ink);
    38. 

  38.     -webkit-font-smoothing: antialiased;
    39. 

  39.   }
    40. 

  40.   * { box-sizing: border-box; }
    41. 

  41. 

  42.   .stage {
    43. 

  43.     position: fixed;
    44. 

  44.     top: 50%; left: 50%;
    45. 

  45.     width: 1920px; height: 1080px;
    46. 

  46.     transform-origin: center center;
    47. 

  47.     background: var(--bg);
    48. 

  48.     overflow: hidden;
    49. 

  49.   }
    50. 

  50. 

  51.   /* Film grain */
    52. 

  52.   .stage::before {
    53. 

  53.     content: '';
    54. 

  54.     position: absolute;
    55. 

  55.     inset: 0;
    56. 

  56.     background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='300' height='300'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2'/></filter><rect width='100%25' height='100%25' filter='url(%23n)' opacity='0.5'/></svg>");
    57. 

  57.     opacity: 0.02;
    58. 

  58.     pointer-events: none;
    59. 

  59.     z-index: 100;
    60. 

  60.   }
    61. 

  61. 

  62.   /* Chrome · watermark */
    63. 

  63.   .mark {
    64. 

  64.     position: absolute;
    65. 

  65.     top: 48px; left: 64px;
    66. 

  66.     font-family: var(--mono);
    67. 

  67.     font-size: 13px;
    68. 

  68.     letter-spacing: 0.2em;
    69. 

  69.     color: rgba(255,255,255,1);
    70. 

  70.     opacity: 0.16;
    71. 

  71.     pointer-events: none;
    72. 

  72.     z-index: 50;
    73. 

  73.   }
    74. 

  74.   .mark-right {
    75. 

  75.     position: absolute;
    76. 

  76.     top: 48px; right: 64px;
    77. 

  77.     font-family: var(--mono);
    78. 

  78.     font-size: 13px;
    79. 

  79.     letter-spacing: 0.2em;
    80. 

  80.     color: rgba(255,255,255,1);
    81. 

  81.     opacity: 0.16;
    82. 

  82.     pointer-events: none;
    83. 

  83.     z-index: 50;
    84. 

  84.   }
    85. 

  85. 

  86.   /* Title */
    87. 

  87.   .title-line {
    88. 

  88.     position: absolute;
    89. 

  89.     top: 112px;
    90. 

  90.     left: 50%;
    91. 

  91.     transform: translateX(-50%);
    92. 

  92.     font-family: var(--mono);
    93. 

  93.     font-size: 14px;
    94. 

  94.     letter-spacing: 0.28em;
    95. 

  95.     color: var(--muted);
    96. 

  96.     text-transform: uppercase;
    97. 

  97.     opacity: 0;
    98. 

  98.     will-change: opacity;
    99. 

  99.     white-space: nowrap;
    100. 

  100.   }
    101. 

  101. 

  102.   /* Splitter — horizontal line dividing the two halves */
    103. 

  103.   .splitter {
    104. 

  104.     position: absolute;
    105. 

  105.     left: 160px;
    106. 

  106.     right: 160px;
    107. 

  107.     top: 50%;
    108. 

  108.     height: 1px;
    109. 

  109.     background: var(--hairline);
    110. 

  110.     transform: scaleX(0);
    111. 

  111.     transform-origin: left center;
    112. 

  112.     will-change: transform;
    113. 

  113.     z-index: 5;
    114. 

  114.   }
    115. 

  115.   .splitter-label {
    116. 

  116.     position: absolute;
    117. 

  117.     top: 50%;
    118. 

  118.     left: 50%;
    119. 

  119.     transform: translate(-50%, -50%);
    120. 

  120.     background: var(--bg);
    121. 

  121.     padding: 0 28px;
    122. 

  122.     font-family: var(--mono);
    123. 

  123.     font-size: 11px;
    124. 

  124.     letter-spacing: 0.32em;
    125. 

  125.     color: var(--muted);
    126. 

  126.     z-index: 6;
    127. 

  127.     opacity: 0;
    128. 

  128.     will-change: opacity;
    129. 

  129.     white-space: nowrap;
    130. 

  130.   }
    131. 

  131. 

  132.   /* ======================================================
    133. 

  133.    * TOP HALF · 闷头一把梭（3 hours, all at once）
    134. 

  134.    * ====================================================== */
    135. 

  135.   .half-top {
    136. 

  136.     position: absolute;
    137. 

  137.     top: 200px;
    138. 

  138.     left: 160px;
    139. 

  139.     right: 160px;
    140. 

  140.     height: 300px;
    141. 

  141.     opacity: 0;
    142. 

  142.     will-change: opacity;
    143. 

  143.   }
    144. 

  144.   .half-label {
    145. 

  145.     font-family: var(--mono);
    146. 

  146.     font-size: 13px;
    147. 

  147.     letter-spacing: 0.24em;
    148. 

  148.     color: var(--muted);
    149. 

  149.     text-transform: uppercase;
    150. 

  150.     margin-bottom: 24px;
    151. 

  151.     display: flex;
    152. 

  152.     align-items: center;
    153. 

  153.     gap: 12px;
    154. 

  154.   }
    155. 

  155.   .half-label .tag {
    156. 

  156.     padding: 3px 10px;
    157. 

  157.     border: 1px solid var(--hairline);
    158. 

  158.     border-radius: 2px;
    159. 

  159.     color: var(--ink-60);
    160. 

  160.   }
    161. 

  161.   .half-top .half-label .tag { border-color: rgba(160,74,56,0.4); color: rgba(200,120,100,0.85); }
    162. 

  162.   .half-label .zh {
    163. 

  163.     font-family: var(--serif-zh);
    164. 

  164.     font-size: 22px;
    165. 

  165.     font-weight: 400;
    166. 

  166.     letter-spacing: 0.02em;
    167. 

  167.     color: var(--ink-80);
    168. 

  168.     margin-left: 4px;
    169. 

  169.   }
    170. 

  170. 

  171.   /* Single huge terminal panel */
    172. 

  172.   .terminal-big {
    173. 

  173.     width: 100%;
    174. 

  174.     height: 200px;
    175. 

  175.     background: rgba(20, 20, 20, 1);
    176. 

  176.     border: 1px solid var(--hairline);
    177. 

  177.     border-radius: 10px;
    178. 

  178.     overflow: hidden;
    179. 

  179.     box-shadow:
    180. 

  180.       0 0 0 1px rgba(255,255,255,0.02),
    181. 

  181.       0 40px 80px -30px rgba(0,0,0,0.7);
    182. 

  182.     position: relative;
    183. 

  183.   }
    184. 

  184.   .tty-head {
    185. 

  185.     display: flex;
    186. 

  186.     align-items: center;
    187. 

  187.     gap: 8px;
    188. 

  188.     padding: 14px 18px;
    189. 

  189.     border-bottom: 1px solid var(--hairline);
    190. 

  190.     background: rgba(255,255,255,0.02);
    191. 

  191.   }
    192. 

  192.   .tty-head .d {
    193. 

  193.     width: 10px; height: 10px; border-radius: 50%;
    194. 

  194.     background: var(--hairline);
    195. 

  195.   }
    196. 

  196.   .tty-title {
    197. 

  197.     margin-left: 14px;
    198. 

  198.     color: var(--muted);
    199. 

  199.     font-size: 12px;
    200. 

  200.     font-family: var(--mono);
    201. 

  201.     letter-spacing: 0.04em;
    202. 

  202.   }
    203. 

  203.   .tty-body {
    204. 

  204.     padding: 28px 30px;
    205. 

  205.     font-family: var(--mono);
    206. 

  206.     font-size: 17px;
    207. 

  207.     line-height: 1.6;
    208. 

  208.     color: rgba(255,255,255,0.86);
    209. 

  209.   }
    210. 

  210.   .tty-body .line {
    211. 

  211.     opacity: 0;
    212. 

  212.     will-change: opacity;
    213. 

  213.   }
    214. 

  214.   .tty-body .prompt { color: var(--accent); margin-right: 10px; }
    215. 

  215.   .tty-body .dim { color: var(--muted); }
    216. 

  216. 

  217.   /* The long running progress bar (simulated "3-hour render") */
    218. 

  218.   .progress-row {
    219. 

  219.     margin-top: 14px;
    220. 

  220.     display: flex;
    221. 

  221.     align-items: center;
    222. 

  222.     gap: 14px;
    223. 

  223.     font-family: var(--mono);
    224. 

  224.     font-size: 14px;
    225. 

  225.     color: var(--ink-60);
    226. 

  226.     opacity: 0;
    227. 

  227.     will-change: opacity;
    228. 

  228.   }
    229. 

  229.   .progress-bar {
    230. 

  230.     flex: 1;
    231. 

  231.     height: 4px;
    232. 

  232.     background: var(--hairline);
    233. 

  233.     border-radius: 2px;
    234. 

  234.     position: relative;
    235. 

  235.     overflow: hidden;
    236. 

  236.   }
    237. 

  237.   .progress-bar-fill {
    238. 

  238.     position: absolute;
    239. 

  239.     top: 0; left: 0;
    240. 

  240.     height: 100%;
    241. 

  241.     background: var(--accent);
    242. 

  242.     width: 0%;
    243. 

  243.     will-change: width, background;
    244. 

  244.   }
    245. 

  245.   .progress-bar.failed .progress-bar-fill {
    246. 

  246.     background: var(--bad-strong);
    247. 

  247.   }
    248. 

  248.   .progress-pct {
    249. 

  249.     font-variant-numeric: tabular-nums;
    250. 

  250.     letter-spacing: 0.04em;
    251. 

  251.     min-width: 54px;
    252. 

  252.     text-align: right;
    253. 

  253.   }
    254. 

  254.   .progress-hours {
    255. 

  255.     color: var(--muted);
    256. 

  256.     font-size: 12px;
    257. 

  257.     letter-spacing: 0.12em;
    258. 

  258.   }
    259. 

  259.   .progress-row.failed {
    260. 

  260.     color: var(--bad-strong);
    261. 

  261.   }
    262. 

  262. 

  263.   /* Big X overlay for failure stamp */
    264. 

  264.   .fail-stamp {
    265. 

  265.     position: absolute;
    266. 

  266.     right: 32px;
    267. 

  267.     top: 50%;
    268. 

  268.     transform: translateY(-50%) rotate(-8deg);
    269. 

  269.     width: 120px; height: 120px;
    270. 

  270.     pointer-events: none;
    271. 

  271.     opacity: 0;
    272. 

  272.     will-change: opacity, transform;
    273. 

  273.     z-index: 10;
    274. 

  274.   }
    275. 

  275.   .fail-stamp svg { width: 100%; height: 100%; }
    276. 

  276.   .fail-stamp .stamp-text {
    277. 

  277.     position: absolute;
    278. 

  278.     bottom: -22px;
    279. 

  279.     left: 50%;
    280. 

  280.     transform: translateX(-50%);
    281. 

  281.     font-family: var(--mono);
    282. 

  282.     font-size: 10px;
    283. 

  283.     letter-spacing: 0.32em;
    284. 

  284.     color: var(--bad-strong);
    285. 

  285.     white-space: nowrap;
    286. 

  286.   }
    287. 

  287. 

  288.   /* ======================================================
    289. 

  289.    * BOTTOM HALF · 尽早 show（small iterations）
    290. 

  290.    * ====================================================== */
    291. 

  291.   .half-bot {
    292. 

  292.     position: absolute;
    293. 

  293.     top: 580px;
    294. 

  294.     left: 160px;
    295. 

  295.     right: 160px;
    296. 

  296.     height: 340px;
    297. 

  297.     opacity: 0;
    298. 

  298.     will-change: opacity;
    299. 

  299.   }
    300. 

  300.   .half-bot .half-label .tag {
    301. 

  301.     border-color: rgba(217,119,87,0.35);
    302. 

  302.     color: var(--accent);
    303. 

  303.   }
    304. 

  304. 

  305.   .iter-row {
    306. 

  306.     display: flex;
    307. 

  307.     gap: 32px;
    308. 

  308.     align-items: flex-end;
    309. 

  309.     height: 240px;
    310. 

  310.     margin-top: 12px;
    311. 

  311.   }
    312. 

  312. 

  313.   .iter-panel {
    314. 

  314.     flex: 1;
    315. 

  315.     background: rgba(20, 20, 20, 1);
    316. 

  316.     border: 1px solid var(--hairline);
    317. 

  317.     border-radius: 8px;
    318. 

  318.     overflow: hidden;
    319. 

  319.     height: 100%;
    320. 

  320.     position: relative;
    321. 

  321.     opacity: 0;
    322. 

  322.     transform: translateY(20px);
    323. 

  323.     will-change: opacity, transform;
    324. 

  324.     display: flex;
    325. 

  325.     flex-direction: column;
    326. 

  326.   }
    327. 

  327.   .iter-panel .ip-head {
    328. 

  328.     padding: 10px 14px;
    329. 

  329.     border-bottom: 1px solid var(--hairline);
    330. 

  330.     font-family: var(--mono);
    331. 

  331.     font-size: 11px;
    332. 

  332.     letter-spacing: 0.16em;
    333. 

  333.     color: var(--muted);
    334. 

  334.     display: flex;
    335. 

  335.     align-items: center;
    336. 

  336.     justify-content: space-between;
    337. 

  337.   }
    338. 

  338.   .iter-panel .ip-version {
    339. 

  339.     color: var(--accent);
    340. 

  340.     font-weight: 500;
    341. 

  341.   }
    342. 

  342.   .iter-panel .ip-body {
    343. 

  343.     flex: 1;
    344. 

  344.     padding: 16px 18px;
    345. 

  345.     display: flex;
    346. 

  346.     flex-direction: column;
    347. 

  347.     justify-content: center;
    348. 

  348.     gap: 10px;
    349. 

  349.   }
    350. 

  350.   /* Rough mockup blocks that grow more detailed each iteration */
    351. 

  351.   .iter-panel .m-block {
    352. 

  352.     height: 8px;
    353. 

  353.     background: var(--dim);
    354. 

  354.     border-radius: 2px;
    355. 

  355.     opacity: 0.8;
    356. 

  356.   }
    357. 

  357.   .iter-panel .m-block.accent { background: var(--accent); opacity: 0.8; }
    358. 

  358.   .iter-panel .m-block.short { width: 40%; }
    359. 

  359.   .iter-panel .m-block.med { width: 70%; }
    360. 

  360.   .iter-panel .m-block.full { width: 100%; }
    361. 

  361.   .iter-panel .m-block.tall { height: 24px; }
    362. 

  362.   .iter-panel .m-block.big { height: 40px; }
    363. 

  363. 

  364.   .iter-panel .nod {
    365. 

  365.     position: absolute;
    366. 

  366.     top: 10px;
    367. 

  367.     right: 14px;
    368. 

  368.     width: 16px; height: 16px;
    369. 

  369.     opacity: 0;
    370. 

  370.     will-change: opacity, transform;
    371. 

  371.   }
    372. 

  372.   .iter-panel .nod svg {
    373. 

  373.     width: 100%; height: 100%;
    374. 

  374.     stroke: var(--accent);
    375. 

  375.     fill: none;
    376. 

  376.     stroke-width: 2;
    377. 

  377.   }
    378. 

  378.   .iter-panel .ip-minutes {
    379. 

  379.     position: absolute;
    380. 

  380.     bottom: 10px;
    381. 

  381.     left: 14px;
    382. 

  382.     font-family: var(--mono);
    383. 

  383.     font-size: 10px;
    384. 

  384.     letter-spacing: 0.12em;
    385. 

  385.     color: var(--muted);
    386. 

  386.   }
    387. 

  387. 

  388.   /* Rising curve visualization for bottom half */
    389. 

  389.   .curve-wrap {
    390. 

  390.     position: absolute;
    391. 

  391.     right: 0;
    392. 

  392.     bottom: 0;
    393. 

  393.     width: 340px;
    394. 

  394.     height: 180px;
    395. 

  395.     opacity: 0;
    396. 

  396.     will-change: opacity;
    397. 

  397.   }
    398. 

  398.   .curve-wrap svg {
    399. 

  399.     width: 100%;
    400. 

  400.     height: 100%;
    401. 

  401.     overflow: visible;
    402. 

  402.   }
    403. 

  403.   .curve-wrap .axis {
    404. 

  404.     stroke: var(--hairline);
    405. 

  405.     stroke-width: 1;
    406. 

  406.     fill: none;
    407. 

  407.   }
    408. 

  408.   .curve-wrap .curve-path {
    409. 

  409.     stroke: var(--accent);
    410. 

  410.     stroke-width: 2;
    411. 

  411.     fill: none;
    412. 

  412.     stroke-linecap: round;
    413. 

  413.     stroke-linejoin: round;
    414. 

  414.   }
    415. 

  415.   .curve-wrap .curve-dot {
    416. 

  416.     fill: var(--accent);
    417. 

  417.     r: 3;
    418. 

  418.   }
    419. 

  419.   .curve-wrap .curve-label {
    420. 

  420.     font-family: var(--mono);
    421. 

  421.     font-size: 9px;
    422. 

  422.     fill: var(--muted);
    423. 

  423.     letter-spacing: 0.12em;
    424. 

  424.   }
    425. 

  425. 

  426.   /* ======================================================
    427. 

  427.    * BEAT 3 · Full comparison chart crossfade
    428. 

  428.    * ====================================================== */
    429. 

  429.   .final-chart {
    430. 

  430.     position: absolute;
    431. 

  431.     left: 50%;
    432. 

  432.     top: 50%;
    433. 

  433.     transform: translate(-50%, -50%);
    434. 

  434.     width: 1280px;
    435. 

  435.     height: 620px;
    436. 

  436.     opacity: 0;
    437. 

  437.     will-change: opacity;
    438. 

  438.     z-index: 60;
    439. 

  439.   }
    440. 

  440.   .final-chart svg {
    441. 

  441.     width: 100%; height: 100%;
    442. 

  442.     overflow: visible;
    443. 

  443.   }
    444. 

  444.   .final-chart .axis {
    445. 

  445.     stroke: var(--hairline);
    446. 

  446.     stroke-width: 1;
    447. 

  447.     fill: none;
    448. 

  448.   }
    449. 

  449.   .final-chart .axis-label {
    450. 

  450.     font-family: var(--mono);
    451. 

  451.     font-size: 13px;
    452. 

  452.     fill: var(--muted);
    453. 

  453.     letter-spacing: 0.16em;
    454. 

  454.   }
    455. 

  455.   .final-chart .tick-label {
    456. 

  456.     font-family: var(--mono);
    457. 

  457.     font-size: 11px;
    458. 

  458.     fill: var(--dim);
    459. 

  459.     letter-spacing: 0.06em;
    460. 

  460.   }
    461. 

  461.   .final-chart .curve-a {
    462. 

  462.     stroke: var(--cool);
    463. 

  463.     stroke-width: 2;
    464. 

  464.     fill: none;
    465. 

  465.     stroke-linecap: round;
    466. 

  466.     stroke-linejoin: round;
    467. 

  467.   }
    468. 

  468.   .final-chart .curve-a-dash {
    469. 

  469.     stroke: var(--bad-strong);
    470. 

  470.     stroke-width: 2.5;
    471. 

  471.     fill: none;
    472. 

  472.     stroke-dasharray: 5 7;
    473. 

  473.     stroke-linecap: round;
    474. 

  474.   }
    475. 

  475.   .final-chart .curve-b {
    476. 

  476.     stroke: var(--accent);
    477. 

  477.     stroke-width: 3;
    478. 

  478.     fill: none;
    479. 

  479.     stroke-linecap: round;
    480. 

  480.     stroke-linejoin: round;
    481. 

  481.   }
    482. 

  482.   .final-chart .curve-b-glow {
    483. 

  483.     stroke: var(--accent);
    484. 

  484.     stroke-width: 6;
    485. 

  485.     fill: none;
    486. 

  486.     opacity: 0.18;
    487. 

  487.     stroke-linecap: round;
    488. 

  488.     stroke-linejoin: round;
    489. 

  489.   }
    490. 

  490.   .final-chart .curve-dot {
    491. 

  491.     fill: var(--accent);
    492. 

  492.   }
    493. 

  493.   .final-chart .fail-dot {
    494. 

  494.     fill: none;
    495. 

  495.     stroke: var(--bad-strong);
    496. 

  496.     stroke-width: 2.5;
    497. 

  497.   }
    498. 

  498.   .final-chart .cool-dot {
    499. 

  499.     fill: var(--cool);
    500. 

  500.   }
    501. 

  501.   .final-chart .anchor-label {
    502. 

  502.     font-family: var(--serif-zh);
    503. 

  503.     font-size: 20px;
    504. 

  504.     font-weight: 400;
    505. 

  505.     letter-spacing: 0.02em;
    506. 

  506.   }
    507. 

  507.   .final-chart .anchor-en {
    508. 

  508.     font-family: var(--mono);
    509. 

  509.     font-size: 11px;
    510. 

  510.     letter-spacing: 0.18em;
    511. 

  511.     text-transform: uppercase;
    512. 

  512.   }
    513. 

  513. 

  514.   /* ======================================================
    515. 

  515.    * BRAND REVEAL — 统一动作
    516. 

  516.    * ====================================================== */
    517. 

  517.   .brand-sheet {
    518. 

  518.     position: absolute;
    519. 

  519.     inset: 0;
    520. 

  520.     background: var(--cd-bg);
    521. 

  521.     transform: translateY(100%);
    522. 

  522.     will-change: transform;
    523. 

  523.     z-index: 80;
    524. 

  524.   }
    525. 

  525.   .brand-reveal {
    526. 

  526.     position: absolute;
    527. 

  527.     inset: 0;
    528. 

  528.     z-index: 81;
    529. 

  529.     display: flex;
    530. 

  530.     flex-direction: column;
    531. 

  531.     align-items: center;
    532. 

  532.     justify-content: center;
    533. 

  533.     opacity: 0;
    534. 

  534.     will-change: opacity;
    535. 

  535.   }
    536. 

  536.   .brand-reveal .wordmark {
    537. 

  537.     font-family: var(--sans);
    538. 

  538.     font-weight: 100;
    539. 

  539.     font-size: 128px;
    540. 

  540.     letter-spacing: -0.045em;
    541. 

  541.     color: var(--cd-ink);
    542. 

  542.     line-height: 1;
    543. 

  543.   }
    544. 

  544.   .brand-reveal .wordmark .accent { color: var(--accent-deep); }
    545. 

  545.   .brand-reveal .underline {
    546. 

  546.     width: 0;
    547. 

  547.     height: 2px;
    548. 

  548.     background: var(--accent);
    549. 

  549.     margin-top: 36px;
    550. 

  550.     will-change: width;
    551. 

  551.   }
    552. 

  552. </style>
    553. 

  553. </head>
    554. 

  554. <body>
    555. 

  555.   <div class="stage" id="stage">
    556. 

  556.     <div class="mark">HUASHU · DESIGN</div>
    557. 

  557.     <div class="mark-right">V2 · 2026</div>
    558. 

  558. 

  559.     <div class="title-line" id="titleLine">w2 · rough draft now beats perfect draft later</div>
    560. 

  560. 

  561.     <!-- Splitter -->
    562. 

  562.     <div class="splitter" id="splitter"></div>
    563. 

  563.     <div class="splitter-label" id="splitterLabel">VS</div>
    564. 

  564. 

  565.     <!-- ============ TOP HALF: All-at-once ============ -->
    566. 

  566.     <div class="half-top" id="halfTop">
    567. 

  567.       <div class="half-label">
    568. 

  568.         <span class="tag">A</span>
    569. 

  569.         <span class="zh" style="font-family: var(--serif-en); font-style: italic; letter-spacing: 0.01em;">All-at-once</span>
    570. 

  570.         <span style="font-family: var(--mono); color: var(--muted); letter-spacing: 0.18em; font-size: 11px; margin-left: auto;">3&nbsp;HOUR&nbsp;SESSION</span>
    571. 

  571.       </div>
    572. 

  572.       <div class="terminal-big">
    573. 

  573.         <div class="tty-head">
    574. 

  574.           <div class="d"></div><div class="d"></div><div class="d"></div>
    575. 

  575.           <div class="tty-title">designer@studio · 3h session</div>
    576. 

  576.         </div>
    577. 

  577.         <div class="tty-body">
    578. 

  578.           <div class="line" id="ttyL1"><span class="prompt">$</span>build final_design.html <span class="dim">// v1.0 · ship it all at once</span></div>
    579. 

  579.           <div class="progress-row" id="progRow">
    580. 

  580.             <div class="progress-bar" id="progBar">
    581. 

  581.               <div class="progress-bar-fill" id="progFill"></div>
    582. 

  582.             </div>
    583. 

  583.             <span class="progress-pct" id="progPct">0%</span>
    584. 

  584.             <span class="progress-hours" id="progHours">03:00:00</span>
    585. 

  585.           </div>
    586. 

  586.         </div>
    587. 

  587.         <div class="fail-stamp" id="failStamp">
    588. 

  588.           <svg viewBox="0 0 120 120">
    589. 

  589.             <circle cx="60" cy="60" r="52" fill="none" stroke="#A04A38" stroke-width="3"/>
    590. 

  590.             <path d="M 38 38 L 82 82 M 82 38 L 38 82" stroke="#A04A38" stroke-width="4" stroke-linecap="round"/>
    591. 

  591.           </svg>
    592. 

  592.           <div class="stamp-text">REJECTED</div>
    593. 

  593.         </div>
    594. 

  594.       </div>
    595. 

  595.     </div>
    596. 

  596. 

  597.     <!-- ============ BOTTOM HALF: Show early ============ -->
    598. 

  598.     <div class="half-bot" id="halfBot">
    599. 

  599.       <div class="half-label">
    600. 

  600.         <span class="tag">B</span>
    601. 

  601.         <span class="zh" style="font-family: var(--serif-en); font-style: italic; letter-spacing: 0.01em;">Show early</span>
    602. 

  602.         <span style="font-family: var(--mono); color: var(--muted); letter-spacing: 0.18em; font-size: 11px; margin-left: auto;">SMALL&nbsp;ITERATIONS</span>
    603. 

  603.       </div>
    604. 

  604.       <div class="iter-row">
    605. 

  605.         <div class="iter-panel" id="iter1">
    606. 

  606.           <div class="ip-head">
    607. 

  607.             <span>draft · v1</span>
    608. 

  608.             <span class="ip-version">15 min</span>
    609. 

  609.           </div>
    610. 

  610.           <div class="ip-body">
    611. 

  611.             <div class="m-block short"></div>
    612. 

  612.             <div class="m-block med"></div>
    613. 

  613.             <div class="m-block short"></div>
    614. 

  614.           </div>
    615. 

  615.           <div class="nod" id="nod1">
    616. 

  616.             <svg viewBox="0 0 16 16"><path d="M3 8 L7 12 L13 4"/></svg>
    617. 

  617.           </div>
    618. 

  618.         </div>
    619. 

  619.         <div class="iter-panel" id="iter2">
    620. 

  620.           <div class="ip-head">
    621. 

  621.             <span>draft · v2</span>
    622. 

  622.             <span class="ip-version">25 min</span>
    623. 

  623.           </div>
    624. 

  624.           <div class="ip-body">
    625. 

  625.             <div class="m-block full tall"></div>
    626. 

  626.             <div class="m-block med"></div>
    627. 

  627.             <div class="m-block short"></div>
    628. 

  628.             <div class="m-block med accent"></div>
    629. 

  629.           </div>
    630. 

  630.           <div class="nod" id="nod2">
    631. 

  631.             <svg viewBox="0 0 16 16"><path d="M3 8 L7 12 L13 4"/></svg>
    632. 

  632.           </div>
    633. 

  633.         </div>
    634. 

  634.         <div class="iter-panel" id="iter3">
    635. 

  635.           <div class="ip-head">
    636. 

  636.             <span>draft · v3</span>
    637. 

  637.             <span class="ip-version">35 min</span>
    638. 

  638.           </div>
    639. 

  639.           <div class="ip-body">
    640. 

  640.             <div class="m-block full big"></div>
    641. 

  641.             <div class="m-block full tall accent"></div>
    642. 

  642.             <div class="m-block med"></div>
    643. 

  643.             <div class="m-block full"></div>
    644. 

  644.             <div class="m-block short"></div>
    645. 

  645.           </div>
    646. 

  646.           <div class="nod" id="nod3">
    647. 

  647.             <svg viewBox="0 0 16 16"><path d="M3 8 L7 12 L13 4"/></svg>
    648. 

  648.           </div>
    649. 

  649.         </div>
    650. 

  650.       </div>
    651. 

  651.     </div>
    652. 

  652. 

  653.     <!-- ============ Beat 3 · Final comparison chart ============ -->
    654. 

  654.     <div class="final-chart" id="finalChart">
    655. 

  655.       <svg viewBox="0 0 1280 620" preserveAspectRatio="xMidYMid meet">
    656. 

  656.         <!-- Axes -->
    657. 

  657.         <line class="axis" x1="110" y1="60" x2="110" y2="520"/>
    658. 

  658.         <line class="axis" x1="110" y1="520" x2="1200" y2="520"/>
    659. 

  659. 

  660.         <!-- Y-axis label -->
    661. 

  661.         <text class="axis-label" x="58" y="290" transform="rotate(-90 58 290)" text-anchor="middle">QUALITY</text>
    662. 

  662.         <!-- X-axis label -->
    663. 

  663.         <text class="axis-label" x="655" y="570" text-anchor="middle">TIME</text>
    664. 

  664. 

  665.         <!-- Tick marks -->
    666. 

  666.         <text class="tick-label" x="110" y="545" text-anchor="middle">0</text>
    667. 

  667.         <text class="tick-label" x="290" y="545" text-anchor="middle">15m</text>
    668. 

  668.         <text class="tick-label" x="480" y="545" text-anchor="middle">25m</text>
    669. 

  669.         <text class="tick-label" x="680" y="545" text-anchor="middle">35m</text>
    670. 

  670.         <text class="tick-label" x="1200" y="545" text-anchor="middle">3h</text>
    671. 

  671. 

  672.         <!-- Curve A (All-at-once): flat crawl near zero, late spike, then crash -->
    673. 

  673.         <path class="curve-a" id="curveA"
    674. 

  674.               d="M 110 500 L 400 495 L 700 490 L 1000 485 L 1140 180" />
    675. 

  675.         <path class="curve-a-dash" id="curveACrash"
    676. 

  676.               d="M 1140 180 L 1200 510" />
    677. 

  677.         <circle class="fail-dot" id="failDot" cx="1140" cy="180" r="9"/>
    678. 

  678.         <g id="failX" opacity="0">
    679. 

  679.           <line x1="1130" y1="170" x2="1150" y2="190" stroke="#C85A42" stroke-width="2.5" stroke-linecap="round"/>
    680. 

  680.           <line x1="1150" y1="170" x2="1130" y2="190" stroke="#C85A42" stroke-width="2.5" stroke-linecap="round"/>
    681. 

  681.         </g>
    682. 

  682. 

  683.         <text class="anchor-label" x="1200" y="150" fill="#C85A42" text-anchor="end" style="font-family: var(--serif-en); font-style: italic;">All-at-once</text>
    684. 

  684.         <text class="anchor-en" x="1200" y="170" fill="#C85A42" text-anchor="end">REJECTED</text>
    685. 

  685. 

  686.         <!-- Curve B (Show early): steady step rise across first 35 min -->
    687. 

  687.         <path class="curve-b-glow" id="curveBGlow"
    688. 

  688.               d="M 110 500 L 290 380 L 480 270 L 680 140" />
    689. 

  689.         <path class="curve-b" id="curveB"
    690. 

  690.               d="M 110 500 L 290 380 L 480 270 L 680 140" />
    691. 

  691.         <circle class="curve-dot" cx="290" cy="380" r="6"/>
    692. 

  692.         <circle class="curve-dot" cx="480" cy="270" r="6"/>
    693. 

  693.         <circle class="curve-dot" cx="680" cy="140" r="8"/>
    694. 

  694. 

  695.         <text class="anchor-label" x="680" y="115" fill="#D97757" text-anchor="middle" style="font-family: var(--serif-en); font-style: italic;">Show early</text>
    696. 

  696.         <text class="anchor-en" x="680" y="96" fill="#D97757" text-anchor="middle">SHIPPED</text>
    697. 

  697. 

  698.         <text class="tick-label" x="555" y="477" text-anchor="middle" fill="rgba(255,255,255,0.3)" style="letter-spacing: 0.12em;">— 3 hours silence —</text>
    699. 

  699.       </svg>
    700. 

  700.     </div>
    701. 

  701. 

  702.     <!-- Brand reveal -->
    703. 

  703.     <div class="brand-sheet" id="brandSheet"></div>
    704. 

  704.     <div class="brand-reveal" id="brandReveal">
    705. 

  705.       <div class="wordmark">huashu<span class="accent"> · </span>design</div>
    706. 

  706.       <div class="underline" id="brandUnderline"></div>
    707. 

  707.     </div>
    708. 

  708.   </div>
    709. 

  709. 

  710. <script>
    711. 

  711.   // Auto-scale stage
    712. 

  712.   function fitStage() {
    713. 

  713.     const stage = document.getElementById('stage');
    714. 

  714.     const sx = window.innerWidth / 1920;
    715. 

  715.     const sy = window.innerHeight / 1080;
    716. 

  716.     const s = Math.min(sx, sy);
    717. 

  717.     stage.style.transform = `translate(-50%, -50%) scale(${s})`;
    718. 

  718.   }
    719. 

  719.   fitStage();
    720. 

  720.   window.addEventListener('resize', fitStage);
    721. 

  721. 

  722.   // Easings
    723. 

  723.   const expoOut = t => t === 1 ? 1 : 1 - Math.pow(2, -10 * t);
    724. 

  724.   const expoIn  = t => t === 0 ? 0 : Math.pow(2, 10 * (t - 1));
    725. 

  725.   const cubicInOut = t => t < 0.5 ? 4 * t * t * t : 1 - Math.pow(-2 * t + 2, 3) / 2;
    726. 

  726.   const cubicOut = t => 1 - Math.pow(1 - t, 3);
    727. 

  727.   const cubicIn  = t => t * t * t;
    728. 

  728. 

  729.   function lerp(t, a, b, easing) {
    730. 

  730.     if (t <= 0) return a;
    731. 

  731.     if (t >= 1) return b;
    732. 

  732.     const e = easing ? easing(t) : t;
    733. 

  733.     return a + (b - a) * e;
    734. 

  734.   }
    735. 

  735.   function seg(time, start, end) {
    736. 

  736.     if (time <= start) return 0;
    737. 

  737.     if (time >= end) return 1;
    738. 

  738.     return (time - start) / (end - start);
    739. 

  739.   }
    740. 

  740. 

  741.   // ────────────────────────────────────
    742. 

  742.   // Timeline — total 12s (Beat 1: 0-2 · Beat 2: 2-10 · Beat 3: 10-12)
    743. 

  743.   //
    744. 

  744.   // 0.0-0.6    title + splitter grow
    745. 

  745.   // 0.6-1.4    two half-labels fade in (top first, then bot)
    746. 

  746.   // 1.4-2.0    top terminal line 1 types; bot panel 1 enters
    747. 

  747.   //
    748. 

  748.   // Top track (闷头):
    749. 

  749.   //   2.0-7.8  progress bar crawls from 0 to 99% (slow, painful)
    750. 

  750.   //   7.8-8.4  stuck at 99%
    751. 

  751.   //   8.4-8.9  fail stamp lands + bar turns red + bar drops to 0
    752. 

  752.   //
    753. 

  753.   // Bottom track (尽早):
    754. 

  754.   //   2.0-2.6  iter1 enters, nod1 appears @ 2.8
    755. 

  755.   //   3.6-4.2  iter2 enters, nod2 appears @ 4.4
    756. 

  756.   //   5.6-6.2  iter3 enters, nod3 appears @ 6.4 (final tick — biggest)
    757. 

  757.   //
    758. 

  758.   // 8.8-9.8    both halves dim; final chart crossfades in
    759. 

  759.   //             (curves draw via stroke-dasharray)
    760. 

  760.   // 9.8-10.4   chart settles, anchor labels bloom
    761. 

  761.   // 10.0-12.0  brand reveal (sheet + wordmark + underline)
    762. 

  762.   // ────────────────────────────────────
    763. 

  763. 

  764.   const el = {
    765. 

  765.     title:      document.getElementById('titleLine'),
    766. 

  766.     splitter:   document.getElementById('splitter'),
    767. 

  767.     splitterLb: document.getElementById('splitterLabel'),
    768. 

  768.     halfTop:    document.getElementById('halfTop'),
    769. 

  769.     halfBot:    document.getElementById('halfBot'),
    770. 

  770.     ttyL1:      document.getElementById('ttyL1'),
    771. 

  771.     progRow:    document.getElementById('progRow'),
    772. 

  772.     progBar:    document.getElementById('progBar'),
    773. 

  773.     progFill:   document.getElementById('progFill'),
    774. 

  774.     progPct:    document.getElementById('progPct'),
    775. 

  775.     progHours:  document.getElementById('progHours'),
    776. 

  776.     failStamp:  document.getElementById('failStamp'),
    777. 

  777.     iter1:      document.getElementById('iter1'),
    778. 

  778.     iter2:      document.getElementById('iter2'),
    779. 

  779.     iter3:      document.getElementById('iter3'),
    780. 

  780.     nod1:       document.getElementById('nod1'),
    781. 

  781.     nod2:       document.getElementById('nod2'),
    782. 

  782.     nod3:       document.getElementById('nod3'),
    783. 

  783.     finalChart: document.getElementById('finalChart'),
    784. 

  784.     brandSheet: document.getElementById('brandSheet'),
    785. 

  785.     brandReveal:document.getElementById('brandReveal'),
    786. 

  786.     brandUnder: document.getElementById('brandUnderline'),
    787. 

  787.     curveA:     document.getElementById('curveA'),
    788. 

  788.     curveACrash:document.getElementById('curveACrash'),
    789. 

  789.     curveB:     document.getElementById('curveB'),
    790. 

  790.     curveBGlow: document.getElementById('curveBGlow'),
    791. 

  791.   };
    792. 

  792. 

  793.   // Precompute path lengths for draw-on animation
    794. 

  794.   const lenA = el.curveA.getTotalLength();
    795. 

  795.   const lenACrash = el.curveACrash.getTotalLength();
    796. 

  796.   const lenB = el.curveB.getTotalLength();
    797. 

  797. 

  798.   el.curveA.style.strokeDasharray = `${lenA} ${lenA}`;
    799. 

  799.   el.curveA.style.strokeDashoffset = lenA;
    800. 

  800.   el.curveACrash.style.strokeDasharray = `${lenACrash} ${lenACrash}`;
    801. 

  801.   el.curveACrash.style.strokeDashoffset = lenACrash;
    802. 

  802.   el.curveB.style.strokeDasharray = `${lenB} ${lenB}`;
    803. 

  803.   el.curveB.style.strokeDashoffset = lenB;
    804. 

  804.   el.curveBGlow.style.strokeDasharray = `${lenB} ${lenB}`;
    805. 

  805.   el.curveBGlow.style.strokeDashoffset = lenB;
    806. 

  806. 

  807.   // Also precompute chart dot selections (hide initially)
    808. 

  808.   const chartDots = el.finalChart.querySelectorAll('circle');
    809. 

  809.   const chartAnchors = el.finalChart.querySelectorAll('.anchor-label, .anchor-en');
    810. 

  810.   const chartTicks = el.finalChart.querySelectorAll('.tick-label, .axis-label');
    811. 

  811. 

  812.   const DURATION = 12.0;
    813. 

  813.   let startTime = null;
    814. 

  814.   let loop = true;
    815. 

  815.   if (window.__recording === true) loop = false;
    816. 

  816. 

  817.   function tick(now) {
    818. 

  818.     if (startTime === null) startTime = now;
    819. 

  819.     let t = (now - startTime) / 1000;
    820. 

  820. 

  821.     if (t >= DURATION) {
    822. 

  822.       if (loop) { startTime = now; t = 0; }
    823. 

  823.       else { t = DURATION; }
    824. 

  824.     }
    825. 

  825. 

  826.     // ────── Title
    827. 

  827.     const titleIn = seg(t, 0.1, 1.0);
    828. 

  828.     const titleOut = seg(t, 9.2, 9.8);
    829. 

  829.     el.title.style.opacity = Math.max(0, Math.min(cubicOut(titleIn), 1 - titleOut));
    830. 

  830. 

  831.     // ────── Splitter (fade out earlier so Beat 3 is clean)
    832. 

  832.     const splitT = seg(t, 0.0, 0.8);
    833. 

  833.     const splitOut = seg(t, 8.4, 8.9);
    834. 

  834.     el.splitter.style.transform = `scaleX(${expoOut(splitT) * (1 - splitOut)})`;
    835. 

  835.     const splitLabelT = seg(t, 0.4, 1.0);
    836. 

  836.     const splitLabelOut = seg(t, 8.2, 8.7);
    837. 

  837.     el.splitterLb.style.opacity = Math.max(0, Math.min(cubicOut(splitLabelT), 1 - splitLabelOut));
    838. 

  838. 

  839.     // ────── Halves fade in / out (fade out earlier to clear for Beat 3 chart)
    840. 

  840.     const topIn = seg(t, 0.6, 1.4);
    841. 

  841.     const topOut = seg(t, 8.4, 9.0);
    842. 

  842.     el.halfTop.style.opacity = Math.max(0, Math.min(cubicOut(topIn), 1 - topOut));
    843. 

  843. 

  844.     const botIn = seg(t, 1.0, 1.8);
    845. 

  845.     const botOut = seg(t, 8.4, 9.0);
    846. 

  846.     el.halfBot.style.opacity = Math.max(0, Math.min(cubicOut(botIn), 1 - botOut));
    847. 

  847. 

  848.     // ────── TOP track: terminal line + progress bar
    849. 

  849.     const ttyL1In = seg(t, 1.4, 1.8);
    850. 

  850.     el.ttyL1.style.opacity = cubicOut(ttyL1In);
    851. 

  851. 

  852.     // Progress bar appears @ 1.8, starts crawling 2.0-7.8, stuck 7.8-8.4, fails @ 8.4
    853. 

  853.     const progRowIn = seg(t, 1.8, 2.2);
    854. 

  854.     el.progRow.style.opacity = cubicOut(progRowIn);
    855. 

  855. 

  856.     let pct = 0;
    857. 

  857.     let hoursTxt = '03:00:00';
    858. 

  858.     if (t >= 2.0 && t < 7.8) {
    859. 

  859.       const p = seg(t, 2.0, 7.8);
    860. 

  860.       // Easing: starts fast, slows down to 99% (mimics the "last 10% takes forever" trope)
    861. 

  861.       pct = 99 * (1 - Math.pow(1 - p, 2.2));
    862. 

  862.       const remaining = Math.max(0, (1 - p) * 3 * 60 * 60);
    863. 

  863.       const hh = String(Math.floor(remaining / 3600)).padStart(2, '0');
    864. 

  864.       const mm = String(Math.floor((remaining % 3600) / 60)).padStart(2, '0');
    865. 

  865.       const ss = String(Math.floor(remaining % 60)).padStart(2, '0');
    866. 

  866.       hoursTxt = `${hh}:${mm}:${ss}`;
    867. 

  867.     } else if (t >= 7.8 && t < 8.4) {
    868. 

  868.       pct = 99;
    869. 

  869.       // Micro-jitter to show "stuck"
    870. 

  870.       const jitter = Math.sin(t * 30) * 0.1;
    871. 

  871.       pct = 99 + jitter;
    872. 

  872.       hoursTxt = '00:00:12';
    873. 

  873.     } else if (t >= 8.4 && t < 8.7) {
    874. 

  874.       // Fail animation — pct stays at 99 briefly then snaps to 0
    875. 

  875.       pct = 99;
    876. 

  876.       hoursTxt = '— REJECTED —';
    877. 

  877.     } else if (t >= 8.7) {
    878. 

  878.       pct = 0;
    879. 

  879.       hoursTxt = '— REJECTED —';
    880. 

  880.     }
    881. 

  881. 

  882.     el.progFill.style.width = `${pct}%`;
    883. 

  883.     el.progPct.textContent = `${Math.floor(Math.max(0, pct))}%`;
    884. 

  884.     el.progHours.textContent = hoursTxt;
    885. 

  885. 

  886.     // Fail state toggle
    887. 

  887.     if (t >= 8.4) {
    888. 

  888.       el.progBar.classList.add('failed');
    889. 

  889.       el.progRow.classList.add('failed');
    890. 

  890.     } else {
    891. 

  891.       el.progBar.classList.remove('failed');
    892. 

  892.       el.progRow.classList.remove('failed');
    893. 

  893.     }
    894. 

  894. 

  895.     // Fail stamp lands at 8.4
    896. 

  896.     const stampIn = seg(t, 8.4, 8.7);
    897. 

  897.     if (stampIn > 0) {
    898. 

  898.       el.failStamp.style.opacity = cubicOut(stampIn);
    899. 

  899.       const scale = lerp(stampIn, 1.6, 1.0, expoOut);
    900. 

  900.       el.failStamp.style.transform = `translateY(-50%) rotate(-8deg) scale(${scale})`;
    901. 

  901.     } else {
    902. 

  902.       el.failStamp.style.opacity = 0;
    903. 

  903.     }
    904. 

  904. 

  905.     // ────── BOTTOM track: 3 iter panels
    906. 

  906.     const iterTimings = [
    907. 

  907.       { enter: [2.0, 2.6], nod: [2.8, 3.2] },
    908. 

  908.       { enter: [3.6, 4.2], nod: [4.4, 4.8] },
    909. 

  909.       { enter: [5.6, 6.2], nod: [6.4, 6.9] },
    910. 

  910.     ];
    911. 

  911. 

  912.     [el.iter1, el.iter2, el.iter3].forEach((panel, i) => {
    913. 

  913.       const { enter } = iterTimings[i];
    914. 

  914.       const p = seg(t, enter[0], enter[1]);
    915. 

  915.       const op = expoOut(p);
    916. 

  916.       const ty = lerp(p, 20, 0, expoOut);
    917. 

  917.       panel.style.opacity = op;
    918. 

  918.       panel.style.transform = `translateY(${ty}px)`;
    919. 

  919.     });
    920. 

  920. 

  921.     [el.nod1, el.nod2, el.nod3].forEach((n, i) => {
    922. 

  922.       const { nod } = iterTimings[i];
    923. 

  923.       const p = seg(t, nod[0], nod[1]);
    924. 

  924.       const op = expoOut(p);
    925. 

  925.       const scale = lerp(p, 0.4, 1.0, expoOut);
    926. 

  926.       n.style.opacity = op;
    927. 

  927.       n.style.transform = `scale(${scale})`;
    928. 

  928.     });
    929. 

  929. 

  930.     // ────── Beat 3 · final chart crossfade (chart appears as halves fade)
    931. 

  931.     const chartIn = seg(t, 8.5, 9.2);
    932. 

  932.     el.finalChart.style.opacity = cubicOut(chartIn);
    933. 

  933. 

  934.     const curveBT = seg(t, 8.8, 9.8);
    935. 

  935.     el.curveB.style.strokeDashoffset = lenB * (1 - expoOut(curveBT));
    936. 

  936.     el.curveBGlow.style.strokeDashoffset = lenB * (1 - expoOut(curveBT));
    937. 

  937. 

  938.     const curveAT = seg(t, 8.9, 9.7);
    939. 

  939.     el.curveA.style.strokeDashoffset = lenA * (1 - cubicOut(curveAT));
    940. 

  940.     const curveACrashT = seg(t, 9.7, 9.95);
    941. 

  941.     el.curveACrash.style.strokeDashoffset = lenACrash * (1 - expoOut(curveACrashT));
    942. 

  942.     const failXT = seg(t, 9.65, 9.85);
    943. 

  943.     const failXEl = document.getElementById('failX');
    944. 

  944.     if (failXEl) {
    945. 

  945.       failXEl.style.opacity = cubicOut(failXT);
    946. 

  946.       failXEl.style.transform = `scale(${lerp(failXT, 1.6, 1.0, expoOut)})`;
    947. 

  947.       failXEl.style.transformOrigin = '1140px 180px';
    948. 

  948.     }
    949. 

  949. 

  950.     chartDots.forEach((dot, i) => {
    951. 

  951.       const dotT = seg(t, 9.0 + i * 0.12, 9.3 + i * 0.12);
    952. 

  952.       dot.style.opacity = cubicOut(dotT);
    953. 

  953.     });
    954. 

  954.     chartAnchors.forEach((a) => {
    955. 

  955.       const aT = seg(t, 9.5, 9.95);
    956. 

  956.       a.style.opacity = cubicOut(aT);
    957. 

  957.     });
    958. 

  958.     chartTicks.forEach((tk) => {
    959. 

  959.       const tkT = seg(t, 8.7, 9.3);
    960. 

  960.       tk.style.opacity = cubicOut(tkT) * 0.9;
    961. 

  961.     });
    962. 

  962. 

  963.     // ────── Brand reveal 10.0-12.0
    964. 

  964.     const sheetT = seg(t, 10.0, 10.6);
    965. 

  965.     el.brandSheet.style.transform = `translateY(${lerp(sheetT, 100, 0, expoOut)}%)`;
    966. 

  966. 

  967.     const wordT = seg(t, 10.6, 11.4);
    968. 

  968.     el.brandReveal.style.opacity = cubicOut(wordT);
    969. 

  969. 

  970.     const underT = seg(t, 11.4, 11.9);
    971. 

  971.     el.brandUnder.style.width = `${lerp(underT, 0, 280, expoOut)}px`;
    972. 

  972. 

  973.     // Mark ready for recorder
    974. 

  974.     if (!window.__ready) window.__ready = true;
    975. 

  975. 

  976.     if (loop || t < DURATION) requestAnimationFrame(tick);
    977. 

  977.   }
    978. 

  978. 

  979.   (document.fonts && document.fonts.ready ? document.fonts.ready : Promise.resolve())
    980. 

  980.     .then(() => requestAnimationFrame(tick));
    981. 

  981. </script>
    982. 

  982. </body>
    983. 

  983. </html>
    984.