.fei-sighting {
  position: absolute;
  z-index: 2;
  left: var(--fei-left, 72%);
  top: var(--fei-top, 22%);
  height: var(--fei-height, 35%);
  opacity: var(--fei-opacity, .18);
  pointer-events: none;
  filter: saturate(.7) brightness(.6) drop-shadow(0 12px 20px rgba(0, 0, 0, .8));
  transform: translateX(-50%);
  transform-origin: center;
  mix-blend-mode: screen;
}

.fei-sighting--flipped { transform: translateX(-50%) scaleX(-1); }
.fei-sighting img { display: block; width: auto; height: 100%; }

.fei-sighting::after {
  content: "";
  position: absolute;
  inset: 66% 4% -5%;
  background: radial-gradient(ellipse, rgba(120, 36, 60, .24), transparent 68%);
  filter: blur(12px);
}

body.rooftop-just-unlocked #site-nav a[href="rooftop.html"] {
  color: #fff;
  text-shadow: 0 0 15px rgba(149, 99, 255, .95);
}

@media (min-width: 901px) and (prefers-reduced-motion: no-preference) {
  .fei-sighting { animation: fei-haze 8s ease-in-out infinite alternate; }
  @keyframes fei-haze {
    from { opacity: .1; }
    to { opacity: var(--fei-opacity, .18); }
  }
}

@media (max-width: 900px) {
  .fei-sighting { height: min(var(--fei-height, 35%), 31vw); }
}

@media (max-width: 650px) {
  .fei-sighting { opacity: .12; }
}

@media (prefers-reduced-motion: reduce) {
  .fei-sighting { animation: none; }
}