/* Footer sign-off on every page: a small ASCII CN Tower on a horizon line, light snow, coordinates */
.ks-to { position: relative; overflow: hidden; margin-top: 72px; padding-bottom: 54px; color: #181b2e; }
.ks-to-in { display: flex; justify-content: center; position: relative; z-index: 1; }
.ks-to-in pre {
  margin: 0; transform: translateX(6%); font-family: ui-monospace, "SFMono-Regular", Consolas, "Liberation Mono", monospace;
  font-size: clamp(6.5px, 0.75vw, 9.5px); line-height: 1.18; color: #181b2e; white-space: pre; background: none; border: 0; padding: 0; text-align: left;
}
/* the horizon: one hairline across the footer, the tower's base sits on it */
.ks-to::after { content: ""; position: absolute; left: 0; right: 0; bottom: 54px; height: 1px; background: rgba(24, 27, 46, .3); }
.ks-to-line {
  position: absolute; left: 0; right: 0; bottom: 18px; margin: 0; text-align: center;
  font-family: ui-monospace, "SFMono-Regular", Consolas, "Liberation Mono", monospace; font-size: 11px; letter-spacing: .12em; text-transform: uppercase; opacity: .55;
}
.ks-to-snow { position: absolute; inset: 0; pointer-events: none; }
.ks-to-snow i {
  position: absolute; top: -10px; width: var(--s); height: var(--s); border-radius: 50%; background: #181b2e; opacity: .14;
  animation: ks-snow var(--t) linear var(--d) infinite backwards;
}
@keyframes ks-snow { from { transform: translate3d(0, -10px, 0); } to { transform: translate3d(var(--x), 420px, 0); } }
@media (max-width: 767px) {
  .ks-to { margin-top: 48px; }
  .ks-to-in pre { transform: none; font-size: 6.4px; }
  .ks-to-line { font-size: 10px; letter-spacing: .08em; }
}
@media (prefers-reduced-motion: reduce) { .ks-to-snow { display: none; } }

/* the mascot climbing the tower */
.ks-to-in { position: relative; }
.ks-climber { position: absolute; left: 0; top: 0; z-index: 2; pointer-events: none; opacity: 0; transition: opacity .3s ease; filter: drop-shadow(0 2px 3px rgba(24, 27, 46, .25)); }
.ks-climber.on { opacity: 1; }
.ks-to-in.ks-made-it .ks-climber { animation: ks-made-it .7s cubic-bezier(.3, 1.6, .5, 1) 2; }
@keyframes ks-made-it { 0%, 100% { translate: 0 0; } 40% { translate: 0 -8px; } }
.ks-to-in.ks-made-it::after {
  content: "Made it!"; position: absolute; left: 50%; top: -6px; translate: -10% 0;
  font-family: Outfit, sans-serif; font-size: 12px; font-weight: 600; color: #fe5621; letter-spacing: .02em;
  animation: ks-made-it-txt 2.6s ease forwards;
}
@keyframes ks-made-it-txt { 0% { opacity: 0; transform: translateY(6px); } 15%, 75% { opacity: 1; transform: none; } 100% { opacity: 0; } }
@media (prefers-reduced-motion: reduce) { .ks-to-in.ks-made-it .ks-climber, .ks-to-in.ks-made-it::after { animation: none; } .ks-to-in.ks-made-it::after { display: none; } }