@import url("https://fonts.googleapis.com/css2?family=Creepster&display=swap");

.footer-copy {
  position: relative;
  z-index: 101;
  display: inline-block;
  border-radius: 3px;
  outline: none;
  cursor: pointer;
  transition: color .25s ease, text-shadow .3s ease, transform .25s ease;
}

.footer-copy.is-active,
.footer-copy:focus-visible {
  color: #fff;
  text-shadow: 0 0 7px rgba(184, 204, 255, .86), 0 0 20px rgba(133, 159, 255, .5);
  transform: translateY(-1px);
}

.footer-copy.is-halloween.is-active {
  z-index: 111;
  color: #ff0022;
  text-shadow: 0 0 8px rgba(255, 0, 34, .95), 0 0 24px rgba(209, 0, 28, .72);
}

.footer-copy:focus-visible {
  outline: 1px solid rgba(180, 195, 255, .68);
  outline-offset: 6px;
}

.footer-snow-canvas {
  position: fixed;
  z-index: 120;
  inset: 0;
  display: block;
  width: 100vw;
  height: 100vh;
  height: 100dvh;
  opacity: 0;
  pointer-events: none;
  transition: opacity .28s ease;
}

.footer-snow-canvas.is-active {
  opacity: .88;
}

.footer-spooky-overlay {
  position: fixed;
  z-index: 110;
  inset: 0;
  display: grid;
  place-items: center;
  overflow: hidden;
  background: rgba(5, 2, 8, 0);
  opacity: 0;
  pointer-events: none;
  transition: opacity .7s ease, background-color .7s ease;
}

.footer-spooky-overlay.is-active {
  background: rgba(5, 2, 8, .46);
  opacity: 1;
}

.footer-spooky-title {
  position: relative;
  z-index: 1;
  width: min(100vw - 28px, 1000px);
  max-width: 100%;
  padding: 24px;
  text-align: center;
  opacity: 0;
  transform: perspective(700px) translateY(8px) translateZ(-220px) rotateX(10deg) scale(.72);
  transform-origin: center;
  transition: opacity 1.1s ease, transform 1.1s cubic-bezier(.16, 1, .3, 1);
}

.footer-spooky-overlay.is-active .footer-spooky-title {
  opacity: 1;
  transform: perspective(700px) translateY(0) translateZ(0) rotateX(0) scale(1);
}

.footer-spooky-heading {
  color: #fff1df;
  font: 400 clamp(62px, 22vw, 190px)/.95 "Creepster", Impact, "Arial Black", cursive;
  letter-spacing: .025em;
  display: block;
  max-width: 100%;
  text-wrap: balance;
  overflow-wrap: anywhere;
  text-shadow: 0 0 3px #fff, 0 0 12px rgba(255, 121, 37, .9), 0 0 34px rgba(211, 50, 20, .72);
}

@media (max-width: 768px) {
  .footer-spooky-title {
    width: min(100vw - 20px, 100%);
    padding: 12px 10px;
  }

  .footer-spooky-heading {
    font-size: clamp(46px, 17vw, 120px);
    line-height: .82;
    letter-spacing: .02em;
  }
}

.footer-spooky-overlay.is-active .footer-spooky-heading {
  animation: spooky-neon-flicker 4s ease-in-out 1.1s infinite;
}

@keyframes spooky-neon-flicker {
  0%, 50%, 100% { opacity: 1; }
  25%, 75% { opacity: .86; }
}

.footer-spooky-particle {
  position: absolute;
  top: calc(50% - clamp(500px, 15vw, 220px));
  left: calc(50% + var(--x));
  font: 46px/1 "Apple Color Emoji", "Segoe UI Emoji", sans-serif;
  opacity: 0;
  will-change: transform, opacity;
  animation: halloween-fall var(--fall-duration) linear var(--fall-delay) infinite backwards;
}

@keyframes halloween-fall {
  0% { opacity: 0; transform: translate3d(0, -18px, 0) rotate(0); }
  8% { opacity: .85; }
  100% { opacity: .85; transform: translate3d(var(--fall-sway), 110vh, 0) rotate(var(--fall-spin)); }
}