/* TenProtect security field. Root-only, no page stacking overrides. */
[data-vh-cinematic-background] {
  --tp-field-black: oklch(0.065 0 0);
  --tp-field-blue: oklch(0.67 0.19 250);
  --tp-field-cobalt: oklch(0.49 0.19 263);
  position: fixed;
  inset: 0;
  z-index: 0;
  isolation: isolate;
  contain: strict;
  overflow: hidden;
  pointer-events: none;
  background:
    radial-gradient(ellipse 42% 60% at 101% 9%, color-mix(in oklab, var(--tp-field-blue) 12%, transparent), transparent 77%),
    radial-gradient(ellipse 34% 44% at 1% 100%, color-mix(in oklab, var(--tp-field-cobalt) 15%, transparent), transparent 80%),
    var(--tp-field-black);
}
/* Static protective rings are visible before JS and without canvas. */
[data-vh-cinematic-background]::before {
  content: "";
  position: absolute;
  width: 880px;
  height: 880px;
  max-width: 110vw;
  max-height: 110vw;
  top: -28%;
  right: -19%;
  border-radius: 50%;
  background:
    repeating-conic-gradient(from 15deg, color-mix(in oklab, var(--tp-field-blue) 22%, transparent) 0deg 21deg, transparent 21deg 28deg);
  mask-image: radial-gradient(circle, transparent 53%, black 53.2% 53.4%, transparent 53.7% 61%, black 61.2% 61.4%, transparent 61.7% 69%, black 69.2% 69.4%, transparent 69.7%);
  transform: rotate(-16deg) scaleY(.82);
}
[data-vh-cinematic-background] > canvas { position: absolute; inset: 0; display: block; width: 100%; height: 100%; }
[data-vh-cinematic-background]::after {
  content: "";
  position: absolute;
  inset: 0;
  background:
    radial-gradient(ellipse 53% 57% at 48% 55%, var(--tp-field-black), color-mix(in oklab, var(--tp-field-black) 83%, transparent) 45%, transparent 93%),
    radial-gradient(ellipse at center, transparent 60%, color-mix(in oklab, var(--tp-field-black) 65%, transparent));
}
@media (max-width: 640px) {
  [data-vh-cinematic-background]::before { top: -4%; right: -38%; width: 650px; height: 650px; max-width: 150vw; max-height: 150vw; }
  [data-vh-cinematic-background]::after { background: radial-gradient(ellipse 100% 65% at 48% 64%, var(--tp-field-black), color-mix(in oklab, var(--tp-field-black) 80%, transparent) 52%, transparent 98%); }
}

/* PHP host stacking: existing navigation/dialogs retain their positioning. */
body.vh-cinematic{background:#000!important;isolation:isolate}body.vh-cinematic::before,body.vh-cinematic::after{display:none!important}body.vh-cinematic [data-vh-cinematic-background]{z-index:-1;background-color:#000}