/* Soft floating Deeney ghosts — wander around the page */
.floating-ghosts {
  position: fixed;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  overflow: hidden;
  transform: translate3d(0, calc(var(--hub-ghost-shift, 0) * 1px), 0);
  transition: transform 0.35s ease-out, opacity 0.45s ease;
}

html.is-scrolling .floating-ghosts {
  opacity: 0.85;
}

.floating-ghost {
  position: absolute;
  width: var(--fg-size, 96px);
  height: auto;
  opacity: var(--fg-opacity, 0.4);
  filter: drop-shadow(0 10px 22px rgba(0, 0, 0, 0.5));
  transform: translate(0, 0) rotate(var(--fg-rot, 0deg));
  animation: floating-ghost-wander var(--fg-dur, 22s) ease-in-out var(--fg-delay, 0s) infinite;
  user-select: none;
  transition: opacity 0.4s ease, filter 0.4s ease;
}

.floating-ghosts.is-static .floating-ghost {
  animation: none !important;
  filter: drop-shadow(0 8px 18px rgba(0, 0, 0, 0.4));
}

@media (min-width: 901px) {
  .floating-ghost {
    opacity: calc(var(--fg-opacity, 0.4) * 1.15);
    filter: drop-shadow(0 14px 28px rgba(0, 0, 0, 0.45));
  }
}

html.is-scrolling .floating-ghost {
  filter: drop-shadow(0 14px 28px rgba(131, 100, 199, 0.25));
}

.floating-ghost:nth-child(2n) {
  animation-name: floating-ghost-wander-b;
}

.floating-ghost:nth-child(3n) {
  animation-name: floating-ghost-wander-c;
}

@keyframes floating-ghost-wander {
  0%   { transform: translate(0, 0) rotate(var(--fg-rot, 0deg)); }
  20%  { transform: translate(48px, -56px) rotate(calc(var(--fg-rot, 0deg) + 10deg)); }
  40%  { transform: translate(-36px, -96px) rotate(calc(var(--fg-rot, 0deg) - 8deg)); }
  60%  { transform: translate(64px, -28px) rotate(calc(var(--fg-rot, 0deg) + 14deg)); }
  80%  { transform: translate(-20px, -72px) rotate(calc(var(--fg-rot, 0deg) - 4deg)); }
  100% { transform: translate(0, 0) rotate(var(--fg-rot, 0deg)); }
}

@keyframes floating-ghost-wander-b {
  0%   { transform: translate(0, 0) rotate(var(--fg-rot, 0deg)); }
  25%  { transform: translate(-60px, -40px) rotate(calc(var(--fg-rot, 0deg) - 12deg)); }
  50%  { transform: translate(30px, -110px) rotate(calc(var(--fg-rot, 0deg) + 6deg)); }
  75%  { transform: translate(-45px, -24px) rotate(calc(var(--fg-rot, 0deg) + 16deg)); }
  100% { transform: translate(0, 0) rotate(var(--fg-rot, 0deg)); }
}

@keyframes floating-ghost-wander-c {
  0%   { transform: translate(0, 0) rotate(var(--fg-rot, 0deg)); }
  33%  { transform: translate(70px, -30px) rotate(calc(var(--fg-rot, 0deg) + 18deg)); }
  66%  { transform: translate(-50px, -85px) rotate(calc(var(--fg-rot, 0deg) - 14deg)); }
  100% { transform: translate(0, 0) rotate(var(--fg-rot, 0deg)); }
}

@media (max-width: 900px) {
  .floating-ghosts {
    display: none !important;
  }
}

@media (prefers-reduced-motion: reduce) {
  .floating-ghost { animation: none; }
  .floating-ghosts {
    transform: none !important;
    transition: none;
    will-change: auto;
  }
}