/* ============================================================
   JAXON.AI HUB — Cinematic shell (scoped to /demo only).

   This does NOT replace the product. It frames the real PRIME
   HUB screens (rendered by demo/demo.js) as a console floating
   in a dark theatre: deep-space backdrop behind, a soft signal
   focus around the screen, and a gentle grain + vignette grade
   on top. The marketing site is untouched.
   ============================================================ */

:root {
  --space:      #08090B;
  --void:       #050507;
  --signal:     #9CB4E4;
  --signal-line:rgba(156, 180, 228, 0.42);
}

/* Deep-space stage. */
.demo-stage {
  position: relative;
  background:
    radial-gradient(ellipse at 50% 36%,
      #0b0e15 0%, #08090b 52%, #050507 100%);
  min-height: 100svh;
}

/* Backdrop canvas (atmosphere) sits behind everything. */
.cine-bg {
  position: fixed; inset: 0; width: 100vw; height: 100vh;
  display: block; z-index: 0; pointer-events: none;
}

/* All real content sits above the backdrop. */
.demo-bar, #demo-main, .demo-static, .demo-foot {
  position: relative; z-index: 2;
}

/* Robust height: never let the product viewport collapse. */
#demo-main { flex: 1 1 auto; min-height: 0; display: flex; flex-direction: column; }
.demo-viewport {
  flex: 1 1 auto; position: relative;
  min-height: clamp(360px, 60vh, 860px);
}

/* A soft signal focus behind the console — a deliberate cinematic
   glow (radial, not a drop shadow, so it stays on-brand). */
.demo-viewport::before {
  content: ''; position: absolute; inset: 0; z-index: 0;
  pointer-events: none;
  background: radial-gradient(58% 60% at 50% 48%,
    rgba(156, 180, 228, 0.10), rgba(156, 180, 228, 0.03) 45%, transparent 72%);
}

/* The product screen as a premium console in the theatre. */
.demo-screen {
  z-index: 1;
  border-color: var(--signal-line) !important;
  background: rgba(8, 9, 11, 0.92) !important;
  backdrop-filter: blur(2px);
}

/* Gentle grade over the whole stage — vignette + fine grain.
   Kept subtle so product text stays perfectly legible. */
.cine-grade {
  position: fixed; inset: 0; z-index: 5; pointer-events: none;
  background: radial-gradient(125% 125% at 50% 42%,
    transparent 44%, rgba(5, 5, 7, 0.46) 82%, var(--void) 100%);
}
.cine-grade::after {
  content: ''; position: absolute; inset: 0; opacity: 0.04;
  mix-blend-mode: overlay;
  background-image: url("data:image/svg+xml;utf8,\
<svg xmlns='http://www.w3.org/2000/svg' width='120' height='120'>\
<filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2'/>\
<feColorMatrix type='saturate' values='0'/></filter>\
<rect width='120' height='120' filter='url(%23n)' opacity='0.6'/></svg>");
  background-size: 200px 200px;
}

/* ---- Intro: fragmented systems converge into JAXON.AI HUB ---- */
.intro { position: absolute; inset: 0; overflow: hidden;
  display: block; padding: 0; }
.intro__field { position: absolute; inset: 0; }
.intro__chip {
  position: absolute; display: inline-flex; align-items: center; gap: 8px;
  border: 1px solid var(--signal-line);
  background: rgba(8, 9, 11, 0.66);
  padding: 7px 12px; white-space: nowrap; will-change: transform, opacity;
}
.intro__chip img {
  width: 16px; height: 16px; object-fit: contain;
  filter: grayscale(1) brightness(1.7); opacity: 0.9;
}
.intro__chip b {
  font-family: var(--font-mono, 'JetBrains Mono', monospace);
  font-weight: 500; font-size: 10.5px; letter-spacing: 0.1em;
  text-transform: uppercase; color: rgba(243, 243, 240, 0.7);
}
.intro__core {
  position: absolute; left: 50%; top: 50%;
  transform: translate(-50%, -50%); text-align: center; max-width: 30ch;
}
.intro__core .intro__k {
  font-family: var(--font-mono, 'JetBrains Mono', monospace);
  font-weight: 500; font-size: clamp(22px, 3.4vw, 44px);
  letter-spacing: 0.3em; text-transform: uppercase; color: #F3F3F0;
}
.intro__core .intro__rule {
  width: 72px; height: 1px; background: var(--signal);
  margin: 22px auto;
}
.intro__core .intro__line {
  font-family: 'Inter', sans-serif; font-weight: 500;
  font-size: clamp(15px, 1.7vw, 21px); line-height: 1.4; color: #F3F3F0;
}
.intro__core .intro__line .dim { color: rgba(243, 243, 240, 0.55); }

@media (prefers-reduced-motion: reduce) {
  .demo-screen { backdrop-filter: none; }
}
@media (max-width: 760px) {
  .cine-grade { background: radial-gradient(140% 140% at 50% 42%,
    transparent 50%, rgba(5,5,7,0.4) 86%, var(--void) 100%); }
}