Add fireflies

2026-05-04 11:19:21 +07:00
parent 1a0f293305
commit b31f5b5cd2
9 changed files with 394 additions and 12 deletions
--- a/classes/index.html
+++ b/classes/index.html
@@ -13,7 +13,8 @@
  <link
    href="https://fonts.googleapis.com/css2?family=Bricolage+Grotesque:opsz,wght@12..60,700;12..60,800&family=Caveat+Brush&family=JetBrains+Mono:wght@400;500&family=Plus+Jakarta+Sans:wght@400;500;600;700;800&display=swap"
    rel="stylesheet">
-  <link rel="stylesheet" href="../css/style.css?v=7ecaa9f3">
+  <link rel="stylesheet" href="../css/style.css?v=254e174d">
+  <link rel="stylesheet" href="../css/fireflies.css">
 </head>

 <body>
@@ -378,7 +379,7 @@
    </div>
  </footer>

-  <script src="../js/main.js?v=7ecaa9f3"></script>
+  <script src="../js/main.js?v=254e174d"></script>
 </body>

 </html>
--- a/connect/index.html
+++ b/connect/index.html
@@ -14,6 +14,7 @@
    href="https://fonts.googleapis.com/css2?family=Bricolage+Grotesque:opsz,wght@12..60,700;12..60,800&family=Caveat+Brush&family=JetBrains+Mono:wght@400;500&family=Plus+Jakarta+Sans:wght@400;500;600;700;800&display=swap"
    rel="stylesheet">
  <link rel="stylesheet" href="../css/style.css?v=7ecaa9f3">
+  <link rel="stylesheet" href="../css/fireflies.css">
 </head>

 <body>
--- a/css/fireflies.css
+++ b/css/fireflies.css
@@ -0,0 +1,362 @@
+.firefly {
+  position: fixed;
+  left: 50%;
+  top: 50%;
+  width: 0.4vw;
+  height: 0.4vw;
+  margin: -0.2vw 0 0 9.8vw;
+  animation: ease 200s alternate infinite;
+  pointer-events: none;
+  z-index: 0;
+}
+
+.firefly::before,
+.firefly::after {
+  content: "";
+  position: absolute;
+  width: 100%;
+  height: 100%;
+  border-radius: 50%;
+  transform-origin: -10vw;
+}
+
+.firefly::before {
+  background: black;
+  opacity: 0.4;
+  animation: drift ease alternate infinite;
+}
+
+.firefly::after {
+  background: white;
+  opacity: 0;
+  box-shadow: 0 0 0vw 0vw #f5b800;
+  animation: drift ease alternate infinite, flash ease infinite;
+}
+
+.firefly:nth-child(1) { animation-name: move1; }
+.firefly:nth-child(1)::before { animation-duration: 15s; }
+.firefly:nth-child(1)::after  { animation-duration: 15s, 7421ms; animation-delay: 0ms, 3911ms; }
+
+.firefly:nth-child(2) { animation-name: move2; }
+.firefly:nth-child(2)::before { animation-duration: 10s; }
+.firefly:nth-child(2)::after  { animation-duration: 10s, 9632ms; animation-delay: 0ms, 6894ms; }
+
+.firefly:nth-child(3) { animation-name: move3; }
+.firefly:nth-child(3)::before { animation-duration: 17s; }
+.firefly:nth-child(3)::after  { animation-duration: 17s, 10384ms; animation-delay: 0ms, 5172ms; }
+
+.firefly:nth-child(4) { animation-name: move4; }
+.firefly:nth-child(4)::before { animation-duration: 14s; }
+.firefly:nth-child(4)::after  { animation-duration: 14s, 6650ms; animation-delay: 0ms, 2460ms; }
+
+.firefly:nth-child(5) { animation-name: move5; }
+.firefly:nth-child(5)::before { animation-duration: 18s; }
+.firefly:nth-child(5)::after  { animation-duration: 18s, 9291ms; animation-delay: 0ms, 7133ms; }
+
+.firefly:nth-child(6) { animation-name: move6; }
+.firefly:nth-child(6)::before { animation-duration: 12s; }
+.firefly:nth-child(6)::after  { animation-duration: 12s, 8177ms; animation-delay: 0ms, 5726ms; }
+
+.firefly:nth-child(7) { animation-name: move7; }
+.firefly:nth-child(7)::before { animation-duration: 11s; }
+.firefly:nth-child(7)::after  { animation-duration: 11s, 11123ms; animation-delay: 0ms, 4875ms; }
+
+.firefly:nth-child(8) { animation-name: move8; }
+.firefly:nth-child(8)::before { animation-duration: 16s; }
+.firefly:nth-child(8)::after  { animation-duration: 16s, 7804ms; animation-delay: 0ms, 1569ms; }
+
+.firefly:nth-child(9) { animation-name: move9; }
+.firefly:nth-child(9)::before { animation-duration: 9s; }
+.firefly:nth-child(9)::after  { animation-duration: 9s, 10591ms; animation-delay: 0ms, 8344ms; }
+
+.firefly:nth-child(10) { animation-name: move10; }
+.firefly:nth-child(10)::before { animation-duration: 13s; }
+.firefly:nth-child(10)::after  { animation-duration: 13s, 7098ms; animation-delay: 0ms, 3250ms; }
+
+.firefly:nth-child(11) { animation-name: move11; }
+.firefly:nth-child(11)::before { animation-duration: 17s; }
+.firefly:nth-child(11)::after  { animation-duration: 17s, 11444ms; animation-delay: 0ms, 2128ms; }
+
+.firefly:nth-child(12) { animation-name: move12; }
+.firefly:nth-child(12)::before { animation-duration: 15s; }
+.firefly:nth-child(12)::after  { animation-duration: 15s, 8769ms; animation-delay: 0ms, 6512ms; }
+
+.firefly:nth-child(13) { animation-name: move13; }
+.firefly:nth-child(13)::before { animation-duration: 10s; }
+.firefly:nth-child(13)::after  { animation-duration: 10s, 6115ms; animation-delay: 0ms, 1010ms; }
+
+.firefly:nth-child(14) { animation-name: move14; }
+.firefly:nth-child(14)::before { animation-duration: 18s; }
+.firefly:nth-child(14)::after  { animation-duration: 18s, 10420ms; animation-delay: 0ms, 7548ms; }
+
+.firefly:nth-child(15) { animation-name: move15; }
+.firefly:nth-child(15)::before { animation-duration: 12s; }
+.firefly:nth-child(15)::after  { animation-duration: 12s, 9712ms; animation-delay: 0ms, 4666ms; }
+
+@keyframes move1 {
+  0%   { transform: translateX(-28vw) translateY(17vh)  scale(0.54); }
+  5%   { transform: translateX(31vw)  translateY(-42vh) scale(0.91); }
+  10%  { transform: translateX(-9vw)  translateY(44vh)  scale(0.47); }
+  15%  { transform: translateX(12vw)  translateY(-6vh)  scale(0.72); }
+  20%  { transform: translateX(-44vw) translateY(-28vh) scale(0.85); }
+  25%  { transform: translateX(39vw)  translateY(23vh)  scale(0.39); }
+  30%  { transform: translateX(-16vw) translateY(7vh)   scale(0.98); }
+  35%  { transform: translateX(45vw)  translateY(-31vh) scale(0.63); }
+  40%  { transform: translateX(-36vw) translateY(33vh)  scale(0.78); }
+  45%  { transform: translateX(6vw)   translateY(-48vh) scale(0.51); }
+  50%  { transform: translateX(27vw)  translateY(14vh)  scale(0.94); }
+  55%  { transform: translateX(-21vw) translateY(-11vh) scale(0.66); }
+  60%  { transform: translateX(48vw)  translateY(39vh)  scale(0.43); }
+  65%  { transform: translateX(-3vw)  translateY(-35vh) scale(0.88); }
+  70%  { transform: translateX(-49vw) translateY(4vh)   scale(0.58); }
+  75%  { transform: translateX(18vw)  translateY(48vh)  scale(0.75); }
+  80%  { transform: translateX(-30vw) translateY(-44vh) scale(0.99); }
+  85%  { transform: translateX(36vw)  translateY(-2vh)  scale(0.62); }
+  90%  { transform: translateX(-13vw) translateY(29vh)  scale(0.81); }
+  95%  { transform: translateX(4vw)   translateY(-19vh) scale(0.46); }
+  100% { transform: translateX(42vw)  translateY(9vh)   scale(0.69); }
+}
+
+@keyframes move2 {
+  0%     { transform: translateX(14vw)  translateY(-33vh) scale(0.82); }
+  6.25%  { transform: translateX(-41vw) translateY(28vh)  scale(0.48); }
+  12.5%  { transform: translateX(36vw)  translateY(41vh)  scale(0.93); }
+  18.75% { transform: translateX(-12vw) translateY(-7vh)  scale(0.57); }
+  25%    { transform: translateX(5vw)   translateY(49vh)  scale(0.76); }
+  31.25% { transform: translateX(-47vw) translateY(-21vh) scale(0.64); }
+  37.5%  { transform: translateX(23vw)  translateY(-45vh) scale(0.99); }
+  43.75% { transform: translateX(-2vw)  translateY(18vh)  scale(0.38); }
+  50%    { transform: translateX(44vw)  translateY(-14vh) scale(0.86); }
+  56.25% { transform: translateX(-29vw) translateY(3vh)   scale(0.71); }
+  62.5%  { transform: translateX(11vw)  translateY(36vh)  scale(0.52); }
+  68.75% { transform: translateX(-38vw) translateY(-49vh) scale(0.89); }
+  75%    { transform: translateX(49vw)  translateY(10vh)  scale(0.44); }
+  81.25% { transform: translateX(-17vw) translateY(45vh)  scale(0.96); }
+  87.5%  { transform: translateX(30vw)  translateY(-27vh) scale(0.67); }
+  93.75% { transform: translateX(-5vw)  translateY(24vh)  scale(0.79); }
+  100%   { transform: translateX(19vw)  translateY(-39vh) scale(0.55); }
+}
+
+@keyframes move3 {
+  0%   { transform: translateX(-22vw) translateY(38vh)  scale(0.71); }
+  7%   { transform: translateX(41vw)  translateY(-15vh) scale(0.44); }
+  14%  { transform: translateX(-8vw)  translateY(-43vh) scale(0.89); }
+  21%  { transform: translateX(33vw)  translateY(27vh)  scale(0.56); }
+  28%  { transform: translateX(-47vw) translateY(11vh)  scale(0.93); }
+  35%  { transform: translateX(19vw)  translateY(-48vh) scale(0.38); }
+  42%  { transform: translateX(-34vw) translateY(35vh)  scale(0.77); }
+  49%  { transform: translateX(7vw)   translateY(-21vh) scale(0.62); }
+  56%  { transform: translateX(48vw)  translateY(16vh)  scale(0.85); }
+  63%  { transform: translateX(-15vw) translateY(-37vh) scale(0.49); }
+  70%  { transform: translateX(26vw)  translateY(44vh)  scale(0.96); }
+  77%  { transform: translateX(-43vw) translateY(-9vh)  scale(0.68); }
+  84%  { transform: translateX(12vw)  translateY(31vh)  scale(0.81); }
+  91%  { transform: translateX(-29vw) translateY(-46vh) scale(0.53); }
+  100% { transform: translateX(38vw)  translateY(8vh)   scale(0.74); }
+}
+
+@keyframes move4 {
+  0%   { transform: translateX(17vw)  translateY(-44vh) scale(0.83); }
+  10%  { transform: translateX(-39vw) translateY(21vh)  scale(0.57); }
+  20%  { transform: translateX(46vw)  translateY(-33vh) scale(0.42); }
+  30%  { transform: translateX(-11vw) translateY(49vh)  scale(0.76); }
+  40%  { transform: translateX(28vw)  translateY(-7vh)  scale(0.91); }
+  50%  { transform: translateX(-47vw) translateY(36vh)  scale(0.64); }
+  60%  { transform: translateX(8vw)   translateY(-28vh) scale(0.48); }
+  70%  { transform: translateX(37vw)  translateY(13vh)  scale(0.87); }
+  80%  { transform: translateX(-24vw) translateY(-41vh) scale(0.73); }
+  90%  { transform: translateX(44vw)  translateY(24vh)  scale(0.55); }
+  100% { transform: translateX(-16vw) translateY(-18vh) scale(0.98); }
+}
+
+@keyframes move5 {
+  0%   { transform: translateX(-32vw) translateY(5vh)   scale(0.66); }
+  8%   { transform: translateX(23vw)  translateY(-38vh) scale(0.91); }
+  16%  { transform: translateX(-48vw) translateY(29vh)  scale(0.47); }
+  24%  { transform: translateX(11vw)  translateY(-13vh) scale(0.78); }
+  32%  { transform: translateX(40vw)  translateY(42vh)  scale(0.53); }
+  40%  { transform: translateX(-7vw)  translateY(-47vh) scale(0.84); }
+  48%  { transform: translateX(35vw)  translateY(18vh)  scale(0.39); }
+  56%  { transform: translateX(-26vw) translateY(34vh)  scale(0.95); }
+  64%  { transform: translateX(49vw)  translateY(-22vh) scale(0.61); }
+  72%  { transform: translateX(-14vw) translateY(-6vh)  scale(0.76); }
+  80%  { transform: translateX(6vw)   translateY(47vh)  scale(0.43); }
+  88%  { transform: translateX(-41vw) translateY(-31vh) scale(0.88); }
+  100% { transform: translateX(29vw)  translateY(11vh)  scale(0.57); }
+}
+
+@keyframes move6 {
+  0%   { transform: translateX(36vw)  translateY(-46vh) scale(0.52); }
+  9%   { transform: translateX(-19vw) translateY(14vh)  scale(0.87); }
+  18%  { transform: translateX(42vw)  translateY(37vh)  scale(0.69); }
+  27%  { transform: translateX(-44vw) translateY(-25vh) scale(0.94); }
+  36%  { transform: translateX(15vw)  translateY(8vh)   scale(0.41); }
+  45%  { transform: translateX(-3vw)  translateY(-49vh) scale(0.73); }
+  54%  { transform: translateX(47vw)  translateY(31vh)  scale(0.58); }
+  63%  { transform: translateX(-38vw) translateY(-12vh) scale(0.82); }
+  72%  { transform: translateX(21vw)  translateY(45vh)  scale(0.46); }
+  81%  { transform: translateX(-29vw) translateY(-34vh) scale(0.97); }
+  90%  { transform: translateX(9vw)   translateY(19vh)  scale(0.64); }
+  100% { transform: translateX(-46vw) translateY(42vh)  scale(0.79); }
+}
+
+@keyframes move7 {
+  0%   { transform: translateX(-11vw) translateY(-27vh) scale(0.88); }
+  6%   { transform: translateX(44vw)  translateY(39vh)  scale(0.53); }
+  12%  { transform: translateX(-33vw) translateY(-14vh) scale(0.74); }
+  18%  { transform: translateX(18vw)  translateY(48vh)  scale(0.41); }
+  24%  { transform: translateX(-48vw) translateY(-39vh) scale(0.86); }
+  30%  { transform: translateX(7vw)   translateY(22vh)  scale(0.63); }
+  36%  { transform: translateX(39vw)  translateY(-41vh) scale(0.97); }
+  42%  { transform: translateX(-22vw) translateY(7vh)   scale(0.48); }
+  48%  { transform: translateX(13vw)  translateY(-19vh) scale(0.79); }
+  54%  { transform: translateX(-45vw) translateY(43vh)  scale(0.55); }
+  60%  { transform: translateX(31vw)  translateY(-5vh)  scale(0.92); }
+  66%  { transform: translateX(-6vw)  translateY(-44vh) scale(0.67); }
+  72%  { transform: translateX(48vw)  translateY(28vh)  scale(0.38); }
+  78%  { transform: translateX(-17vw) translateY(15vh)  scale(0.81); }
+  84%  { transform: translateX(26vw)  translateY(-32vh) scale(0.44); }
+  90%  { transform: translateX(-40vw) translateY(36vh)  scale(0.71); }
+  100% { transform: translateX(4vw)   translateY(-10vh) scale(0.59); }
+}
+
+@keyframes move8 {
+  0%   { transform: translateX(43vw)  translateY(14vh)  scale(0.77); }
+  11%  { transform: translateX(-24vw) translateY(-48vh) scale(0.43); }
+  22%  { transform: translateX(9vw)   translateY(32vh)  scale(0.89); }
+  33%  { transform: translateX(-46vw) translateY(-7vh)  scale(0.61); }
+  44%  { transform: translateX(34vw)  translateY(47vh)  scale(0.96); }
+  55%  { transform: translateX(-13vw) translateY(-23vh) scale(0.52); }
+  66%  { transform: translateX(22vw)  translateY(-38vh) scale(0.75); }
+  77%  { transform: translateX(-38vw) translateY(17vh)  scale(0.48); }
+  88%  { transform: translateX(46vw)  translateY(-11vh) scale(0.83); }
+  100% { transform: translateX(-7vw)  translateY(41vh)  scale(0.67); }
+}
+
+@keyframes move9 {
+  0%     { transform: translateX(-27vw) translateY(31vh)  scale(0.58); }
+  7.69%  { transform: translateX(16vw)  translateY(-45vh) scale(0.83); }
+  15.38% { transform: translateX(-43vw) translateY(8vh)   scale(0.47); }
+  23.08% { transform: translateX(38vw)  translateY(-19vh) scale(0.92); }
+  30.77% { transform: translateX(-9vw)  translateY(48vh)  scale(0.61); }
+  38.46% { transform: translateX(47vw)  translateY(-36vh) scale(0.79); }
+  46.15% { transform: translateX(-21vw) translateY(25vh)  scale(0.44); }
+  53.85% { transform: translateX(6vw)   translateY(-12vh) scale(0.96); }
+  61.54% { transform: translateX(-49vw) translateY(43vh)  scale(0.53); }
+  69.23% { transform: translateX(29vw)  translateY(-7vh)  scale(0.74); }
+  76.92% { transform: translateX(-14vw) translateY(-41vh) scale(0.87); }
+  84.62% { transform: translateX(41vw)  translateY(33vh)  scale(0.39); }
+  92.31% { transform: translateX(-32vw) translateY(-26vh) scale(0.68); }
+  100%   { transform: translateX(11vw)  translateY(17vh)  scale(0.91); }
+}
+
+@keyframes move10 {
+  0%     { transform: translateX(48vw)  translateY(-39vh) scale(0.54); }
+  12.5%  { transform: translateX(-31vw) translateY(22vh)  scale(0.79); }
+  25%    { transform: translateX(17vw)  translateY(-14vh) scale(0.43); }
+  37.5%  { transform: translateX(-42vw) translateY(45vh)  scale(0.86); }
+  50%    { transform: translateX(4vw)   translateY(-28vh) scale(0.67); }
+  62.5%  { transform: translateX(36vw)  translateY(11vh)  scale(0.94); }
+  75%    { transform: translateX(-18vw) translateY(-49vh) scale(0.51); }
+  87.5%  { transform: translateX(45vw)  translateY(37vh)  scale(0.72); }
+  100%   { transform: translateX(-8vw)  translateY(-6vh)  scale(0.85); }
+}
+
+@keyframes move11 {
+  0%     { transform: translateX(22vw)  translateY(44vh)  scale(0.69); }
+  8.33%  { transform: translateX(-46vw) translateY(-17vh) scale(0.84); }
+  16.67% { transform: translateX(13vw)  translateY(-42vh) scale(0.52); }
+  25%    { transform: translateX(-28vw) translateY(36vh)  scale(0.93); }
+  33.33% { transform: translateX(47vw)  translateY(-8vh)  scale(0.41); }
+  41.67% { transform: translateX(-7vw)  translateY(27vh)  scale(0.76); }
+  50%    { transform: translateX(34vw)  translateY(-46vh) scale(0.58); }
+  58.33% { transform: translateX(-41vw) translateY(13vh)  scale(0.87); }
+  66.67% { transform: translateX(18vw)  translateY(49vh)  scale(0.46); }
+  75%    { transform: translateX(-3vw)  translateY(-33vh) scale(0.73); }
+  83.33% { transform: translateX(43vw)  translateY(19vh)  scale(0.61); }
+  91.67% { transform: translateX(-36vw) translateY(-24vh) scale(0.95); }
+  100%   { transform: translateX(9vw)   translateY(38vh)  scale(0.77); }
+}
+
+@keyframes move12 {
+  0%     { transform: translateX(-15vw) translateY(-8vh)  scale(0.89); }
+  9.09%  { transform: translateX(39vw)  translateY(46vh)  scale(0.54); }
+  18.18% { transform: translateX(-43vw) translateY(-31vh) scale(0.71); }
+  27.27% { transform: translateX(24vw)  translateY(15vh)  scale(0.38); }
+  36.36% { transform: translateX(-8vw)  translateY(-43vh) scale(0.82); }
+  45.45% { transform: translateX(46vw)  translateY(28vh)  scale(0.66); }
+  54.55% { transform: translateX(-33vw) translateY(7vh)   scale(0.91); }
+  63.64% { transform: translateX(11vw)  translateY(-37vh) scale(0.48); }
+  72.73% { transform: translateX(-47vw) translateY(41vh)  scale(0.74); }
+  81.82% { transform: translateX(27vw)  translateY(-14vh) scale(0.57); }
+  90.91% { transform: translateX(-19vw) translateY(32vh)  scale(0.43); }
+  100%   { transform: translateX(42vw)  translateY(-26vh) scale(0.85); }
+}
+
+@keyframes move13 {
+  0%     { transform: translateX(31vw)  translateY(-21vh) scale(0.61); }
+  5.56%  { transform: translateX(-44vw) translateY(34vh)  scale(0.78); }
+  11.11% { transform: translateX(8vw)   translateY(46vh)  scale(0.43); }
+  16.67% { transform: translateX(-26vw) translateY(-11vh) scale(0.92); }
+  22.22% { transform: translateX(47vw)  translateY(-47vh) scale(0.55); }
+  27.78% { transform: translateX(-12vw) translateY(19vh)  scale(0.84); }
+  33.33% { transform: translateX(36vw)  translateY(-3vh)  scale(0.47); }
+  38.89% { transform: translateX(-49vw) translateY(42vh)  scale(0.73); }
+  44.44% { transform: translateX(19vw)  translateY(-28vh) scale(0.96); }
+  50%    { transform: translateX(-7vw)  translateY(11vh)  scale(0.58); }
+  55.56% { transform: translateX(44vw)  translateY(38vh)  scale(0.41); }
+  61.11% { transform: translateX(-37vw) translateY(-44vh) scale(0.79); }
+  66.67% { transform: translateX(14vw)  translateY(24vh)  scale(0.64); }
+  72.22% { transform: translateX(-31vw) translateY(-16vh) scale(0.87); }
+  77.78% { transform: translateX(42vw)  translateY(48vh)  scale(0.52); }
+  83.33% { transform: translateX(-22vw) translateY(-37vh) scale(0.95); }
+  88.89% { transform: translateX(6vw)   translateY(29vh)  scale(0.68); }
+  100%   { transform: translateX(-48vw) translateY(7vh)   scale(0.83); }
+}
+
+@keyframes move14 {
+  0%     { transform: translateX(-34vw) translateY(-19vh) scale(0.76); }
+  11.11% { transform: translateX(26vw)  translateY(47vh)  scale(0.49); }
+  22.22% { transform: translateX(-11vw) translateY(-38vh) scale(0.91); }
+  33.33% { transform: translateX(43vw)  translateY(12vh)  scale(0.62); }
+  44.44% { transform: translateX(-48vw) translateY(29vh)  scale(0.85); }
+  55.56% { transform: translateX(17vw)  translateY(-43vh) scale(0.53); }
+  66.67% { transform: translateX(-6vw)  translateY(36vh)  scale(0.74); }
+  77.78% { transform: translateX(38vw)  translateY(-8vh)  scale(0.41); }
+  88.89% { transform: translateX(-23vw) translateY(21vh)  scale(0.97); }
+  100%   { transform: translateX(9vw)   translateY(-49vh) scale(0.66); }
+}
+
+@keyframes move15 {
+  0%   { transform: translateX(45vw)  translateY(38vh)  scale(0.57); }
+  7%   { transform: translateX(-17vw) translateY(-46vh) scale(0.82); }
+  14%  { transform: translateX(32vw)  translateY(13vh)  scale(0.44); }
+  21%  { transform: translateX(-43vw) translateY(27vh)  scale(0.93); }
+  28%  { transform: translateX(8vw)   translateY(-34vh) scale(0.61); }
+  35%  { transform: translateX(-27vw) translateY(-8vh)  scale(0.75); }
+  42%  { transform: translateX(48vw)  translateY(42vh)  scale(0.48); }
+  49%  { transform: translateX(-9vw)  translateY(-22vh) scale(0.89); }
+  56%  { transform: translateX(23vw)  translateY(-48vh) scale(0.54); }
+  63%  { transform: translateX(-38vw) translateY(16vh)  scale(0.71); }
+  70%  { transform: translateX(14vw)  translateY(39vh)  scale(0.96); }
+  77%  { transform: translateX(-47vw) translateY(-13vh) scale(0.43); }
+  84%  { transform: translateX(37vw)  translateY(-27vh) scale(0.78); }
+  91%  { transform: translateX(-21vw) translateY(44vh)  scale(0.62); }
+  100% { transform: translateX(5vw)   translateY(-3vh)  scale(0.85); }
+}
+
+@keyframes drift {
+  0%   { transform: rotate(0deg); }
+  100% { transform: rotate(360deg); }
+}
+
+@keyframes flash {
+  0%, 30%, 100% {
+    opacity: 0;
+    box-shadow: 0 0 0vw 0vw #f5b800;
+  }
+  5% {
+    opacity: 1;
+    box-shadow: 0 0 2vw 0.4vw #f5b800;
+  }
+}
--- a/festivals/index.html
+++ b/festivals/index.html
@@ -13,7 +13,8 @@
  <link
    href="https://fonts.googleapis.com/css2?family=Bricolage+Grotesque:opsz,wght@12..60,700;12..60,800&family=Caveat+Brush&family=JetBrains+Mono:wght@400;500&family=Plus+Jakarta+Sans:wght@400;500;600;700;800&display=swap"
    rel="stylesheet">
-  <link rel="stylesheet" href="../css/style.css?v=7ecaa9f3">
+  <link rel="stylesheet" href="../css/style.css?v=254e174d">
+  <link rel="stylesheet" href="../css/fireflies.css">
 </head>

 <body>
@@ -247,7 +248,7 @@
    </div>
  </footer>

-  <script src="../js/main.js?v=6aeda9d1"></script>
+  <script src="../js/main.js?v=254e174d"></script>
 </body>

 </html>
--- a/index.html
+++ b/index.html
@@ -13,7 +13,8 @@
  <link
    href="https://fonts.googleapis.com/css2?family=Bricolage+Grotesque:opsz,wght@12..60,700;12..60,800&family=Caveat+Brush&family=JetBrains+Mono:wght@400;500&family=Plus+Jakarta+Sans:wght@400;500;600;700;800&display=swap"
    rel="stylesheet">
-  <link rel="stylesheet" href="css/style.css?v=7ecaa9f3">
+  <link rel="stylesheet" href="css/style.css?v=254e174d">
+  <link rel="stylesheet" href="css/fireflies.css">
 </head>

 <body>
@@ -276,7 +277,7 @@
    </div>
  </footer>

-  <script src="js/main.js?v=7ecaa9f3"></script>
+  <script src="js/main.js?v=254e174d"></script>
 </body>

 </html>
--- a/js/main.js
+++ b/js/main.js
@@ -203,8 +203,21 @@ function lockPalmSizes() {
  });
 }

+// ---- Fireflies ----
+function initFireflies() {
+  const container = document.createElement('div');
+  container.setAttribute('aria-hidden', 'true');
+  for (let i = 0; i < 15; i++) {
+    const fly = document.createElement('div');
+    fly.className = 'firefly';
+    container.appendChild(fly);
+  }
+  document.body.prepend(container);
+}
+
 // ---- Init ----
 document.addEventListener('DOMContentLoaded', () => {
+  initFireflies();
  initNav();
  renderScheduleList();
  renderScheduleTeaser();
--- a/playlists/index.html
+++ b/playlists/index.html
@@ -13,7 +13,8 @@
  <link
    href="https://fonts.googleapis.com/css2?family=Bricolage+Grotesque:opsz,wght@12..60,700;12..60,800&family=Caveat+Brush&family=JetBrains+Mono:wght@400;500&family=Plus+Jakarta+Sans:wght@400;500;600;700;800&display=swap"
    rel="stylesheet">
-  <link rel="stylesheet" href="../css/style.css?v=7ecaa9f3">
+  <link rel="stylesheet" href="../css/style.css?v=254e174d">
+  <link rel="stylesheet" href="../css/fireflies.css">
 </head>

 <body>
@@ -585,7 +586,7 @@
    </div>
  </div>

-  <script src="../js/main.js?v=7ecaa9f3"></script>
+  <script src="../js/main.js?v=254e174d"></script>
  <script src="../js/playlists-data.js"></script>
  <script src="../js/playlists-data-yt.js"></script>
  <script>
--- a/schedule/index.html
+++ b/schedule/index.html
@@ -13,7 +13,8 @@
  <link
    href="https://fonts.googleapis.com/css2?family=Bricolage+Grotesque:opsz,wght@12..60,700;12..60,800&family=Caveat+Brush&family=JetBrains+Mono:wght@400;500&family=Plus+Jakarta+Sans:wght@400;500;600;700;800&display=swap"
    rel="stylesheet">
-  <link rel="stylesheet" href="../css/style.css?v=7ecaa9f3">
+  <link rel="stylesheet" href="../css/style.css?v=254e174d">
+  <link rel="stylesheet" href="../css/fireflies.css">
 </head>

 <body>
@@ -122,7 +123,7 @@
    </div>
  </footer>

-  <script src="../js/main.js?v=7ecaa9f3"></script>
+  <script src="../js/main.js?v=254e174d"></script>
  <script>
    // Dynamic last-update label
    (function () {
--- a/studios/index.html
+++ b/studios/index.html
@@ -13,7 +13,8 @@
  <link
    href="https://fonts.googleapis.com/css2?family=Bricolage+Grotesque:opsz,wght@12..60,700;12..60,800&family=Caveat+Brush&family=JetBrains+Mono:wght@400;500&family=Plus+Jakarta+Sans:wght@400;500;600;700;800&display=swap"
    rel="stylesheet">
-  <link rel="stylesheet" href="../css/style.css?v=7ecaa9f3">
+  <link rel="stylesheet" href="../css/style.css?v=254e174d">
+  <link rel="stylesheet" href="../css/fireflies.css">
 </head>

 <body>
@@ -240,7 +241,7 @@
    </div>
  </footer>

-  <script src="../js/main.js?v=7ecaa9f3"></script>
+  <script src="../js/main.js?v=254e174d"></script>
 </body>

 </html>