Эхлэл Бүгдийг харах Тусламж
Бүртгүүлэх Нэвтрэх
haiany
/
huashu-design
-ын хуулбар https://github.com/alchaincyf/huashu-design.git
1
0
Салаа 0
Файлууд Асуудлууд 0 Мэдлэгийн сан
Салаа: master
Салаанууд Тагууд
huashu-design
/
demos
/
w3-fallback-advisor-en.html

w3-fallback-advisor-en.html 23 KB
Байнгын холболт Түүх Анхны өгөгдөл

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499500501502503504505506507508509510511512513514515516517518519520521522523524525526527528529530531532533534535536537538539540541542543544545546547548549550551552553554555556557558559560561562563564565566567568569570571572573574575576577578579580581582583584585586587588589590591592593594595596597598599600601602603604605606607608609610611612613614615616617618619620621622623624625626627628629630631632633634635636637638639640641642643644645646647 
  1. <!doctype html>
    2. 

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

  3. <head>
    4. 

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

  5. <title>w3 · Fallback Advisor (English)</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=Inter:wght@200;300;400;500;600&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.     --cd-bg: #F5F4F0;
    21. 

  21.     --cd-ink: #1A1918;
    22. 

  22. 

  23.     --serif-en: "Source Serif 4", Georgia, serif;
    24. 

  24.     --sans: "Inter", -apple-system, system-ui, sans-serif;
    25. 

  25.     --mono: "JetBrains Mono", "SF Mono", ui-monospace, monospace;
    26. 

  26.   }
    27. 

  27.   html, body {
    28. 

  28.     margin: 0; padding: 0;
    29. 

  29.     background: #000;
    30. 

  30.     overflow: hidden;
    31. 

  31.     font-family: var(--sans);
    32. 

  32.     color: var(--ink);
    33. 

  33.     -webkit-font-smoothing: antialiased;
    34. 

  34.   }
    35. 

  35.   * { box-sizing: border-box; }
    36. 

  36. 

  37.   .stage {
    38. 

  38.     position: fixed;
    39. 

  39.     top: 50%; left: 50%;
    40. 

  40.     width: 1920px; height: 1080px;
    41. 

  41.     transform-origin: center center;
    42. 

  42.     background: var(--bg);
    43. 

  43.     overflow: hidden;
    44. 

  44.   }
    45. 

  45. 

  46.   /* Watermarks */
    47. 

  47.   .watermark-tl {
    48. 

  48.     position: absolute;
    49. 

  49.     top: 40px; left: 56px;
    50. 

  50.     font-family: var(--mono);
    51. 

  51.     font-size: 12px;
    52. 

  52.     letter-spacing: 0.2em;
    53. 

  53.     color: rgba(255,255,255,0.16);
    54. 

  54.     z-index: 200;
    55. 

  55.     pointer-events: none;
    56. 

  56.     text-transform: uppercase;
    57. 

  57.   }
    58. 

  58.   .watermark-br {
    59. 

  59.     position: absolute;
    60. 

  60.     bottom: 32px; right: 40px;
    61. 

  61.     font-family: var(--mono);
    62. 

  62.     font-size: 10px;
    63. 

  63.     letter-spacing: 0.24em;
    64. 

  64.     color: rgba(255,255,255,0.14);
    65. 

  65.     z-index: 200;
    66. 

  66.     pointer-events: none;
    67. 

  67.     text-transform: uppercase;
    68. 

  68.   }
    69. 

  69. 

  70.   /* Top title — English uses Serif Display */
    71. 

  71.   .top-title {
    72. 

  72.     position: absolute;
    73. 

  73.     top: 82px; left: 50%;
    74. 

  74.     transform: translateX(-50%);
    75. 

  75.     font-family: var(--serif-en);
    76. 

  76.     font-weight: 300;
    77. 

  77.     font-size: 46px;
    78. 

  78.     font-style: italic;
    79. 

  79.     letter-spacing: -0.01em;
    80. 

  80.     color: var(--ink-80);
    81. 

  81.     text-align: center;
    82. 

  82.     opacity: 0;
    83. 

  83.     will-change: opacity, transform;
    84. 

  84.     z-index: 120;
    85. 

  85.     line-height: 1.12;
    86. 

  86.   }
    87. 

  87.   .top-title .accent { color: var(--accent); font-style: italic; }
    88. 

  88. 

  89.   .sub-caption {
    90. 

  90.     position: absolute;
    91. 

  91.     top: 148px; left: 50%;
    92. 

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

  93.     font-family: var(--sans);
    94. 

  94.     font-weight: 300;
    95. 

  95.     font-size: 13px;
    96. 

  96.     letter-spacing: 0.34em;
    97. 

  97.     color: var(--muted);
    98. 

  98.     text-transform: uppercase;
    99. 

  99.     opacity: 0;
    100. 

  100.     will-change: opacity;
    101. 

  101.     z-index: 120;
    102. 

  102.   }
    103. 

  103. 

  104.   /* Philosophy wall */
    105. 

  105.   .wall-viewport {
    106. 

  106.     position: absolute;
    107. 

  107.     top: 50%; left: 50%;
    108. 

  108.     transform: translate(-50%, -50%);
    109. 

  109.     width: 1480px;
    110. 

  110.     height: 760px;
    111. 

  111.     perspective: 2400px;
    112. 

  112.     perspective-origin: 50% 50%;
    113. 

  113.     will-change: transform, opacity, filter;
    114. 

  114.   }
    115. 

  115.   .wall-grid {
    116. 

  116.     position: absolute;
    117. 

  117.     inset: 0;
    118. 

  118.     display: grid;
    119. 

  119.     grid-template-columns: repeat(5, 1fr);
    120. 

  120.     grid-template-rows: repeat(4, 1fr);
    121. 

  121.     gap: 18px;
    122. 

  122.     transform: rotateX(10deg) rotateY(-6deg);
    123. 

  123.     transform-style: preserve-3d;
    124. 

  124.     will-change: transform, opacity;
    125. 

  125.   }
    126. 

  126.   .cell {
    127. 

  127.     position: relative;
    128. 

  128.     background: #0f0f0f;
    129. 

  129.     border: 1px solid var(--hairline);
    130. 

  130.     border-radius: 8px;
    131. 

  131.     overflow: hidden;
    132. 

  132.     opacity: 0;
    133. 

  133.     will-change: opacity, transform, filter;
    134. 

  134.     display: flex;
    135. 

  135.     flex-direction: column;
    136. 

  136.     justify-content: space-between;
    137. 

  137.     padding: 14px 16px;
    138. 

  138.   }
    139. 

  139.   .cell .glyph {
    140. 

  140.     position: absolute;
    141. 

  141.     inset: 0;
    142. 

  142.     display: flex;
    143. 

  143.     align-items: center;
    144. 

  144.     justify-content: center;
    145. 

  145.     pointer-events: none;
    146. 

  146.   }
    147. 

  147.   .cell .name {
    148. 

  148.     position: relative;
    149. 

  149.     font-family: var(--mono);
    150. 

  150.     font-size: 11px;
    151. 

  151.     letter-spacing: 0.08em;
    152. 

  152.     color: var(--muted);
    153. 

  153.     z-index: 2;
    154. 

  154.     align-self: flex-end;
    155. 

  155.   }
    156. 

  156.   .cell .num {
    157. 

  157.     position: relative;
    158. 

  158.     font-family: var(--mono);
    159. 

  159.     font-size: 10px;
    160. 

  160.     color: var(--dim);
    161. 

  161.     letter-spacing: 0.1em;
    162. 

  162.     z-index: 2;
    163. 

  163.   }
    164. 

  164.   .cell.selected {
    165. 

  165.     border-color: var(--accent);
    166. 

  166.     background: #1a0f0a;
    167. 

  167.   }
    168. 

  168.   .cell.selected .name { color: var(--accent); }
    169. 

  169. 

  170.   /* Scan light */
    171. 

  171.   .scan-light {
    172. 

  172.     position: absolute;
    173. 

  173.     left: -5%;
    174. 

  174.     right: -5%;
    175. 

  175.     top: -15%;
    176. 

  176.     height: 200px;
    177. 

  177.     background: linear-gradient(
    178. 

  178.       180deg,
    179. 

  179.       rgba(217, 119, 87, 0) 0%,
    180. 

  180.       rgba(217, 119, 87, 0.18) 40%,
    181. 

  181.       rgba(255, 220, 200, 0.45) 50%,
    182. 

  182.       rgba(217, 119, 87, 0.18) 60%,
    183. 

  183.       rgba(217, 119, 87, 0) 100%
    184. 

  184.     );
    185. 

  185.     filter: blur(8px);
    186. 

  186.     z-index: 80;
    187. 

  187.     opacity: 0;
    188. 

  188.     will-change: opacity, transform;
    189. 

  189.     pointer-events: none;
    190. 

  190.   }
    191. 

  191. 

  192.   /* Foreground 3 cards */
    193. 

  193.   .fg-row {
    194. 

  194.     position: absolute;
    195. 

  195.     top: 50%; left: 50%;
    196. 

  196.     transform: translate(-50%, -50%);
    197. 

  197.     display: flex;
    198. 

  198.     gap: 56px;
    199. 

  199.     opacity: 0;
    200. 

  200.     will-change: opacity;
    201. 

  201.     z-index: 100;
    202. 

  202.   }
    203. 

  203.   .fg-card {
    204. 

  204.     width: 440px;
    205. 

  205.     display: flex;
    206. 

  206.     flex-direction: column;
    207. 

  207.     opacity: 0;
    208. 

  208.     transform: translateZ(-800px) scale(0.4);
    209. 

  209.     will-change: opacity, transform;
    210. 

  210.   }
    211. 

  211.   .fg-card .card-body {
    212. 

  212.     background: #0f0f0f;
    213. 

  213.     border: 1px solid var(--accent);
    214. 

  214.     border-radius: 12px;
    215. 

  215.     padding: 32px 30px;
    216. 

  216.     box-shadow:
    217. 

  217.       0 30px 80px -20px rgba(217,119,87,0.25),
    218. 

  218.       0 10px 30px -10px rgba(0,0,0,0.6);
    219. 

  219.   }
    220. 

  220.   .fg-card .label {
    221. 

  221.     font-family: var(--mono);
    222. 

  222.     font-size: 11px;
    223. 

  223.     letter-spacing: 0.18em;
    224. 

  224.     color: var(--accent);
    225. 

  225.     text-transform: uppercase;
    226. 

  226.     margin-bottom: 14px;
    227. 

  227.   }
    228. 

  228.   .fg-card .title-main {
    229. 

  229.     font-family: var(--serif-en);
    230. 

  230.     font-style: italic;
    231. 

  231.     font-size: 40px;
    232. 

  232.     font-weight: 300;
    233. 

  233.     letter-spacing: -0.01em;
    234. 

  234.     line-height: 1.08;
    235. 

  235.     color: var(--ink);
    236. 

  236.     margin-bottom: 10px;
    237. 

  237.   }
    238. 

  238.   .fg-card .title-sub {
    239. 

  239.     font-family: var(--sans);
    240. 

  240.     font-weight: 300;
    241. 

  241.     font-size: 14px;
    242. 

  242.     letter-spacing: 0.14em;
    243. 

  243.     text-transform: uppercase;
    244. 

  244.     color: var(--ink-60);
    245. 

  245.     margin-bottom: 22px;
    246. 

  246.   }
    247. 

  247.   .fg-card .feature {
    248. 

  248.     font-family: var(--sans);
    249. 

  249.     font-size: 13px;
    250. 

  250.     font-weight: 300;
    251. 

  251.     letter-spacing: 0.03em;
    252. 

  252.     color: var(--muted);
    253. 

  253.     line-height: 1.6;
    254. 

  254.     padding-top: 18px;
    255. 

  255.     border-top: 1px solid var(--hairline);
    256. 

  256.     text-transform: uppercase;
    257. 

  257.   }
    258. 

  258.   .fg-card .thumb-wrap {
    259. 

  259.     margin-top: 14px;
    260. 

  260.     height: 0;
    261. 

  261.     overflow: hidden;
    262. 

  262.     border-radius: 10px;
    263. 

  263.     background: #0a0a0a;
    264. 

  264.     border: 1px solid var(--hairline);
    265. 

  265.     opacity: 0;
    266. 

  266.     will-change: opacity, height;
    267. 

  267.   }
    268. 

  268.   .fg-card .thumb-wrap img {
    269. 

  269.     width: 100%;
    270. 

  270.     display: block;
    271. 

  271.   }
    272. 

  272. 

  273.   /* Brand reveal */
    274. 

  274.   .brand-panel {
    275. 

  275.     position: absolute;
    276. 

  276.     inset: 0;
    277. 

  277.     background: var(--cd-bg);
    278. 

  278.     opacity: 0;
    279. 

  279.     transform: translateY(100%);
    280. 

  280.     will-change: opacity, transform;
    281. 

  281.     z-index: 300;
    282. 

  282.     display: flex;
    283. 

  283.     align-items: center;
    284. 

  284.     justify-content: center;
    285. 

  285.     flex-direction: column;
    286. 

  286.   }
    287. 

  287.   .brand-mark {
    288. 

  288.     font-family: var(--serif-en);
    289. 

  289.     font-style: italic;
    290. 

  290.     font-weight: 300;
    291. 

  291.     font-size: 112px;
    292. 

  292.     letter-spacing: -0.02em;
    293. 

  293.     color: var(--cd-ink);
    294. 

  294.     opacity: 0;
    295. 

  295.     transform: scale(0.92);
    296. 

  296.     will-change: opacity, transform;
    297. 

  297.     line-height: 1;
    298. 

  298.   }
    299. 

  299.   .brand-mark .dot { color: var(--accent); font-style: normal; padding: 0 6px; }
    300. 

  300.   .brand-mark .accent { color: var(--accent); font-style: italic; }
    301. 

  301.   .brand-underline {
    302. 

  302.     margin-top: 34px;
    303. 

  303.     height: 2px;
    304. 

  304.     width: 0;
    305. 

  305.     background: var(--accent);
    306. 

  306.     will-change: width;
    307. 

  307.   }
    308. 

  308.   .brand-tag {
    309. 

  309.     margin-top: 22px;
    310. 

  310.     font-family: var(--mono);
    311. 

  311.     font-size: 12px;
    312. 

  312.     letter-spacing: 0.32em;
    313. 

  313.     color: rgba(26,25,24,0.54);
    314. 

  314.     text-transform: uppercase;
    315. 

  315.     opacity: 0;
    316. 

  316.     will-change: opacity;
    317. 

  317.   }
    318. 

  318. </style>
    319. 

  319. </head>
    320. 

  320. <body>
    321. 

  321. 

  322. <div class="stage" id="stage">
    323. 

  323. 

  324.   <div class="watermark-tl">HUASHU · DESIGN</div>
    325. 

  325.   <div class="watermark-br">V2 · 2026 · w3</div>
    326. 

  326. 

  327.   <!-- English version: parallel rewrite, fewer words, more breathing room -->
    328. 

  328.   <div class="top-title" id="topTitle">
    329. 

  329.     Not sure? <span class="accent">Here are 3 roads.</span>
    330. 

  330.   </div>
    331. 

  331.   <div class="sub-caption" id="subCaption">20 Philosophies · 3 Directions</div>
    332. 

  332. 

  333.   <div class="scan-light" id="scanLight"></div>
    334. 

  334. 

  335.   <div class="wall-viewport" id="wallViewport">
    336. 

  336.     <div class="wall-grid" id="wallGrid">
    337. 

  337.       <!-- 20 cells injected by JS -->
    338. 

  338.     </div>
    339. 

  339.   </div>
    340. 

  340. 

  341.   <div class="fg-row" id="fgRow">
    342. 

  342.     <div class="fg-card" id="card1">
    343. 

  343.       <div class="card-body">
    344. 

  344.         <div class="label">Road 01 · Eastern Space</div>
    345. 

  345.         <div class="title-main">Kenya Hara</div>
    346. 

  346.         <div class="title-sub">Ma / Emptiness</div>
    347. 

  347.         <div class="feature">Terracotta · Vast whitespace · Paper grain</div>
    348. 

  348.       </div>
    349. 

  349.       <div class="thumb-wrap" id="thumb1">
    350. 

  350.         <img src="demo-takram.png" alt="demo takram" />
    351. 

  351.       </div>
    352. 

  352.     </div>
    353. 

  353.     <div class="fg-card" id="card2">
    354. 

  354.       <div class="card-body">
    355. 

  355.         <div class="label">Road 02 · Information Architecture</div>
    356. 

  356.         <div class="title-main">Pentagram</div>
    357. 

  357.         <div class="title-sub">Grid / Rigor</div>
    358. 

  358.         <div class="feature">Strict grid · High contrast · Editorial</div>
    359. 

  359.       </div>
    360. 

  360.       <div class="thumb-wrap" id="thumb2">
    361. 

  361.         <img src="demo-pentagram.png" alt="demo pentagram" />
    362. 

  362.       </div>
    363. 

  363.     </div>
    364. 

  364.     <div class="fg-card" id="card3">
    365. 

  365.       <div class="card-body">
    366. 

  366.         <div class="label">Road 03 · Experimental Edge</div>
    367. 

  367.         <div class="title-main">David Carson</div>
    368. 

  368.         <div class="title-sub">Raw / Punk</div>
    369. 

  369.         <div class="feature">Broken type · Brutal geometry · Visual shock</div>
    370. 

  370.       </div>
    371. 

  371.       <div class="thumb-wrap" id="thumb3">
    372. 

  372.         <img src="demo-build.png" alt="demo build" />
    373. 

  373.       </div>
    374. 

  374.     </div>
    375. 

  375.   </div>
    376. 

  376. 

  377.   <div class="brand-panel" id="brandPanel">
    378. 

  378.     <div class="brand-mark" id="brandMark">huashu<span class="dot">·</span><span class="accent">design</span></div>
    379. 

  379.     <div class="brand-underline" id="brandUnderline"></div>
    380. 

  380.     <div class="brand-tag" id="brandTag">HTML as Designer's Medium</div>
    381. 

  381.   </div>
    382. 

  382. 

  383. </div>
    384. 

  384. 

  385. <script>
    386. 

  386. (function(){
    387. 

  387.   function scaleStage(){
    388. 

  388.     const stage = document.getElementById('stage');
    389. 

  389.     const sx = window.innerWidth / 1920;
    390. 

  390.     const sy = window.innerHeight / 1080;
    391. 

  391.     const s = Math.min(sx, sy);
    392. 

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

  393.   }
    394. 

  394.   window.addEventListener('resize', scaleStage);
    395. 

  395.   scaleStage();
    396. 

  396. 

  397.   // 20 philosophies — identical structure to zh.html (designer names are brand identifiers, kept as-is)
    398. 

  398.   const PHILOSOPHIES = [
    399. 

  399.     { name: 'Pentagram',    glyph: 'grid' },
    400. 

  400.     { name: 'M. Vignelli',  glyph: 'bars' },
    401. 

  401.     { name: 'Apple HIG',    glyph: 'radius' },
    402. 

  402.     { name: 'Spin',         glyph: 'slash' },
    403. 

  403.     { name: 'Build',        glyph: 'type' },
    404. 

  404.     { name: 'Field.io',     glyph: 'wave' },
    405. 

  405.     { name: 'Active Theory',glyph: 'orbit' },
    406. 

  406.     { name: 'Hi-Res!',      glyph: 'dots' },
    407. 

  407.     { name: 'Locomotive',   glyph: 'arrow' },
    408. 

  408.     { name: 'Takram',       glyph: 'circle' },
    409. 

  409.     { name: 'Kenya Hara',   glyph: 'ma' },
    410. 

  410.     { name: 'D. Rams',      glyph: 'square' },
    411. 

  411.     { name: 'J. Ive',       glyph: 'arc' },
    412. 

  412.     { name: 'J. Morrison',  glyph: 'minimal' },
    413. 

  413.     { name: 'S. Ogata',     glyph: 'line' },
    414. 

  414.     { name: 'D. Carson',    glyph: 'collage' },
    415. 

  415.     { name: 'S. Sagmeister',glyph: 'stamp' },
    416. 

  416.     { name: 'P. Scher',     glyph: 'poster' },
    417. 

  417.     { name: 'M. Glaser',    glyph: 'heart' },
    418. 

  418.     { name: 'K. Sato',      glyph: 'logo' },
    419. 

  419.   ];
    420. 

  420.   const SELECTED = [10, 0, 15];
    421. 

  421. 

  422.   function makeGlyph(kind){
    423. 

  423.     const svgs = {
    424. 

  424.       grid: `<svg viewBox="0 0 100 60" width="78%" height="62%"><g stroke="rgba(255,255,255,0.22)" stroke-width="1" fill="none">
    425. 

  425.         <rect x="6" y="8" width="28" height="18"/><rect x="38" y="8" width="28" height="18"/><rect x="70" y="8" width="24" height="44"/>
    426. 

  426.         <rect x="6" y="30" width="60" height="22"/></g></svg>`,
    427. 

  427.       bars: `<svg viewBox="0 0 100 60" width="78%" height="62%"><g fill="rgba(255,255,255,0.22)">
    428. 

  428.         <rect x="10" y="40" width="8" height="16"/><rect x="22" y="28" width="8" height="28"/><rect x="34" y="16" width="8" height="40"/>
    429. 

  429.         <rect x="46" y="24" width="8" height="32"/><rect x="58" y="10" width="8" height="46"/><rect x="70" y="34" width="8" height="22"/>
    430. 

  430.         <rect x="82" y="22" width="8" height="34"/></g></svg>`,
    431. 

  431.       radius: `<svg viewBox="0 0 100 60" width="72%" height="58%"><g stroke="rgba(255,255,255,0.22)" stroke-width="1.2" fill="none">
    432. 

  432.         <rect x="14" y="10" width="72" height="40" rx="20" ry="20"/></g></svg>`,
    433. 

  433.       slash: `<svg viewBox="0 0 100 60" width="78%" height="62%"><g stroke="rgba(255,255,255,0.22)" stroke-width="1.4" fill="none" stroke-linecap="square">
    434. 

  434.         <path d="M 14 50 L 52 10"/><path d="M 36 50 L 74 10"/><path d="M 58 50 L 86 22"/></g></svg>`,
    435. 

  435.       type: `<svg viewBox="0 0 100 60" width="78%" height="62%"><text x="50" y="42" text-anchor="middle" font-family="Source Serif 4, serif" font-size="40" font-style="italic" fill="rgba(255,255,255,0.22)">Aa</text></svg>`,
    436. 

  436.       wave: `<svg viewBox="0 0 100 60" width="82%" height="62%"><path d="M 6 30 Q 20 8, 34 30 T 62 30 T 90 30" stroke="rgba(255,255,255,0.22)" stroke-width="1.3" fill="none"/></svg>`,
    437. 

  437.       orbit: `<svg viewBox="0 0 100 60" width="74%" height="62%"><g stroke="rgba(255,255,255,0.22)" stroke-width="1.1" fill="none"><ellipse cx="50" cy="30" rx="36" ry="14"/><ellipse cx="50" cy="30" rx="14" ry="22"/><circle cx="50" cy="30" r="2" fill="rgba(255,255,255,0.32)"/></g></svg>`,
    438. 

  438.       dots: `<svg viewBox="0 0 100 60" width="78%" height="62%"><g fill="rgba(255,255,255,0.22)"><circle cx="14" cy="18" r="2"/><circle cx="30" cy="18" r="2"/><circle cx="46" cy="18" r="2"/><circle cx="62" cy="18" r="2"/><circle cx="78" cy="18" r="2"/><circle cx="14" cy="30" r="2"/><circle cx="30" cy="30" r="2"/><circle cx="46" cy="30" r="3"/><circle cx="62" cy="30" r="2"/><circle cx="78" cy="30" r="2"/><circle cx="14" cy="42" r="2"/><circle cx="30" cy="42" r="2"/><circle cx="46" cy="42" r="2"/><circle cx="62" cy="42" r="2"/><circle cx="78" cy="42" r="2"/></g></svg>`,
    439. 

  439.       arrow: `<svg viewBox="0 0 100 60" width="78%" height="52%"><g stroke="rgba(255,255,255,0.22)" stroke-width="1.2" fill="none" stroke-linecap="square"><path d="M 14 30 L 80 30"/><path d="M 68 18 L 82 30 L 68 42"/></g></svg>`,
    440. 

  440.       circle: `<svg viewBox="0 0 100 60" width="62%" height="62%"><circle cx="50" cy="30" r="22" stroke="rgba(255,255,255,0.22)" stroke-width="1.2" fill="none"/></svg>`,
    441. 

  441.       ma: `<svg viewBox="0 0 100 60" width="72%" height="62%"><g fill="none" stroke="rgba(255,255,255,0.22)" stroke-width="0.9"><rect x="18" y="14" width="64" height="32"/></g><circle cx="50" cy="30" r="1.4" fill="rgba(255,255,255,0.32)"/></svg>`,
    442. 

  442.       square: `<svg viewBox="0 0 100 60" width="62%" height="62%"><rect x="30" y="10" width="40" height="40" stroke="rgba(255,255,255,0.22)" stroke-width="1.2" fill="none"/></svg>`,
    443. 

  443.       arc: `<svg viewBox="0 0 100 60" width="78%" height="62%"><path d="M 14 46 Q 50 6, 86 46" stroke="rgba(255,255,255,0.22)" stroke-width="1.3" fill="none"/></svg>`,
    444. 

  444.       minimal: `<svg viewBox="0 0 100 60" width="78%" height="32%"><line x1="18" y1="30" x2="82" y2="30" stroke="rgba(255,255,255,0.22)" stroke-width="1.2"/></svg>`,
    445. 

  445.       line: `<svg viewBox="0 0 100 60" width="78%" height="62%"><g stroke="rgba(255,255,255,0.22)" stroke-width="0.9" fill="none"><line x1="14" y1="16" x2="86" y2="16"/><line x1="14" y1="30" x2="86" y2="30"/><line x1="14" y1="44" x2="60" y2="44"/></g></svg>`,
    446. 

  446.       collage: `<svg viewBox="0 0 100 60" width="82%" height="62%"><g fill="none" stroke="rgba(255,255,255,0.22)" stroke-width="1"><rect x="8" y="8" width="24" height="18" transform="rotate(-8 20 17)"/><rect x="36" y="18" width="28" height="20" transform="rotate(5 50 28)"/><rect x="60" y="6" width="32" height="24" transform="rotate(-4 76 18)"/></g><text x="50" y="56" text-anchor="middle" font-family="Source Serif 4, serif" font-size="14" font-style="italic" fill="rgba(255,255,255,0.3)">RAY</text></svg>`,
    447. 

  447.       stamp: `<svg viewBox="0 0 100 60" width="70%" height="62%"><g stroke="rgba(255,255,255,0.22)" stroke-width="1.2" fill="none"><circle cx="50" cy="30" r="22"/><text x="50" y="35" text-anchor="middle" font-family="Source Serif 4" font-size="16" font-weight="500" fill="rgba(255,255,255,0.3)">S</text></g></svg>`,
    448. 

  448.       poster: `<svg viewBox="0 0 100 60" width="82%" height="62%"><g fill="rgba(255,255,255,0.22)"><rect x="8" y="8" width="22" height="44"/><rect x="34" y="8" width="22" height="44"/><rect x="60" y="8" width="22" height="44"/></g></svg>`,
    449. 

  449.       heart: `<svg viewBox="0 0 100 60" width="58%" height="58%"><path d="M 50 48 C 30 32, 18 20, 30 14 C 40 10, 50 22, 50 22 C 50 22, 60 10, 70 14 C 82 20, 70 32, 50 48 Z" fill="rgba(217,119,87,0.28)"/></svg>`,
    450. 

  450.       logo: `<svg viewBox="0 0 100 60" width="60%" height="60%"><circle cx="50" cy="30" r="20" stroke="rgba(255,255,255,0.22)" stroke-width="1.3" fill="none"/><circle cx="50" cy="30" r="6" fill="rgba(255,255,255,0.22)"/></svg>`,
    451. 

  451.     };
    452. 

  452.     return svgs[kind] || svgs.minimal;
    453. 

  453.   }
    454. 

  454. 

  455.   const wallGrid = document.getElementById('wallGrid');
    456. 

  456.   PHILOSOPHIES.forEach((p, idx) => {
    457. 

  457.     const cell = document.createElement('div');
    458. 

  458.     cell.className = 'cell';
    459. 

  459.     cell.dataset.idx = idx;
    460. 

  460.     const row = Math.floor(idx / 5);
    461. 

  461.     const col = idx % 5;
    462. 

  462.     const dr = row - 1.5;
    463. 

  463.     const dc = col - 2;
    464. 

  464.     const dist = Math.sqrt(dr * dr + dc * dc);
    465. 

  465.     cell.dataset.dist = dist.toFixed(3);
    466. 

  466.     cell.innerHTML = `
    467. 

  467.       <div class="glyph">${makeGlyph(p.glyph)}</div>
    468. 

  468.       <div class="num">${String(idx + 1).padStart(2, '0')}</div>
    469. 

  469.       <div class="name">${p.name}</div>
    470. 

  470.     `;
    471. 

  471.     wallGrid.appendChild(cell);
    472. 

  472.   });
    473. 

  473. 

  474.   const cells = Array.from(wallGrid.querySelectorAll('.cell'));
    475. 

  475.   const maxDist = Math.max(...cells.map(c => parseFloat(c.dataset.dist)));
    476. 

  476. 

  477.   const T_TOTAL = 12.0;
    478. 

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

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

  480.   const cubicOut = t => 1 - Math.pow(1 - t, 3);
    481. 

  481.   const clamp = (v, lo, hi) => Math.max(lo, Math.min(hi, v));
    482. 

  482.   const clamp01 = v => clamp(v, 0, 1);
    483. 

  483.   const lerp = (a, b, t) => a + (b - a) * t;
    484. 

  484. 

  485.   const topTitle = document.getElementById('topTitle');
    486. 

  486.   const subCap = document.getElementById('subCaption');
    487. 

  487.   const wallViewport = document.getElementById('wallViewport');
    488. 

  488.   const scanLight = document.getElementById('scanLight');
    489. 

  489.   const fgRow = document.getElementById('fgRow');
    490. 

  490.   const card1 = document.getElementById('card1');
    491. 

  491.   const card2 = document.getElementById('card2');
    492. 

  492.   const card3 = document.getElementById('card3');
    493. 

  493.   const thumb1 = document.getElementById('thumb1');
    494. 

  494.   const thumb2 = document.getElementById('thumb2');
    495. 

  495.   const thumb3 = document.getElementById('thumb3');
    496. 

  496.   const brandPanel = document.getElementById('brandPanel');
    497. 

  497.   const brandMark = document.getElementById('brandMark');
    498. 

  498.   const brandUnderline = document.getElementById('brandUnderline');
    499. 

  499.   const brandTag = document.getElementById('brandTag');
    500. 

  500. 

  501.   function tick(t){
    502. 

  502.     t = Math.max(0, Math.min(T_TOTAL, t));
    503. 

  503. 

  504.     // Ripple in 20 cells
    505. 

  505.     const rippleStart = 0.15;
    506. 

  506.     cells.forEach(cell => {
    507. 

  507.       const d = parseFloat(cell.dataset.dist);
    508. 

  508.       const delay = (d / maxDist) * 0.85;
    509. 

  509.       const cellT = clamp01((t - rippleStart - delay * 0.55) / 0.7);
    510. 

  510.       const eased = expoOut(cellT);
    511. 

  511.       const idx = parseInt(cell.dataset.idx, 10);
    512. 

  512.       const isSel = SELECTED.includes(idx);
    513. 

  513.       cell.style.opacity = (eased * (isSel ? 1.0 : 0.85)).toFixed(3);
    514. 

  514.       const ty = lerp(30, 0, eased);
    515. 

  515.       const scale = lerp(0.88, 1, eased);
    516. 

  516.       cell.style.transform = `translateY(${ty}px) scale(${scale})`;
    517. 

  517.     });
    518. 

  518. 

  519.     // Scan light
    520. 

  520.     const scanStart = 2.6;
    521. 

  521.     const scanEnd = 4.0;
    522. 

  522.     const scanT = clamp01((t - scanStart) / (scanEnd - scanStart));
    523. 

  523.     if (scanT > 0 && scanT < 1) {
    524. 

  524.       scanLight.style.opacity = Math.min(1, Math.sin(scanT * Math.PI) * 1.3).toFixed(3);
    525. 

  525.       const py = lerp(-180, 820, cubicInOut(scanT));
    526. 

  526.       scanLight.style.transform = `translateY(${py}px)`;
    527. 

  527.     } else {
    528. 

  528.       scanLight.style.opacity = 0;
    529. 

  529.     }
    530. 

  530. 

  531.     // Light up selected, dim others
    532. 

  532.     const lightStart = 4.0;
    533. 

  533.     const lightEnd = 4.8;
    534. 

  534.     const lightT = clamp01((t - lightStart) / (lightEnd - lightStart));
    535. 

  535.     const lightE = expoOut(lightT);
    536. 

  536.     cells.forEach(cell => {
    537. 

  537.       const idx = parseInt(cell.dataset.idx, 10);
    538. 

  538.       const isSel = SELECTED.includes(idx);
    539. 

  539.       if (isSel) {
    540. 

  540.         cell.classList.toggle('selected', lightT > 0.05);
    541. 

  541.       } else {
    542. 

  542.         if (t >= lightStart) {
    543. 

  543.           const dimmedOpacity = lerp(0.85, 0.08, lightE);
    544. 

  544.           cell.style.opacity = dimmedOpacity.toFixed(3);
    545. 

  545.         }
    546. 

  546.       }
    547. 

  547.     });
    548. 

  548. 

  549.     // Foreground cards break out
    550. 

  550.     const breakStart = 4.8;
    551. 

  551.     if (t >= breakStart - 0.1) fgRow.style.opacity = 1;
    552. 

  552.     else fgRow.style.opacity = 0;
    553. 

  553. 

  554.     [card1, card2, card3].forEach((card, i) => {
    555. 

  555.       const stagger = i * 0.18;
    556. 

  556.       const cT = clamp01((t - breakStart - stagger) / 0.85);
    557. 

  557.       const cE = expoOut(cT);
    558. 

  558.       card.style.opacity = cE.toFixed(3);
    559. 

  559.       const tz = lerp(-800, 0, cE);
    560. 

  560.       const sc = lerp(0.45, 1, cE);
    561. 

  561.       const ty = lerp(40, 0, cE);
    562. 

  562.       card.style.transform = `translateZ(${tz}px) scale(${sc}) translateY(${ty}px)`;
    563. 

  563.     });
    564. 

  564. 

  565.     // Dim wall background
    566. 

  566.     if (t >= breakStart) {
    567. 

  567.       const dimT = clamp01((t - breakStart) / 0.9);
    568. 

  568.       const dimE = expoOut(dimT);
    569. 

  569.       wallViewport.style.opacity = lerp(1, 0.25, dimE).toFixed(3);
    570. 

  570.       wallViewport.style.filter = `blur(${lerp(0, 6, dimE).toFixed(1)}px)`;
    571. 

  571.     } else {
    572. 

  572.       wallViewport.style.opacity = 1;
    573. 

  573.       wallViewport.style.filter = 'blur(0px)';
    574. 

  574.     }
    575. 

  575. 

  576.     // Demo thumbnails grow
    577. 

  577.     const thumbStart = 6.6;
    578. 

  578.     [thumb1, thumb2, thumb3].forEach((thumb, i) => {
    579. 

  579.       const stagger = i * 0.32;
    580. 

  580.       const ttT = clamp01((t - thumbStart - stagger) / 1.0);
    581. 

  581.       const ttE = cubicOut(ttT);
    582. 

  582.       thumb.style.opacity = ttE.toFixed(3);
    583. 

  583.       const h = lerp(0, 250, ttE);
    584. 

  584.       thumb.style.height = `${h}px`;
    585. 

  585.     });
    586. 

  586. 

  587.     // Top title fade
    588. 

  588.     const titleStart = 7.2;
    589. 

  589.     const titleT = clamp01((t - titleStart) / 0.9);
    590. 

  590.     const titleE = cubicOut(titleT);
    591. 

  591.     topTitle.style.opacity = titleE.toFixed(3);
    592. 

  592.     topTitle.style.transform = `translateX(-50%) translateY(${lerp(-14, 0, titleE)}px)`;
    593. 

  593.     subCap.style.opacity = (titleE * 0.95).toFixed(3);
    594. 

  594. 

  595.     // Brand reveal
    596. 

  596.     const brandStart = 9.8;
    597. 

  597.     const panelT = clamp01((t - brandStart) / 0.7);
    598. 

  598.     const panelE = expoOut(panelT);
    599. 

  599.     brandPanel.style.opacity = panelE.toFixed(3);
    600. 

  600.     brandPanel.style.transform = `translateY(${lerp(100, 0, panelE)}%)`;
    601. 

  601. 

  602.     const markStart = 10.3;
    603. 

  603.     const markT = clamp01((t - markStart) / 0.6);
    604. 

  604.     const markE = expoOut(markT);
    605. 

  605.     brandMark.style.opacity = markE.toFixed(3);
    606. 

  606.     brandMark.style.transform = `scale(${lerp(0.92, 1, markE)})`;
    607. 

  607. 

  608.     const ulStart = 10.7;
    609. 

  609.     const ulT = clamp01((t - ulStart) / 0.55);
    610. 

  610.     brandUnderline.style.width = `${lerp(0, 280, expoOut(ulT))}px`;
    611. 

  611. 

  612.     const tagStart = 11.1;
    613. 

  613.     const tagT = clamp01((t - tagStart) / 0.5);
    614. 

  614.     brandTag.style.opacity = cubicOut(tagT).toFixed(3);
    615. 

  615.   }
    616. 

  616. 

  617.   window.__ready = false;
    618. 

  618.   window.__duration = T_TOTAL;
    619. 

  619.   let startTime = null;
    620. 

  620.   let paused = false;
    621. 

  621.   const recording = window.__recording === true;
    622. 

  622. 

  623.   function loop(now){
    624. 

  624.     if (paused) return;
    625. 

  625.     if (startTime === null) startTime = now;
    626. 

  626.     const t = (now - startTime) / 1000;
    627. 

  627.     tick(t);
    628. 

  628.     if (t < T_TOTAL) requestAnimationFrame(loop);
    629. 

  629.     else if (!recording) { startTime = now; requestAnimationFrame(loop); }
    630. 

  630.   }
    631. 

  631. 

  632.   tick(0);
    633. 

  633.   window.__ready = true;
    634. 

  634.   requestAnimationFrame(loop);
    635. 

  635. 

  636.   window.__pause = function(){ paused = true; };
    637. 

  637.   window.__resume = function(){
    638. 

  638.     if (!paused) return;
    639. 

  639.     paused = false; startTime = null;
    640. 

  640.     requestAnimationFrame(loop);
    641. 

  641.   };
    642. 

  642.   window.__setTime = function(t){ paused = true; tick(t); };
    643. 

  643. })();
    644. 

  644. </script>
    645. 

  645. 

  646. </body>
    647. 

  647. </html>
    648.