/* ZOLVEX M19R — exact user-supplied Full-HD background artwork, visual-balance locked.
   The fixed site artwork now uses the exact user-supplied 16:9 ZOLVEX HQ bull/bear scene resized to 1920x1080:
   graphite/steel + logo green on the left + logo red on the right.
   The exact artwork remains unchanged; final display treatment is controlled by zolvex-reference-theme.css for balanced bull-green / bear-red visibility and readable content.
   The old CSS-generated HQ tag is removed so no decorative HQ text overlaps the X emblem.
   Decorative motion remains compositor-only and respects reduced motion.
   IMPORTANT: preserve the global-header z-index exclusion from M14.1. */
:root{
  --zvx-ambient-base:#010202;
  --zvx-ambient-graphite:rgba(18,20,24,.26);
  --zvx-ambient-steel:rgba(128,132,136,.052);
  --zvx-ambient-green:rgba(71,213,93,.115);
  --zvx-ambient-green-soft:rgba(34,145,58,.070);
  --zvx-ambient-red:rgba(208,57,62,.115);
  --zvx-ambient-red-soft:rgba(136,28,34,.070);
}
html{background:var(--zvx-ambient-base)}
body{position:relative;isolation:isolate;background-color:var(--zvx-ambient-base)!important}

/* Fixed artwork layer: fills the viewport, remains in place while the document scrolls. */
#zvx-ambient-bg{
  position:fixed;
  inset:-2.5vmax;
  z-index:0;
  pointer-events:none;
  overflow:hidden;
  background-color:#010202;
  background-image:
    linear-gradient(rgba(1,3,3,.56),rgba(1,3,3,.56)),
    linear-gradient(90deg,rgba(30,138,48,.090) 0%,rgba(0,0,0,0) 38%,rgba(0,0,0,0) 62%,rgba(155,31,37,.090) 100%),
    linear-gradient(180deg,rgba(2,3,4,.20) 0%,rgba(2,3,4,.11) 44%,rgba(2,3,4,.34) 100%),
    linear-gradient(90deg,rgba(0,0,0,.18) 0%,transparent 18%,transparent 82%,rgba(0,0,0,.18) 100%),
    url('/assets/hero-live/zvx-live-bg.webp');
  background-repeat:no-repeat;
  background-size:cover;
  background-position:center center;
  filter:saturate(.88) brightness(.54) contrast(1.08);
  transform:translate3d(-.2%,.08%,0) scale(1.012);
  transform-origin:center center;
  will-change:transform;
  animation:zvxAmbientArtworkDrift 38s ease-in-out infinite alternate;
}

/* Restrained dual brand glow: green/bull left, red/bear right. */
#zvx-ambient-bg::before,
#zvx-ambient-bg::after{
  content:"";
  position:absolute;
  width:min(82vw,1180px);
  height:min(82vw,1180px);
  border-radius:50%;
  will-change:transform,opacity;
  filter:blur(1px);
  transform:translate3d(0,0,0);
}
#zvx-ambient-bg::before{
  left:-30vw;
  top:-35vw;
  background:radial-gradient(circle at 48% 50%,rgba(93,238,115,.16) 0%,var(--zvx-ambient-green) 24%,var(--zvx-ambient-green-soft) 50%,transparent 76%);
  opacity:.34;
  animation:zvxAmbientA 54s ease-in-out infinite alternate;
}
#zvx-ambient-bg::after{
  right:-33vw;
  bottom:-40vw;
  background:radial-gradient(circle at 52% 50%,rgba(240,73,78,.15) 0%,var(--zvx-ambient-red) 24%,var(--zvx-ambient-red-soft) 50%,transparent 76%);
  opacity:.32;
  animation:zvxAmbientB 68s ease-in-out infinite alternate;
}
.zvx-ambient-grid{
  position:absolute;
  inset:0;
  opacity:.075;
  background-image:
    linear-gradient(rgba(222,230,226,.024) 1px,transparent 1px),
    linear-gradient(90deg,rgba(222,230,226,.020) 1px,transparent 1px);
  background-size:72px 72px;
  mask-image:linear-gradient(180deg,rgba(0,0,0,.62),rgba(0,0,0,.12) 58%,transparent 94%);
  -webkit-mask-image:linear-gradient(180deg,rgba(0,0,0,.62),rgba(0,0,0,.12) 58%,transparent 94%);
}
.zvx-ambient-vignette{
  position:absolute;
  inset:0;
  background:
    radial-gradient(ellipse at 50% 48%,rgba(0,0,0,0) 16%,rgba(18,20,24,.07) 42%,rgba(18,20,24,.16) 62%,rgba(2,3,4,.38) 100%),
    linear-gradient(90deg,rgba(0,0,0,.22) 0%,rgba(0,0,0,.07) 22%,rgba(0,0,0,0) 40%,rgba(0,0,0,0) 60%,rgba(0,0,0,.07) 78%,rgba(0,0,0,.22) 100%),
    linear-gradient(90deg,rgba(42,165,63,.030) 0%,rgba(0,0,0,0) 40%,rgba(0,0,0,0) 60%,rgba(174,41,46,.030) 100%),
    linear-gradient(180deg,rgba(16,18,22,.07),rgba(16,18,22,.20));
}
/* M19O: HQ is carried by the real header brand. Never paint decorative HQ over the emblem. */
.zvx-ambient-vignette::before,
.zvx-ambient-vignette::after{content:none!important;display:none!important}

/* Keep page content above the background layer without recreating the old header hit-test bug. */
body > :not(#zvx-ambient-bg):not(#zvx-global-header):not(script):not(style){z-index:1}
main,#zvx-global-footer,.z2-page{position:relative}

/* Let the fixed artwork remain visible throughout the page while cards/panels keep local readability. */
.z2-page{background:linear-gradient(180deg,rgba(4,5,6,.16),rgba(4,5,6,.40))!important}
.z2-path,.z2-detail,.z2-market,.z2-flow-step,.z2-stream-card,.z2-teaser{backdrop-filter:blur(3px);-webkit-backdrop-filter:blur(3px)}
#zvx-global-footer{background:rgba(4,5,6,.955)!important}

@keyframes zvxAmbientArtworkDrift{
  0%{transform:translate3d(-.28%,.12%,0) scale(1.012)}
  48%{transform:translate3d(.22%,-.18%,0) scale(1.020)}
  100%{transform:translate3d(.46%,.10%,0) scale(1.015)}
}
@keyframes zvxAmbientA{
  0%{transform:translate3d(-2.5%,-1.5%,0) scale(1.00);opacity:.27}
  50%{transform:translate3d(4%,3%,0) scale(1.055);opacity:.36}
  100%{transform:translate3d(1%,-2%,0) scale(1.025);opacity:.30}
}
@keyframes zvxAmbientB{
  0%{transform:translate3d(2.5%,2%,0) scale(1.02);opacity:.24}
  50%{transform:translate3d(-4%,-3%,0) scale(1.065);opacity:.34}
  100%{transform:translate3d(-1%,2.5%,0) scale(1.035);opacity:.28}
}

@media(max-width:900px){
  #zvx-ambient-bg{
    inset:-3.5vmax;
    background-position:center 48%;
    filter:saturate(.84) brightness(.50) contrast(1.08);
    animation-duration:48s;
  }
  .zvx-ambient-grid{background-size:58px 58px;opacity:.06}
  #zvx-ambient-bg::before,#zvx-ambient-bg::after{width:130vw;height:130vw}
  .z2-page{background:linear-gradient(180deg,rgba(4,5,6,.28),rgba(4,5,6,.54))!important}
}
@media(prefers-reduced-motion:reduce){
  #zvx-ambient-bg{animation:none!important;transform:none!important;will-change:auto}
  #zvx-ambient-bg::before,#zvx-ambient-bg::after{animation:none!important;transform:none!important;will-change:auto}
}