.singularity-hero {
  grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr);
  gap: clamp(2rem, 4vw, 4rem);
}

/* Retain the original pin-dot field and give it a slow drift and shimmer. */
.singularity-hero::before {
  animation: singularity-stars 12s ease-in-out infinite alternate;
}

.singularity-hud {
  position: relative;
  justify-self: end;
  width: min(100%, 390px);
  aspect-ratio: 1;
  perspective: 900px;
  pointer-events: none;
}

.singularity-hud-screen {
  position: absolute;
  inset: 6%;
  display: grid;
  place-items: center;
  transform: rotateY(-9deg) rotateZ(-3deg);
  animation: singularity-hud-drift 18.333333s ease-in-out infinite alternate;
}

.singularity-hud-screen img {
  display: block;
  width: 88%;
  height: auto;
  mix-blend-mode: screen;
  filter: drop-shadow(0 0 18px rgba(255, 135, 42, .15));
  mask-image: radial-gradient(ellipse, #000 25%, rgba(0, 0, 0, .85) 42%, rgba(0, 0, 0, .3) 60%, transparent 75%);
}

@keyframes singularity-hud-drift {
  from { transform: rotateY(-9deg) rotateZ(-3deg); }
  to { transform: rotateY(3deg) rotateZ(3deg); }
}

@keyframes singularity-stars {
  from { opacity: .32; background-position: 0 0, 0 0; }
  to { opacity: .58; background-position: 10px -8px, -7px 12px; }
}

@media (max-width: 900px) {
  .singularity-hero { grid-template-columns: minmax(0, 1fr); gap: 2rem; }
  .singularity-hud { justify-self: center; width: min(78vw, 340px); }
}

@media (prefers-reduced-motion: reduce) {
  .singularity-hero::before, .singularity-hud-screen { animation: none; }
}