/* Void Colonies – Slim Colony Header */
.void-colony-header-slim {
  --vc-radius: 16px;
  --vc-border: rgba(0, 217, 255, 0.34);
  --vc-bg: #020812;
  position: relative;
  width: 100%;
  min-height: 150px;
  height: clamp(150px, 18vw, 220px);
  overflow: hidden;
  border-radius: var(--vc-radius);
  border: 1px solid var(--vc-border);
  background: var(--vc-bg);
  box-shadow:
    inset 0 0 0 1px rgba(130, 230, 255, 0.05),
    inset 0 0 24px rgba(0, 170, 255, 0.10),
    0 0 22px rgba(0, 170, 255, 0.06);
  isolation: isolate;
}

.void-colony-header-slim__image,
.void-colony-header-slim__fx,
.void-colony-header-slim__glow,
.void-colony-header-slim__scanlines,
.void-colony-header-slim__vignette { position: absolute; inset: 0; }

.void-colony-header-slim__image {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  transform: translate3d(0,0,0) scale(1.03);
  filter: saturate(1.06) contrast(1.05) brightness(0.95);
  z-index: 1;
  will-change: transform;
}

.void-colony-header-slim__fx {
  width: 100%;
  height: 100%;
  display: block;
  z-index: 3;
  pointer-events: none;
  mix-blend-mode: screen;
}

.void-colony-header-slim__glow {
  z-index: 2;
  pointer-events: none;
  background:
    radial-gradient(circle at 58% 48%, rgba(0, 180, 255, 0.08), transparent 22%),
    radial-gradient(circle at 30% 58%, rgba(70, 120, 255, 0.06), transparent 16%),
    radial-gradient(circle at 78% 56%, rgba(0, 255, 180, 0.05), transparent 12%);
}

.void-colony-header-slim__vignette {
  z-index: 4;
  pointer-events: none;
  background:
    linear-gradient(90deg, rgba(0, 4, 12, 0.46), transparent 18%, transparent 82%, rgba(0, 4, 12, 0.50)),
    linear-gradient(180deg, rgba(0, 5, 14, 0.12), transparent 42%, rgba(0, 3, 10, 0.36));
}

.void-colony-header-slim__scanlines {
  z-index: 5;
  pointer-events: none;
  opacity: 0.14;
  background: repeating-linear-gradient(to bottom, rgba(155,230,255,0.05) 0px, rgba(155,230,255,0.05) 1px, transparent 1px, transparent 4px);
  mix-blend-mode: soft-light;
}

.void-colony-header-slim__hud {
  position: absolute;
  left: 14px;
  bottom: 12px;
  z-index: 6;
  display: flex;
  align-items: center;
  gap: 8px;
  pointer-events: none;
  color: rgba(196, 242, 255, 0.86);
  text-shadow: 0 0 10px rgba(0,220,255,0.32);
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", monospace;
  font-size: 10px;
  letter-spacing: 0.13em;
  text-transform: uppercase;
}

.void-colony-header-slim__hud::before {
  content: "";
  width: 6px;
  height: 6px;
  border-radius: 2px;
  background: #20dfff;
  box-shadow: 0 0 10px rgba(0,220,255,0.75);
  transform: rotate(45deg);
}

.void-colony-header-slim__hud-line {
  width: 52px;
  height: 1px;
  background: linear-gradient(90deg, rgba(0,220,255,0.04), rgba(0,220,255,0.58));
}

@media (max-width: 900px) {
  .void-colony-header-slim {
    min-height: 120px;
    height: clamp(120px, 24vw, 170px);
  }
  .void-colony-header-slim__hud {
    left: 10px;
    bottom: 8px;
    font-size: 9px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .void-colony-header-slim__image { transform: none !important; }
  .void-colony-header-slim__fx { display: none; }
}