朵玥潼 × 胡皓然 · 源代码

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249

<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0, viewport-fit=cover">
<meta name="theme-color" content="#05060d">
<title>朵玥潼 · 胡皓然</title>
<link rel="manifest" href="manifest.json">
<link rel="apple-touch-icon" href="icon-180.png">
<link rel="icon" type="image/png" sizes="192x192" href="icon-192.png">
<meta name="apple-mobile-web-app-capable" content="yes">
<meta name="apple-mobile-web-app-status-bar-style" content="black-translucent">
<meta name="apple-mobile-web-app-title" content="我们">
<meta name="mobile-web-app-capable" content="yes">
<link rel="stylesheet" href="style.css?v=21">
</head>
<body>

<canvas id="gl" aria-hidden="true"></canvas>
<canvas id="stars" aria-hidden="true"></canvas>
<div class="veil" aria-hidden="true"></div>
<div class="aurora" aria-hidden="true"></div>

<!-- 两颗命名的星：生日即坐标 -->
<div class="named-layer" id="namedLayer">
  <svg class="named-link" aria-hidden="true">
    <line id="namedLinkLine" x1="0" y1="0" x2="0" y2="0"></line>
  </svg>
  <button class="nstar" id="nstarA" type="button" aria-label="胡皓然，10 月 28 日生">
    <i class="nstar-core"></i>
    <span class="nstar-date">10.28</span>
    <span class="nstar-tip">胡皓然</span>
  </button>
  <button class="nstar" id="nstarB" type="button" aria-label="朵玥潼，3 月 20 日生">
    <i class="nstar-core"></i>
    <span class="nstar-date">03.20</span>
    <span class="nstar-tip">朵玥潼</span>
  </button>
</div>

<div class="progress" aria-hidden="true"><span id="progressBar"></span></div>

<div class="wrap">

  <header class="cover">
    <p class="eyebrow">IN THE WHOLE UNIVERSE</p>
    <h1>
      <span class="n1">朵玥潼</span>
      <span class="link"><i></i><em>·</em><i></i></span>
      <span class="n2">胡皓然</span>
    </h1>
    <p class="sub">我们，是彼此的星球</p>
    <span class="scroll">下滑</span>
  </header>

  <!-- 整数天 / 生日彩蛋：只在特定日子出现 -->
  <div class="milestone" id="milestone" hidden>
    <p class="ms-day" id="msDay"></p>
    <p class="ms-text" id="msText"></p>
  </div>

  <section class="verse reveal">
    <div class="v-line"><p>少年应有鸿鹄志</p></div>
    <div class="v-line"><p>当骑骏马踏平川</p></div>
  </section>

  <div class="divider reveal"><span></span><i></i><span></span></div>

  <section class="chapter reveal from-left">
    <p class="ch-no">01</p>
    <h2>想对你说</h2>
    <p class="prose">
      遇见你之后，好像平淡的日子都有了颜色。
      宇宙那么大，星星那么多，
      可我抬头的时候，只看见了你。
    </p>
  </section>

  <div class="divider reveal"><span></span><i></i><span></span></div>

  <section class="chapter daily reveal">
    <p class="ch-no">02</p>
    <h2>今天</h2>
    <p class="daily-date" id="dailyDate">—</p>
    <p class="daily-line" id="dailyLine">…</p>
    <button class="daily-save" id="dailySave" type="button">存一张今天的卡片</button>
  </section>

  <div class="divider reveal"><span></span><i></i><span></span></div>

  <section class="chapter reveal from-right">
    <p class="ch-no">03</p>
    <h2>日常</h2>
    <ul class="list">
      <li>
        <span class="li-idx">I</span>
        <div>
          <h3>早安和晚安</h3>
          <p>从早安聊到晚安，是我每天最期待的日常。</p>
        </div>
      </li>
      <li>
        <span class="li-idx">II</span>
        <div>
          <h3>一起变胖</h3>
          <p>想和你吃遍所有好吃的，胖一点也没关系。</p>
        </div>
      </li>
      <li>
        <span class="li-idx">III</span>
        <div>
          <h3>还有很多以后</h3>
          <p>故事才写了个开头，剩下的想和你一起填。</p>
        </div>
      </li>
    </ul>
  </section>

  <div class="divider reveal"><span></span><i></i><span></span></div>

  <section class="chapter bd reveal from-left">
    <p class="ch-no">04</p>
    <h2>我们的生日</h2>
    <div class="bd-row">
      <div class="bd-item">
        <span class="who">我</span>
        <em>10.28</em>
      </div>
      <span class="bd-sep"></span>
      <div class="bd-item">
        <span class="who">你</span>
        <em>3.20</em>
      </div>
    </div>
    <p class="bd-note">两颗星，各自的轨道</p>
  </section>

  <section class="timer reveal">
    <span class="corner tl" aria-hidden="true"></span>
    <span class="corner tr" aria-hidden="true"></span>
    <span class="corner bl" aria-hidden="true"></span>
    <span class="corner br" aria-hidden="true"></span>
    <p class="ch-no center">05</p>
    <p class="t-label">我们在一起的第</p>
    <p class="t-num" id="tNum"><span id="dayCount">191</span><small id="dayUnit">天</small></p>
    <div class="t-clock">
      <div><span id="hh">--</span><small>时</small></div>
      <b>:</b>
      <div><span id="mm">--</span><small>分</small></div>
      <b>:</b>
      <div><span id="ss">--</span><small>秒</small></div>
    </div>
    <p class="t-note">每一天，都在向你靠近</p>
    <p class="t-tip">点一下这个数字</p>
  </section>

  <div class="divider reveal"><span></span><i></i><span></span></div>

  <section class="chapter orbit reveal">
    <p class="ch-no">06</p>
    <h2>我们走过的星轨</h2>
    <canvas id="orbitCanvas" aria-label="每一天一颗星，已经点亮的天数"></canvas>
    <p class="orbit-note" id="orbitNote"></p>
  </section>

  <div class="divider reveal"><span></span><i></i><span></span></div>

  <section class="chapter nextdays reveal">
    <p class="ch-no">07</p>
    <h2>接下来的日子</h2>
    <ul class="count-list" id="countList"></ul>
  </section>

  <div class="divider reveal"><span></span><i></i><span></span></div>

  <section class="chapter sealed reveal">
    <p class="ch-no">08</p>
    <h2>有一封信，锁着</h2>
    <div class="box-sealed" id="sealedBox">
      <div class="sealed-star" aria-hidden="true"></div>
      <p class="sealed-date" id="sealedDate">2027 年 3 月 20 日 开封</p>
      <p class="sealed-left" id="sealedLeft">还有 — 天</p>
      <button class="sealed-btn" id="sealedBtn" type="button" disabled>还没到时间</button>
    </div>
  </section>

  <section class="whisper reveal">
    <button id="loveBtn">点 一 下</button>
    <p id="loveMsg"> </p>
  </section>

  <section class="end reveal">
    <p>这一页会一直在这里<br>等你想我的时候回来看看</p>
    <span class="fin">eternity</span>
    <button class="share-btn" id="shareBtn" type="button">分 享 这 一 页</button>
    <br>
    <a class="src-link" href="source.html">查 看 源 代 码</a>
  </section>

  <footer>
    <span class="seal">朵奇呼呼呼</span>
  </footer>
</div>

<button class="to-top" id="toTop" type="button" aria-label="回到顶部">↑</button>

<!-- 藏在落款里的信 -->
<div class="letter" id="letter" hidden>
  <div class="letter-box" role="dialog" aria-modal="true" aria-label="写给你的一封信">
    <button class="letter-close" id="letterClose" type="button" aria-label="关闭">×</button>
    <p class="letter-kicker">写 给 你</p>
    <h2>如果有一天你翻到这里</h2>
    <div class="letter-body">
      <p>这封信没有藏得很深。但如果是你找到的，那就刚刚好。</p>
      <p>我不太会说漂亮话。我记住的都是一些很小的事——你说话前会先停半秒，你走快了我就得追，你困得不行了还要把最后一句说完。</p>
      <p>我不保证以后每一天都很好。但我保证：好的时候我在，不好的时候我也在。</p>
      <p>如果哪天日子过得很闷，就来这里滚一圈。看看星星，看看第几天，再点一下天空。</p>
      <p>我一直在。</p>
    </div>
    <p class="letter-sign">—— 皓然</p>
  </div>
</div>

<!-- 今日卡片 -->
<div class="card-layer" id="cardLayer" hidden>
  <div class="card-box">
    <p class="card-hint">长按图片保存</p>
    <img id="cardImg" alt="今天的卡片" />
    <button class="card-close" id="cardClose" type="button">收 起</button>
  </div>
</div>

<!-- 锁到生日那天才能打开的信 -->
<div class="letter" id="sealedLetter" hidden>
  <div class="letter-box" role="dialog" aria-modal="true" aria-label="一年后才会打开的信">
    <button class="letter-close" id="sealedClose" type="button" aria-label="关闭">×</button>
    <p class="letter-kicker">写 给 一 年 后 的 你</p>
    <h2>生日快乐</h2>
    <div class="letter-body" id="sealedBody">
      <p class="sealed-loading">正在解开…</p>
    </div>
    <p class="letter-sign">—— 皓然</p>
  </div>
</div>

<script src="app.js?v=21"></script>
</body>
</html>

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266
267
268
269
270
271
272
273
274
275
276
277
278
279
280
281
282
283
284
285
286
287
288
289
290
291
292
293
294
295
296
297
298
299
300
301
302
303
304
305
306
307
308
309
310
311
312
313
314
315
316
317
318
319
320
321
322
323
324
325
326
327
328
329
330
331
332
333
334
335
336
337
338
339
340
341
342
343
344
345
346
347
348
349
350
351
352
353
354
355
356
357
358
359
360
361
362
363
364
365
366
367
368
369
370
371
372
373
374
375
376
377
378
379
380
381
382
383
384
385
386
387
388
389
390
391
392
393
394
395
396
397
398
399
400
401
402
403
404
405
406
407
408
409
410
411
412
413
414
415
416
417
418
419
420
421
422
423
424
425
426
427
428
429
430
431
432
433
434
435
436
437
438
439
440
441
442
443
444
445
446
447
448
449
450
451
452
453
454
455
456
457
458
459
460
461
462
463
464
465
466
467
468
469
470
471
472
473
474
475
476
477
478
479
480
481
482
483
484
485
486
487
488
489
490
491
492
493
494
495
496
497
498
499
500
501
502
503
504
505
506
507
508
509
510
511
512
513
514
515
516
517
518
519
520
521
522
523
524
525
526
527
528
529
530
531
532
533
534
535
536
537
538
539
540
541
542
543
544
545
546
547
548
549
550
551
552
553
554
555
556
557
558
559
560
561
562
563
564
565
566
567
568
569
570
571
572
573
574
575
576
577
578
579
580
581
582
583
584
585
586
587
588
589
590
591
592
593
594
595
596
597
598
599
600
601
602
603
604
605
606
607
608
609
610
611
612
613
614
615
616
617
618
619
620
621
622
623
624
625
626
627
628
629
630
631
632
633
634
635
636
637
638
639
640
641
642
643
644
645
646
647
648
649
650
651
652
653
654
655
656
657
658
659
660
661
662
663
664
665
666
667
668
669
670
671
672
673
674
675
676
677
678
679
680
681
682
683
684
685
686
687
688
689
690
691
692
693
694
695
696
697
698
699
700
701
702
703
704
705
706
707
708
709
710
711
712
713
714
715
716
717
718
719
720
721
722
723
724
725
726
727
728
729
730
731
732
733
734
735
736
737
738
739
740
741
742
743
744
745
746
747
748
749
750
751
752
753
754
755
756
757
758
759
760
761
762
763
764
765
766
767
768
769
770
771
772
773
774
775
776
777
778
779
780
781
782
783
784
785
786
787
788
789
790
791
792
793
794
795
796
797
798
799
800
801
802
803
804
805
806
807
808
809
810
811
812
813
814
815
816
817
818
819
820
821
822
823
824
825
826
827
828
829
830
831
832
833
834
835
836
837
838
839
840
841
842
843
844
845
846
847
848
849
850
851
852
853
854
855
856
857
858
859
860
861
862
863
864
865
866
867
868
869
870
871
872
873
874
875
876
877
878
879
880
881
882
883
884
885
886
887
888
889
890
891
892
893
894
895
896
897
898
899
900
901
902
903
904
905
906
907
908
909
910
911
912
913
914
915
916
917
918
919
920
921
922
923
924
925
926
927
928
929
930
931
932
933
934
935
936
937
938
939
940
941
942
943
944
945
946
947
948
949
950
951
952
953
954
955
956
957
958
959
960
961
962
963
964
965
966
967
968
969
970
971
972
973
974
975
976
977
978
979
980
981
982
983
984
985
986
987
988
989
990
991
992
993
994
995
996
997
998
999
1000
1001
1002
1003
1004
1005
1006
1007
1008
1009
1010
1011
1012
1013
1014
1015
1016
1017
1018
1019
1020
1021
1022
1023
1024
1025
1026
1027
1028
1029
1030
1031
1032
1033
1034
1035
1036
1037
1038
1039
1040
1041
1042
1043
1044
1045
1046
1047
1048
1049
1050
1051
1052
1053
1054
1055
1056
1057
1058
1059
1060
1061
1062
1063
1064
1065
1066
1067
1068
1069
1070
1071
1072
1073
1074
1075
1076
1077
1078
1079
1080
1081
1082
1083
1084
1085
1086
1087
1088
1089
1090
1091
1092
1093
1094
1095
1096
1097
1098
1099
1100
1101
1102
1103
1104
1105
1106
1107
1108
1109
1110
1111
1112
1113
1114
1115
1116
1117
1118
1119
1120
1121
1122
1123
1124
1125
1126
1127
1128
1129
1130
1131
1132
1133
1134
1135
1136
1137
1138
1139
1140
1141
1142
1143
1144
1145
1146
1147
1148
1149
1150
1151
1152
1153
1154
1155
1156
1157
1158
1159
1160
1161
1162
1163
1164
1165
1166
1167
1168
1169
1170
1171
1172
1173
1174
1175
1176
1177
1178
1179
1180
1181
1182
1183
1184
1185
1186
1187
1188
1189
1190
1191
1192
1193
1194
1195
1196
1197
1198
1199
1200
1201
1202
1203
1204
1205
1206
1207
1208
1209
1210
1211
1212
1213
1214
1215
1216
1217
1218
1219
1220
1221
1222
1223
1224
1225
1226
1227
1228
1229
1230
1231
1232
1233
1234
1235
1236
1237
1238
1239
1240
1241
1242
1243
1244
1245
1246
1247
1248
1249
1250
1251
1252
1253
1254
1255
1256
1257
1258
1259
1260
1261
1262
1263
1264
1265
1266
1267
1268
1269
1270
1271
1272
1273
1274
1275
1276
1277
1278
1279
1280
1281
1282
1283
1284
1285
1286
1287
1288
1289
1290
1291
1292
1293
1294
1295
1296
1297
1298
1299
1300
1301
1302
1303
1304
1305
1306
1307
1308
1309
1310
1311
1312
1313
1314
1315
1316
1317
1318
1319
1320
1321
1322
1323
1324
1325
1326
1327
1328
1329
1330
1331
1332
1333
1334
1335
1336
1337
1338
1339
1340
1341
1342
1343
1344
1345
1346
1347
1348
1349
1350
1351
1352
1353
1354
1355
1356
1357
1358
1359
1360
1361
1362
1363
1364
1365
1366
1367
1368
1369
1370
1371
1372
1373
1374
1375
1376
1377
1378
1379
1380

/* ============================================================
   星辰宇宙 · 交互与动效
   ============================================================ */</span>

/* ---------- 星空 ---------- */
(function initStars() {
  const canvas = document.getElementById("stars");
  if (!canvas) return;

  const ctx = canvas.getContext("2d");
  const reduced = window.matchMedia("(prefers-reduced-motion: reduce)").matches;

  let W = 0;
  let H = 0;
  let dpr = 1;
  let stars = [];
  let shooting = null;
  let raf = 0;

  function resize() {
    dpr = Math.min(window.devicePixelRatio || 1, 2);
    W = window.innerWidth;
    H = window.innerHeight;
    canvas.width = W * dpr;
    canvas.height = H * dpr;
    ctx.setTransform(dpr, 0, 0, dpr, 0, 0);
    build();
  }

  function build() {
    // 按面积计算星数（提高密度）
    const count = Math.round((W * H) / 3200);
    stars = [];
    for (let i = 0; i < count; i++) {
      const layer = Math.random(); // 0 远 1 近
      const big = layer > 0.82; // 少数亮星
      stars.push({
        x: Math.random() * W,
        y: Math.random() * H,
        r: big ? 1.25 + Math.random() * 0.85 : 0.5 + layer * 1.05,
        base: big ? 0.85 + Math.random() * 0.15 : 0.34 + layer * 0.56,
        phase: Math.random() * Math.PI * 2,
        speed: 0.4 + Math.random() * 0.95,
        vx: (Math.random() - 0.5) * 0.05 * (0.4 + layer),
        vy: (Math.random() - 0.5) * 0.05 * (0.4 + layer),
        warm: Math.random() > 0.78,
        big,
        // 亮星的四角星芒长度
        spike: big ? s => 0 : null,
      });
    }
    // 给亮星补星芒长度
    for (const s of stars) {
      if (s.big) s.spike = 3.5 + Math.random() * 4;
    }
  }

  function draw(t) {
    ctx.clearRect(0, 0, W, H);

    for (const s of stars) {
      const tw = Math.sin(t * 0.001 * s.speed + s.phase) * 0.5 + 0.5;
      // 提高整体亮度与闪烁幅度
      const alpha = s.big
        ? s.base * (0.72 + tw * 0.28)
        : s.base * (0.55 + tw * 0.85);

      s.x += s.vx;
      s.y += s.vy;
      if (s.x < -2) s.x = W + 2;
      if (s.x > W + 2) s.x = -2;
      if (s.y < -2) s.y = H + 2;
      if (s.y > H + 2) s.y = -2;

      const color = s.warm
        ? `rgba(255, 226, 210, ${alpha})`
        : `rgba(238, 242, 255, ${alpha})`;
      ctx.beginPath();
      ctx.fillStyle = color;
      ctx.arc(s.x, s.y, s.r, 0, Math.PI * 2);
      ctx.fill();

      // 光晕：亮星更明显，普通星也有一层
      if (s.big) {
        const rad = s.r * 12;
        const g = ctx.createRadialGradient(s.x, s.y, 0, s.x, s.y, rad);
        g.addColorStop(0, `rgba(255, 244, 238, ${alpha * 0.5})`);
        g.addColorStop(0.35, `rgba(255, 232, 220, ${alpha * 0.16})`);
        g.addColorStop(1, "rgba(255, 232, 220, 0)");
        ctx.fillStyle = g;
        ctx.beginPath();
        ctx.arc(s.x, s.y, rad, 0, Math.PI * 2);
        ctx.fill();

        // 四角星芒
        const len = s.spike * (0.75 + tw * 0.5);
        ctx.strokeStyle = `rgba(255, 248, 244, ${alpha * 0.6})`;
        ctx.lineWidth = 0.9;
        ctx.beginPath();
        ctx.moveTo(s.x - len, s.y);
        ctx.lineTo(s.x + len, s.y);
        ctx.moveTo(s.x, s.y - len);
        ctx.lineTo(s.x, s.y + len);
        ctx.stroke();
      } else if (s.r > 0.9) {
        const rad = s.r * 6;
        const g = ctx.createRadialGradient(s.x, s.y, 0, s.x, s.y, rad);
        g.addColorStop(0, `rgba(240, 230, 248, ${alpha * 0.28})`);
        g.addColorStop(1, "rgba(240, 230, 248, 0)");
        ctx.fillStyle = g;
        ctx.beginPath();
        ctx.arc(s.x, s.y, rad, 0, Math.PI * 2);
        ctx.fill();
      }
    }

    drawShooting(t);

    raf = requestAnimationFrame(draw);
  }

  /* 偶发流星 */
  let lastShoot = 0;

  function drawShooting(t) {
    if (reduced) return;

    if (!shooting && t - lastShoot > 9000 && Math.random() < 0.02) {
      lastShoot = t;
      const sx = Math.random() * W * 0.7;
      const sy = Math.random() * H * 0.4;
      shooting = {
        x: sx,
        y: sy,
        len: 90 + Math.random() * 90,
        life: 0,
        max: 900,
        vx: 2.2 + Math.random() * 0.8,
        vy: 1.15 + Math.random() * 0.5,
      };
    }

    if (!shooting) return;

    shooting.life += 16;
    shooting.x += shooting.vx;
    shooting.y += shooting.vy;

    const p = 1 - shooting.life / shooting.max;
    if (p <= 0) {
      shooting = null;
      return;
    }

    const g = ctx.createLinearGradient(
      shooting.x, shooting.y,
      shooting.x - shooting.len, shooting.y - shooting.len * 0.52
    );
    g.addColorStop(0, `rgba(255, 245, 240, ${0.55 * p})`);
    g.addColorStop(1, "rgba(255, 245, 240, 0)");

    ctx.strokeStyle = g;
    ctx.lineWidth = 1;
    ctx.beginPath();
    ctx.moveTo(shooting.x, shooting.y);
    ctx.lineTo(shooting.x - shooting.len, shooting.y - shooting.len * 0.52);
    ctx.stroke();
  }

  resize();
  window.addEventListener("resize", resize);

  if (reduced) {
    // 静止画面：只画一次
    for (const s of stars) {
      ctx.beginPath();
      ctx.fillStyle = s.warm
        ? `rgba(255, 226, 210, ${s.base})`
        : `rgba(238, 242, 255, ${s.base})`;
      ctx.arc(s.x, s.y, s.r, 0, Math.PI * 2);
      ctx.fill();
    }
  } else {
    raf = requestAnimationFrame(draw);
  }

  // 页面不可见时暂停，省电
  document.addEventListener("visibilitychange", () => {
    if (document.hidden) {
      cancelAnimationFrame(raf);
    } else if (!reduced) {
      cancelAnimationFrame(raf);
      raf = requestAnimationFrame(draw);
    }
  });
})();

/* ---------- 在一起计时 ---------- */
/* ============================================================
   只需要改这一行：在一起的纪念日
   写法 new Date(年, 月, 日) —— 月份从 0 开始算：
   0=1月  1=2月  2=3月  3=4月  4=5月 ... 11=12月
   下面这行是 2026 年 5 月 4 日
   ============================================================ */</span>
const START_DATE = new Date(2026, 4, 4);
const START_MS = START_DATE.getTime();

/* ============================================================
   额外的纪念日：month 从 1 开始（5 = 五月），可以继续往下加
   ============================================================ */</span>
const ANNIVERSARIES = [
  { label: "情感纪念日", month: 5, day: 3 }
];

const pad = (n) => String(n).padStart(2, "0");
const $ = (id) => document.getElementById(id);

let unitMode = 0; // 0 天 · 1 小时 · 2 分钟 · 3 秒
const UNIT_LABEL = ["天", "小时", "分钟", "秒"];

function tick() {
  const diff = Date.now() - START_MS;

  // 纪念日还没到，先显示 0，避免出现负数
  if (diff < 0) {
    $("dayCount").textContent = 0;
    $("hh").textContent = "00";
    $("mm").textContent = "00";
    $("ss").textContent = "00";
    return;
  }

  const days = Math.floor(diff / 86400000) + 1; // 纪念日当天 = 第 1 天
  const rem = diff % 86400000;                  // 当天已经过去的时间

  const dayEl = $("dayCount");
  const unitEl = $("dayUnit");

  if (unitMode === 0) {
    dayEl.textContent = days;
  } else {
    const totals = [
      days,
      Math.floor(diff / 3600000),
      Math.floor(diff / 60000),
      Math.floor(diff / 1000)
    ];
    dayEl.textContent = totals[unitMode].toLocaleString("zh-CN");
  }
  if (unitEl) unitEl.textContent = UNIT_LABEL[unitMode];

  $("hh").textContent = pad(Math.floor(rem / 3600000));
  $("mm").textContent = pad(Math.floor((rem % 3600000) / 60000));
  $("ss").textContent = pad(Math.floor((rem % 60000) / 1000));
}

tick();
setInterval(tick, 1000);

/* 点数字，换个算法看 */
const tNumEl = document.getElementById("tNum");
const tLabelEl = document.querySelector(".t-label");
const tClockEl = document.querySelector(".t-clock");
const tTipEl = document.querySelector(".t-tip");

if (tNumEl) {
  tNumEl.addEventListener("click", () => {
    unitMode = (unitMode + 1) % 4;
    if (tLabelEl) tLabelEl.textContent = unitMode === 0 ? "我们在一起的第" : "一起走过了";
    if (tClockEl) tClockEl.style.display = unitMode === 0 ? "" : "none";
    if (tTipEl) tTipEl.textContent = unitMode === 0 ? "点一下这个数字" : "再点一下，换回来";
    if (dayCountEl()) dayCountEl().classList.toggle("compact", unitMode > 0);
    tick();
  });
}

function dayCountEl() {
  return document.getElementById("dayCount");
}

/* ---------- 滚动交互 · 双向常驻 ---------- */
const reducedMotion = window.matchMedia("(prefers-reduced-motion: reduce)").matches;

const progressBar = document.getElementById("progressBar");
const aurora = document.querySelector(".aurora");
const cover = document.querySelector(".cover");
const stars = document.getElementById("stars");

/* 每个元素记录当前视口内的进度，用于持续驱动动画 */
const tracked = [];

function collectTracked() {
  tracked.length = 0;
  document.querySelectorAll(
    ".verse, .chapter, .timer, .whisper, .end, .divider, .cover"
  ).forEach((el) => {
    tracked.push({
      el,
      // 视口内进度 0(刚进底部) → 1(到达中心偏上)
      last: -1,
    });
  });
}
collectTracked();

let ticking = false;
let lastY = window.scrollY;

function update() {
  const y = window.scrollY || document.documentElement.scrollTop;
  const vh = window.innerHeight;
  const docH = document.documentElement.scrollHeight - vh;
  const p = docH > 0 ? Math.min(1, Math.max(0, y / docH)) : 0;

  /* 1) 顶部进度条 */
  if (progressBar) progressBar.style.width = (p * 100).toFixed(2) + "%";

  /* 2) 首屏淡出上移 */
  if (cover) {
    const cp = Math.min(1, y / (vh * 0.85));
    cover.style.setProperty("--cover-p", cp.toFixed(3));
  }

  /* 3) 极光横向游移 */
  if (aurora) {
    const ax = 50 + Math.sin(p * Math.PI * 2.4) * 26;
    aurora.style.setProperty("--ax", ax.toFixed(1) + "%");
  }

  /* 4) 星空视差 */
  if (stars) {
    stars.style.transform = `translateY(${(y * 0.12).toFixed(1)}px)`;
  }

  /* 5) 每个区块：按其在视口中的位置实时驱动位移/透明度
        无论向上还是向下滑，都有持续反馈 */</span>
  if (!reducedMotion) {
    for (const item of tracked) {
      const el = item.el;
      const rect = el.getBoundingClientRect();
      const elH = rect.height || 1;

      // 元素中心相对视口中心的位置：-1(上方) → 0(中心) → 1(下方)
      const center = rect.top + elH / 2;
      const rel = (center - vh / 2) / (vh * 0.85);
      const clamped = Math.max(-1.4, Math.min(1.4, rel));

      if (Math.abs(clamped - item.last) < 0.004) continue;
      item.last = clamped;

      if (el.classList.contains("cover")) continue;

      const absRel = Math.abs(clamped);

      if (el.classList.contains("reveal")) {
        // 首次进入后交给滚动驱动
        el.classList.add("runtime");
        el.style.opacity = String(Math.max(0.14, 1 - absRel * 0.7));
        el.style.transform = `translateY(${(clamped * 24).toFixed(1)}px)`;
      } else {
        el.style.transform = `translateY(${(clamped * 12).toFixed(1)}px)`;
      }
    }
  }

  ticking = false;
}

function onScroll() {
  if (ticking) return;
  ticking = true;
  requestAnimationFrame(update);
}

window.addEventListener("scroll", onScroll, { passive: true });
window.addEventListener("resize", () => {
  collectTracked();
  update();
});

/* 方向感知：向下滑时区块略微滞后，向上滑时略微超前 */
window.addEventListener(
  "scroll",
  () => {
    const y = window.scrollY;
    const down = y > lastY;
    lastY = y;
    document.body.classList.toggle("scroll-down", down);
  },
  { passive: true }
);

update();

/* ---------- 双向入场：离开视口后重置，回来再演一次 ---------- */
const items = document.querySelectorAll(".reveal");

if ("IntersectionObserver" in window && !reducedMotion) {
  const io = new IntersectionObserver(
    (entries) => {
      entries.forEach((e) => {
        const el = e.target;
        if (e.isIntersecting) {
          el.classList.add("in");
        } else {
          // 远离视口后重置：下次滑回来会重新入场
          // 留一点余量，避免边缘抖动反复触发
          const r = e.boundingClientRect;
          const fullyOut = r.bottom < -80 || r.top > window.innerHeight + 80;
          if (fullyOut) el.classList.remove("in");
        }
      });
    },
    { rootMargin: "0px 0px -10% 0px", threshold: [0, 0.15] }
  );

  // 首屏立即入场
  const coverEl = document.querySelector(".cover");
  if (coverEl) coverEl.classList.add("in");

  items.forEach((el) => {
    if (el !== coverEl) io.observe(el);
  });
} else {
  items.forEach((el) => el.classList.add("in"));
}

/* ---------- 触屏微反馈（按下的星点涟漪） ---------- */
if (!reducedMotion) {
  const spark = document.createElement("span");
  spark.className = "touch-spark";
  document.body.appendChild(spark);

  let sparkTimer = 0;

  window.addEventListener(
    "touchstart",
    (e) => {
      const t = e.touches[0];
      if (!t) return;
      spark.style.left = t.clientX + "px";
      spark.style.top = t.clientY + "px";
      spark.classList.remove("pop");
      // 触发重排以重启动画
      void spark.offsetWidth;
      spark.classList.add("pop");

      clearTimeout(sparkTimer);
      sparkTimer = setTimeout(() => spark.classList.remove("pop"), 700);
    },
    { passive: true }
  );
}

/* ---------- 情话 ---------- */
const btn = $("loveBtn");
const msg = $("loveMsg");

const lines = [
  "宇宙这么大，还好我找到你了。",
  "星星不会说话，但今晚它们都在替我高兴。",
  "我把白天攒的话，留到星星出来再说。",
  "抬头的时候，总觉得你也刚好在看。",
  "时间往前走，我在你旁边。",
  "如果有什么是我确定的事，那就是——你。",
  "愿你今晚做的梦，都轻一点。",
];

let i = 0;

btn.addEventListener("click", () => {
  msg.textContent = lines[i % lines.length];
  msg.classList.add("show");
  i += 1;
  btn.textContent = "再 一 句";
});

/* ============================================================
   11. 我们的星 · 今天 · 许愿 · 整数天彩蛋
   ============================================================ */</span>

/* ---------- 两颗命名的星 ---------- */
const namedLayer = document.getElementById("namedLayer");
const nstarA = document.getElementById("nstarA");
const nstarB = document.getElementById("nstarB");
const namedLinkLine = document.getElementById("namedLinkLine");

function layoutNamedLink() {
  if (!nstarA || !nstarB || !namedLinkLine) return;
  const a = nstarA.getBoundingClientRect();
  const b = nstarB.getBoundingClientRect();
  if (!a.width || !b.width) return;
  namedLinkLine.setAttribute("x1", (a.left + a.width / 2).toFixed(1));
  namedLinkLine.setAttribute("y1", (a.top + a.height / 2).toFixed(1));
  namedLinkLine.setAttribute("x2", (b.left + b.width / 2).toFixed(1));
  namedLinkLine.setAttribute("y2", (b.top + b.height / 2).toFixed(1));
}

layoutNamedLink();
window.addEventListener("resize", layoutNamedLink);

if (namedLayer) {
  window.addEventListener(
    "scroll",
    () => {
      const p = Math.min(1, (window.scrollY || 0) / (window.innerHeight * 0.62));
      namedLayer.style.opacity = String(1 - p);
      namedLayer.style.visibility = p > 0.985 ? "hidden" : "visible";
    },
    { passive: true }
  );

  [nstarA, nstarB].forEach((el) => {
    if (!el) return;
    el.addEventListener("click", (e) => {
      e.stopPropagation();
      const wasOn = el.classList.contains("on");
      [nstarA, nstarB].forEach((o) => o && o.classList.remove("on"));
      if (!wasOn) {
        el.classList.add("on");
        layoutNamedLink();
      }
    });
  });
}

/* ---------- 今天想说的一句（按日期轮换，当天固定） ---------- */
const DAILY_LINES = [
  "今天也别熬太晚，我在明天的早上等你。",
  "你笑起来的时候，我总觉得天亮了。",
  "走过的路都算数，包括今天这一段。",
  "想和你一起看很多次日落，包括今天没赶上的那次。",
  "今天过得怎么样？我猜你一定又很努力。",
  "有些日子平淡无奇，但你在旁边，它就不算数了。",
  "我把今天存起来，等老了慢慢还给你。",
  "你说话的时候，我总在偷偷记住。",
  "风把今天吹走了，我把你留下了。",
  "今天也要好好吃饭，这是我最朴素的愿望。",
  "你要是累了，就把今天交给我。",
  "我们还有好多日子没用过。",
  "今天适合什么都不做，就待着。",
  "你是我繁琐生活里，最干净的那一部分。",
  "天黑得早了，但我知道你会回来。",
  "所有的今天，都在往同一个方向去。",
  "你抬头看月亮的时候，我也在看。",
  "今天没什么大事，只有你。",
  "走过那么多路，最想回去的还是你身边。",
  "如果今天不顺，那就明天再说。",
  "你安静的样子，我看了很多次也不腻。",
  "今天也谢谢你，愿意和我一起耗时间。",
  "这个季节的风，很适合想念一个人。",
  "我把最好的运气，都留给你了。",
  "今天也想被你叫一声名字。",
  "日子像星子，一颗一颗攒起来，就是我们。",
  "你在的地方，就是我想去的地方。",
  "今天也是被惦记的一天。",
  "不急，我们有的是时间。",
  "睡前记得想我一下，就一下。"
];

const dailyDateEl = document.getElementById("dailyDate");
const dailyLineEl = document.getElementById("dailyLine");
let dailyStamp = "";

function mix32(n) {
  n = (n ^ 61) ^ (n >>> 16);
  n = (n + (n << 3)) | 0;
  n = n ^ (n >>> 4);
  n = Math.imul(n, 0x27d4eb2d);
  n = n ^ (n >>> 15);
  return n >>> 0;
}

function renderDaily() {
  const now = new Date();
  const stamp = now.getFullYear() + "-" + now.getMonth() + "-" + now.getDate();
  if (stamp === dailyStamp) return;
  dailyStamp = stamp;

  if (dailyDateEl) {
    const wd = ["星期日", "星期一", "星期二", "星期三", "星期四", "星期五", "星期六"][now.getDay()];
    dailyDateEl.textContent = now.getMonth() + 1 + " 月 " + now.getDate() + " 日 · " + wd;
  }
  if (dailyLineEl) {
    const seed = now.getFullYear() * 10000 + (now.getMonth() + 1) * 100 + now.getDate();
    dailyLineEl.textContent = DAILY_LINES[mix32(seed) % DAILY_LINES.length];
  }
}

renderDaily();
setInterval(renderDaily, 60000);

/* ---------- 点天空：划一颗流星 ---------- */
const WISH_LINES = [
  "许个愿吧，星星会替你保密。",
  "这一颗，记你一次抬头。",
  "愿望说出来就不灵了，那就先不说。",
  "我替你许了一个。",
  "今天的运气，分你一半。",
  "你也看见了吗？",
  "这一颗，是留给你的。",
  "星星知道我们的事。"
];

let lastWish = 0;

function spawnWish(x, y) {
  if (reducedMotion) return;
  const now = Date.now();
  if (now - lastWish < 650) return;
  lastWish = now;

  const star = document.createElement("i");
  star.className = "wish";
  star.style.left = x + "px";
  star.style.top = y + "px";
  document.body.appendChild(star);

  const say = document.createElement("span");
  say.className = "wish-msg";
  say.textContent = WISH_LINES[Math.floor(Math.random() * WISH_LINES.length)];
  say.style.left = x + "px";
  say.style.top = y - 30 + "px";
  document.body.appendChild(say);

  setTimeout(() => star.remove(), 1000);
  setTimeout(() => say.remove(), 2500);
}

document.addEventListener("click", (e) => {
  if (e.target.closest("a, button, input, textarea, label, .named-layer")) return;
  spawnWish(e.clientX, e.clientY);
});

/* ---------- 整数天 / 生日彩蛋 ---------- */
const MILESTONES = {
  200: "二百天。够把很多习惯，养成两个人共用的了。",
  300: "三百天。日子开始有了自己的重量。",
  365: "整整一年。四季都陪你走过了。",
  520: "第五百二十天。这个数字，本来就该属于今天。",
  730: "两年。",
  1000: "第一千天。",
  1314: "第一千三百一十四天。"
};

const milestoneBox = document.getElementById("milestone");
const msDayEl = document.getElementById("msDay");
const msTextEl = document.getElementById("msText");

function currentDays() {
  const diff = Date.now() - START_MS;
  return diff < 0 ? 0 : Math.floor(diff / 86400000) + 1;
}

let msStamp = -1;

function renderMilestone() {
  if (!milestoneBox) return;
  const days = currentDays();
  const now = new Date();
  const md = (now.getMonth() + 1) * 100 + now.getDate();
  if (days === msStamp) return;
  msStamp = days;

  let head = "";
  let text = "";

  if (md === 320) {
    head = "今天";
    text = "朵玥潼，生日快乐。";
  } else if (md === 1028) {
    head = "今天";
    text = "生日快乐，皓然。";
  } else if (ANNIVERSARIES.some((a) => md === a.month * 100 + a.day)) {
    const hit = ANNIVERSARIES.find((a) => md === a.month * 100 + a.day);
    head = "今天";
    text = hit.label + "。这一天，得记着。";
  } else if (MILESTONES[days]) {
    head = "第 " + days + " 天";
    text = MILESTONES[days];
  } else if (days > 0 && days % 100 === 0) {
    head = "第 " + days + " 天";
    text = "又是一个整百，记一下。";
  }

  if (!text) {
    milestoneBox.hidden = true;
    return;
  }

  milestoneBox.hidden = false;
  if (msDayEl) msDayEl.textContent = head;
  if (msTextEl) msTextEl.textContent = text;
}

renderMilestone();
setInterval(renderMilestone, 30000);

/* ============================================================
   12. 星轨 · 今日卡片 · 藏在落款里的信
   ============================================================ */</span>

/* ---------- 我们走过的星轨 ---------- */
function drawOrbit() {
  const cvs = document.getElementById("orbitCanvas");
  if (!cvs) return;

  const days = currentDays();
  const total = Math.max(365, days);
  const cols = 20;
  const rows = Math.ceil(total / cols);
  const gap = 15;
  const w = cols * gap;
  const h = rows * gap;
  const dpr = Math.min(2, window.devicePixelRatio || 1);

  cvs.width = w * dpr;
  cvs.height = h * dpr;
  cvs.style.width = "100%";
  cvs.style.maxWidth = w + "px";
  cvs.style.height = "auto";

  const ctx = cvs.getContext("2d");
  ctx.setTransform(dpr, 0, 0, dpr, 0, 0);
  ctx.clearRect(0, 0, w, h);

  for (let i = 0; i < total; i++) {
    const c = i % cols;
    const r = Math.floor(i / cols);
    const x = gap / 2 + c * gap;
    const y = gap / 2 + r * gap;
    const lit = i < days;

    if (i === days - 1) {
      // 今天这一颗
      ctx.beginPath();
      ctx.arc(x, y, 6, 0, Math.PI * 2);
      ctx.fillStyle = "rgba(232,196,184,0.16)";
      ctx.fill();
      ctx.beginPath();
      ctx.arc(x, y, 2.8, 0, Math.PI * 2);
      ctx.fillStyle = "#fff6ef";
      ctx.fill();
    } else if (lit && (i + 1) % 30 === 0) {
      // 每满 30 天，一颗亮星
      ctx.beginPath();
      ctx.arc(x, y, 5.4, 0, Math.PI * 2);
      ctx.fillStyle = "rgba(232,196,184,0.13)";
      ctx.fill();
      ctx.beginPath();
      ctx.arc(x, y, 2.5, 0, Math.PI * 2);
      ctx.fillStyle = "rgba(255,246,239,0.95)";
      ctx.fill();
    } else {
      const jitter = lit ? ((i * 37) % 5) * 0.17 : 0;
      ctx.beginPath();
      ctx.arc(x, y, (lit ? 1.6 : 1.25) + jitter, 0, Math.PI * 2);
      ctx.fillStyle = lit
        ? "rgba(240,214,196," + (0.55 + ((i * 53) % 35) / 100).toFixed(2) + ")"
        : "rgba(126,124,146,0.26)";
      ctx.fill();
    }
  }

  const note = document.getElementById("orbitNote");
  if (note) {
    const left = total - days;
    note.textContent =
      left > 0
        ? "一年 365 颗星，已经点亮 " + days + " 颗，还剩 " + left + " 颗。"
        : days + " 颗星，全都亮了。";
  }
}

drawOrbit();
let orbitTimer = 0;
window.addEventListener("resize", () => {
  clearTimeout(orbitTimer);
  orbitTimer = setTimeout(drawOrbit, 200);
});

/* ---------- 今日卡片 ---------- */
const cardLayer = document.getElementById("cardLayer");
const cardImg = document.getElementById("cardImg");

function wrapText(g, text, cx, y, maxW, lineH) {
  let line = "";
  for (const ch of text) {
    const test = line + ch;
    if (g.measureText(test).width > maxW && line) {
      g.fillText(line, cx, y);
      line = ch;
      y += lineH;
    } else {
      line = test;
    }
  }
  if (line) {
    g.fillText(line, cx, y);
    y += lineH;
  }
  return y;
}

function buildCard() {
  const W = 1080;
  const H = 1350;
  const c = document.createElement("canvas");
  c.width = W;
  c.height = H;
  const g = c.getContext("2d");

  const bg = g.createLinearGradient(0, 0, 0, H);
  bg.addColorStop(0, "#080a15");
  bg.addColorStop(0.55, "#06070f");
  bg.addColorStop(1, "#0a0810");
  g.fillStyle = bg;
  g.fillRect(0, 0, W, H);

  let seed = 20261114;
  const rnd = () => {
    seed = (seed * 1664525 + 1013904223) % 4294967296;
    return seed / 4294967296;
  };
  for (let i = 0; i < 300; i++) {
    const x = rnd() * W;
    const y = rnd() * H;
    const r = rnd() * 1.9 + 0.35;
    g.beginPath();
    g.arc(x, y, r, 0, Math.PI * 2);
    g.fillStyle = "rgba(240,236,248," + (0.07 + rnd() * 0.5).toFixed(3) + ")";
    g.fill();
  }

  const sans = '"PingFang SC", "Microsoft YaHei", system-ui, sans-serif';
  const serif = '"Didot", "Songti SC", "SimSun", serif';

  g.textAlign = "center";
  g.textBaseline = "alphabetic";

  g.fillStyle = "rgba(217,180,143,0.8)";
  g.font = "300 24px " + sans;
  g.fillText("I N   T H E   W H O L E   U N I V E R S E", W / 2, 200);

  const days = currentDays();
  g.fillStyle = "rgba(232,196,184,0.72)";
  g.font = "300 36px " + sans;
  g.fillText("我们在一起的第", W / 2, 430);

  g.font = "200 240px " + serif;
  const numText = String(days);
  const nw = g.measureText(numText).width;
  g.fillStyle = "#f5e8e0";
  g.fillText(numText, W / 2 - 26, 690);

  g.font = "300 46px " + sans;
  g.fillStyle = "rgba(232,196,184,0.8)";
  g.fillText("天", W / 2 - 26 + nw / 2 + 34, 682);

  g.strokeStyle = "rgba(232,196,184,0.18)";
  g.lineWidth = 1;
  g.beginPath();
  g.moveTo(W / 2 - 60, 790);
  g.lineTo(W / 2 + 60, 790);
  g.stroke();

  g.font = "300 40px " + sans;
  g.fillStyle = "rgba(242,236,232,0.92)";
  const todayLine = (document.getElementById("dailyLine") || {}).textContent || "";
  wrapText(g, todayLine, W / 2, 900, 760, 72);

  const now = new Date();
  g.font = "300 26px " + sans;
  g.fillStyle = "rgba(185,176,186,0.75)";
  g.fillText(
    now.getFullYear() + " 年 " + (now.getMonth() + 1) + " 月 " + now.getDate() + " 日",
    W / 2,
    1130
  );

  g.font = "300 40px " + serif;
  g.fillStyle = "rgba(232,196,184,0.9)";
  g.fillText("朵 玥 潼   ·   胡 皓 然", W / 2, 1225);

  g.font = "300 22px " + sans;
  g.fillStyle = "rgba(125,118,134,0.8)";
  g.fillText("our planet", W / 2, 1280);

  return c.toDataURL("image/png");
}

const dailySave = document.getElementById("dailySave");
if (dailySave && cardLayer && cardImg) {
  dailySave.addEventListener("click", () => {
    cardImg.src = buildCard();
    cardLayer.hidden = false;
    document.body.style.overflow = "hidden";
  });

  document.getElementById("cardClose").addEventListener("click", () => {
    cardLayer.hidden = true;
    document.body.style.overflow = "";
  });

  cardLayer.addEventListener("click", (e) => {
    if (e.target === cardLayer) {
      cardLayer.hidden = true;
      document.body.style.overflow = "";
    }
  });
}

/* ---------- 藏在落款里的信 ---------- */
const seal = document.querySelector(".seal");
const letter = document.getElementById("letter");

function openLetter() {
  if (!letter) return;
  letter.hidden = false;
  document.body.style.overflow = "hidden";
  if (seal) {
    seal.style.color = "";
    seal.style.textShadow = "";
  }
  sealClicks = 0;
}

function closeLetter() {
  if (!letter) return;
  letter.hidden = true;
  document.body.style.overflow = "";
}

let sealClicks = 0;
let sealResetTimer = 0;
let sealHoldTimer = 0;

if (seal && letter) {
  seal.addEventListener("click", () => {
    sealClicks += 1;
    seal.style.color = "rgba(242,236,232," + Math.min(1, 0.45 + sealClicks * 0.13) + ")";
    seal.style.textShadow = "0 0 " + sealClicks * 9 + "px rgba(232,196,184,0.5)";

    clearTimeout(sealResetTimer);
    sealResetTimer = setTimeout(() => {
      sealClicks = 0;
      seal.style.color = "";
      seal.style.textShadow = "";
    }, 1500);

    if (sealClicks >= 5) openLetter();
  });

  seal.addEventListener("pointerdown", () => {
    sealHoldTimer = setTimeout(openLetter, 1200);
  });
  ["pointerup", "pointerleave", "pointercancel"].forEach((ev) => {
    seal.addEventListener(ev, () => clearTimeout(sealHoldTimer));
  });

  document.getElementById("letterClose").addEventListener("click", closeLetter);
  letter.addEventListener("click", (e) => {
    if (e.target === letter) closeLetter();
  });
}

document.addEventListener("keydown", (e) => {
  if (e.key !== "Escape") return;
  closeLetter();
  if (cardLayer) cardLayer.hidden = true;
  document.body.style.overflow = "";
});

/* ============================================================
   13. 接下来的日子 · 分享 · 回到顶部 · 离线
   ============================================================ */</span>

/* ---------- 接下来的日子 ---------- */
function startOfToday() {
  const n = new Date();
  return new Date(n.getFullYear(), n.getMonth(), n.getDate());
}

function daysUntilDate(d) {
  return Math.round((d - startOfToday()) / 86400000);
}

function nextBirthday(month, day) {
  const t = startOfToday();
  let d = new Date(t.getFullYear(), month - 1, day);
  if (d < t) d = new Date(t.getFullYear() + 1, month - 1, day);
  return d;
}

function dateOfDayNumber(n) {
  const d = new Date(START_MS + (n - 1) * 86400000);
  return new Date(d.getFullYear(), d.getMonth(), d.getDate());
}

let countStamp = "";

function buildCountdown() {
  const list = document.getElementById("countList");
  if (!list) return;

  const now = new Date();
  const stamp = now.getFullYear() + "-" + now.getMonth() + "-" + now.getDate();
  if (stamp === countStamp) return;
  countStamp = stamp;

  const days = currentDays();
  const items = [];

  const nextHundred = Math.ceil((days + 1) / 100) * 100;
  const hundredDate = dateOfDayNumber(nextHundred);
  items.push({
    label: "第 " + nextHundred + " 天",
    date: hundredDate,
    left: daysUntilDate(hundredDate)
  });

  const b1 = nextBirthday(3, 20);
  items.push({ label: "朵玥潼的生日", date: b1, left: daysUntilDate(b1) });

  const b2 = nextBirthday(10, 28);
  items.push({ label: "胡皓然的生日", date: b2, left: daysUntilDate(b2) });

  ANNIVERSARIES.forEach((a) => {
    const d = nextBirthday(a.month, a.day);
    items.push({ label: a.label, date: d, left: daysUntilDate(d) });
  });

  const startD = new Date(START_MS);
  let anniv = new Date(startOfToday().getFullYear(), startD.getMonth(), startD.getDate());
  if (anniv < startOfToday()) anniv = new Date(anniv.getFullYear() + 1, startD.getMonth(), startD.getDate());
  const years = anniv.getFullYear() - startD.getFullYear();
  items.push({
    label: years > 0 ? "在一起 " + years + " 周年" : "在一起这天",
    date: anniv,
    left: daysUntilDate(anniv)
  });

  items.sort((a, b) => a.left - b.left);

  list.innerHTML = items
    .map((it) => {
      const d = it.date;
      const dateStr = d.getMonth() + 1 + " 月 " + d.getDate() + " 日";
      const leftStr = it.left === 0 ? "就是今天" : "还有 " + it.left + " 天";
      const soon = it.left <= 30 ? " soon" : "";
      return (
        '<li><span class="c-label">' + it.label + "</span>" +
        '<span class="c-days' + soon + '">' + leftStr + "</span>" +
        '<span class="c-date">' + dateStr + "</span></li>"
      );
    })
    .join("");
}

buildCountdown();
setInterval(buildCountdown, 60000);

/* ---------- 轻提示 ---------- */
let toastEl = null;
let toastTimer = 0;

function toast(msg) {
  if (!toastEl) {
    toastEl = document.createElement("div");
    toastEl.className = "toast";
    document.body.appendChild(toastEl);
  }
  toastEl.textContent = msg;
  requestAnimationFrame(() => toastEl.classList.add("show"));
  clearTimeout(toastTimer);
  toastTimer = setTimeout(() => toastEl.classList.remove("show"), 1900);
}

/* ---------- 分享 ---------- */
const shareBtn = document.getElementById("shareBtn");

if (shareBtn) {
  shareBtn.addEventListener("click", async () => {
    const data = {
      title: "朵玥潼 · 胡皓然",
      text: "我们，是彼此的星球",
      url: location.href
    };

    if (navigator.share) {
      try {
        await navigator.share(data);
        return;
      } catch (e) {
        if (e && e.name === "AbortError") return;
      }
    }

    try {
      await navigator.clipboard.writeText(location.href);
      toast("链接已复制");
    } catch (e) {
      toast("长按地址栏复制链接");
    }
  });
}

/* ---------- 回到顶部 ---------- */
const toTop = document.getElementById("toTop");

if (toTop) {
  window.addEventListener(
    "scroll",
    () => {
      toTop.classList.toggle("show", (window.scrollY || 0) > 700);
    },
    { passive: true }
  );

  toTop.addEventListener("click", () => {
    window.scrollTo({ top: 0, behavior: reducedMotion ? "auto" : "smooth" });
  });
}

/* ---------- 离线（PWA） ---------- */
if ("serviceWorker" in navigator && location.protocol === "https:") {
  window.addEventListener("load", () => {
    navigator.serviceWorker.register("./sw.js").catch(() => {});
  });
}

/* ============================================================
   15. GPU 极光（WebGL 着色器，零依赖）
   ============================================================ */</span>

(function initNebula() {
  const cvs = document.getElementById("gl");
  if (!cvs) return;

  const gl =
    cvs.getContext("webgl", { antialias: false, alpha: false, powerPreference: "low-power" }) ||
    cvs.getContext("experimental-webgl");

  if (!gl) {
    cvs.style.display = "none"; // 老设备：直接不显示，退回 CSS 渐变
    return;
  }

  const VERT = `
    attribute vec2 a_pos;
    varying vec2 v_uv;
    void main() {
      v_uv = a_pos * 0.5 + 0.5;
      gl_Position = vec4(a_pos, 0.0, 1.0);
    }
  `</span>;

  const FRAG = `
    precision mediump float;
    varying vec2 v_uv;
    uniform vec2 u_res;
    uniform float u_time;
    uniform vec2 u_mouse;

    float hash(vec2 p) {
      return fract(sin(dot(p, vec2(127.1, 311.7))) * 43758.5453123);
    }

    float noise(vec2 p) {
      vec2 i = floor(p);
      vec2 f = fract(p);
      vec2 u = f * f * (3.0 - 2.0 * f);
      return mix(
        mix(hash(i),                 hash(i + vec2(1.0, 0.0)), u.x),
        mix(hash(i + vec2(0.0, 1.0)), hash(i + vec2(1.0, 1.0)), u.x),
        u.y
      );
    }

    void main() {
      vec2 uv = v_uv;
      vec2 p  = vec2(uv.x * u_res.x / u_res.y, uv.y);
      float t = u_time * 0.018;

      // 底色：上冷下暖
      vec3 col = mix(vec3(0.045, 0.042, 0.085), vec3(0.085, 0.058, 0.080), uv.y);

      // 第一层极光（冷紫）
      float n1 = noise(p * 1.5 + vec2(t * 0.70, -t * 0.35));
      float b1 = smoothstep(0.46, 0.92, n1);
      col += vec3(0.230, 0.250, 0.560) * b1 * (0.60 + 0.25 * sin(t * 2.2));

      // 第二层极光（暖）
      float n2 = noise(p * 2.3 + vec2(-t * 0.50, t * 0.60) + 17.0);
      float b2 = smoothstep(0.52, 1.0, n2);
      col += vec3(0.430, 0.240, 0.235) * b2 * 0.34;

      // 指针视差
      col += vec3(0.020, 0.024, 0.040) * dot(u_mouse, uv - 0.5);

      // 暗角
      float vig = smoothstep(1.45, 0.20, length(uv - 0.5));
      col *= 0.58 + 0.42 * vig;

      gl_FragColor = vec4(col, 1.0);
    }
  `</span>;

  function compile(type, src) {
    const s = gl.createShader(type);
    gl.shaderSource(s, src);
    gl.compileShader(s);
    if (!gl.getShaderParameter(s, gl.COMPILE_STATUS)) {
      console.warn(gl.getShaderInfoLog(s));
      return null;
    }
    return s;
  }

  const vs = compile(gl.VERTEX_SHADER, VERT);
  const fs = compile(gl.FRAGMENT_SHADER, FRAG);
  if (!vs || !fs) {
    cvs.style.display = "none";
    return;
  }

  const prog = gl.createProgram();
  gl.attachShader(prog, vs);
  gl.attachShader(prog, fs);
  gl.linkProgram(prog);
  if (!gl.getProgramParameter(prog, gl.LINK_STATUS)) {
    cvs.style.display = "none";
    return;
  }
  gl.useProgram(prog);

  // 一个覆盖全屏的大三角形（比两个三角形省一次顶点）
  const buf = gl.createBuffer();
  gl.bindBuffer(gl.ARRAY_BUFFER, buf);
  gl.bufferData(gl.ARRAY_BUFFER, new Float32Array([-1, -1, 3, -1, -1, 3]), gl.STATIC_DRAW);
  const loc = gl.getAttribLocation(prog, "a_pos");
  gl.enableVertexAttribArray(loc);
  gl.vertexAttribPointer(loc, 2, gl.FLOAT, false, 0, 0);

  const uRes = gl.getUniformLocation(prog, "u_res");
  const uTime = gl.getUniformLocation(prog, "u_time");
  const uMouse = gl.getUniformLocation(prog, "u_mouse");

  // 关键：只用一半分辨率渲染，靠 CSS 拉满 —— 像素少 4 倍，手机上稳
  const SCALE = Math.min(1.0, window.devicePixelRatio || 1) * 0.55;

  function resize() {
    const w = Math.max(1, Math.floor(window.innerWidth * SCALE));
    const h = Math.max(1, Math.floor(window.innerHeight * SCALE));
    cvs.width = w;
    cvs.height = h;
    gl.viewport(0, 0, w, h);
    gl.uniform2f(uRes, w, h);
  }

  resize();
  window.addEventListener("resize", resize);

  const mouse = { x: 0, y: 0 };
  window.addEventListener(
    "pointermove",
    (e) => {
      mouse.x = (e.clientX / window.innerWidth - 0.5) * 2;
      mouse.y = (e.clientY / window.innerHeight - 0.5) * 2;
    },
    { passive: true }
  );

  const reduce = window.matchMedia("(prefers-reduced-motion: reduce)").matches;
  const start = performance.now();

  function frame() {
    const t = reduce ? 0 : (performance.now() - start) / 1000;
    gl.uniform1f(uTime, t);
    gl.uniform2f(uMouse, mouse.x, mouse.y);
    gl.drawArrays(gl.TRIANGLES, 0, 3);
    if (!reduce) requestAnimationFrame(frame);
  }

  frame();
})();

const SEALED_AT = new Date(2027, 2, 20); // 2027 年 3 月 20 日
const sealedLetter = document.getElementById("sealedLetter");
const sealedBox = document.getElementById("sealedBox");
const sealedLeftEl = document.getElementById("sealedLeft");
const sealedBtn = document.getElementById("sealedBtn");

/* ---- 信的密文：页面里没有明文 ---- */
const SEALED_PASS = "duo-yue-tong-2027-03-20";
const SEALED_SALT = new Uint8Array([23, 11, 20, 26, 7, 3, 20, 20, 5, 4, 4, 20, 26, 12, 1, 9]);
const SEALED_IV = new Uint8Array([20, 26, 3, 20, 20, 5, 4, 4, 26, 12, 1, 9]);
const SEALED_CT =
  "R7E1jRsQjlnanEsailR2HXDs2Q/scKCieXwiucV9mBfSPoi3FqXWvtEDdqmBW/XoDqFVrNzqWzwwiQA2FW9Nhi0Jq+J0RRdHSGkhdXYtNO4sr5WC1LCMzXeAVQ+Rm6MCKF/GMvVemfkgjlK0zktbHWsMtbSfuhx8JxIvoRDuuW0xWhE3V+u+xRf0YN4ra5bf0baHGy861lfi/TfryBAIx41v3rnhlXnjYvX6ArphybbZCZHRlqPY3Xh2r0SExWkmr/83Q2B2VLqPsAcc9wZXwDPLBmtbvT/30GqDXA4BsV9iaZQiDALwOC3/s/CyWAFYXQ9nqMeiI3eGw/K5N8vl1KPa+SDvTN+P6f8cSQVbQwvEItmGHb0pt67Pe9H9DkoWkzFqNKR7ujLGndHkcMURXuoIeDptAfg7tSaSi6WEs/75xAwWGSgAzuPKSjUx+CPRvGBAqg03wpty1IbTjpggarziWJjPJssIYCCMm0woiaHBHFmbcn1zJw6TXfTj/3LCtPg3xYEaIO05f4Tzu/ad3cQK92hT7NyHHovDs35xfARQJg4u16VVzMDqS5UVhZebu2ctocPvaMYErDvHx3TrG9MEJPLS8y/3JqxtDzY0wz51Pba03SWMj3A6w8abNqIBRNYTeeVm7/L7bpMXDo9XUMXRWTjKLZK3z7WOAz5AaYXVFzkj/qEvSUvCl0b4f0hBClvbGgsjApOCwt301PiuhfK1k38dmuSqI42WnGJD/N53TWfH";

async function unlockLetter() {
  const body = document.getElementById("sealedBody");
  if (!body || body.dataset.ready === "1") return;

  if (!(window.crypto && window.crypto.subtle)) {
    body.innerHTML = "<p class='sealed-loading'>这个浏览器解不开，换一个试试。</p>";
    return;
  }

  try {
    const enc = new TextEncoder();
    const km = await crypto.subtle.importKey(
      "raw", enc.encode(SEALED_PASS), "PBKDF2", false, ["deriveKey"]
    );
    const key = await crypto.subtle.deriveKey(
      { name: "PBKDF2", salt: SEALED_SALT, iterations: 120000, hash: "SHA-256" },
      km, { name: "AES-GCM", length: 256 }, false, ["decrypt"]
    );
    const raw = Uint8Array.from(atob(SEALED_CT), (c) => c.charCodeAt(0));
    const plain = await crypto.subtle.decrypt({ name: "AES-GCM", iv: SEALED_IV }, key, raw);
    const text = new TextDecoder().decode(plain);

    body.innerHTML = text
      .split("\n\n")
      .map((p) => "<p>" + p + "</p>")
      .join("");
    body.dataset.ready = "1";
  } catch (e) {
    body.innerHTML = "<p class='sealed-loading'>解密失败。</p>";
  }
}

function renderSealed() {
  if (!sealedBox) return;
  const left = Math.ceil((SEALED_AT - startOfToday()) / 86400000);

  if (left > 0) {
    sealedLeftEl.textContent = "还有 " + left + " 天";
    sealedBtn.disabled = true;
    sealedBtn.textContent = "还没到时间";
    sealedBox.classList.remove("ready");
  } else {
    sealedLeftEl.textContent = "今天开封";
    sealedBtn.disabled = false;
    sealedBtn.textContent = "打 开";
    sealedBox.classList.add("ready");
  }
}

renderSealed();
setInterval(renderSealed, 60000);

if (sealedBtn && sealedLetter) {
  sealedBtn.addEventListener("click", () => {
    if (sealedBtn.disabled) return;
    sealedLetter.hidden = false;
    document.body.style.overflow = "hidden";
    unlockLetter();
  });

  document.getElementById("sealedClose").addEventListener("click", () => {
    sealedLetter.hidden = true;
    document.body.style.overflow = "";
  });

  sealedLetter.addEventListener("click", (e) => {
    if (e.target === sealedLetter) {
      sealedLetter.hidden = true;
      document.body.style.overflow = "";
    }
  });

  document.addEventListener("keydown", (e) => {
    if (e.key === "Escape" && !sealedLetter.hidden) {
      sealedLetter.hidden = true;
      document.body.style.overflow = "";
    }
  });
}

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266
267
268
269
270
271
272
273
274
275
276
277
278
279
280
281
282
283
284
285
286
287
288
289
290
291
292
293
294
295
296
297
298
299
300
301
302
303
304
305
306
307
308
309
310
311
312
313
314
315
316
317
318
319
320
321
322
323
324
325
326
327
328
329
330
331
332
333
334
335
336
337
338
339
340
341
342
343
344
345
346
347
348
349
350
351
352
353
354
355
356
357
358
359
360
361
362
363
364
365
366
367
368
369
370
371
372
373
374
375
376
377
378
379
380
381
382
383
384
385
386
387
388
389
390
391
392
393
394
395
396
397
398
399
400
401
402
403
404
405
406
407
408
409
410
411
412
413
414
415
416
417
418
419
420
421
422
423
424
425
426
427
428
429
430
431
432
433
434
435
436
437
438
439
440
441
442
443
444
445
446
447
448
449
450
451
452
453
454
455
456
457
458
459
460
461
462
463
464
465
466
467
468
469
470
471
472
473
474
475
476
477
478
479
480
481
482
483
484
485
486
487
488
489
490
491
492
493
494
495
496
497
498
499
500
501
502
503
504
505
506
507
508
509
510
511
512
513
514
515
516
517
518
519
520
521
522
523
524
525
526
527
528
529
530
531
532
533
534
535
536
537
538
539
540
541
542
543
544
545
546
547
548
549
550
551
552
553
554
555
556
557
558
559
560
561
562
563
564
565
566
567
568
569
570
571
572
573
574
575
576
577
578
579
580
581
582
583
584
585
586
587
588
589
590
591
592
593
594
595
596
597
598
599
600
601
602
603
604
605
606
607
608
609
610
611
612
613
614
615
616
617
618
619
620
621
622
623
624
625
626
627
628
629
630
631
632
633
634
635
636
637
638
639
640
641
642
643
644
645
646
647
648
649
650
651
652
653
654
655
656
657
658
659
660
661
662
663
664
665
666
667
668
669
670
671
672
673
674
675
676
677
678
679
680
681
682
683
684
685
686
687
688
689
690
691
692
693
694
695
696
697
698
699
700
701
702
703
704
705
706
707
708
709
710
711
712
713
714
715
716
717
718
719
720
721
722
723
724
725
726
727
728
729
730
731
732
733
734
735
736
737
738
739
740
741
742
743
744
745
746
747
748
749
750
751
752
753
754
755
756
757
758
759
760
761
762
763
764
765
766
767
768
769
770
771
772
773
774
775
776
777
778
779
780
781
782
783
784
785
786
787
788
789
790
791
792
793
794
795
796
797
798
799
800
801
802
803
804
805
806
807
808
809
810
811
812
813
814
815
816
817
818
819
820
821
822
823
824
825
826
827
828
829
830
831
832
833
834
835
836
837
838
839
840
841
842
843
844
845
846
847
848
849
850
851
852
853
854
855
856
857
858
859
860
861
862
863
864
865
866
867
868
869
870
871
872
873
874
875
876
877
878
879
880
881
882
883
884
885
886
887
888
889
890
891
892
893
894
895
896
897
898
899
900
901
902
903
904
905
906
907
908
909
910
911
912
913
914
915
916
917
918
919
920
921
922
923
924
925
926
927
928
929
930
931
932
933
934
935
936
937
938
939
940
941
942
943
944
945
946
947
948
949
950
951
952
953
954
955
956
957
958
959
960
961
962
963
964
965
966
967
968
969
970
971
972
973
974
975
976
977
978
979
980
981
982
983
984
985
986
987
988
989
990
991
992
993
994
995
996
997
998
999
1000
1001
1002
1003
1004
1005
1006
1007
1008
1009
1010
1011
1012
1013
1014
1015
1016
1017
1018
1019
1020
1021
1022
1023
1024
1025
1026
1027
1028
1029
1030
1031
1032
1033
1034
1035
1036
1037
1038
1039
1040
1041
1042
1043
1044
1045
1046
1047
1048
1049
1050
1051
1052
1053
1054
1055
1056
1057
1058
1059
1060
1061
1062
1063
1064
1065
1066
1067
1068
1069
1070
1071
1072
1073
1074
1075
1076
1077
1078
1079
1080
1081
1082
1083
1084
1085
1086
1087
1088
1089
1090
1091
1092
1093
1094
1095
1096
1097
1098
1099
1100
1101
1102
1103
1104
1105
1106
1107
1108
1109
1110
1111
1112
1113
1114
1115
1116
1117
1118
1119
1120
1121
1122
1123
1124
1125
1126
1127
1128
1129
1130
1131
1132
1133
1134
1135
1136
1137
1138
1139
1140
1141
1142
1143
1144
1145
1146
1147
1148
1149
1150
1151
1152
1153
1154
1155
1156
1157
1158
1159
1160
1161
1162
1163
1164
1165
1166
1167
1168
1169
1170
1171
1172
1173
1174
1175
1176
1177
1178
1179
1180
1181
1182
1183
1184
1185
1186
1187
1188
1189
1190
1191
1192
1193
1194
1195
1196
1197
1198
1199
1200
1201
1202
1203
1204
1205
1206
1207
1208
1209
1210
1211
1212
1213
1214
1215
1216
1217
1218
1219
1220
1221
1222
1223
1224
1225
1226
1227
1228
1229
1230
1231
1232
1233
1234
1235
1236
1237
1238
1239
1240
1241
1242
1243
1244
1245
1246
1247
1248
1249
1250
1251
1252
1253
1254
1255
1256
1257
1258
1259
1260
1261
1262
1263
1264
1265
1266
1267
1268
1269
1270
1271
1272
1273
1274
1275
1276
1277
1278
1279
1280
1281
1282
1283
1284
1285
1286
1287
1288
1289
1290
1291
1292
1293
1294
1295
1296
1297
1298
1299
1300
1301
1302
1303
1304
1305
1306
1307
1308
1309
1310
1311
1312
1313
1314
1315
1316
1317
1318
1319
1320
1321
1322
1323
1324
1325
1326
1327
1328
1329
1330
1331
1332
1333
1334
1335
1336
1337
1338
1339
1340
1341
1342
1343
1344
1345
1346
1347
1348
1349
1350
1351
1352
1353
1354
1355
1356
1357
1358
1359
1360
1361
1362
1363
1364
1365
1366
1367
1368
1369
1370
1371
1372
1373
1374
1375
1376
1377
1378
1379
1380
1381
1382
1383
1384
1385
1386
1387
1388
1389
1390
1391
1392
1393
1394
1395
1396
1397
1398
1399
1400
1401
1402
1403
1404
1405
1406
1407
1408
1409
1410
1411
1412
1413
1414
1415
1416
1417
1418
1419
1420
1421
1422
1423
1424
1425
1426
1427
1428
1429
1430
1431
1432
1433
1434
1435
1436
1437
1438
1439
1440
1441
1442
1443
1444
1445
1446
1447
1448
1449
1450
1451
1452
1453
1454
1455
1456
1457
1458
1459
1460
1461
1462
1463
1464
1465
1466
1467
1468
1469
1470
1471
1472
1473
1474
1475
1476
1477
1478
1479
1480
1481
1482
1483
1484
1485
1486
1487
1488
1489
1490
1491
1492
1493
1494
1495
1496
1497
1498
1499
1500
1501
1502
1503
1504
1505
1506
1507
1508
1509
1510
1511
1512
1513
1514
1515
1516
1517
1518
1519
1520
1521
1522
1523
1524
1525
1526
1527
1528
1529
1530
1531
1532
1533
1534
1535
1536
1537
1538
1539
1540
1541
1542
1543
1544
1545
1546
1547
1548
1549
1550
1551
1552
1553
1554
1555
1556
1557
1558
1559
1560
1561
1562
1563
1564
1565
1566
1567
1568
1569
1570
1571
1572
1573
1574
1575
1576
1577
1578
1579
1580
1581
1582
1583
1584
1585
1586
1587
1588
1589
1590
1591
1592
1593
1594
1595
1596
1597
1598
1599
1600
1601
1602
1603
1604
1605
1606
1607
1608
1609
1610
1611
1612
1613
1614
1615
1616
1617
1618
1619
1620
1621
1622
1623
1624
1625
1626
1627
1628
1629
1630
1631
1632
1633
1634
1635
1636
1637

/* ============================================================
   星辰宇宙 · 深空 + 玫瑰金
   手机优先（390 宽为准）
   ============================================================ */</span>

:root {
  --void: #05060d;
  --void-2: #0a0c16;
  --void-3: #10121f;
  --star: #f2ece8;
  --star-dim: #b9b0ba;
  --star-faint: #7d7686;
  --rose: #e8c4b8;
  --rose-2: #c9a08f;
  --gold: #d9b48f;
  --line: rgba(232, 196, 184, 0.16);
  --line-2: rgba(232, 196, 184, 0.3);
}

* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
}

body {
  font-family: "PingFang SC", "Microsoft YaHei", "Noto Sans SC", system-ui, sans-serif;
  font-weight: 300;
  background: var(--void);
  color: var(--star);
  line-height: 2;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
  padding-bottom: env(safe-area-inset-bottom);
}

/* ---------- 星空画布 ---------- */
#gl {
  position: fixed;
  inset: 0;
  width: 100%;
  height: 100%;
  z-index: 0;
  pointer-events: none;
  /* 半分辨率渲染，这里被放大 —— 极光是柔的，看不出糊 */
}

#stars {
  position: fixed;
  inset: 0;
  width: 100%;
  height: 100%;
  z-index: 0;
  pointer-events: none;
}

/* 顶部与底部的星雾 */
.veil {
  position: fixed;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background:
    radial-gradient(120% 55% at 50% -10%, rgba(122, 108, 190, 0.2), transparent 62%),
    radial-gradient(90% 40% at 50% 108%, rgba(190, 130, 120, 0.12), transparent 65%),
    linear-gradient(180deg, rgba(5, 6, 13, 0) 0%, rgba(5, 6, 13, 0.25) 50%, rgba(5, 6, 13, 0.55) 100%);
}

.wrap {
  position: relative;
  z-index: 2;
  max-width: 520px;
  margin: 0 auto;
  padding: 0 1.75rem;
}

/* 触屏星点涟漪 */
.touch-spark {
  position: fixed;
  z-index: 40;
  width: 6px;
  height: 6px;
  margin: -3px 0 0 -3px;
  border-radius: 50%;
  pointer-events: none;
  opacity: 0;
  background: radial-gradient(circle, rgba(255, 244, 236, 0.95), rgba(232, 196, 184, 0.35) 55%, transparent 70%);
  transform: scale(0.4);
}

.touch-spark.pop {
  animation: sparkPop 0.68s ease-out forwards;
}

@keyframes sparkPop {
  0% { opacity: 0.9; transform: scale(0.4); }
  55% { opacity: 0.55; transform: scale(9); }
  100% { opacity: 0; transform: scale(16); }
}

/* 顶部阅读进度 */
.progress {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  height: 2px;
  z-index: 30;
  background: rgba(232, 196, 184, 0.08);
  pointer-events: none;
}

.progress span {
  display: block;
  height: 100%;
  width: 0%;
  background: linear-gradient(90deg, rgba(232, 196, 184, 0.15), #f3cdba 60%, #fff2e8);
  box-shadow: 0 0 12px rgba(255, 220, 200, 0.8);
  transition: width 0.12s linear;
}

/* 跟随滚动的极光 */
.aurora {
  position: fixed;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  opacity: 0.6;
  background:
    radial-gradient(60% 34% at var(--ax, 50%) 14%, rgba(150, 128, 210, 0.17), transparent 70%),
    radial-gradient(50% 30% at calc(100% - var(--ax, 50%)) 72%, rgba(226, 158, 140, 0.14), transparent 72%);
}

/* ---------- 入场 ---------- */
.reveal {
  opacity: 0;
  transform: translateY(30px);
  transition: opacity 0.85s cubic-bezier(0.22, 0.61, 0.36, 1),
              transform 0.85s cubic-bezier(0.22, 0.61, 0.36, 1);
  will-change: opacity, transform;
}

.reveal.in {
  opacity: 1;
  transform: none;
}

/* JS 接管后：位移由滚动实时驱动，取消 transition 避免打架 */
.reveal.runtime {
  transition: opacity 0.5s ease-out;
}

/* 不同方向的入场 */
.reveal.from-left {
  transform: translateX(-30px);
}
.reveal.from-right {
  transform: translateX(30px);
}
.reveal.from-left.in,
.reveal.from-right.in {
  transform: none;
}

/* 首屏：由 --cover-p 驱动淡出与上移 */
.cover {
  opacity: calc(1 - var(--cover-p, 0));
  transform: translateY(calc(var(--cover-p, 0) * -52px));
  will-change: opacity, transform;
}

/* ---------- 首屏 ---------- */
.cover {
  min-height: 100vh;
  min-height: 100svh;
  min-height: 100dvh;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 3rem 0;
  position: relative;
}

.eyebrow {
  font-family: "Didot", "Bodoni MT", Georgia, serif;
  font-size: 0.62rem;
  letter-spacing: 6.5px;
  text-indent: 6.5px;
  color: var(--rose-2);
  opacity: 0.75;
  margin-bottom: 2.4rem;
  animation: fadeUp 2.4s ease-out both;
}

.cover h1 {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.15rem;
  font-family: "STSong", "Songti SC", "SimSun", serif;
  font-weight: 400;
  line-height: 1.5;
  animation: fadeUp 2.4s 0.25s ease-out both;
}

.n1 {
  font-size: clamp(2.6rem, 13.6vw, 3.5rem);
  font-weight: 500;
  letter-spacing: 0.24em;
  text-indent: 0.24em;
  line-height: 1.28;
  background: linear-gradient(178deg, #ffffff 0%, #fff0e6 28%, #f3cdba 62%, #d4a190 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  filter:
    drop-shadow(0 0 16px rgba(255, 226, 208, 0.5))
    drop-shadow(0 0 46px rgba(240, 200, 180, 0.34))
    drop-shadow(0 0 90px rgba(232, 196, 184, 0.2));
}

.link {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  margin: 0.35rem 0;
}

.link i {
  width: 42px;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(232, 196, 184, 0.55));
}

.link i:last-child {
  background: linear-gradient(90deg, rgba(232, 196, 184, 0.55), transparent);
}

.link em {
  font-style: normal;
  font-family: "Didot", serif;
  font-size: 0.9rem;
  color: var(--gold);
  opacity: 0.95;
  text-shadow: 0 0 12px rgba(217, 180, 143, 0.6);
}

.n2 {
  font-size: clamp(2.6rem, 13.6vw, 3.5rem);
  font-weight: 500;
  letter-spacing: 0.24em;
  text-indent: 0.24em;
  line-height: 1.28;
  background: linear-gradient(178deg, #ffffff 0%, #fbf0ea 30%, #e8d0c6 66%, #c8a99e 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  filter:
    drop-shadow(0 0 16px rgba(250, 232, 224, 0.52))
    drop-shadow(0 0 46px rgba(235, 210, 200, 0.34));
}

.sub {
  margin-top: 2rem;
  font-size: 0.82rem;
  letter-spacing: 3.2px;
  text-indent: 3.2px;
  color: #a99fab;
  animation: fadeUp 2.4s 0.5s ease-out both;
}

.scroll {
  position: absolute;
  bottom: 2.2rem;
  left: 0;
  right: 0;
  margin: 0 auto;
  width: fit-content;
  font-size: 0.54rem;
  letter-spacing: 5px;
  text-indent: 5px;
  color: var(--star-faint);
  opacity: 0.55;
  animation: drift 3.2s ease-in-out infinite;
}

@keyframes fadeUp {
  from { opacity: 0; transform: translateY(16px); }
  to { opacity: 1; transform: none; }
}

@keyframes drift {
  0%, 100% { opacity: 0.3; transform: translateY(0); }
  50% { opacity: 0.8; transform: translateY(5px); }
}

/* ---------- 竖排诗句 ---------- */
.verse {
  display: flex;
  justify-content: center;
  align-items: flex-start;
  gap: 2.8rem;
  padding: 3.6rem 0 3.2rem;
}

.verse .v-line:nth-child(2) {
  margin-top: 2.8rem;
}

.v-line p {
  writing-mode: vertical-rl;
  text-orientation: upright;
  font-family: "STKaiti", "KaiTi", "楷体", serif;
  font-size: 1.16rem;
  letter-spacing: 10px;
  line-height: 1;
  color: #ddd4d2;
  text-shadow: 0 0 18px rgba(200, 170, 200, 0.18);
}

/* ---------- 分隔 ---------- */
.divider {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.8rem;
  padding: 1.6rem 0;
}

.divider span {
  width: 3.4rem;
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--line-2), transparent);
}

.divider i {
  width: 3px;
  height: 3px;
  border-radius: 50%;
  background: var(--rose);
  opacity: 0.55;
  box-shadow: 0 0 10px rgba(232, 196, 184, 0.6);
}

/* ---------- 章节 ---------- */
.chapter {
  padding: 1.4rem 0 1.6rem;
}

.ch-no {
  font-family: "Didot", "Bodoni MT", Georgia, serif;
  font-size: 0.58rem;
  letter-spacing: 4px;
  color: var(--rose-2);
  opacity: 0.7;
  margin-bottom: 0.55rem;
}

.ch-no.center {
  text-align: center;
}

h2 {
  font-family: "STSong", "Songti SC", "SimSun", serif;
  font-size: 1.04rem;
  font-weight: 400;
  letter-spacing: 0.36em;
  text-indent: 0.36em;
  color: #f0e8e6;
  margin-bottom: 1.15rem;
}

.prose {
  font-size: 1.02rem;
  line-height: 1.85;
  color: #cfc7d2;
  text-align: justify;
  letter-spacing: 0.3px;
}

/* ---------- 列表 ---------- */
.list {
  list-style: none;
  display: flex;
  flex-direction: column;
}

.list li {
  display: flex;
  gap: 1rem;
  padding: 1.15rem 0;
  border-top: 1px solid rgba(232, 196, 184, 0.1);
  opacity: 0;
  transform: translateY(18px);
  transition: opacity 0.9s cubic-bezier(0.22, 0.61, 0.36, 1),
              transform 0.9s cubic-bezier(0.22, 0.61, 0.36, 1),
              border-color 0.3s;
}

/* 逐条错峰 */
.chapter.in .list li:nth-child(1) { opacity: 1; transform: none; transition-delay: 0.08s; }
.chapter.in .list li:nth-child(2) { opacity: 1; transform: none; transition-delay: 0.2s; }
.chapter.in .list li:nth-child(3) { opacity: 1; transform: none; transition-delay: 0.32s; }

.list li:active {
  border-top-color: rgba(232, 196, 184, 0.3);
}

.list li:last-child {
  border-bottom: 1px solid rgba(232, 196, 184, 0.1);
}

.li-idx {
  flex: 0 0 auto;
  width: 1.7rem;
  font-family: "Didot", "Bodoni MT", Georgia, serif;
  font-size: 0.64rem;
  letter-spacing: 1px;
  color: var(--rose-2);
  opacity: 0.65;
  padding-top: 0.32rem;
}

.list h3 {
  line-height: 1.5;
  font-family: "STSong", "Songti SC", serif;
  font-size: 1.04rem;
  font-weight: 400;
  letter-spacing: 0.22em;
  margin-bottom: 0.15rem;
  color: #ece4e2;
}

.list p {
  font-size: 0.88rem;
  line-height: 1.7;
  color: #a99fab;
}

/* ---------- 生日 ---------- */
.bd {
  text-align: center;
}

.bd h2 {
  text-align: center;
}

.bd-row {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 1.1rem;
  padding: 0.4rem 0;
}

.bd-item {
  flex: 1 1 0;
  max-width: 156px;
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 0.9rem 0.3rem 0.8rem;
  border-top: 1px solid rgba(232, 196, 184, 0.14);
  border-bottom: 1px solid rgba(232, 196, 184, 0.14);
}

.bd-item .who {
  font-family: "STSong", "Songti SC", serif;
  font-size: 0.7rem;
  letter-spacing: 5px;
  text-indent: 5px;
  color: var(--rose-2);
  opacity: 0.85;
  margin-bottom: 0.32rem;
}

.bd-item em {
  font-family: "Didot", "Bodoni MT", "STSong", Georgia, serif;
  font-style: normal;
  font-size: clamp(1.45rem, 6.9vw, 1.75rem);
  letter-spacing: 1px;
  line-height: 1.2;
  white-space: nowrap;
  background: linear-gradient(180deg, #fff8f4, #dfbcb0 70%, #b98d80);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

.bd-sep {
  flex: 0 0 auto;
  width: 1px;
  height: 2.5rem;
  background: linear-gradient(180deg, transparent, var(--line-2), transparent);
}

.bd-note {
  line-height: 1.6;
  margin-top: 1rem;
  font-size: 0.7rem;
  letter-spacing: 3.4px;
  text-indent: 3.4px;
  color: #a99fab;
  opacity: 0.75;
}

/* ============================================================
   计时 · 星轨重版（醒目 + 高级）
   ============================================================ */</span>

.timer {
  text-align: center;
  margin: 2rem -1.75rem 0;
  padding: 3.4rem 1.4rem 3.2rem;
  position: relative;
  isolation: isolate;
  background:
    radial-gradient(58% 42% at 50% 34%, rgba(224, 170, 150, 0.13), transparent 70%),
    radial-gradient(90% 60% at 50% 108%, rgba(120, 108, 190, 0.14), transparent 66%),
    linear-gradient(180deg, rgba(10, 9, 18, 0.55), rgba(4, 5, 11, 0.9));
  border-top: 1px solid rgba(232, 196, 184, 0.14);
  border-bottom: 1px solid rgba(232, 196, 184, 0.14);
}

/* 双层内框，像一幅装裱的星图 */
.timer::before {
  content: "";
  position: absolute;
  inset: 9px;
  border: 1px solid rgba(232, 196, 184, 0.16);
  pointer-events: none;
  z-index: -1;
}

.timer::after {
  content: "";
  position: absolute;
  inset: 13px;
  border: 1px solid rgba(232, 196, 184, 0.06);
  pointer-events: none;
  z-index: -1;
}

/* 四角星芒 */
.timer .corner {
  position: absolute;
  width: 7px;
  height: 7px;
  border: 1px solid rgba(232, 196, 184, 0.5);
  transform: rotate(45deg);
  opacity: 0.55;
}
.timer .corner.tl { top: 5px; left: 5px; }
.timer .corner.tr { top: 5px; right: 5px; }
.timer .corner.bl { bottom: 5px; left: 5px; }
.timer .corner.br { bottom: 5px; right: 5px; }

.t-label {
  font-family: "STSong", "Songti SC", serif;
  font-size: 0.78rem;
  letter-spacing: 0.6em;
  text-indent: 0.6em;
  color: #b3a7ae;
}

/* 主数字：巨大、发光、渐变 */
.t-num {
  position: relative;
  display: inline-block;
  font-family: "Didot", "Bodoni MT", "STSong", "Songti SC", Georgia, serif;
  font-size: clamp(5.4rem, 30vw, 8rem);
  font-weight: 300;
  line-height: 0.98;
  margin: 0.5rem 0 0.2rem;
  letter-spacing: 0;
  font-variant-numeric: tabular-nums;
  background: linear-gradient(178deg, #fffdfb 0%, #ffe9dd 26%, #f0c4b0 56%, #cf9a88 82%, #a97a6c 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  filter:
    drop-shadow(0 0 18px rgba(255, 214, 196, 0.3))
    drop-shadow(0 0 46px rgba(232, 196, 184, 0.16));
  animation: numBreath 5.5s ease-in-out infinite;
}

@keyframes numBreath {
  0%, 100% { filter: drop-shadow(0 0 16px rgba(255, 214, 196, 0.24)) drop-shadow(0 0 40px rgba(232, 196, 184, 0.12)); }
  50% { filter: drop-shadow(0 0 26px rgba(255, 224, 208, 0.44)) drop-shadow(0 0 66px rgba(232, 196, 184, 0.22)); }
}

/* 数字下方一道细光带（星轨地平线） */
.t-num::after {
  content: "";
  position: absolute;
  left: 50%;
  bottom: -0.12em;
  width: 62%;
  height: 1px;
  transform: translateX(-50%);
  background: linear-gradient(90deg, transparent, rgba(255, 225, 210, 0.65), transparent);
  box-shadow: 0 0 14px rgba(255, 214, 196, 0.5);
}

.t-num small {
  font-family: "STSong", "Songti SC", serif;
  font-size: 0.13em;
  letter-spacing: 0.5em;
  margin-left: 0.55rem;
  vertical-align: 1.35em;
  -webkit-text-fill-color: #d9b09f;
  color: #d9b09f;
  filter: none;
  animation: none;
}

/* 星轨刻度式时钟 */
.t-clock {
  position: relative;
  display: inline-flex;
  align-items: flex-start;
  justify-content: center;
  gap: 0;
  margin-top: 2rem;
  padding: 0.95rem 0.6rem 0.7rem;
  border-top: 1px solid rgba(232, 196, 184, 0.2);
  border-bottom: 1px solid rgba(232, 196, 184, 0.09);
}

/* 星轨两端的小星点 */
.t-clock::before,
.t-clock::after {
  content: "";
  position: absolute;
  top: -2.5px;
  width: 4px;
  height: 4px;
  border-radius: 50%;
  background: rgba(255, 232, 220, 0.85);
  box-shadow: 0 0 10px rgba(255, 214, 196, 0.8);
}
.t-clock::before { left: -1px; }
.t-clock::after { right: -1px; }

.t-clock div {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.3rem;
  min-width: 3.2rem;
  position: relative;
}

/* 每个单位上方一个刻度点 */
.t-clock div::before {
  content: "";
  width: 1px;
  height: 5px;
  background: rgba(232, 196, 184, 0.45);
  margin-bottom: 0.15rem;
}

.t-clock span {
  font-family: "Didot", "Bodoni MT", Consolas, monospace;
  font-size: 1.5rem;
  font-weight: 300;
  font-variant-numeric: tabular-nums;
  letter-spacing: 2px;
  line-height: 1;
  color: #f6ece7;
  text-shadow: 0 0 16px rgba(255, 214, 196, 0.28);
}

.t-clock small {
  font-size: 0.62rem;
  letter-spacing: 3px;
  text-indent: 3px;
  color: #b0a6b3;
}

.t-clock b {
  color: rgba(232, 196, 184, 0.28);
  font-weight: 400;
  font-size: 0.95rem;
  padding-top: 1.35rem;
}

@keyframes secPulse {
  0% { opacity: 0.42; text-shadow: none; }
  8% { opacity: 1; text-shadow: 0 0 22px rgba(255, 226, 210, 0.65); }
  100% { opacity: 1; text-shadow: 0 0 16px rgba(255, 214, 196, 0.28); }
}

#ss {
  animation: secPulse 1s steps(1, end) infinite;
}

.t-note {
  line-height: 1.7;
  margin-top: 1.5rem;
  font-size: 0.7rem;
  letter-spacing: 0.42em;
  text-indent: 0.42em;
  color: #a99fab;
}

/* 计时区章节编号与标题 */
.timer .ch-no {
  margin-bottom: 0.7rem;
}

/* ---------- 点我 ---------- */

/* ---------- 点我 ---------- */
.whisper {
  text-align: center;
  padding: 3rem 0 1.8rem;
}

.whisper button {
  font-family: "STSong", "Songti SC", serif;
  font-size: 0.88rem;
  letter-spacing: 0.45em;
  text-indent: 0.45em;
  padding: 0.75rem 2.2rem;
  background: transparent;
  color: var(--rose);
  border: 1px solid rgba(232, 196, 184, 0.34);
  border-radius: 999px;
  cursor: pointer;
  transition: background 0.45s, color 0.45s, box-shadow 0.45s, transform 0.15s;
}

.whisper button:active {
  background: rgba(232, 196, 184, 0.1);
  box-shadow: 0 0 28px rgba(232, 196, 184, 0.16);
  transform: scale(0.98);
}

#loveMsg {
  min-height: 1.9rem;
  margin-top: 1.6rem;
  font-family: "STKaiti", "KaiTi", serif;
  font-size: 1rem;
  letter-spacing: 1.8px;
  color: var(--rose);
  opacity: 0;
  transform: translateY(6px);
  transition: opacity 0.7s, transform 0.7s;
}

#loveMsg.show {
  opacity: 1;
  transform: translateY(0);
}

/* ---------- 结尾 ---------- */
.end {
  text-align: center;
  padding: 2rem 0 3rem;
}

.end p {
  font-family: "STKaiti", "KaiTi", serif;
  font-size: 1.02rem;
  line-height: 2;
  letter-spacing: 1.2px;
  color: #c4bac4;
}

.fin {
  display: block;
  margin-top: 1.6rem;
  font-family: "Didot", "Bodoni MT", Georgia, serif;
  font-size: 0.6rem;
  letter-spacing: 6px;
  text-indent: 6px;
  color: var(--star-faint);
  opacity: 0.5;
}

/* ---------- 页脚 ---------- */
footer {
  border-top: 1px solid rgba(232, 196, 184, 0.08);
  margin: 0 -1.75rem;
  padding: 2.2rem 1.75rem calc(2.4rem + env(safe-area-inset-bottom));
  text-align: center;
}

.seal {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0.3rem 0.66rem;
  font-family: "STKaiti", "KaiTi", serif;
  font-size: 0.6rem;
  letter-spacing: 2.6px;
  text-indent: 2.6px;
  color: var(--rose);
  border: 1px solid rgba(232, 196, 184, 0.28);
  border-radius: 2px;
  opacity: 0.8;
}

/* ---------- 宽屏 ---------- */
@media (min-width: 640px) {
  .wrap { padding: 0 2.4rem; }
  .timer {
    margin-left: -2.4rem;
    margin-right: -2.4rem;
    padding-left: 2.4rem;
    padding-right: 2.4rem;
  }
  footer {
    margin: 0 -2.4rem;
    padding-left: 2.4rem;
    padding-right: 2.4rem;
  }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .reveal { opacity: 1; transform: none; transition: none; }
  .eyebrow, .cover h1, .sub { animation: none; }
  .scroll, #ss { animation: none; }
}

/* ============================================================
   手机真机专项（她是用手机看的）
   ============================================================ */</span>

/* 1. 整页：避免回弹时露出白底 */
html {
  background: var(--void);
  overscroll-behavior-y: none;
}

/* 2. 惯性滚动与触摸优化 */
body {
  -webkit-overflow-scrolling: touch;
  touch-action: pan-y;
  text-rendering: optimizeLegibility;
}

/* 3. 顶部与底部安全区（刘海屏 / 全面屏） */
.wrap {
  padding-top: env(safe-area-inset-top);
  padding-left: max(1.75rem, env(safe-area-inset-left));
  padding-right: max(1.75rem, env(safe-area-inset-right));
}

.progress {
  top: env(safe-area-inset-top);
}

/* 4. 按钮触摸目标不小于 44px，便于手指点按 */
.whisper button {
  min-height: 46px;
  min-width: 150px;
  -webkit-tap-highlight-color: transparent;
  touch-action: manipulation;
}

/* 5. 防止 iOS 双击缩放与文字自动放大 */
body {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
}

/* 6. 关闭点击高亮，保留自定义星点反馈 */
a, button, .card, .list li {
  -webkit-tap-highlight-color: transparent;
}

/* 7. 竖屏短屏（如 iPhone SE 375×667）收紧首屏留白 */
@media (max-height: 700px) and (orientation: portrait) {
  .cover {
    min-height: 100svh;
    padding-top: 2.4rem;
    padding-bottom: 2rem;
  }
  .cover .eyebrow {
    margin-bottom: 1.6rem;
  }
  .n1, .n2 {
    font-size: clamp(2.2rem, 12.4vw, 2.9rem);
  }
  .sub {
    margin-top: 1.4rem;
  }
  .scroll {
    bottom: 1.2rem;
  }
}

/* 8. 窄屏（≤360px）避免名字溢出 */
@media (max-width: 360px) {
  .n1, .n2 {
    font-size: clamp(2rem, 12vw, 2.6rem);
    letter-spacing: 0.18em;
    text-indent: 0.18em;
  }
  .t-num {
    font-size: clamp(4.4rem, 27vw, 6rem);
  }
  .t-clock div {
    min-width: 2.5rem;
  }
}

/* 9. 横屏时首屏不再强制满屏 */
@media (orientation: landscape) and (max-height: 500px) {
  .cover {
    min-height: auto;
    padding: 2.6rem 0 1.6rem;
  }
  .cover .eyebrow {
    margin-bottom: 1rem;
  }
  .n1, .n2 {
    font-size: 1.6rem;
  }
}

/* 10. 低端机 / 省电：降低星空与光晕开销 */
@media (prefers-reduced-data: reduce) {
  .aurora {
    display: none;
  }
  .veil {
    background: var(--void-2);
  }
  .t-num,
  .n1,
  .n2 {
    filter: none;
    animation: none;
  }
  .t-num::after {
    box-shadow: none;
  }
}

/* ============================================================
   11. 我们的星 · 今天 · 许愿 · 整数天彩蛋
   ============================================================ */</span>

/* ---------- 两颗命名的星 ---------- */
.named-layer {
  position: fixed;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  transition: opacity 0.6s ease;
}

.named-link {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  overflow: visible;
}

.named-link line {
  stroke: rgba(232, 196, 184, 0.6);
  stroke-width: 1;
  stroke-dasharray: 2 8;
  stroke-linecap: round;
  animation: linkBreath 5.4s ease-in-out infinite;
}

@keyframes linkBreath {
  0%, 100% { opacity: 0.34; }
  50% { opacity: 0.92; }
}

.nstar {
  position: absolute;
  width: 36px;
  height: 36px;
  display: grid;
  place-items: center;
  padding: 0;
  border: 0;
  background: none;
  pointer-events: auto;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}

#nstarA { left: 17%; top: 25%; }
#nstarB { left: 77%; top: 14%; }

.nstar-core {
  position: relative;
  width: 4px;
  height: 4px;
  border-radius: 50%;
  background: #fff8f3;
  box-shadow:
    0 0 5px 2px rgba(255, 240, 228, 0.9),
    0 0 16px 7px rgba(232, 196, 184, 0.45),
    0 0 40px 18px rgba(232, 196, 184, 0.16);
  animation: starPulse 3.8s ease-in-out infinite;
}

#nstarB .nstar-core { animation-delay: -1.9s; }

@keyframes starPulse {
  0%, 100% { transform: scale(1); opacity: 0.8; }
  50% { transform: scale(1.5); opacity: 1; }
}

.nstar-core::before,
.nstar-core::after {
  content: "";
  position: absolute;
  left: 50%;
  top: 50%;
  pointer-events: none;
}

.nstar-core::before {
  width: 26px;
  height: 1px;
  transform: translate(-50%, -50%);
  background: linear-gradient(90deg, transparent, rgba(255, 242, 234, 0.6), transparent);
}

.nstar-core::after {
  width: 1px;
  height: 26px;
  transform: translate(-50%, -50%);
  background: linear-gradient(180deg, transparent, rgba(255, 242, 234, 0.6), transparent);
}

.nstar-date {
  position: absolute;
  left: 50%;
  top: calc(100% + 2px);
  transform: translateX(-50%);
  white-space: nowrap;
  font-size: 0.56rem;
  letter-spacing: 0.2em;
  color: rgba(232, 196, 184, 0.62);
  pointer-events: none;
  text-shadow: 0 0 12px rgba(5, 6, 13, 0.92);
  transition: opacity 0.4s ease;
}

.nstar.on .nstar-date { opacity: 0; }

.nstar-tip {
  position: absolute;
  left: 50%;
  top: calc(100% + 2px);
  transform: translate(-50%, 5px);
  white-space: nowrap;
  font-size: 0.62rem;
  letter-spacing: 0.18em;
  color: var(--star);
  opacity: 0;
  pointer-events: none;
  text-shadow: 0 0 14px rgba(5, 6, 13, 0.95);
  transition: opacity 0.45s ease, transform 0.45s ease;
}

.nstar.on .nstar-tip,
.nstar:hover .nstar-tip {
  opacity: 0.95;
  transform: translate(-50%, 0);
}

.nstar:hover .nstar-date { opacity: 0; }

/* ---------- 今天 ---------- */
.daily {
  text-align: center;
}

.daily-date {
  margin-top: 1.15rem;
  font-size: 0.66rem;
  letter-spacing: 0.3em;
  color: var(--star-faint);
}

.daily-line {
  margin: 1.45rem auto 0;
  max-width: 17em;
  font-size: 1rem;
  line-height: 2.2;
  color: var(--rose);
  text-wrap: balance;
}

.daily-line::after {
  content: "";
  display: block;
  width: 30px;
  height: 1px;
  margin: 1.35rem auto 0;
  background: var(--line-2);
}

/* ---------- 整数天 / 生日彩蛋 ---------- */
.milestone {
  margin-top: 2.4rem;
  padding: 1.05rem 1.15rem;
  border: 1px solid var(--line-2);
  border-radius: 3px;
  background: linear-gradient(180deg, rgba(232, 196, 184, 0.075), rgba(232, 196, 184, 0.012));
  text-align: center;
}

.milestone[hidden] { display: none; }

.ms-day {
  font-size: 0.68rem;
  letter-spacing: 0.34em;
  text-indent: 0.34em;
  color: var(--gold);
}

.ms-text {
  margin-top: 0.55rem;
  font-size: 0.86rem;
  line-height: 1.95;
  color: var(--star);
}

/* ---------- 点天空：许愿流星 ---------- */
.wish {
  position: fixed;
  z-index: 30;
  width: 2px;
  height: 2px;
  border-radius: 50%;
  background: #fff;
  pointer-events: none;
  box-shadow: 0 0 10px 3px rgba(255, 238, 224, 0.75);
}

.wish::after {
  content: "";
  position: absolute;
  right: 2px;
  top: 1px;
  width: 84px;
  height: 1px;
  background: linear-gradient(270deg, rgba(255, 242, 234, 0.9), rgba(255, 242, 234, 0));
  transform-origin: right center;
  animation: wishTail 0.95s cubic-bezier(0.2, 0.7, 0.3, 1) forwards;
}

@keyframes wishTail {
  from { transform: scaleX(0) translateY(0); opacity: 1; }
  to { transform: scaleX(1) translateY(6px); opacity: 0; }
}

.wish-msg {
  position: fixed;
  z-index: 30;
  transform: translate(-50%, -50%);
  white-space: nowrap;
  font-size: 0.64rem;
  letter-spacing: 0.16em;
  color: rgba(242, 236, 232, 0.92);
  pointer-events: none;
  text-shadow: 0 0 16px rgba(5, 6, 13, 0.95);
  animation: wishMsg 2.3s ease forwards;
}

@keyframes wishMsg {
  0% { opacity: 0; }
  16% { opacity: 1; }
  72% { opacity: 1; }
  100% { opacity: 0; }
}

/* ---------- 手机微调 ---------- */
@media (max-width: 420px) {
  #nstarA { left: 13%; top: 23%; }
  #nstarB { left: 80%; top: 13%; }
  .nstar-core::before { width: 20px; }
  .nstar-core::after { height: 20px; }
  .daily-line { font-size: 0.94rem; }
}

/* ---------- 减弱动效 ---------- */
@media (prefers-reduced-motion: reduce) {
  .named-link line,
  .nstar-core { animation: none; }
  .wish::after,
  .wish-msg { animation-duration: 0.01s; }
}

/* ============================================================
   12. 星轨 · 今日卡片 · 藏在落款里的信
   ============================================================ */</span>

/* ---------- 星轨 ---------- */
.orbit {
  text-align: center;
}

#orbitCanvas {
  display: block;
  width: 100%;
  max-width: 330px;
  margin: 1.7rem auto 0;
  height: auto;
}

.orbit-note {
  margin-top: 1.2rem;
  font-size: 0.68rem;
  line-height: 2.05;
  letter-spacing: 0.13em;
  color: var(--star-faint);
}

/* ---------- 存卡片按钮 ---------- */
.daily-save {
  margin-top: 1.55rem;
  padding: 0.5rem 1.15rem;
  border: 1px solid var(--line-2);
  border-radius: 999px;
  background: transparent;
  color: var(--rose);
  font-family: inherit;
  font-size: 0.63rem;
  letter-spacing: 0.2em;
  text-indent: 0.2em;
  cursor: pointer;
  transition: background 0.3s ease, transform 0.2s ease;
}

.daily-save:hover { background: rgba(232, 196, 184, 0.08); }
.daily-save:active { transform: scale(0.97); }

/* ---------- 落款的点击暗示 ---------- */
.seal {
  cursor: pointer;
  user-select: none;
  -webkit-user-select: none;
  -webkit-tap-highlight-color: transparent;
  transition: color 0.4s ease, text-shadow 0.4s ease;
}

/* ---------- 信 ---------- */
.letter {
  position: fixed;
  inset: 0;
  z-index: 60;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 1.5rem;
  background: rgba(4, 5, 11, 0.88);
  -webkit-backdrop-filter: blur(7px);
  backdrop-filter: blur(7px);
  animation: fadeIn 0.45s ease;
}

.letter[hidden] { display: none; }

.letter-box {
  position: relative;
  width: 100%;
  max-width: 420px;
  max-height: 84vh;
  overflow-y: auto;
  padding: 2.1rem 1.65rem 1.8rem;
  border: 1px solid var(--line-2);
  border-radius: 4px;
  background: linear-gradient(180deg, rgba(16, 18, 31, 0.985), rgba(7, 8, 16, 0.995));
  box-shadow: 0 30px 80px rgba(0, 0, 0, 0.6);
  animation: letterIn 0.6s cubic-bezier(0.2, 0.8, 0.2, 1);
}

.letter-kicker {
  font-size: 0.6rem;
  letter-spacing: 0.42em;
  text-indent: 0.42em;
  color: var(--gold);
  text-align: center;
}

.letter-box h2 {
  margin-top: 0.75rem;
  font-size: 0.98rem;
  letter-spacing: 0.12em;
  text-indent: 0.12em;
  text-align: center;
  color: var(--star);
}

.letter-body {
  margin-top: 1.6rem;
  font-size: 0.86rem;
  line-height: 2.15;
  color: var(--star-dim);
}

.letter-body p + p { margin-top: 1.05rem; }

.letter-sign {
  margin-top: 1.7rem;
  text-align: right;
  font-size: 0.76rem;
  letter-spacing: 0.1em;
  color: var(--rose-2);
}

.letter-close {
  position: absolute;
  top: 0.55rem;
  right: 0.65rem;
  width: 2rem;
  height: 2rem;
  border: 0;
  background: none;
  color: var(--star-faint);
  font-size: 1.15rem;
  line-height: 1;
  cursor: pointer;
}

/* ---------- 卡片 ---------- */
.card-layer {
  position: fixed;
  inset: 0;
  z-index: 60;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 1.1rem;
  background: rgba(4, 5, 11, 0.92);
  -webkit-backdrop-filter: blur(7px);
  backdrop-filter: blur(7px);
  animation: fadeIn 0.35s ease;
}

.card-layer[hidden] { display: none; }

.card-box {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.85rem;
  max-height: 94vh;
}

.card-hint {
  font-size: 0.62rem;
  letter-spacing: 0.24em;
  text-indent: 0.24em;
  color: var(--star-faint);
}

#cardImg {
  max-width: 100%;
  max-height: 74vh;
  border-radius: 3px;
  box-shadow: 0 22px 60px rgba(0, 0, 0, 0.65);
}

.card-close {
  padding: 0.55rem 1.35rem;
  border: 1px solid var(--line-2);
  border-radius: 999px;
  background: none;
  color: var(--rose);
  font-family: inherit;
  font-size: 0.65rem;
  letter-spacing: 0.24em;
  text-indent: 0.24em;
  cursor: pointer;
}

@keyframes fadeIn {
  from { opacity: 0; }
  to { opacity: 1; }
}

@keyframes letterIn {
  from { opacity: 0; transform: translateY(16px) scale(0.985); }
  to { opacity: 1; transform: none; }
}

/* ============================================================
   13. 接下来的日子 · 分享 · 回到顶部
   ============================================================ */</span>

.count-list {
  list-style: none;
  margin: 1.6rem 0 0;
  padding: 0;
}

.count-list li {
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: baseline;
  gap: 0.25rem 0.8rem;
  padding: 0.85rem 0;
  border-bottom: 1px solid rgba(232, 196, 184, 0.1);
}

.count-list li:first-child {
  border-top: 1px solid rgba(232, 196, 184, 0.1);
}

.c-label {
  font-size: 0.84rem;
  letter-spacing: 0.04em;
  color: var(--star);
}

.c-date {
  grid-column: 1 / 2;
  font-size: 0.62rem;
  letter-spacing: 0.16em;
  color: var(--star-faint);
}

.c-days {
  font-family: "Didot", "Bodoni MT", Georgia, serif;
  font-size: 0.92rem;
  letter-spacing: 0.06em;
  color: var(--rose);
  white-space: nowrap;
}

.c-days.soon { color: var(--gold); }

.share-btn {
  margin-top: 2.1rem;
  padding: 0.55rem 1.35rem;
  border: 1px solid var(--line-2);
  border-radius: 999px;
  background: none;
  color: var(--rose);
  font-family: inherit;
  font-size: 0.63rem;
  letter-spacing: 0.22em;
  text-indent: 0.22em;
  cursor: pointer;
  transition: background 0.3s ease;
}

.share-btn:hover { background: rgba(232, 196, 184, 0.08); }

.src-link {
  display: inline-block;
  margin-top: 1.55rem;
  font-size: 0.6rem;
  letter-spacing: 0.2em;
  text-indent: 0.2em;
  color: rgba(125, 118, 134, 0.72);
  text-decoration: none;
  border-bottom: 1px solid rgba(125, 118, 134, 0.22);
  padding-bottom: 2px;
  transition: color 0.3s ease, border-color 0.3s ease;
}

.src-link:hover {
  color: var(--rose);
  border-color: var(--line-2);
}

.to-top {
  position: fixed;
  right: 1rem;
  bottom: 1.5rem;
  z-index: 40;
  width: 2.5rem;
  height: 2.5rem;
  border-radius: 50%;
  border: 1px solid var(--line-2);
  background: rgba(8, 9, 17, 0.72);
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
  color: var(--rose);
  font-size: 0.9rem;
  line-height: 1;
  cursor: pointer;
  opacity: 0;
  visibility: hidden;
  transform: translateY(10px);
  transition: opacity 0.35s ease, transform 0.35s ease, visibility 0.35s;
}

.to-top.show {
  opacity: 1;
  visibility: visible;
  transform: none;
}

.toast {
  position: fixed;
  left: 50%;
  bottom: 5.4rem;
  z-index: 50;
  transform: translate(-50%, 10px);
  padding: 0.5rem 1.05rem;
  border: 1px solid var(--line-2);
  border-radius: 999px;
  background: rgba(20, 22, 34, 0.95);
  color: var(--star);
  font-size: 0.68rem;
  letter-spacing: 0.1em;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.3s ease, transform 0.3s ease;
}

.toast.show {
  opacity: 1;
  transform: translate(-50%, 0);
}

/* ============================================================
   14. 时间锁的信 · 天数换算法
   ============================================================ */</span>

.t-tip {
  margin-top: 0.9rem;
  font-size: 0.58rem;
  letter-spacing: 0.24em;
  text-indent: 0.24em;
  color: rgba(125, 118, 134, 0.7);
}

#dayCount {
  cursor: pointer;
  transition: opacity 0.3s ease;
}

#dayCount:active { opacity: 0.6; }

#dayCount.compact {
  font-size: clamp(1.85rem, 9.5vw, 2.9rem);
  letter-spacing: 0.02em;
  text-indent: 0;
}

.box-sealed {
  margin-top: 1.7rem;
  padding: 1.7rem 1.2rem 1.45rem;
  border: 1px solid rgba(232, 196, 184, 0.14);
  border-radius: 4px;
  text-align: center;
  background: linear-gradient(180deg, rgba(232, 196, 184, 0.03), rgba(232, 196, 184, 0));
  transition: border-color 0.7s ease, box-shadow 0.7s ease;
}

.box-sealed.ready {
  border-color: var(--line-2);
  box-shadow: 0 0 44px rgba(232, 196, 184, 0.1);
}

.sealed-star {
  width: 6px;
  height: 6px;
  margin: 0 auto 1.15rem;
  border-radius: 50%;
  background: rgba(240, 214, 196, 0.26);
  box-shadow: 0 0 10px 3px rgba(232, 196, 184, 0.1);
  transition: background 0.7s ease, box-shadow 0.7s ease;
}

.box-sealed.ready .sealed-star {
  background: #fff6ef;
  box-shadow:
    0 0 12px 4px rgba(255, 240, 228, 0.7),
    0 0 36px 15px rgba(232, 196, 184, 0.2);
  animation: starPulse 3.6s ease-in-out infinite;
}

.sealed-date {
  font-size: 0.65rem;
  letter-spacing: 0.22em;
  text-indent: 0.22em;
  color: var(--star-faint);
}

.sealed-left {
  margin-top: 0.55rem;
  font-family: "Didot", "Bodoni MT", Georgia, serif;
  font-size: 0.94rem;
  letter-spacing: 0.06em;
  color: var(--rose);
}

.sealed-btn {
  margin-top: 1.3rem;
  padding: 0.5rem 1.25rem;
  border: 1px solid rgba(232, 196, 184, 0.14);
  border-radius: 999px;
  background: none;
  color: var(--star-faint);
  font-family: inherit;
  font-size: 0.63rem;
  letter-spacing: 0.2em;
  text-indent: 0.2em;
  cursor: not-allowed;
  transition: color 0.4s ease, border-color 0.4s ease, background 0.4s ease;
}

.box-sealed.ready .sealed-btn {
  color: var(--rose);
  border-color: var(--line-2);
  background: rgba(232, 196, 184, 0.07);
  cursor: pointer;
}

.box-sealed.ready .sealed-btn:hover {
  background: rgba(232, 196, 184, 0.13);
}

.sealed-loading {
  color: var(--star-faint);
  font-size: 0.8rem;
  letter-spacing: 0.06em;
}

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61

/* 离线缓存：页面请求走网络优先，静态资源走缓存优先 */
const CACHE = "our-planet-v21";
const ASSETS = [
  "./",
  "./index.html",
  "./style.css?v=21",
  "./app.js?v=21",
  "./manifest.json",
  "./icon-192.png",
  "./icon-512.png",
  "./icon-180.png"
];

self.addEventListener("install", (e) => {
  e.waitUntil(
    caches.open(CACHE).then((c) => c.addAll(ASSETS)).then(() => self.skipWaiting())
  );
});

self.addEventListener("activate", (e) => {
  e.waitUntil(
    caches
      .keys()
      .then((keys) => Promise.all(keys.filter((k) => k !== CACHE).map((k) => caches.delete(k))))
      .then(() => self.clients.claim())
  );
});

self.addEventListener("fetch", (e) => {
  const req = e.request;
  if (req.method !== "GET") return;

  if (req.mode === "navigate") {
    e.respondWith(
      fetch(req)
        .then((res) => {
          const copy = res.clone();
          caches.open(CACHE).then((c) => c.put("./index.html", copy));
          return res;
        })
        .catch(() =>
          caches.match("./index.html").then((r) => r || caches.match("./"))
        )
    );
    return;
  }

  e.respondWith(
    caches.match(req).then((hit) => {
      if (hit) return hit;
      return fetch(req).then((res) => {
        if (res.ok && new URL(req.url).origin === location.origin) {
          const copy = res.clone();
          caches.open(CACHE).then((c) => c.put(req, copy));
        }
        return res;
      });
    })
  );
});