bluekeys-dev.github.io/index.html at main · BlueKeys-dev/bluekeys-dev.github.io · GitHub

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
<!doctype html>

<html class="light overflow-x-hidden" lang="en">

<head>
  <meta charset="utf-8" />
  <meta content="width=device-width, initial-scale=1.0" name="viewport" />
  <title>BlueKeys | Seamless Connectivity</title>
  <link rel="icon" type="image/x-icon" href="assets/logo/logo%20.ico" />
  <!-- [B] Preconnect: resolves DNS + TLS for Google Fonts before the browser parses the full <head> -->
  <link rel="preconnect" href="https://fonts.googleapis.com" />
  <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
  <script src="https://cdn.tailwindcss.com?plugins=forms,container-queries"></script>
  <!-- Tailwind config MUST come after the CDN script -->
  <script>
    tailwind.config = {
      darkMode: "class",
      theme: {
        extend: {
          colors: {
            primary: "#000000",
            secondary: "#8ecae6",
            accent: "#8ecae6",
            surface: "#FFFFFF",
            "on-surface": "#1a1a1a",
            "surface-container-low": "hsla(197, 60%, 93%, 0.4)",
          },
          borderRadius: {
            DEFAULT: "0.125rem",
            lg: "0.25rem",
            xl: "0.5rem",
            full: "9999px",
          },
          fontFamily: {
            headline: ["Manrope", "sans-serif"],
            body: ["Inter", "sans-serif"],
          },
        },
      },
    };
  </script>
  <link
    href="https://fonts.googleapis.com/css2?family=Manrope:wght@400;700;800&amp;family=Inter:wght@300;400;500&amp;display=swap"
    rel="stylesheet" />
  <link
    href="https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:wght,FILL@100..700,0..1&amp;display=swap"
    rel="stylesheet" />
  <script src="js/script.js" defer></script>
  <script src="js/shader-upgrade.js" defer></script>
  <link rel="stylesheet" href="css/style.css" />
  <!-- [I] Typography styles moved to css/style.css -->
  <style data-purpose="animations">
    @keyframes revealCard {
      from {
        opacity: 0;
        transform: translateY(30px);
      }

      to {
        opacity: 1;
        transform: translateY(0);
      }
    }

    @keyframes zoomOutImage {
      from {
        transform: scale(1.08);
      }

      to {
        transform: scale(1) translate3d(0, 0, 0);
      }
    }

    @keyframes headerReveal {
      from {
        opacity: 0;
        letter-spacing: -0.15em;
        transform: translateY(-8px);
      }

      to {
        opacity: 1;
        letter-spacing: 0.2em;
        transform: translateY(0);
      }
    }

    @keyframes wipeRevealCurtain {
      from {
        transform: translateX(0);
      }

      to {
        transform: translateX(101%);
      }
    }

    .gallery-title {
      opacity: 0;
    }

    .is-visible .gallery-title {
      animation: headerReveal 1.2s cubic-bezier(0.16, 1, 0.3, 1) forwards;
    }

    .gallery-item:nth-child(6n+1) .reveal-curtain,
    .gallery-item:nth-child(6n+1) .image-zoom {
      animation-delay: 0.15s;
    }

    .gallery-item:nth-child(6n+2) .reveal-curtain,
    .gallery-item:nth-child(6n+2) .image-zoom {
      animation-delay: 0.25s;
    }

    .gallery-item:nth-child(6n+3) .reveal-curtain,
    .gallery-item:nth-child(6n+3) .image-zoom {
      animation-delay: 0.35s;
    }

    .gallery-item:nth-child(6n+4) .reveal-curtain,
    .gallery-item:nth-child(6n+4) .image-zoom {
      animation-delay: 0.45s;
    }

    .gallery-item:nth-child(6n+5) .reveal-curtain,
    .gallery-item:nth-child(6n+5) .image-zoom {
      animation-delay: 0.55s;
    }

    .gallery-item:nth-child(6n+6) .reveal-curtain,
    .gallery-item:nth-child(6n+6) .image-zoom {
      animation-delay: 0.65s;
    }

    .reveal-curtain {
      position: absolute;
      inset: 0;
      background-color: #f5f5f7;
      /* brand background color */
      z-index: 20;
      pointer-events: none;
      border-right: 2.5px solid #8ecae6;
      /* glowing expansion brand line */
      box-shadow: 0 0 16px rgba(142, 202, 230, 0.55);
      /* thin glowing neon aura */
      will-change: transform;
      transform: translateX(0);
      animation-delay: inherit;
    }

    .is-visible .reveal-curtain {
      animation: wipeRevealCurtain 1.3s cubic-bezier(0.25, 1, 0.5, 1) forwards;
    }

    .image-zoom {
      will-change: transform;
      backface-visibility: hidden;
      -webkit-backface-visibility: hidden;
      transform: scale(1.08) translate3d(0, 0, 0);
      animation-delay: inherit;
      transition: transform 0.6s cubic-bezier(0.25, 1, 0.5, 1);
    }

    .is-visible .image-zoom {
      animation: zoomOutImage 1.4s cubic-bezier(0.16, 1, 0.3, 1) forwards;
    }

    .gallery-item:hover .image-zoom {
      transform: scale(1.02) translate3d(0, 0, 0) !important;
    }

    .overlay-gradient {
      background: linear-gradient(to top, rgba(0, 0, 0, 0.6) 0%, rgba(0, 0, 0, 0.1) 60%, transparent 100%);
    }
  </style>
</head>

<body class="font-body text-on-surface antialiased overflow-x-hidden">
  <!-- Custom Cursor — SVG for perfect Retina/4K scaling (hidden on touch via CSS) -->
  <div id="custom-cursor" aria-hidden="true">
    <img src="assets/Mouse.svg" alt="" draggable="false" />
  </div>

  <div id="app-scroll-container" class="snap-container overflow-x-hidden">
    <main id="welcome-section"
      class="snap-section relative min-h-screen lg:h-screen flex items-center  py-8 lg:py-0 overflow-visible lg:overflow-hidden">
      <!-- Responsive Shader Background with Progressive Loading & Mobile Video -->
      <div id="shader-bg">
        <!-- Fallback responsive picture: loads correct layout instantly so there is no awkward layout jump -->
        <picture id="shader-picture">
          <!-- Wider mobiles -->
          <source media="(max-width: 640px) and (min-aspect-ratio: 4/3)" srcset="shaders/desktop 19:6/landsacpe screen .jpeg" />
          <!-- Tall/narrow phones -->
          <source media="(max-width: 640px)" srcset="shaders/mobile-9:16/mobile.jpeg" />
          <!-- Landscape tablets -->
          <source media="(max-width: 1024px) and (min-aspect-ratio: 6/5)" srcset="shaders/desktop 19:6/landsacpe screen .jpeg" />
          <!-- Portrait tablets -->
          <source media="(max-width: 1024px)" srcset="shaders/tablets/tablets.png" />
          <!-- Default (Desktop) low-res fallback -->
          <img id="shader-img" src="shaders/mobile-9:16/desktop - low resolution.jpeg" alt="" role="presentation"
            class="shader-bg-img" fetchpriority="high" decoding="async" />
        </picture>
        <canvas id="shader-transition-canvas"></canvas>
        <!-- Mobile ping-pong video layers — A and B alternate so there is
             zero gap: while A plays, B silently buffers the next clip.      -->
        <video id="shader-video-a" class="shader-bg-video" muted playsinline autoplay preload="auto" aria-hidden="true"
          role="presentation"></video>
        <video id="shader-video-b" class="shader-bg-video" muted playsinline autoplay preload="auto" aria-hidden="true"
          role="presentation"></video>
      </div>
      <script>
        (function () {
          var img = document.getElementById('shader-img');
          if (!img) return;

          /* ── Image helpers ──────────────────────────────────────────── */
          function revealImg() { img.classList.add('is-loaded'); }
          function hideImg() {
            img.classList.remove('is-loaded');
            // Also gracefully fade out the WebGL canvas if it is currently running
            var cvs = document.getElementById('shader-transition-canvas');
            if (cvs) {
              var cvsDisplay = window.getComputedStyle(cvs).display;
              if (cvsDisplay !== 'none') {
                cvs.style.transition = 'opacity 1s cubic-bezier(0.25, 0.46, 0.45, 0.94)';
                cvs.style.opacity = '0';
              }
            }
          }

          function onImgReady() {
            revealImg();
            if (typeof startVideoSystem === 'function') startVideoSystem();
          }

          if (img.complete && img.naturalWidth > 0) {
            onImgReady();
          } else {
            img.addEventListener('load', onImgReady, { once: true });
          }
          img.addEventListener('error', function () { img.style.display = 'none'; }, { once: true });

          /* ── Hi-res image upgrade (WebGL Displacement Morph) ────────────────────────── */
          if (typeof initHighResUpgrade === 'function') {
            initHighResUpgrade(img);
          } else {
            // Wait for defer script to load if necessary
            window.addEventListener('load', function () {
              if (typeof initHighResUpgrade === 'function') {
                initHighResUpgrade(img);
              }
            });
          }

          /* ══ MOBILE PING-PONG VIDEO CONTROLLER ════════════════════════════

             Architecture:
               • Two <video> elements: A and B, always at opacity 0 or 0.5.
               • While A plays (active), B silently loads+buffers the NEXT
                 clip via load() — safe because B is invisible.
               • When A.ended fires → B.play() is instant (already buffered).
               • CSS crossfade swaps their opacities simultaneously —
                 no src change, no load(), zero black frame.
             ════════════════════════════════════════════════════ */

          // Guard: mobile and tablet
          if (window.innerWidth > 1024) return;

          // Relaxed network quality guard: allow 2g/3g to attempt loading fully
          var conn = navigator.connection || navigator.mozConnection || navigator.webkitConnection;
          if (conn && conn.saveData) return;

          var vidA = document.getElementById('shader-video-a');
          var vidB = document.getElementById('shader-video-b');
          if (!vidA || !vidB) return;

          // ——— State —————————————————————————————————————————
          // Videos ordered smallest→largest so first visible video loads fastest
          var sequence = ['shaders/video/mobile/2.mp4',
            'shaders/video/mobile/1.mp4',
            'shaders/video/mobile/0.mp4'];
          var blobs = [];      // downloaded Blob URLs, indexed by sequence
          var seqPlaying = 0;       // index of currently playing video in sequence
          var slot = 0;       // 0 = A is active, 1 = B is active
          var T = 1800;    // crossfade duration ms (matches CSS 1.8s)
          var TIMEOUT_XHR = 15000;   // max ms for one XHR download
          var started = false;   // has the sequence been kicked off yet

          function activeEl() { return slot === 0 ? vidA : vidB; }
          function standbyEl() { return slot === 0 ? vidB : vidA; }
          function swapSlot() { slot = 1 - slot; }

          // ——— XHR Blob Downloader ——————————————————————————————————————
          // We download each video as a Blob fully before playing. This ensures
          // 100% seamless transition with ZERO buffering during playback.
          function downloadBlob(idx) {
            if (idx >= sequence.length) return;
            var req = new XMLHttpRequest();
            req.open('GET', sequence[idx], true);
            req.responseType = 'blob';
            req.timeout = TIMEOUT_XHR;
            req.onload = function () {
              if (this.status === 200 || this.status === 0) {
                blobs[idx] = URL.createObjectURL(this.response);
                if (idx === 0 && !started && img.classList.contains('is-loaded')) kickoff();
                downloadBlob(idx + 1);
              } else {
                blobs[idx] = null;
                downloadBlob(idx + 1);
              }
            };
            req.onerror = req.ontimeout = function () {
              blobs[idx] = null;
              downloadBlob(idx + 1);
            };
            req.send();
          }

          // ——— Prime a STANDBY element (invisible load + buffer) —————————
          // Calling load() on a hidden element is the whole trick:
          // the browser fully decodes the first frame so play() is instant.
          function primeStandby(idx, onPrimed) {
            if (idx >= sequence.length) return;

            function tryPrime() {
              if (blobs[idx] === undefined) {
                // Not downloaded yet — poll until ready
                setTimeout(tryPrime, 300);
                return;
              }
              if (!blobs[idx]) { onPrimed && onPrimed(false); return; } // download failed

              var sb = standbyEl();
              sb.autoplay = false; // Prevent auto-playing in background while standby
              sb.src = blobs[idx];
              sb.addEventListener('canplay', function () {
                sb._primed = true;
                onPrimed && onPrimed(true);
              }, { once: true });
              // Fallback — treat as primed after 2 s even if canplay stalls
              setTimeout(function () {
                if (!sb._primed) { sb._primed = true; onPrimed && onPrimed(true); }
              }, 2000);
              sb.load(); // safe: sb is invisible (opacity 0)
            }
            tryPrime();
          }

          // ——— Crossfade helpers —————————————————————————————————
          function showVideo(el) { el.classList.add('is-loaded'); }
          function hideVideo(el) { el.classList.remove('is-loaded'); }

          // Image → first video: simultaneous crossfade
          function crossfadeImgToVideo(el) {
            showVideo(el);
            hideImg(); // Fades out immediately as video fades in
          }

          // Video A → Video B: simultaneous opacity swap — the key to zero blackout
          function crossfadeVideos(incoming, outgoing) {
            showVideo(incoming);   // fades in  over 1 s
            hideVideo(outgoing);   // fades out over 1 s  ← same moment, no gap
          }

          // Last video → image: image fades in, then video fades out
          function crossfadeVideoToImg(el) {
            revealImg();
            setTimeout(function () {
              hideVideo(el);
              el.pause();
            }, T);
          }

          // ——— Core playback engine ————————————————————————————————
          function playClip(el, isFirst) {
            var p = el.play();
            if (p && typeof p.then === 'function') {
              p.then(function () {
                if (isFirst) {
                  var checkRender = function() {
                    if (el.currentTime > 0) {
                      crossfadeImgToVideo(el);
                    } else {
                      requestAnimationFrame(checkRender);
                    }
                  };
                  checkRender();
                  setTimeout(function() { crossfadeImgToVideo(el); }, 400); // Safety fallback
                }
              }).catch(function () {
                revealImg(); // autoplay blocked — fall back to static image
              });
            } else {
              if (isFirst) crossfadeImgToVideo(el);
            }
          }

          var transitioning = false;

          function setupTransitionTrigger(el) {
            transitioning = false;
            var hasNext = (seqPlaying + 1 < sequence.length);

            function triggerNext() {
              if (transitioning) return;
              transitioning = true;
              el.removeEventListener('timeupdate', onTimeUpdate);
              el.removeEventListener('ended', onEnded);
              onClipEnded();
            }

            // Trigger crossfade exactly when remaining time matches transition duration (1.8s)
            // ONLY if the next video is ready. Otherwise, keep playing to the end.
            function onTimeUpdate() {
              if (!hasNext) return;
              if (el.duration && el.currentTime >= el.duration - 1.8) {
                if (standbyEl()._primed) {
                  triggerNext();
                }
              }
            }

            function onEnded() {
              if (!hasNext || standbyEl()._primed) {
                triggerNext();
              } else {
                // Next video isn't ready. The current video is now paused on its last frame.
                // Poll until the next video is primed, then trigger the transition.
                var waitInterval = setInterval(function() {
                  if (standbyEl()._primed) {
                    clearInterval(waitInterval);
                    triggerNext();
                  }
                }, 200);
              }
            }

            el.addEventListener('timeupdate', onTimeUpdate);
            el.addEventListener('ended', onEnded);
          }

          // Called when the active element is about to finish playing its clip
          function onClipEnded() {
            var nextSeq = seqPlaying + 1;

            if (nextSeq >= sequence.length) {
              // All done — do not fade back to the static image.
              // Just leave the final video paused on its last frame.
              return;
            }

            // ─── The magic moment ──────────────────────────────────────
            // Standby is already loaded + buffered from primeStandby().
            // play() fires on a decoded first frame — zero load time.
            var incoming = standbyEl();
            var outgoing = activeEl();

            seqPlaying = nextSeq;
            swapSlot(); // incoming is now active

            // Play incoming (already buffered — no load() needed)
            incoming.autoplay = true; // Re-enable autoplay for the active video

            var playPromise = incoming.play();
            var hasStartedTransition = false;

            function doTransition() {
              if (hasStartedTransition) return;
              hasStartedTransition = true;

              crossfadeVideos(incoming, outgoing); // simultaneous opacity swap

              // After the outgoing fades out, pause and free it, then prime it
              // for the video AFTER next (if any)
              setTimeout(function () {
                outgoing.pause();
                outgoing._primed = false;
                primeStandby(seqPlaying + 1); // e.g. prime clip 2 while clip 1 plays
              }, T);
            }

            if (playPromise && typeof playPromise.then === 'function') {
              playPromise.then(function() {
                // Wait for the first actual rendering frame (currentTime > 0) to avoid any black blink.
                var checkRender = function() {
                  if (incoming.currentTime > 0) {
                    doTransition();
                  } else {
                    requestAnimationFrame(checkRender);
                  }
                };
                checkRender();
                setTimeout(doTransition, 400); // Safety fallback
              }).catch(function() {
                doTransition();
              });
            } else {
              doTransition();
            }

            // Setup trigger on incoming
            setupTransitionTrigger(incoming);
          }

          // ——— Kickoff: plays clip 0 on active, primes clip 1 on standby ———
          function kickoff() {
            if (started) return;
            started = true;

            var blobUrl = blobs[0];
            if (!blobUrl) return; // clip 0 download failed, abort

            var act = activeEl();
            act.autoplay = true; // Ensure active video autoplays
            act.src = blobUrl;

            // Guard: ensure canplay + fallback only fire once
            var kickFired = false;
            function doKickPlay() {
              if (kickFired) return;
              kickFired = true;
              playClip(act, true /*isFirst*/);
              primeStandby(1); // start buffering clip 1 into standby
              setupTransitionTrigger(act);
            }

            act.addEventListener('canplay', doKickPlay, { once: true });
            // Fallback: if canplay never fires (old browser / stalled)
            setTimeout(doKickPlay, 3000);
            act.load();
          }

          // ——— Entry point ——————————————————————————————————————
          var videoSystemStarted = false;
          function startVideoSystem() {
            if (videoSystemStarted) return;

            // Guard: mobile and tablet
            if (window.innerWidth > 1024) return;

            // Relaxed network quality guard: allow 2g/3g to attempt loading fully
            var conn = navigator.connection || navigator.mozConnection || navigator.webkitConnection;
            if (conn && conn.saveData) return;

            videoSystemStarted = true;
            // Slight delay so the fallback image is painted first
            setTimeout(function () { downloadBlob(0); }, 200);
          }

          // ——— IntersectionObserver to Pause Video When Not in Viewport ———
          if ('IntersectionObserver' in window) {
            var welcomeSection = document.getElementById('welcome-section');
            if (welcomeSection) {
              var welcomeObserver = new IntersectionObserver(function (entries) {
                entries.forEach(function (entry) {
                  var act = activeEl();
                  if (!started || !act) return;
                  if (entry.isIntersecting) {
                    if (act.paused) {
                      act.play().catch(function () { /* silently ignore */ });
                    }
                  } else {
                    if (!act.paused) {
                      act.pause();
                    }
                  }
                });
              }, { threshold: 0.05 });
              welcomeObserver.observe(welcomeSection);
            }
          }

          if (img.classList.contains('is-loaded')) {
            startVideoSystem();
          }

        })();
      </script>

      <!-- Background Glow (Left) - decorative only, no pointer events -->
      <!-- [F] pointer-events:none prevents invisible tap targets on mobile -->
      <div
        class="absolute top-1/3 left-1/4 -translate-x-1/2 -translate-y-1/2 w-[80%] h-[100%] bg-primary/5 rounded-full -z-10 opacity-60"
        aria-hidden="true" style="pointer-events:none">
      </div>

      <div
        class="max-w-[90rem] mx-auto px-6 sm:px-12 lg:px-16 w-full grid grid-cols-1 gap-y-8 lg:gap-y-10 items-center py-6 lg:py-0">
        <!-- Left Content Area (Centered Typography) -->
        <div
          class="relative z-10 flex flex-col items-center text-center space-y-8 lg:space-y-10 w-full max-w-6xl mx-auto">
          <div class="space-y-6 flex flex-col items-center">
            <h1
              class="font-headline font-extrabold text-6xl pt-5 md:pt-20 md:text-8xl lg:text-7xl xl:text-8xl 2xl:text-9xl mx-auto bg-clip-text text-transparent bg-gradient-to-r from-neutral-900 to-neutral-500 leading-[1] tracking-tighter py-2 px-6">
              BlueKeys</h1>
            <p
              class="text-lg md:text-xl lg:text-xl xl:text-2xl 2xl:text-3xl text-primary/75 font-light leading-relaxed max-w-full md:max-w-3xl mx-auto">
              <b>One app. Any device. Keyboard and mouse — connected seamlessly via Bluetooth.</b>
            </p>
          </div>
          <div class="flex flex-col sm:flex-row items-center justify-center gap-10 pt-4">
            <div class="relative group/rgb">
              <!-- RGB Soft Aura Backlight Glow (Active after load) -->
              <div id="download-button-rgb-glow"
                class="absolute -inset-[6px] rounded-full blur-xl opacity-0 transition-opacity duration-[1500ms] ease-out pointer-events-none animate-rgb-flow"
                aria-hidden="true"></div>

              <!-- RGB Sharp Outer Border (Active after load) -->
              <div id="download-button-rgb-border"
                class="absolute -inset-[2px] rounded-full opacity-0 transition-opacity duration-[1500ms] ease-out pointer-events-none animate-rgb-flow"
                aria-hidden="true"></div>

              <!-- [J] rel=noopener noreferrer prevents tab-napping on external links -->
              <a href="https://play.google.com/store/apps/details?id=com.blukeys.hidremote"
                target="_blank"
                rel="noopener noreferrer"
                class="relative z-10 group overflow-hidden bg-primary text-white px-8 py-4 text-sm md:text-base font-bold tracking-[0.2em] uppercase rounded-full transition-transform duration-700 btn-shadow hover:-translate-y-1 active:scale-[0.98] inline-flex items-center justify-center">
                <span class="relative z-10 flex items-center gap-3">
                  <img src="icon/playstore.svg" class="w-6 h-6" alt="Play Store icon" />
                  Download
                </span>
                <div
                  class="absolute inset-0 bg-gradient-to-r from-neutral-800 to-neutral-600 opacity-0 group-hover:opacity-100 transition-opacity duration-500">
                </div>
              </a>
            </div>
            <a href="features.html"
              class="flex items-center gap-4 text-sm md:text-base font-bold tracking-widest uppercase text-primary/60 hover:text-primary transition-colors group">
              <span class="">Features</span>
              <span
                class="material-symbols-outlined text-[20px] group-hover:translate-x-1 transition-transform">arrow_forward</span>
            </a>
          </div>
          <div class="pt-4 flex flex-wrap items-center justify-center gap-y-2 gap-x-3 sm:gap-x-4 opacity-40 grayscale">
            <span
              class="font-headline font-bold text-[10px] sm:text-xs tracking-widest uppercase whitespace-nowrap">Media
              Widget</span>
            <span class="hidden sm:block h-4 w-px bg-current shrink-0"></span>
            <span
              class="font-headline font-bold text-[10px] sm:text-xs tracking-widest uppercase whitespace-nowrap">Bluetooth
              share</span>
            <span class="hidden sm:block h-4 w-px bg-current shrink-0"></span>
            <span
              class="font-headline font-bold text-[10px] sm:text-xs tracking-widest uppercase whitespace-nowrap">Universal
              OS</span>
          </div>
        </div>
        <!-- Right Showcase Area (The "Curated Gallery" Dual-Mockup Stack) -->
        <div class="relative flex justify-center lg:justify-center items-center overflow-visible w-full">
          <!-- Background Decorative Element -->
          <!-- [F] pointer-events:none — decorative blob, not a tap target -->
          <div
            class="absolute top-1/2 left-1/3 -translate-x-1/2 -translate-y-1/2 w-full h-full bg-[#8ecae6]/20 rounded-full -z-10 opacity-60"
            aria-hidden="true" style="pointer-events:none">
          </div>

          <!-- Mobile/Tablet Layout (Portrait) -->
          <!-- Tablet View (768px to 1023px) - Preserved Dual-Mockup Stack -->
          <div class="relative hidden md:flex items-center justify-center lg:hidden w-full">
            <!-- Secondary Frame (Keyboard - Behind) -->
            <div
              class="absolute z-0 opacity-80 hidden md:block bg-black p-1.5 rounded-[1.1rem] border border-neutral-900"
              style="
                aspect-ratio: 1100/2300;
                height: min(92vh, 690px);
                width: auto;
                transform: translateX(110px) scale(0.88);
                transform-origin: center;
              ">
              <div class="w-full h-full rounded-[0.9rem] overflow-hidden bg-white/30 backdrop-blur-md backdrop-saturate-150 border border-white/30 relative">
                <img class="w-full h-full object-cover" loading="lazy" decoding="async"
                  alt="BlueKeys Keyboard Interface" src="light/keybaord.jpg" />
                <div
                  class="absolute inset-0 bg-gradient-to-tr from-transparent via-white/5 to-white/10 opacity-40 pointer-events-none mix-blend-overlay">
                </div>
              </div>
            </div>

            <!-- Primary Frame (Mouse - Front) -->
            <div class="relative z-10 bg-black p-1.5 rounded-[1.1rem] border border-neutral-900 origin-center" style="
                aspect-ratio: 1100/2300;
                height: min(90vh, 678px);
                width: auto;
                transform: translateX(-110px);
              ">
              <div class="w-full h-full rounded-[0.9rem] overflow-hidden bg-white relative">
                <img class="w-full h-full object-cover" loading="lazy" decoding="async" alt="BlueKeys Mouse Interface"
                  src="light/mouse.jpg" />
                <div
                  class="absolute inset-0 bg-gradient-to-tr from-transparent via-white/5 to-white/10 opacity-40 pointer-events-none mix-blend-overlay">
                </div>
              </div>
            </div>
          </div>

          <!-- Mobile View (< 768px) - High-End Centerpiece Slideshow -->
          <!-- [E] touch-action:pan-y allows vertical scroll, prevents horizontal hijack -->
          <div class="flex flex-col md:hidden items-center justify-center w-full gap-y-6" style="touch-action:pan-y">
            <!-- Mockup & Arrows Container -->
            <div class="relative flex items-center justify-center w-full px-12">
              <!-- Mockup Frame -->
              <div
                class="relative z-10 bg-black p-1.5 rounded-[1.1rem] border border-neutral-900 scale-95 sm:scale-100 origin-center"
                style="
                  aspect-ratio: 1100/2300;
                  height: min(80vh, 520px);
                  width: auto;
                ">
                <div class="w-full h-full rounded-[0.9rem] overflow-hidden bg-white/30 backdrop-blur-md backdrop-saturate-150 border border-white/30 relative"
                  id="mobile-slideshow-viewport">
                  <!-- Slide 0: Mouse -->
                  <div class="absolute inset-0 transition-opacity duration-700 opacity-100 z-10 mobile-slide"
                    data-slide="0">
                    <img class="w-full h-full object-cover" loading="lazy" decoding="async"
                      alt="BlueKeys Mouse Interface" src="light/mouse.jpg" />
                    <div
                      class="absolute inset-0 bg-gradient-to-tr from-transparent via-white/5 to-white/10 opacity-40 pointer-events-none mix-blend-overlay">
                    </div>
                  </div>
                  <!-- Slide 1: Keyboard -->
                  <div class="absolute inset-0 transition-opacity duration-700 opacity-0 z-0 mobile-slide"
                    data-slide="1">
                    <img class="w-full h-full object-cover" loading="lazy" decoding="async"
                      alt="BlueKeys Keyboard Interface" src="light/keybaord.jpg" />
                    <div
                      class="absolute inset-0 bg-gradient-to-tr from-transparent via-white/5 to-white/10 opacity-40 pointer-events-none mix-blend-overlay">
                    </div>
                  </div>
                  <!-- Slide 2: Media Widget -->
                  <div class="absolute inset-0 transition-opacity duration-700 opacity-0 z-0 mobile-slide"
                    data-slide="2">
                    <img class="w-full h-full object-cover" loading="lazy" decoding="async"
                      alt="BlueKeys Media Interface" src="light/media.png" />
                    <div
                      class="absolute inset-0 bg-gradient-to-tr from-transparent via-white/5 to-white/10 opacity-40 pointer-events-none mix-blend-overlay">
                    </div>
                  </div>
                </div>
              </div>

              <!-- Sleek Chevrons (Outside the frame) -->
              <button
                class="absolute left-0 xs:left-2 sm:left-4 top-1/2 -translate-y-1/2 w-10 h-10 rounded-full bg-neutral-900/5  flex items-center justify-center text-neutral-800 transition-all z-20"
                aria-label="Previous slide" id="mobile-prev-btn">
                <span class="material-symbols-outlined text-[20px]">chevron_left</span>
              </button>
              <button
                class="absolute right-0 xs:right-2 sm:right-4 top-1/2 -translate-y-1/2 w-10 h-10 rounded-full bg-neutral-900/5 flex items-center justify-center text-neutral-800 transition-all z-20"
                aria-label="Next slide" id="mobile-next-btn">
                <span class="material-symbols-outlined text-[20px]">chevron_right</span>
              </button>
            </div>

            <!-- Indicator Pill (Outside and below the frame) -->
            <div class="flex items-center gap-3 bg-neutral-900/5 border  px-4 py-2 rounded-full">
              <button class="w-2.5 h-2.5 rounded-full bg-neutral-800 transition-all duration-300 mobile-dot"
                aria-label="Go to slide 1" data-dot="0"></button>
              <button
                class="w-2.5 h-2.5 rounded-full bg-neutral-800/30 active:bg-neutral-800/50 transition-all duration-300 mobile-dot"
                aria-label="Go to slide 2" data-dot="1"></button>
              <button
                class="w-2.5 h-2.5 rounded-full bg-neutral-800/30 active:bg-neutral-800/50 transition-all duration-300 mobile-dot"
                aria-label="Go to slide 3" data-dot="2"></button>
            </div>
          </div>

          <!-- Desktop Layout (Widescreen Slideshow - Aligned Column Center, Compact & Premium) -->
          <!-- [E] touch-action:pan-y for tablets showing desktop layout -->
          <div class="hidden lg:flex flex-col items-center justify-center relative w-full gap-y-4" style="touch-action:pan-y">
            <!-- Slideshow Viewport Container -->
            <div id="desktop-slideshow-container"
              class="relative w-[95%] lg:w-[90%] max-w-2xl xl:max-w-4xl 2xl:max-w-5xl group/slideshow float-y-2 z-10">

              <!-- Outer Premium Bezel Frame -->
              <div
                class="relative w-full transition-transform duration-700 scale-[1.01] hover:scale-[1.04] transform-gpu backface-hidden bg-black p-1.5 rounded-[1.2rem] border border-neutral-900 ">

                <!-- Viewport window -->
                <div class="w-full aspect-[2400/1080] rounded-[0.9rem] overflow-hidden bg-neutral-950 relative"
                  id="desktop-slideshow-viewport">

                  <!-- Slide 0: Keyboard -->
                  <div
                    class="absolute inset-0 transition-all duration-1000 ease-out opacity-100 scale-100 z-10 desktop-slide"
                    data-desktop-slide="0">
                    <img class="w-full h-full object-cover select-none" loading="lazy" decoding="async"
                      alt="BlueKeys Keyboard Landscape" src="light/landscape/keybaord.webp" draggable="false" />
                    <div
                      class="absolute inset-0 bg-gradient-to-tr from-transparent via-white/5 to-white/10 opacity-30 pointer-events-none mix-blend-overlay">
                    </div>
                  </div>

                  <!-- Slide 1: Mouse -->
                  <div
                    class="absolute inset-0 transition-all duration-1000 ease-out opacity-0 scale-[0.97] z-0 desktop-slide"
                    data-desktop-slide="1">
                    <img class="w-full h-full object-cover select-none" loading="lazy" decoding="async"
                      alt="BlueKeys Mouse Landscape" src="light/landscape/mouse.webp" draggable="false" />
                    <div
                      class="absolute inset-0 bg-gradient-to-tr from-transparent via-white/5 to-white/10 opacity-30 pointer-events-none mix-blend-overlay">
                    </div>
                  </div>

                  <!-- Slide 2: Media Widget -->
                  <div
                    class="absolute inset-0 transition-all duration-1000 ease-out opacity-0 scale-[0.97] z-0 desktop-slide"
                    data-desktop-slide="2">
                    <img class="w-full h-full object-cover select-none" loading="lazy" decoding="async"
                      alt="BlueKeys Media Landscape" src="light/landscape/media.webp" draggable="false" />
                    <div
                      class="absolute inset-0 bg-gradient-to-tr from-transparent via-white/5 to-white/10 opacity-30 pointer-events-none mix-blend-overlay">
                    </div>
                  </div>

                </div>
              </div>

              <!-- Widescreen Navigation Chevrons -->
              <button
                class="absolute -left-6 top-1/2 -translate-y-1/2 w-12 h-12 rounded-full  shadow-lg backdrop-blur-md flex items-center justify-center text-neutral-800 transition-all duration-300 opacity-0 scale-90 translate-x-2 group-hover/slideshow:opacity-100 group-hover/slideshow:scale-100 group-hover/slideshow:translate-x-0 z-20"
                aria-label="Previous landscape slide" id="desktop-prev-btn">
                <span class="material-symbols-outlined text-[24px]">chevron_left</span>
              </button>
              <button
                class="absolute -right-6 top-1/2 -translate-y-1/2 w-12 h-12 rounded-full  shadow-lg backdrop-blur-md flex items-center justify-center text-neutral-800 transition-all duration-300 opacity-0 scale-90 -translate-x-2 group-hover/slideshow:opacity-100 group-hover/slideshow:scale-100 group-hover/slideshow:translate-x-0 z-20"
                aria-label="Next landscape slide" id="desktop-next-btn">
                <span class="material-symbols-outlined text-[24px]">chevron_right</span>
              </button>
            </div>
          </div>
        </div>

      </div>
    </main>

    <!-- Dynamic Features Content Container -->
    <div id="features-section-container" class="snap-section relative min-h-screen overflow-hidden">
      <!-- Injected by loader script -->
    </div>

    <!-- BEGIN MERGED GALLERY -->
    <div id="gallery-section-container" class="snap-section relative min-h-screen pt-12 pb-24">
      <!-- Glass Effect Overlay (above shaders, below content) -->
      <div class="glass-effect-overlay"></div>
      <!-- BEGIN: GallerySection -->
      <main class="max-w-[1400px] mx-auto px-6 md:px-12 fade-in-load" style="animation-delay: 0.2s;">
        <!-- Gallery Title -->
        <header class="mb-16" data-reveal="fade-up">
          <h2
            class="gallery-title-prefix gallery-title text-sm tracking-[0.2em] uppercase font-medium flex items-center text-[#1c1b1b]">
            GALLERY
          </h2>
        </header>
        <!-- Photo Grid: Dynamic Aspect-Ratio Masonry Layout with Shadows and Premium Overlapped Captions -->
        <!-- [D] content-visibility: auto skips rendering off-screen gallery rows -->
        <!-- Applied via CSS on .image-grid — see style.css -->
        <section class="columns-1 md:columns-2 lg:columns-3 gap-8" data-purpose="image-grid">

          <!-- Item 1: Keyboard Interface (Landscape) - first item keeps fetchpriority=high -->
          <div
            class="relative overflow-hidden rounded-lg border border-white/30 bg-white/30 backdrop-blur-md backdrop-saturate-150 shadow-lg break-inside-avoid mb-8 gallery-item transition-all duration-500 hover:shadow-xl hover:border-white/50 hover:bg-white/40"
            data-purpose="gallery-tile" data-reveal="fade-up">
            <div class="relative overflow-hidden">
              <img alt="BlueKeys Bluetooth Keyboard landscape interface" class="w-full h-auto image-zoom"
                src="light/landscape/keybaord.webp" width="2400" height="1080" decoding="async" loading="lazy" fetchpriority="low" />
              <!-- Staggered horizontal curtain wipe reveal -->
              <div class="reveal-curtain"></div>
            </div>
          </div>

          <!-- Item 2: Homescreen Widget (Portrait) -->
          <div
            class="relative overflow-hidden rounded-lg border border-white/30 bg-white/30 backdrop-blur-md backdrop-saturate-150 shadow-lg break-inside-avoid mb-8 gallery-item transition-all duration-500 hover:shadow-xl hover:border-white/50 hover:bg-white/40"
            data-purpose="gallery-tile" data-reveal="fade-up">
            <div class="relative overflow-hidden">
              <!-- [C] fetchpriority=low — gallery is below fold, hero loads first -->
              <img alt="BlueKeys Interactive Homescreen Widget for quick control" class="w-full h-auto image-zoom"
                src="light/widget_optimized.jpg" width="800" height="606" decoding="async" loading="lazy" fetchpriority="low" />
              <!-- Staggered horizontal curtain wipe reveal -->
              <div class="reveal-curtain"></div>
              <!-- Minimalist Transparent Caption Overlaid (Bottom-Centered, Small Cute Grey Text) -->
              <div class="absolute bottom-2 left-0 right-0 z-10 text-center">
                <span class="caption-text">Homescreen Widget</span>
              </div>
            </div>
          </div>

          <!-- Item 4: Clipboard Sharing (Portrait) -->
          <div
            class="relative overflow-hidden rounded-lg border border-white/30 bg-white/30 backdrop-blur-md backdrop-saturate-150 shadow-lg break-inside-avoid mb-8 gallery-item transition-all duration-500 hover:shadow-xl hover:border-white/50 hover:bg-white/40"
            data-purpose="gallery-tile" data-reveal="fade-up">
            <div class="relative overflow-hidden">
              <img alt="BlueKeys Seamless local clipboard text sync interface" class="w-full h-auto image-zoom"
                src="light/clipboard.jpg" width="800" height="532" decoding="async" loading="lazy" />
              <!-- Staggered horizontal curtain wipe reveal -->
              <div class="reveal-curtain"></div>
              <!-- Minimalist Transparent Caption Overlaid (Bottom-Centered, Small Cute Grey Text) -->
              <div class="absolute bottom-2 left-0 right-0 z-10 text-center">
                <span class="caption-text">Clipboard Sharing</span>
              </div>
            </div>
          </div>

          <!-- Item 5: Media Controls (Landscape) -->
          <div
            class="relative overflow-hidden rounded-lg border border-white/30 bg-white/30 backdrop-blur-md backdrop-saturate-150 shadow-lg break-inside-avoid mb-8 gallery-item transition-all duration-500 hover:shadow-xl hover:border-white/50 hover:bg-white/40"
            data-purpose="gallery-tile" data-reveal="fade-up">
            <div class="relative overflow-hidden">
              <img alt="BlueKeys Compact media playback and presentation control interface"
                class="w-full h-auto image-zoom" src="light/landscape/media.webp" width="2400" height="1080"
                decoding="async" loading="lazy" />
              <!-- Staggered horizontal curtain wipe reveal -->
              <div class="reveal-curtain"></div>
              <!-- Minimalist Transparent Caption Overlaid (Bottom-Centered, Small Cute Grey Text) -->
              <div class="absolute bottom-3 left-0 right-0 z-10 text-center">
                <span class="caption-text">Media Controls</span>
              </div>
            </div>
          </div>
          <!-- Item: Bluetooth Share (Portrait) -->
          <div
            class="relative overflow-hidden rounded-lg border border-white/30 bg-white/30 backdrop-blur-md backdrop-saturate-150 shadow-lg break-inside-avoid mb-8 gallery-item transition-all duration-500 hover:shadow-xl hover:border-white/50 hover:bg-white/40"
            data-purpose="gallery-tile" data-reveal="fade-up">
            <div class="relative overflow-hidden">
              <img alt="BlueKeys Bluetooth file and connection sharing" class="w-full h-auto image-zoom"
                src="light/new/portrait%20ratio%20images/bluetooh%20share.jpg" width="1080" height="2400" decoding="async" loading="lazy" />
              <div class="reveal-curtain"></div>
              <div class="absolute bottom-2 left-0 right-0 z-10 text-center">
                <span class="caption-text">Bluetooth Share</span>
              </div>
            </div>
          </div>

          <!-- Item 11: Precision Mouse Settings (Landscape) -->
          <div
            class="relative overflow-hidden rounded-lg border border-white/30 bg-white/30 backdrop-blur-md backdrop-saturate-150 shadow-lg break-inside-avoid mb-8 gallery-item transition-all duration-500 hover:shadow-xl hover:border-white/50 hover:bg-white/40"
            data-purpose="gallery-tile" data-reveal="fade-up">
            <div class="relative overflow-hidden">
              <img alt="BlueKeys Bluetooth mouse control options" class="w-full h-auto image-zoom"
                src="light/new/landscape%20ratio%20images/mouse.png" width="2400" height="1080" decoding="async" loading="lazy" />
              <div class="reveal-curtain"></div>
              <div class="absolute top-2 left-0 right-0 z-10 text-center">
                <span class="caption-text">Precision Mouse</span>
              </div>
            </div>
          </div>

          <!-- Item 12: Clipboard Sharing (Portrait) -->
          <div
            class="relative overflow-hidden rounded-lg border border-white/30 bg-white/30 backdrop-blur-md backdrop-saturate-150 shadow-lg break-inside-avoid mb-8 gallery-item transition-all duration-500 hover:shadow-xl hover:border-white/50 hover:bg-white/40"
            data-purpose="gallery-tile" data-reveal="fade-up">
            <div class="relative overflow-hidden">
              <img alt="BlueKeys shared clipboard management screen" class="w-full h-auto image-zoom"
                src="light/new/portrait%20ratio%20images/clipboard.jpg" width="1080" height="2292" decoding="async" loading="lazy" />
              <div class="reveal-curtain"></div>
              <div class="absolute bottom-2 left-0 right-0 z-10 text-center">
                <span class="caption-text">Clipboard Sync</span>
              </div>
            </div>
          </div>


          <!-- Item 14: Rotary Dial Controls (Portrait) -->
          <div
            class="relative overflow-hidden rounded-lg border border-white/30 bg-white/30 backdrop-blur-md backdrop-saturate-150 shadow-lg break-inside-avoid mb-8 gallery-item transition-all duration-500 hover:shadow-xl hover:border-white/50 hover:bg-white/40"
            data-purpose="gallery-tile" data-reveal="fade-up">
            <div class="relative overflow-hidden">
              <img alt="BlueKeys interactive circular dial control" class="w-full h-auto image-zoom"
                src="light/new/portrait%20ratio%20images/dial.png" width="1080" height="2310" decoding="async" loading="lazy" />
              <div class="reveal-curtain"></div>
              <div class="absolute top-67 left-0 right-0 z-10 text-center">
                <span class="caption-text">Rotary Dial</span>
              </div>
            </div>
          </div>

          <!-- Item 15: Smart Word Suggestions (Landscape) -->
          <div
            class="relative overflow-hidden rounded-lg border border-white/30 bg-white/30 backdrop-blur-md backdrop-saturate-150 shadow-lg break-inside-avoid mb-8 gallery-item transition-all duration-500 hover:shadow-xl hover:border-white/50 hover:bg-white/40"
            data-purpose="gallery-tile" data-reveal="fade-up">
            <div class="relative overflow-hidden">
              <img alt="BlueKeys AI predictive word completion bar" class="w-full h-auto image-zoom"
                src="light/new/landscape%20ratio%20images/suggestions.jpg" width="2400" height="1080" decoding="async" loading="lazy" />
              <div class="reveal-curtain"></div>
              <div class="absolute top-1 left-0 right-0 z-10 text-center">
                <span class="caption-text">workspace keyboard</span>
              </div>
            </div>
          </div>

          <!-- Item 18: Keyboard Layouts (Portrait) -->
          <div
            class="relative overflow-hidden rounded-lg border border-white/30 bg-white/30 backdrop-blur-md backdrop-saturate-150 shadow-lg break-inside-avoid mb-8 gallery-item transition-all duration-500 hover:shadow-xl hover:border-white/50 hover:bg-white/40"
            data-purpose="gallery-tile" data-reveal="fade-up">
            <div class="relative overflow-hidden">
              <img alt="BlueKeys portrait keyboard customization" class="w-full h-auto image-zoom"
                src="light/new/portrait%20ratio%20images/keyboard.jpg" width="1080" height="2310" decoding="async" loading="lazy" />
              <div class="reveal-curtain"></div>