/* Rare seasonal characters. Decorative, non-interactive and motion-safe. */
.seasonal-crossing {
  position: fixed;
  z-index: 10000;
  top: var(--seasonal-top, 50vh);
  left: 0;
  width: 118px;
  height: 74px;
  pointer-events: none;
  user-select: none;
  transform: translate3d(-150px, 0, 0) scale(var(--seasonal-scale, 1));
  transform-origin: center;
  animation: seasonal-cross-screen var(--seasonal-duration, 8s) linear forwards;
  contain: layout style;
  will-change: transform;
}

.seasonal-crossing.is-reverse {
  right: 0;
  left: auto;
  transform: translate3d(150px, 0, 0) scaleX(-1) scale(var(--seasonal-scale, 1));
  animation-name: seasonal-cross-screen-reverse;
}

.seasonal-character {
  position: absolute;
  z-index: 2;
  display: block;
  font-family: "Segoe UI Emoji", "Apple Color Emoji", sans-serif;
  line-height: 1;
  filter: drop-shadow(0 6px 5px rgba(18, 45, 52, .2));
}

.seasonal-character--spider {
  left: 24px;
  bottom: 2px;
  animation: seasonal-spider-scuttle .3s ease-in-out infinite alternate;
}

.seasonal-character--spider img {
  display: block;
  width: 64px;
  height: 64px;
  object-fit: contain;
}

.seasonal-thread {
  position: absolute;
  bottom: 19px;
  left: 0;
  width: 43px;
  height: 1px;
  opacity: .42;
  background: linear-gradient(90deg, transparent, #344956);
}

.seasonal-character--santa {
  right: 5px;
  bottom: 7px;
  display: flex;
  align-items: flex-end;
  gap: 0;
  font-size: 45px;
  animation: seasonal-santa-float 1.1s ease-in-out infinite alternate;
}

.seasonal-character--santa > span:last-child {
  margin-left: -9px;
  font-size: 50px;
}

.seasonal-trail {
  position: absolute;
  right: 83px;
  bottom: 21px;
  width: 62px;
  height: 22px;
  opacity: .72;
  background: radial-gradient(circle, #fff 0 2px, transparent 3px) 0 0 / 18px 12px;
  animation: seasonal-snow-trail .65s linear infinite;
}

.seasonal-character--bunny {
  left: 25px;
  bottom: 3px;
  font-size: 53px;
  animation: seasonal-bunny-hop .52s cubic-bezier(.3, 0, .7, 1) infinite;
}

.seasonal-dust {
  position: absolute;
  left: 4px;
  bottom: 8px;
  width: 42px;
  height: 18px;
  opacity: .4;
  background: radial-gradient(circle, #d9b88d 0 2px, transparent 3px) 0 0 / 13px 11px;
  animation: seasonal-dust-drift .7s linear infinite;
}

@keyframes seasonal-cross-screen {
  from { transform: translate3d(-150px, 0, 0) scale(var(--seasonal-scale, 1)); }
  to { transform: translate3d(calc(100vw + 150px), 0, 0) scale(var(--seasonal-scale, 1)); }
}

@keyframes seasonal-cross-screen-reverse {
  from { transform: translate3d(150px, 0, 0) scaleX(-1) scale(var(--seasonal-scale, 1)); }
  to { transform: translate3d(calc(-100vw - 150px), 0, 0) scaleX(-1) scale(var(--seasonal-scale, 1)); }
}

@keyframes seasonal-spider-scuttle {
  from { transform: translateY(0) rotate(-4deg); }
  to { transform: translateY(-3px) rotate(4deg); }
}

@keyframes seasonal-santa-float {
  from { transform: translateY(2px) rotate(-1deg); }
  to { transform: translateY(-6px) rotate(2deg); }
}

@keyframes seasonal-snow-trail {
  from { transform: translateX(12px); opacity: .72; }
  to { transform: translateX(-12px); opacity: .15; }
}

@keyframes seasonal-bunny-hop {
  0%, 100% { transform: translateY(0) rotate(0); }
  45% { transform: translateY(-18px) rotate(-5deg); }
  65% { transform: translateY(-15px) rotate(3deg); }
}

@keyframes seasonal-dust-drift {
  from { transform: translateX(10px); opacity: .45; }
  to { transform: translateX(-13px); opacity: .08; }
}

@media (prefers-reduced-motion: reduce) {
  .seasonal-crossing {
    display: none;
    animation: none;
  }
}

/* The spider roams in both axes; Santa and the bunny retain their crossing. */
.seasonal-crossing--halloween,
.seasonal-crossing--halloween.is-reverse {
  top: 0;
  left: 0;
  right: auto;
  width: 64px;
  height: 64px;
  animation: none;
  transform: translate3d(-100px, -100px, 0);
}
.seasonal-crossing--halloween .seasonal-character--spider {
  left: 0;
  bottom: 0;
}
.seasonal-crossing--halloween .seasonal-thread { display: none; }