/* ============================================================
   capabilities.css — 6 full-viewport animated scenes
   (search → geology → gdm → infra → econ → business).

   Ported from /export-capabilities, namespaced under `.cap-scene`
   so it can't leak into the rest of the landing.
   Loaded on landing.html / landing-en.html only.
   ============================================================ */

.cap-scenes {
  /* container for all 6 scenes; replaces old #pipeline section */
  --cap-bg:    #04060a;
  --cap-ink:   #eef4ff;
  --cap-dim:   #8ea2bf;
  --cap-faint: #52617a;
  --cap-blue:  #3b82f6;
  --cap-blue4: #60a5fa;
  --cap-blue3: #93c5fd;
  --cap-ok:    #7fe0a8;
  --cap-gas:   #f0b955;
  --cap-line:  rgba(110, 140, 200, 0.16);
  background: var(--cap-bg);
  color: var(--cap-ink);
}

.cap-scene {
  min-height: 100vh;
  display: grid;
  grid-template-columns: 1fr 1fr;
  align-items: center;
  gap: clamp(2rem, 5vw, 5rem);
  padding: 0 clamp(1.5rem, 6vw, 7rem);
  background: radial-gradient(ellipse 70% 60% at 70% 45%, #0a1322 0%, #05080e 60%, #03050a 100%);
  position: relative;
  /* Skip rendering for off-screen scenes entirely. Combined with the JS
     IntersectionObserver pause, this nukes paint cost for inactive sections. */
  content-visibility: auto;
  contain-intrinsic-size: 100vh;
  contain: layout paint style;
}
/* GDM + business charts read better with a slightly narrower text column */
.cap-scene--gdm,
.cap-scene--business { grid-template-columns: 0.9fr 1.1fr; }

.cap-scene .cap-txt { max-width: 32rem; }
.cap-scene .cap-eyebrow {
  font-family: 'JetBrains Mono', monospace;
  font-size: 0.76rem;
  letter-spacing: 3px;
  text-transform: uppercase;
  color: var(--cap-blue4);
  display: inline-flex;
  align-items: center;
  gap: 0.7rem;
}
.cap-scene .cap-eyebrow::before,
.cap-scene .cap-eyebrow::after {
  content: '';
  width: 26px;
  height: 1px;
  background: var(--cap-blue);
}
.cap-scene .cap-h2 {
  /* Match hero h1 typography */
  font-size: clamp(2.2rem, 4.5vw, 3.6rem);
  font-weight: 700;
  line-height: 1.05;
  letter-spacing: -0.03em;
  color: #fff;
  margin: 1.4rem 0 1.1rem;
  text-wrap: balance;
}
.cap-scene .cap-h2 .accent {
  /* Match hero accent — solid brand blue, no gradient. */
  color: var(--color-brand-500, #3b82f6);
}
.cap-scene .cap-p {
  /* Match hero sub-text */
  font-size: 1.05rem;
  color: #cbd5e1;
  line-height: 1.55;
  max-width: 38ch;
  text-wrap: pretty;
}

/* visual column */
.cap-scene .cap-visual {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
}
.cap-scene--search  .cap-visual::before,
.cap-scene--geology .cap-visual::before,
.cap-scene--infra   .cap-visual::before {
  content: '';
  position: absolute;
  width: 78%;
  aspect-ratio: 1;
  border-radius: 50%;
  /* Radial gradient is already soft — drop `filter: blur(14px)` (forced paint). */
  background: radial-gradient(circle, rgba(59, 130, 246, 0.18), transparent 68%);
}

/* lottie containers */
.cap-scene .cap-lottie {
  position: relative;
  width: min(560px, 46vw);
  aspect-ratio: 1 / 1;
}
/* .cap-lottie-host is now a <canvas> (DotLottieWorker renders directly into it). */
.cap-scene .cap-lottie .cap-lottie-host { width: 100%; height: 100%; display: block; }
.cap-scene--search  .cap-lottie .cap-lottie-host { filter: brightness(0) invert(1); will-change: filter; }
.cap-scene--geology .cap-lottie .cap-lottie-host { filter: brightness(0) invert(1) contrast(1.15); will-change: filter; }

/* SVG chart containers (gdm / econ / business) */
.cap-scene .cap-chart {
  position: relative;
  width: min(620px, 50vw);
  aspect-ratio: 1.18 / 1;
}
.cap-scene--econ  .cap-chart { width: min(600px, 49vw); aspect-ratio: 1.12 / 1; }
.cap-scene--business .cap-chart { width: min(640px, 52vw); aspect-ratio: 1.15 / 1; }
.cap-scene .cap-chart > svg { width: 100%; height: 100%; display: block; overflow: visible; }

/* SVG primitive classes */
.cap-scene .cap-axis   { stroke: rgba(110, 140, 200, 0.35); stroke-width: 1; }
.cap-scene .cap-gridln { display: none; }
.cap-scene .cap-zero   { stroke: rgba(150, 180, 220, 0.45); stroke-width: 1.1; }
.cap-scene .cap-lbl    { font-family: 'JetBrains Mono', monospace; fill: var(--cap-faint); font-size: 9px; }
.cap-scene .cap-lbl-b  { font-family: 'JetBrains Mono', monospace; fill: var(--cap-blue3); font-size: 9px; }
.cap-scene .cap-nlabel { font-family: 'JetBrains Mono', monospace; fill: var(--cap-blue3); font-size: 10.5px; }
.cap-scene .cap-nsub   { font-family: 'JetBrains Mono', monospace; fill: var(--cap-faint); font-size: 8.5px; }

/* HUD overlays */
.cap-scene .cap-hud {
  position: absolute;
  top: 6%;
  left: 4%;
  z-index: 3;
  display: inline-flex;
  align-items: center;
  gap: 0.55rem;
  font-family: 'JetBrains Mono', monospace;
  font-size: 0.72rem;
  letter-spacing: 1px;
  color: var(--cap-dim);
  padding: 0.45rem 0.75rem;
  border: 1px solid var(--cap-line);
  border-radius: 999px;
  /* Solid darker bg instead of `backdrop-filter: blur()` — same look against
     the very dark scene background, but compositor-only (no re-rasterize). */
  background: rgba(8, 14, 24, 0.85);
}
.cap-scene .cap-hud .cap-live {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--cap-blue4);
  box-shadow: 0 0 10px var(--cap-blue4);
  animation: cap-pulse 1.2s infinite;
}
@keyframes cap-pulse { 0%, 100% { opacity: 1; } 50% { opacity: 0.25; } }

.cap-scene .cap-counter {
  position: absolute;
  bottom: 6%;
  right: 4%;
  z-index: 3;
  text-align: right;
  font-family: 'JetBrains Mono', monospace;
  font-size: 0.68rem;
  letter-spacing: 1px;
  color: var(--cap-faint);
  text-transform: uppercase;
}
.cap-scene .cap-counter b {
  display: block;
  color: var(--cap-blue3);
  font-weight: 500;
  font-size: 1.1rem;
  letter-spacing: 0;
  margin-top: 2px;
  font-variant-numeric: tabular-nums;
}

.cap-scene .cap-legend {
  position: absolute;
  top: 5%;
  right: 4%;
  z-index: 3;
  display: flex;
  flex-direction: column;
  gap: 5px;
  font-family: 'JetBrains Mono', monospace;
  font-size: 0.66rem;
  color: var(--cap-dim);
}
.cap-scene .cap-legend i {
  display: inline-block;
  width: 16px;
  height: 2px;
  vertical-align: middle;
  margin-right: 7px;
}

.cap-scene .cap-kpis {
  position: absolute;
  bottom: 4%;
  left: 3%;
  z-index: 3;
  display: flex;
  gap: 0.5rem;
}
.cap-scene .cap-kpi {
  font-family: 'JetBrains Mono', monospace;
  text-align: left;
  padding: 0.5rem 0.7rem;
  border-radius: 9px;
  background: rgba(4, 7, 13, 0.88);
  border: 1px solid rgba(110, 140, 200, 0.12);
}
.cap-scene .cap-kpi .cap-l {
  font-size: 0.58rem;
  letter-spacing: 1px;
  color: var(--cap-faint);
  text-transform: uppercase;
}
.cap-scene .cap-kpi .cap-v {
  font-size: 1rem;
  color: var(--cap-blue3);
  font-weight: 500;
  margin-top: 2px;
  font-variant-numeric: tabular-nums;
}

/* business: scenario status badge */
.cap-scene .cap-status {
  position: absolute;
  top: 4%;
  left: 3%;
  z-index: 3;
  font-family: 'JetBrains Mono', monospace;
  font-size: 0.72rem;
  letter-spacing: 0.5px;
  color: var(--cap-dim);
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.45rem 0.75rem;
  border-radius: 999px;
  background: rgba(8, 14, 24, 0.85);
  border: 1px solid var(--cap-line);
}
.cap-scene .cap-status .cap-d {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--cap-blue4);
  box-shadow: 0 0 8px var(--cap-blue4);
}

/* ---------- Mobile (< 880px) ---------- */
@media (max-width: 880px) {
  .cap-scene,
  .cap-scene--gdm,
  .cap-scene--business {
    grid-template-columns: 1fr;
    grid-template-rows: auto auto;
    padding: 8vh 24px 6vh;
    gap: 1rem;
    min-height: auto;
  }
  .cap-scene .cap-lottie { width: min(420px, 80vw); }
  .cap-scene .cap-chart  { width: min(500px, 90vw); aspect-ratio: 1.18 / 1; }
  .cap-scene--econ .cap-chart { width: min(480px, 88vw); }
}

/* ---------- Reduced motion ---------- */
@media (prefers-reduced-motion: reduce) {
  .cap-scene .cap-hud .cap-live { animation: none; }
}