@font-face {
  font-family: 'Mountains of Christmas';
  src: url('fonts/mountains-of-christmas/MountainsofChristmas-Regular.ttf') format('truetype');
  font-style: normal;
  font-weight: 400;
  font-display: swap;
}
.halloween-letters {
  position: fixed;
  inset: 0;
  z-index: 3;
  overflow: hidden;
  pointer-events: none;
  user-select: none;
  padding: env(safe-area-inset-top) env(safe-area-inset-right) env(safe-area-inset-bottom) env(safe-area-inset-left);
}
.halloween-letter {
  position: absolute;
  display: block;
  width: max-content;
  height: auto;
  white-space: pre;
  text-transform: uppercase;
  font-family: 'Mountains of Christmas', serif;
  font-weight: 400;
  line-height: 1.15;
  text-align: center;
  color: #d8d8d8;
  filter: brightness(.8);
  text-shadow: 0 0 4px rgba(255, 255, 255, .16), 0 1px 1px rgba(0, 0, 0, .35);
  opacity: 0;
  pointer-events: none;
  transform-origin: 50% 50%;
  animation: halloween-letter-turn var(--life) linear both;
}
@keyframes halloween-letter-turn {
  0% { opacity: 0; transform: rotate(var(--tilt-from)); }
  24% { opacity: .65; }
  65% { opacity: .52; }
  100% { opacity: 0; transform: rotate(var(--tilt-to)); }
}
@media (prefers-reduced-motion: reduce) {
  .halloween-letter { animation-name: halloween-letter-fade; }
  .halloween-letter-wrap { transform: none !important; }
}
@keyframes halloween-letter-fade {
  0%, 100% { opacity: 0; }
  30%, 65% { opacity: .5; }
}

.halloween-letter-measure { visibility: hidden; animation: none; transform: none; }

.halloween-letter-wrap { position: absolute; left: 0; top: 0; pointer-events: none; }

.halloween-letter-hover {
  --hover-scale: 1;
  position: absolute; left: 0; top: 0; pointer-events: none;
  animation: halloween-letter-hover var(--hover-period) ease-in-out var(--hover-phase) infinite;
}
@keyframes halloween-letter-hover {
  0%, 100% { transform: translate3d(0, calc(-1 * var(--hover-amplitude) * var(--hover-scale)), 0); }
  50% { transform: translate3d(0, calc(var(--hover-amplitude) * var(--hover-scale)), 0); }
}
@media (prefers-reduced-motion: reduce) {
  .halloween-letter-hover {
    --hover-scale: .35;
    animation-duration: calc(var(--hover-period) * 1.6);
    animation-delay: calc(var(--hover-phase) * 1.6);
  }
}