/* entrance-ghosts@1 — next-gen CSS ghosts from Hector Build / SpectralHX language
   Palette: vanta / cobalt / uranium. Prefers-reduced-motion safe. */

.de-ghosts {
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 1;
  overflow: hidden;
}

.de-ghost {
  position: absolute;
  width: clamp(56px, 9vw, 88px);
  height: clamp(56px, 9vw, 88px);
  opacity: 0.55;
  filter: drop-shadow(0 0 18px rgb(0 71 171 / 0.55)) drop-shadow(0 0 28px rgb(225 255 0 / 0.18));
  will-change: transform, opacity, filter;
  animation: de-ghost-drift 18s ease-in-out infinite, de-ghost-dance 2.2s ease-in-out infinite;
}

.de-ghost img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  display: block;
  mix-blend-mode: screen;
  opacity: 0.92;
}

.de-ghost::after {
  content: "";
  position: absolute;
  inset: 18% 22% auto;
  height: 55%;
  border-radius: 50%;
  background: radial-gradient(circle, rgb(225 255 0 / 0.35), transparent 70%);
  filter: blur(10px);
  animation: de-ghost-glow 3.4s ease-in-out infinite;
  pointer-events: none;
}

.de-ghost--1 { left: 6%; top: 22%; animation-delay: 0s, 0s; animation-duration: 20s, 2.4s; }
.de-ghost--2 { right: 8%; top: 28%; animation-delay: -4s, -0.4s; animation-duration: 22s, 1.9s; opacity: 0.42; }
.de-ghost--3 { left: 14%; bottom: 18%; animation-delay: -9s, -0.8s; animation-duration: 24s, 2.6s; opacity: 0.38; width: clamp(44px, 7vw, 68px); height: clamp(44px, 7vw, 68px); }
.de-ghost--4 { right: 16%; bottom: 22%; animation-delay: -13s, -1.1s; animation-duration: 19s, 2.1s; opacity: 0.48; }
.de-ghost--foreman {
  right: 4%;
  bottom: 10%;
  width: clamp(72px, 11vw, 110px);
  height: clamp(72px, 11vw, 110px);
  opacity: 0.7;
  animation: de-foreman-bob 3.2s ease-in-out infinite, de-ghost-glow 4s ease-in-out infinite;
  filter: drop-shadow(0 0 24px rgb(225 255 0 / 0.35)) drop-shadow(0 0 40px rgb(0 71 171 / 0.45));
}

.de-ghost-orbit {
  position: absolute;
  left: 50%;
  top: 42%;
  width: 0;
  height: 0;
  animation: de-orbit-spin 16s linear infinite;
}
.de-ghost-orbit .de-ghost {
  position: absolute;
  left: 0;
  top: 0;
  margin: -36px;
  animation: de-ghost-dance 1.8s ease-in-out infinite;
  transform: translateX(min(38vw, 220px));
}

.de-ghost-smoke {
  position: absolute;
  bottom: 12%;
  left: 50%;
  width: 10px;
  height: 10px;
  border-radius: 999px;
  background: rgb(122 140 168 / 0.35);
  animation: de-smoke-rise 5s ease-out infinite;
}
.de-ghost-smoke:nth-child(1) { animation-delay: 0s; margin-left: -40px; }
.de-ghost-smoke:nth-child(2) { animation-delay: 1.2s; margin-left: 10px; }
.de-ghost-smoke:nth-child(3) { animation-delay: 2.4s; margin-left: 50px; }

@keyframes de-ghost-drift {
  0%, 100% { transform: translate3d(0, 0, 0) scale(1); }
  25% { transform: translate3d(18px, -22px, 0) scale(1.04); }
  50% { transform: translate3d(-12px, 14px, 0) scale(0.96); }
  75% { transform: translate3d(10px, 8px, 0) scale(1.02); }
}
@keyframes de-ghost-dance {
  0%, 100% { transform: translateY(0) rotate(0deg); }
  25% { transform: translateY(-6px) rotate(-7deg); }
  75% { transform: translateY(-4px) rotate(7deg); }
}
@keyframes de-ghost-glow {
  0%, 100% { opacity: 0.45; filter: blur(10px); }
  50% { opacity: 0.95; filter: blur(16px); }
}
@keyframes de-foreman-bob {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-10px); }
}
@keyframes de-orbit-spin {
  from { transform: rotate(0deg); }
  to { transform: rotate(360deg); }
}
@keyframes de-smoke-rise {
  0% { opacity: 0.45; transform: translate(-50%, 0) scale(0.5); }
  100% { opacity: 0; transform: translate(-50%, -4.5rem) scale(1.6); }
}

@media (prefers-reduced-motion: reduce) {
  .de-ghost,
  .de-ghost--foreman,
  .de-ghost-orbit,
  .de-ghost-smoke,
  .de-ghost::after {
    animation: none !important;
  }
  .de-ghost { opacity: 0.35; }
}