@import url("zenvix-typography-polish.css");

/*
 * WordPress integration adapter for the Zenvix 3D homepage.
 * Scoped entirely to body.zenvix-3d-active so it can never leak onto any
 * other page. zenvix-lab.css (the immutable source-of-truth design) is
 * never edited — this file only (a) guards against WordPress core/global
 * styles bleeding into the bare template, and (b) positions the new VIX
 * rig canvas exactly over the existing .zl-vix-main image inside the
 * untouched .zl-visual-frame seam.
 */
body.zenvix-3d-active {
  margin: 0;
  padding: 0;
}

/*
 * Defensive safety net: the source-of-truth markup uses WordPress core's
 * standard "screen-reader-text" class (e.g. the mobile menu button label)
 * but relies on the active theme's stylesheet to define the hiding rule.
 * Cocoon (and virtually every WP theme) already does this via wp_head(),
 * but this page bypasses the theme's own header/footer templates, so we
 * supply the standard WordPress core definition here as a guarantee.
 */
body.zenvix-3d-active .screen-reader-text {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

body.zenvix-3d-active #wpadminbar ~ .zl-app {
  margin-top: 0;
}

/* VIX rig canvas: overlays the existing image, same box, same crop. */
body.zenvix-3d-active .zl-visual-frame {
  position: relative;
}

body.zenvix-3d-active .zl-vix-rig-canvas {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  display: block;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.4s ease;
  touch-action: pan-y;
}

body.zenvix-3d-active .zl-visual-frame.zl-vix-rig-ready .zl-vix-rig-canvas {
  opacity: 1;
}

/* Once the rig is live, the static image becomes the failure fallback only. */
body.zenvix-3d-active .zl-visual-frame.zl-vix-rig-ready .zl-vix-main {
  opacity: 0;
  transition: opacity 0.4s ease;
}

body.zenvix-3d-active .zl-visual-frame.zl-vix-rig-failed .zl-vix-main {
  opacity: 1;
}

/*
 * Cinematic background canvas: fills the existing [data-zl-global-scene]
 * container (already position:fixed / inset:0 / pointer-events:none in the
 * untouched zenvix-lab.css). If it fails to boot (WebGL2 unavailable,
 * context creation error), the existing radial-gradient + grid fallback
 * baked into zenvix-lab.css remains visible underneath — nothing here
 * hides it.
 */
body.zenvix-3d-active [data-zl-global-scene] canvas {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  display: block;
  opacity: 0;
  filter: saturate(0.96) contrast(1.08);
  mix-blend-mode: normal;
  transition: opacity 0.9s cubic-bezier(0.16, 1, 0.3, 1);
}

body.zenvix-3d-active [data-zl-global-scene].zl-cinematic-ready canvas {
  opacity: 0.98;
}

/*
 * The immutable base stylesheet used screen blending and a nearly opaque
 * hero veil. That flattened every PBR material into a pale glow. Keep a
 * strong reading scrim on the copy side while allowing the physical lab
 * surfaces to remain visible around VIX.
 */
body.zenvix-3d-active .zl-global-scene {
  opacity: 1;
  background:
    radial-gradient(circle at 70% 38%, rgba(28, 116, 166, 0.14), transparent 30rem),
    linear-gradient(180deg, #02070e 0%, #040b12 54%, #02060b 100%);
}

body.zenvix-3d-active .zl-global-scene::before {
  background:
    linear-gradient(90deg, rgba(2, 7, 14, 0.88) 0%, rgba(2, 7, 14, 0.52) 38%, rgba(2, 7, 14, 0.12) 70%, rgba(2, 7, 14, 0.46) 100%),
    linear-gradient(180deg, rgba(2, 7, 14, 0.34), transparent 22%, transparent 72%, rgba(2, 7, 14, 0.7));
}

body.zenvix-3d-active .zl-global-scene::after {
  opacity: 0.08;
}

body.zenvix-3d-active .zl-hero::before {
  background:
    linear-gradient(90deg, rgba(2, 7, 17, 0.92) 0%, rgba(2, 7, 17, 0.76) 42%, rgba(2, 8, 17, 0.27) 69%, rgba(2, 8, 17, 0.12) 100%),
    radial-gradient(circle at 78% 44%, rgba(55, 188, 226, 0.08), transparent 30%);
}

body.zenvix-3d-active .zl-hero-visual {
  filter: drop-shadow(0 34px 70px rgba(0, 0, 0, 0.38));
}

body.zenvix-3d-active .zl-chamber-shell::after {
  border-color: rgba(137, 231, 255, 0.28);
  box-shadow: inset 0 1px 0 rgba(220, 250, 255, 0.08), 0 22px 80px rgba(0, 0, 0, 0.26);
}

/*
 * VIX rim-light sync: a soft cyan glow behind the chamber that pulses with
 * the reactor light in the 3D scene (--zl-scene-glow, 0..1, set from
 * zenvix-cinematic-scene.js). Purely additive — the VIX rig and its DOM
 * structure are untouched.
 */
body.zenvix-3d-active .zl-visual-frame {
  --zl-scene-glow: 0.5;
  background:
    linear-gradient(145deg, rgba(32, 96, 126, 0.5), rgba(2, 9, 17, 0.92)),
    rgba(3, 11, 19, 0.78);
  backdrop-filter: blur(8px) saturate(125%);
  -webkit-backdrop-filter: blur(8px) saturate(125%);
  box-shadow:
    inset 0 1px 0 rgba(224, 251, 255, 0.18),
    inset 0 -1px 0 rgba(88, 204, 229, 0.08),
    0 34px 90px rgba(0, 0, 0, 0.46),
    0 0 calc(30px + 40px * var(--zl-scene-glow)) rgba(56, 226, 255, calc(0.1 + 0.14 * var(--zl-scene-glow)));
  transition: box-shadow 0.2s ease;
}

/* Article discovery must be obvious from the first viewport. */
body.zenvix-3d-active .zl-hero-actions {
  flex-wrap: wrap;
}

body.zenvix-3d-active .zl-button--article-index {
  border: 1px solid rgba(71, 223, 243, 0.72);
  background: rgba(5, 20, 38, 0.78);
  color: #f7fcff;
  box-shadow: 0 0 0 1px rgba(71, 223, 243, 0.12), 0 12px 34px rgba(0, 0, 0, 0.24);
}

body.zenvix-3d-active .zl-button--article-index:hover,
body.zenvix-3d-active .zl-button--article-index:focus-visible {
  border-color: #47dff3;
  background: rgba(9, 36, 62, 0.96);
  transform: translateY(-2px);
}

body.zenvix-3d-active .zl-text-link--prominent {
  padding: 12px 18px;
  border: 1px solid rgba(71, 223, 243, 0.52);
  border-radius: 999px;
  background: rgba(4, 18, 34, 0.68);
  color: #effcff;
}

body.zenvix-3d-active .zl-header-cta {
  box-shadow: 0 0 0 1px rgba(71, 223, 243, 0.18), 0 10px 28px rgba(0, 0, 0, 0.2);
}

@media (max-width: 760px) {
  body.zenvix-3d-active .zl-global-scene::before {
    background:
      linear-gradient(180deg, rgba(2, 7, 14, 0.84) 0%, rgba(2, 7, 14, 0.54) 44%, rgba(2, 7, 14, 0.3) 72%, rgba(2, 7, 14, 0.74) 100%);
  }

  body.zenvix-3d-active .zl-hero::before {
    background:
      linear-gradient(180deg, rgba(2, 7, 17, 0.9) 0%, rgba(2, 7, 17, 0.8) 46%, rgba(2, 8, 17, 0.28) 70%, rgba(2, 8, 17, 0.52) 100%);
  }

  body.zenvix-3d-active [data-zl-global-scene].zl-cinematic-ready canvas {
    opacity: 0.72;
  }

  body.zenvix-3d-active .zl-button--article-index {
    width: 100%;
    justify-content: center;
  }
}

@media (prefers-reduced-motion: reduce), (prefers-reduced-transparency: reduce) {
  body.zenvix-3d-active [data-zl-global-scene] canvas {
    transition: none;
  }

  body.zenvix-3d-active .zl-visual-frame {
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
    background: #071525;
  }
}