/* Halloween 2026 — floating smiling ghosts */
@media (prefers-reduced-motion: reduce) {
  .ssh-ghosts { display: none !important; }
}

.ssh-ghosts {
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 3;
  overflow: hidden;
}
.ssh-ghost {
  position: absolute;
  width: var(--gsize, 56px);
  height: calc(var(--gsize, 56px) * 1.25);
  opacity: 0;
  animation-name: ghostDrift, ghostFade;
  animation-timing-function: linear, ease-in-out;
  animation-iteration-count: infinite, infinite;
  filter: drop-shadow(0 6px 10px rgba(44,38,31,.12));
}
.ssh-ghost svg { width: 100%; height: 100%; display: block; }

@keyframes ghostDrift {
  0%   { transform: translate3d(0, 0, 0) rotate(-4deg); }
  25%  { transform: translate3d(18vw, -8vh, 0) rotate(5deg); }
  50%  { transform: translate3d(42vw, 6vh, 0) rotate(-3deg); }
  75%  { transform: translate3d(68vw, -10vh, 0) rotate(6deg); }
  100% { transform: translate3d(95vw, 4vh, 0) rotate(-2deg); }
}
@keyframes ghostFade {
  0%, 100% { opacity: 0; }
  12% { opacity: .322; }
  50% { opacity: .55; }
  88% { opacity: .32; }
}

.ssh-ghost:nth-child(1) { top: 12%; left: -8%; --gsize: 52px; animation-duration: 28s, 28s; animation-delay: 0s, 0s; }
.ssh-ghost:nth-child(2) { top: 38%; left: -12%; --gsize: 70px; animation-duration: 36s, 36s; animation-delay: -8s, -8s; }
.ssh-ghost:nth-child(3) { top: 62%; left: -10%; --gsize: 44px; animation-duration: 24s, 24s; animation-delay: -14s, -14s; }
.ssh-ghost:nth-child(4) { top: 22%; left: -15%; --gsize: 60px; animation-duration: 42s, 42s; animation-delay: -20s, -20s; }
.ssh-ghost:nth-child(5) { top: 72%; left: -6%; --gsize: 48px; animation-duration: 31s, 31s; animation-delay: -5s, -5s; }

/* reverse floaters */
.ssh-ghost.rev {
  animation-name: ghostDriftRev, ghostFade;
}
@keyframes ghostDriftRev {
  0%   { transform: translate3d(100vw, 0, 0) rotate(4deg); }
  50%  { transform: translate3d(40vw, 10vh, 0) rotate(-5deg); }
  100% { transform: translate3d(-20vw, -6vh, 0) rotate(3deg); }
}
.ssh-ghost:nth-child(3).rev, .ssh-ghost:nth-child(5).rev { animation-name: ghostDriftRev, ghostFade; }