<div class="preformatted">
.".''𖥧".(.  \.'".𖥧".''.".''.".'"..".''.".''𖥧".'"..".''
".'𖥧.'".')   ).'".'..'"𖥧'."'.'.'".'..'".'."'.'.'"𖥧'..'
.".''𖥧"./   (".."𖥧''.".''.".'"..".''.".''."𖥧'"..".''."
"𖥧'..'"/    .\.'".'..'".'."'𖥧'.'".'..'".'."'.'.'".'.𖥧'
.".''.(       \"..".''."𖥧''.".'".."𖥧''𖥧".''.".'"..".''
".'𖥧.'") .,    \ .'.𖥧'".'."'.'.'".'..'".'."'𖥧'.'".'..'
<a class="kettle" href="/somewhere/trail-cams.html" rel="noopener noreferrer">^..^₎⟆</a>/         )𖥧''.".''."𖥧'"..".''.".''𖥧".'"..".''."
".'𖥧.(       ; (".'..'".'."'.'𖥧'".'..'".'."'.'.'".'𖥧.'
.".''𖥧)         \''.".''<a class="kettle" href="/somewhere/kids.html" rel="noopener noreferrer">(:ᘌꇤ⁐)꒱</a>".''.".''𖥧".'".."𖥧''.".
"𖥧'../  ;_;      )'..'".'."'𖥧'.'".'..'"𖥧'."'.'.'".'..'
.".'/            (''𖥧".''𖥧".'"../\'.".''.".'".."𖥧''.".
~~~~"---''''```---"~~~~~~~~~~~~/  \~~~~~~~~~~~~~~~~~~~
  ~ |= _ _ _ _ _ =|~~ ~ ~ ~ ~~ \   \__   ~  ~  ~~~~ ~~
 ~~ |=     :     =|~ ~~ ~ ~~~ ~ \   \o\  ~~ ~  ~~~~ ~ 
   ~|=  <a class="kettle" href="/somewhere/friends.html" rel="noopener noreferrer">๑ï</a>       =| ~~~ <><  ~~~ \   \o\=  ~~ ~~~  ~~~
~ ~ |             |~ ~~~~~ ~  ~~\O/ ~~ ~ ~~ ~ ~ ~~ ~ ~
~~~~L__we_r_here__J~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
</div>
<div class="container"><div class="train">
     ___                 <span id="smoke">. o . o . o . o . o</span>
  __|DDD|__ ___________ _______    ____      o
 | |.\/.| | [<a class="come-along" href="/somewhere/come-along-with-me.html" rel="noopener noreferrer">] [] [] [</a>] [_____(__  ]<a class="come-along" href="/somewhere/hop-on-the-train.html" rel="noopener noreferrer">[]</a>]_n_n__][.
_|_|_/\_|_|_[_________]_[________]_|__|________)<
  oo    oo 'oo      oo ' oo    oo 'oo 0000---oo\_
</div><br><br><br>
-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+
</div>


<style>
.moon {
  color: #ffb909;
  position: relative;
  z-index: 1;
}

.moon::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  width: 85px;
  height: 85px;
  border-radius: 50%;
  transform: translate(-50%, -50%);
  background: radial-gradient(circle,
  rgba(255,255,150,0.6) 10%,
  rgba(255,200,0,0.2) 50%,
  rgba(255,255,150,0) 90%
);
  filter: blur(15px);
  animation: moonGlow 10s infinite alternate;
  z-index: -1;
}

@keyframes moonGlow {
  0% {
    transform: translate(-50%, -50%) scale(1);
    opacity: 0.3;
  }
  50% {
    transform: translate(-50%, -50%) scale(1.5);
    opacity: 0.6;
  }
  100% {
    transform: translate(-50%, -50%) scale(1);
    opacity: 0.3;
  }
}



.preformatted, .container, .train {
    font-family: monospace;
    white-space: pre;
    line-height: 1.38;
    font-size: 10px;
    margin: 0 auto;
}

 .container {
    position: relative;
    overflow: hidden;
  }

  .train {
    white-space: pre;
    display: inline-block;
    animation: moveTrain 20s linear infinite; 
    font-family: monospace;
    line-height: 1;
    position: absolute;
    top: -5px;
  }

  @keyframes moveTrain {
  0%   { transform: translateX(-100%); }
  10%  { transform: translateX(-60%); }   
  30%  { transform: translateX(-60%); }
  70% { transform: translateX(150%); }    
  100% { transform: translateX(150%); }   
}

.come-along {
  text-decoration: none;
  background-color: #d7b83b;
  color: #235e1f;
  border-radius: 3px;
}

a.kettle {
  text-decoration: none;
  background-color: transparent;
  border-radius: 3px;
  animation: color-animation 5s ease-in-out infinite, wiggle 1.5s ease-in-out infinite;
  display: inline-block;
}

a.kettle:hover {
  background-color: #d7b83b;
  animation: none;
  color: #235e1f;
}

@keyframes color-animation {
  0% {
    color: #bfb381;
  }
  30% {
    color: #eeb60d;
  }  
  60% {
    color: #eeb60d;    
  }
  100% {
    color: #bfb381;
  }
}

@keyframes wiggle {
  0% {
    transform: scale(1) rotate(0deg);
  }
  22% {
    transform: scale(1.05) rotate(3deg);
  }
  44% {
    transform: scale(0.95) rotate(-3deg);
  }
  66% {
    transform: scale(1.05) rotate(3deg);
  }
  67% {
    transform: scale(1) rotate(0deg);
  }
  100% {
    transform: scale(1) rotate(0deg);
  }
}
</style>

<script>
  const smokeEl = document.getElementById("smoke");
  const patterns = [
    "o . o . o . o . o .",
    ". o . o . o . o . o",
  ];

  let index = 0;
  setInterval(() => {
    smokeEl.textContent = patterns[index];
    index = (index + 1) % patterns.length; 
  }, 900);
</script>

<style>
.firework-particle {
  position: absolute;
  pointer-events: none;
  font-size: 14px;
  font-weight: bold;
  z-index: 100;
  animation: sparkle-fade 5s ease-out forwards;
  display: none;
}

@keyframes sparkle-fade {
  0% {
    opacity: 0;
    transform: translate(0, 0) scale(0.5);
  }
  15% {
    opacity: 0.6;
    transform: translate(calc(var(--tx) * 0.3), calc(var(--ty) * 0.3)) scale(0.8);
  }
  30% {
    opacity: 1;
    transform: translate(calc(var(--tx) * 0.6), calc(var(--ty) * 0.6)) scale(1);
  }
  45% {
    opacity: 1;
    transform: translate(var(--tx), var(--ty)) scale(1.1);
  }
  60% {
    opacity: 0.7;
    transform: translate(calc(var(--tx) * 1.05), calc(var(--ty) * 1.05)) scale(0.95);
  }
  80% {
    opacity: 0.3;
    transform: translate(calc(var(--tx) * 1.1), calc(var(--ty) * 1.1)) scale(0.7);
  }
  100% {
    opacity: 0;
    transform: translate(calc(var(--tx) * 1.15), calc(var(--ty) * 1.15)) scale(0.5);
  }
}

@keyframes twinkle {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.4; }
}

.preformatted {
  position: relative;
}
</style>

<script>
(function() {
  const sparkleChars = ['. ݁', '+', '⊹', '. ݁', '⟡', '݁', '.', '⊹', '+', '݁.'];
  const colors = ['#ffd700', '#ffed4e', '#fff59d', '#ffe082', '#ffb74d', '#ffa726'];
  
  function createFirework(x, y) {
    const container = document.querySelector('.preformatted');
    if (!container) return;
    
    const particleCount = 8 + Math.floor(Math.random() * 8);
    
    for (let i = 0; i < particleCount; i++) {
      const particle = document.createElement('span');
      particle.className = 'firework-particle';
      particle.textContent = sparkleChars[Math.floor(Math.random() * sparkleChars.length)];
      particle.style.color = colors[Math.floor(Math.random() * colors.length)];
      particle.style.left = x + 'px';
      particle.style.top = y + 'px';
      
      const angle = (Math.PI * 2 * i) / particleCount + (Math.random() - 0.5) * 0.5;
      const distance = 20 + Math.random() * 25;
      const tx = Math.cos(angle) * distance;
      const ty = Math.sin(angle) * distance;
      
      particle.style.setProperty('--tx', tx + 'px');
      particle.style.setProperty('--ty', ty + 'px');
      
      container.appendChild(particle);
      
      let morphCount = 0;
      const morphInterval = setInterval(() => {
        if (morphCount < 100 && particle.parentNode) {
          particle.textContent = sparkleChars[Math.floor(Math.random() * sparkleChars.length)];
          morphCount++;
        } else {
          clearInterval(morphInterval);
        }
      }, 80);
      
      setTimeout(() => {
        clearInterval(morphInterval);
        if (particle.parentNode) {
          particle.parentNode.removeChild(particle);
        }
      }, 5000);
    }
  }
  
  function getRandomPosition() {
    const container = document.querySelector('.preformatted');
    if (!container) return { x: 0, y: 0 };
    
    const rect = container.getBoundingClientRect();
    const x = Math.random() * rect.width * 0.8 + rect.width * 0.1;
    const y = Math.random() * rect.height * 0.7 + rect.height * 0.1;
    
    return { x, y };
  }
  
  function triggerRandomFirework() {
    const burstCount = Math.random();
    let fireworkCount;
    
    if (burstCount < 0.2) {
      fireworkCount = 0;
    } else if (burstCount < 0.5) {
      fireworkCount = 1;
    } else if (burstCount < 0.8) {
      fireworkCount = 2;
    } else {
      fireworkCount = 3;
    }
    
    for (let i = 0; i < fireworkCount; i++) {
      setTimeout(() => {
        const pos = getRandomPosition();
        createFirework(pos.x, pos.y);
      }, i * (500 + Math.random() * 300));
    }
    
    const nextDelay = 2000 + Math.random() * 4000;
    setTimeout(triggerRandomFirework, nextDelay);
  }
  
  setTimeout(triggerRandomFirework, 2000);
})();
</script>