/*
  WebGPU visual compositor.
  Lightweight procedural "video texture" layer for the desktop HUD.
*/

:root {
  --visual-x: 0.5;
  --visual-y: 0.52;
  --visual-energy: 0;
  --visual-gesture: 0;
  --visual-shift-x: 0px;
  --visual-shift-y: 0px;
}

.hologram-stage {
  isolation: isolate;
}

.visual-video-texture {
  position: absolute;
  left: 50%;
  top: 52%;
  z-index: 0;
  width: min(92%, 820px);
  aspect-ratio: 1;
  pointer-events: none;
  object-fit: cover;
  opacity: calc(0.34 + (var(--visual-energy) * 0.12));
  mix-blend-mode: screen;
  filter:
    saturate(1.18)
    contrast(1.08)
    brightness(0.92)
    drop-shadow(0 0 34px rgba(255, 176, 32, 0.22));
  -webkit-mask-image: radial-gradient(circle at 50% 52%, black 0 46%, rgba(0, 0, 0, 0.72) 60%, transparent 76%);
  mask-image: radial-gradient(circle at 50% 52%, black 0 46%, rgba(0, 0, 0, 0.72) 60%, transparent 76%);
  transform:
    translate(calc(-50% + (var(--visual-shift-x) * -0.22)), calc(-50% + (var(--visual-shift-y) * -0.18)))
    scale(calc(1.02 + (var(--visual-energy) * 0.015)));
  transition: opacity 180ms ease-out, filter 180ms ease-out, transform 180ms ease-out;
  will-change: opacity, filter, transform;
}

.visual-video-texture::cue {
  display: none;
}

.webgpu-compositor {
  position: absolute;
  inset: -1px;
  z-index: 1;
  width: calc(100% + 2px);
  height: calc(100% + 2px);
  pointer-events: none;
  mix-blend-mode: screen;
  opacity: calc(0.22 + (var(--visual-energy) * 0.18));
  filter:
    saturate(calc(1.02 + (var(--visual-energy) * 0.3)))
    contrast(1.04)
    brightness(calc(0.84 + (var(--visual-energy) * 0.12)));
  transform:
    translate3d(var(--visual-shift-x), var(--visual-shift-y), 0)
    scale(calc(1 + (var(--visual-energy) * 0.012)));
  transition: opacity 180ms ease-out, filter 180ms ease-out;
  will-change: opacity, filter, transform;
}

.webgpu-compositor.is-fallback {
  opacity: calc(0.18 + (var(--visual-energy) * 0.14));
}

.visual-scanfield,
.visual-energy-vignette {
  position: absolute;
  inset: 0;
  pointer-events: none;
}

.visual-scanfield {
  z-index: 2;
  mix-blend-mode: screen;
  opacity: calc(0.08 + (var(--visual-energy) * 0.12));
  background:
    repeating-linear-gradient(
      180deg,
      rgba(0, 212, 255, 0.11) 0,
      rgba(0, 212, 255, 0.11) 1px,
      transparent 1px,
      transparent 8px
    ),
    linear-gradient(
      90deg,
      transparent,
      rgba(255, 176, 32, 0.08),
      transparent
    );
  mask-image: radial-gradient(circle at calc(var(--visual-x) * 100%) calc(var(--visual-y) * 100%), black 0, rgba(0, 0, 0, 0.76) 34%, transparent 78%);
}

.visual-energy-vignette {
  z-index: 2;
  mix-blend-mode: screen;
  opacity: calc(0.11 + (var(--visual-energy) * 0.22));
  background:
    radial-gradient(
      circle at calc(var(--visual-x) * 100%) calc(var(--visual-y) * 100%),
      rgba(255, 176, 32, 0.24),
      rgba(0, 212, 255, 0.12) 18%,
      transparent 46%
    ),
    radial-gradient(circle at 50% 52%, rgba(255, 176, 32, 0.12), transparent 58%);
  transform:
    translate3d(calc(var(--visual-shift-x) * -0.35), calc(var(--visual-shift-y) * -0.35), 0)
    scale(calc(1 + (var(--visual-gesture) * 0.018)));
  transition: opacity 160ms ease-out;
}

body.visual-webgpu .holo-engine-canvas,
body.visual-webgpu .reactor-hud {
  filter:
    saturate(calc(1.08 + (var(--visual-energy) * 0.28)))
    drop-shadow(0 0 calc(14px + (var(--visual-energy) * 12px)) rgba(255, 176, 32, 0.28));
}

body.visual-webgpu.is-gesture .webgpu-compositor,
body.visual-webgpu.is-processing .webgpu-compositor,
.hologram-stage.is-interacting .webgpu-compositor {
  opacity: calc(0.32 + (var(--visual-energy) * 0.18));
}

body.visual-webgpu.is-gesture .visual-energy-vignette,
body.visual-webgpu.is-processing .visual-energy-vignette,
.hologram-stage.is-interacting .visual-energy-vignette {
  opacity: calc(0.2 + (var(--visual-energy) * 0.28));
}

body.visual-webgpu.is-gesture .visual-video-texture,
body.visual-webgpu.is-processing .visual-video-texture,
.hologram-stage.is-interacting .visual-video-texture {
  opacity: calc(0.42 + (var(--visual-energy) * 0.14));
  filter:
    saturate(1.28)
    contrast(1.12)
    brightness(0.98)
    drop-shadow(0 0 40px rgba(255, 176, 32, 0.28));
}

@supports not (mix-blend-mode: screen) {
  .webgpu-compositor,
  .visual-video-texture,
  .visual-scanfield,
  .visual-energy-vignette {
    mix-blend-mode: normal;
  }
}

@media (prefers-reduced-motion: reduce) {
  .visual-video-texture {
    opacity: 0.24;
  }

  .webgpu-compositor {
    opacity: 0.16;
    filter: saturate(1.05) contrast(1.02);
    transition-duration: 80ms;
  }

  .visual-scanfield,
  .visual-energy-vignette {
    opacity: 0.12;
  }
}

@media (max-width: 700px) {
  .hologram-stage {
    min-height: 500px;
  }

  .hologram-stage .processing-matrix {
    top: 118px;
    left: 12px;
    right: 12px;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    opacity: 0.2;
  }

  .hologram-stage .process-cell:nth-child(n + 13),
  .hologram-stage .telemetry-node,
  .hologram-stage .interaction-status {
    display: none;
  }

  .hologram-stage .projection-title {
    left: 14px;
    right: 14px;
    top: 16px;
    max-width: calc(100% - 28px);
  }

  .hologram-stage .projection-title strong {
    font-size: clamp(15px, 5vw, 19px);
    line-height: 1.15;
  }

  .hologram-stage .projection-title .muted {
    max-width: 24ch;
  }

  .hologram-stage .process-console {
    left: 12px;
    right: 12px;
    bottom: 12px;
    min-width: 0;
    max-width: none;
    max-height: 124px;
    overflow: hidden;
    opacity: 0.86;
  }

  .hologram-stage .process-stream .process-line:nth-child(n + 4) {
    display: none;
  }

  .hologram-stage .vehicle-holo {
    top: 58%;
    width: min(92vw, 430px);
  }

  .hologram-stage .reactor-hud {
    width: min(92vw, 430px);
  }

  .hologram-stage .visual-video-texture {
    width: min(108vw, 460px);
  }
}