/* ============================================================
 * Vanar — 3D visualisations
 * TEE enclave · Org core · OCP envelopes (Three.js)
 * Adapter bridges · Founder org chart (CSS/SVG)
 * ============================================================ */

/* ----- Three.js containers ----- */
.viz3d {
  position: relative;
  width: 100%;
  display: block;
  background: transparent;
  overflow: hidden;
}
.viz3d__canvas { display: block; width: 100%; height: 100%; }
.viz3d__fallback {
  position: absolute; inset: 0;
  display: flex; align-items: center; justify-content: center;
  pointer-events: none;
  opacity: 0;
  transition: opacity .25s;
}
.viz3d.is-fallback .viz3d__fallback { opacity: 1; }
.viz3d.is-fallback .viz3d__canvas { display: none; }

.viz3d__caption {
  position: absolute; bottom: 14px; left: 14px;
  display: inline-flex; align-items: center; gap: 6px;
  font: 500 9.5px var(--mono); letter-spacing: .14em; text-transform: uppercase;
  padding: 4px 10px; border-radius: 999px;
  background: rgba(255,255,255,.7); color: var(--fg-dim);
  backdrop-filter: blur(6px);
  border: 1px solid var(--rule);
  pointer-events: none;
}
.viz3d__caption.on-dark {
  background: rgba(11,30,24,.65); color: rgba(216,230,211,.85);
  border-color: rgba(216,230,211,.18);
}
.viz3d__caption::before {
  content: ""; width: 6px; height: 6px; border-radius: 50%;
  background: var(--emerald-mint);
  box-shadow: 0 0 8px var(--emerald-mint);
  animation: pulse-dot 2.4s ease-in-out infinite;
}

/* TEE enclave stage (in Stack page TEE hero) */
.viz-tee-stage {
  position: relative;
  width: 100%;
  aspect-ratio: 1 / 1;
  max-height: 360px;
  border-radius: 18px;
  background:
    radial-gradient(60% 60% at 50% 50%, rgba(143,207,176,.15), rgba(8,28,22,0) 70%),
    rgba(11,30,24,.45);
  border: 1px solid rgba(216,230,211,.18);
  box-shadow: inset 0 0 60px rgba(8,28,22,.45);
  overflow: hidden;
}

/* Org core stage (home hero — sits in the negative space) */
.viz-org-stage {
  position: relative;
  width: 100%;
  aspect-ratio: 1.6 / 1;
  max-height: 380px;
  border-radius: 24px;
  background:
    radial-gradient(60% 60% at 50% 50%, rgba(207,232,218,.35), transparent 70%);
  overflow: hidden;
}

/* OCP envelope stack stage (OCP page) */
.viz-envelopes-stage {
  position: relative;
  width: 100%;
  aspect-ratio: 2 / 1;
  max-height: 440px;
  border-radius: 24px;
  background: rgba(255,255,255,.5);
  backdrop-filter: blur(18px);
  border: 1px solid var(--rule);
  overflow: hidden;
  box-shadow: var(--shadow-card);
}

/* ============================================================
 * SCENARIO 1 — "I have an idea" · Foundry compose visual
 * Small wireframe Org filling in with role slots
 * ============================================================ */
.viz-build {
  position: relative;
  width: 100%;
  aspect-ratio: 5 / 3;
  perspective: 900px;
  perspective-origin: 50% 40%;
  margin: 6px 0 10px;
  overflow: hidden;
}
.viz-build__stage {
  position: absolute; inset: 0;
  transform-style: preserve-3d;
  transform: rotateX(22deg) rotateZ(-4deg);
  animation: build-spin 18s ease-in-out infinite alternate;
}
@keyframes build-spin {
  0%   { transform: rotateX(22deg) rotateZ(-4deg) rotateY(-2deg); }
  100% { transform: rotateX(22deg) rotateZ(-4deg) rotateY(2deg);  }
}
.viz-build__org {
  position: absolute;
  left: 8%; right: 8%; top: 18%; bottom: 22%;
  border: 1.5px dashed rgba(17,19,24,.22);
  border-radius: 12px;
  background: rgba(255,255,255,.5);
  transform: translateZ(0);
}
.viz-build__org-label {
  position: absolute;
  top: -22px; left: 12px;
  font: 500 9px var(--mono); letter-spacing: .18em; text-transform: uppercase;
  color: var(--fg-mute);
}
.viz-build__org-name {
  position: absolute;
  top: -22px; right: 12px;
  font: 700 11px var(--display); letter-spacing: .04em; text-transform: uppercase;
  color: var(--fg);
}
.viz-build__org-name::before {
  content: ""; display: inline-block; width: 6px; height: 6px; border-radius: 50%;
  background: var(--emerald-mint); margin-right: 6px; vertical-align: middle;
  box-shadow: 0 0 6px var(--emerald-mint);
}
.viz-build__slot {
  position: absolute;
  background: rgba(255,255,255,.95);
  border: 1px solid var(--rule);
  border-radius: 6px;
  padding: 5px 7px;
  font: 700 8.5px var(--display); letter-spacing: .04em; text-transform: uppercase;
  color: var(--fg);
  box-shadow: 0 6px 12px -6px rgba(17,19,24,.22), 0 1px 0 rgba(255,255,255,.5) inset;
  white-space: nowrap;
  min-width: 60px;
  text-align: center;
  transform: translateZ(12px);
  animation: slot-fill .6s cubic-bezier(.2,.8,.2,1) both;
}
.viz-build__slot small { display: block; font: 500 7px var(--mono); letter-spacing: .12em; color: var(--fg-mute); margin-top: 1px; }
.viz-build__slot--1  { left: 10%; top: 32%; animation-delay: .2s; }
.viz-build__slot--2  { left: 38%; top: 32%; animation-delay: .4s; }
.viz-build__slot--3  { left: 66%; top: 32%; animation-delay: .6s; }
.viz-build__slot--4  { left: 23%; top: 58%; animation-delay: .8s; }
.viz-build__slot--5  { left: 52%; top: 58%; animation-delay: 1.0s; }
@keyframes slot-fill {
  0%   { opacity: 0; transform: translateZ(12px) scale(.85); }
  100% { opacity: 1; transform: translateZ(12px) scale(1); }
}
.viz-build__idea {
  position: absolute;
  left: 50%; top: 4%;
  transform: translate(-50%, 0) translateZ(40px);
  background: linear-gradient(180deg, #163A2E, #0B1E18);
  color: var(--emerald-mint);
  border: 1px solid rgba(216,230,211,.22);
  border-radius: 999px;
  padding: 6px 12px;
  font: 500 9px var(--mono); letter-spacing: .14em; text-transform: uppercase;
  box-shadow: 0 12px 20px -8px rgba(11,30,24,.5);
  white-space: nowrap;
}
.viz-build__idea::after {
  content: "";
  position: absolute;
  left: 50%; bottom: -10px;
  width: 1px; height: 14px;
  background: rgba(143,207,176,.6);
  transform: translateX(-50%);
}

/* ============================================================
 * SCENARIO 3 — "I have an agent" · drop-into-Org visual
 * Existing Org with filled slots + one empty slot lighting up as agent docks
 * ============================================================ */
.viz-drop {
  position: relative;
  width: 100%;
  aspect-ratio: 5 / 3;
  perspective: 900px;
  perspective-origin: 50% 40%;
  margin: 6px 0 10px;
  overflow: hidden;
}
.viz-drop__stage {
  position: absolute; inset: 0;
  transform-style: preserve-3d;
  transform: rotateX(22deg) rotateZ(-4deg);
  animation: drop-spin 16s ease-in-out infinite alternate;
}
@keyframes drop-spin {
  0%   { transform: rotateX(22deg) rotateZ(-4deg) rotateY(-2deg); }
  100% { transform: rotateX(22deg) rotateZ(-4deg) rotateY(2deg);  }
}
.viz-drop__org {
  position: absolute;
  left: 6%; right: 6%; top: 24%; bottom: 14%;
  background: rgba(255,255,255,.6);
  border: 1px solid var(--rule-strong);
  border-radius: 12px;
  box-shadow: 0 10px 24px -10px rgba(17,19,24,.18);
  transform: translateZ(0);
}
.viz-drop__org-label {
  position: absolute;
  top: -22px; left: 12px;
  font: 500 9px var(--mono); letter-spacing: .18em; text-transform: uppercase;
  color: var(--fg-mute);
}
.viz-drop__org-name {
  position: absolute;
  top: -22px; right: 12px;
  font: 700 11px var(--display); letter-spacing: .04em; text-transform: uppercase;
  color: var(--fg);
}
.viz-drop__slot {
  position: absolute;
  border-radius: 6px;
  padding: 5px 7px;
  font: 700 8.5px var(--display); letter-spacing: .04em; text-transform: uppercase;
  color: var(--fg);
  white-space: nowrap;
  text-align: center;
  transform: translateZ(10px);
  min-width: 56px;
}
.viz-drop__slot--filled {
  background: linear-gradient(180deg, rgba(255,255,255,.95), rgba(255,255,255,.78));
  border: 1px solid var(--rule);
  box-shadow: 0 6px 12px -6px rgba(17,19,24,.22);
}
.viz-drop__slot--empty {
  background: transparent;
  border: 1.5px dashed rgba(110,91,224,.55);
  color: rgba(110,91,224,.7);
  animation: empty-pulse 2.2s ease-in-out infinite;
}
@keyframes empty-pulse {
  0%, 100% { border-color: rgba(110,91,224,.55); background: transparent; }
  50%      { border-color: rgba(110,91,224,.95); background: rgba(110,91,224,.06); }
}
.viz-drop__slot small { display: block; font: 500 7px var(--mono); letter-spacing: .12em; color: var(--fg-mute); margin-top: 1px; }
.viz-drop__slot--empty small { color: rgba(110,91,224,.55); }
.viz-drop__slot--s1 { left: 10%; top: 38%; }
.viz-drop__slot--s2 { left: 36%; top: 38%; }
.viz-drop__slot--s3 { left: 62%; top: 38%; }
.viz-drop__slot--s4 { left: 23%; top: 62%; }
.viz-drop__slot--s5 { left: 50%; top: 62%; }

.viz-drop__agent {
  position: absolute;
  left: 78%; top: 6%;
  background: linear-gradient(180deg, rgba(180,162,255,.9), rgba(110,91,224,.85));
  color: #F2EFE9;
  border: 1.5px solid rgba(110,91,224,.55);
  border-radius: 8px;
  padding: 6px 10px;
  font: 700 9.5px var(--display); letter-spacing: .04em; text-transform: uppercase;
  box-shadow: 0 12px 20px -8px rgba(74,60,184,.5);
  transform: translateZ(45px);
  animation: agent-dock 4.5s cubic-bezier(.2,.8,.2,1) infinite;
  white-space: nowrap;
}
.viz-drop__agent small { display: block; font: 500 7.5px var(--mono); letter-spacing: .14em; color: rgba(242,239,233,.78); margin-top: 1px; }
@keyframes agent-dock {
  0%   { transform: translateZ(45px) translate(0%, 0%); opacity: 1; }
  50%  { transform: translateZ(20px) translate(-50%, 56px); opacity: 1; }
  60%  { transform: translateZ(10px) translate(-50%, 56px); opacity: 0; }
  80%  { transform: translateZ(45px) translate(0%, 0%); opacity: 0; }
  100% { transform: translateZ(45px) translate(0%, 0%); opacity: 1; }
}
.viz-drop__floor {
  position: absolute; left: 15%; right: 15%; bottom: 4%;
  height: 6px;
  background: radial-gradient(50% 100% at 50% 0%, rgba(17,19,24,.18), transparent 80%);
  transform: rotateX(80deg) translateZ(-2px);
  border-radius: 50%;
  filter: blur(3px);
}
.viz-bridges {
  position: relative;
  width: 100%;
  aspect-ratio: 16 / 9;
  max-height: 520px;
  border-radius: 24px;
  background:
    radial-gradient(60% 50% at 50% 60%, rgba(207,232,218,.28), transparent 70%),
    radial-gradient(50% 40% at 50% 30%, rgba(226,216,240,.22), transparent 70%),
    rgba(255,255,255,.55);
  backdrop-filter: blur(18px);
  border: 1px solid var(--rule);
  box-shadow: var(--shadow-card);
  overflow: hidden;
}
.viz-bridges svg { width: 100%; height: 100%; display: block; }
.viz-bridges__node text { font-family: var(--mono); font-size: 10px; letter-spacing: .12em; text-transform: uppercase; fill: var(--fg); }
.viz-bridges__node text.cat { fill: var(--fg-mute); font-size: 8.5px; }
.viz-bridges__node--ocp text { fill: #F2EFE9; }
.viz-bridges__node--ocp text.cat { fill: rgba(216,230,211,.75); }
.viz-bridges__bridge {
  fill: none;
  stroke: url(#bridgeGrad);
  stroke-width: 1.2;
  opacity: .55;
  transition: opacity .25s, stroke-width .25s;
}
.viz-bridges__bridge.is-flight { stroke-dasharray: 4 3; opacity: .35; }
.viz-bridges__node:hover ~ .viz-bridges__bridge,
.viz-bridges__node:focus-visible ~ .viz-bridges__bridge { opacity: .25; }
.viz-bridges__node:hover .viz-bridges__panel { stroke: var(--fg); stroke-width: 1.6; }
.viz-bridges__pulse {
  fill: var(--emerald-mint);
}
.viz-bridges__legend {
  position: absolute; top: 14px; right: 14px;
  display: flex; gap: 10px;
  font: 500 10px var(--mono); letter-spacing: .14em; text-transform: uppercase; color: var(--fg-mute);
}
.viz-bridges__legend span { display: inline-flex; align-items: center; gap: 5px; }
.viz-bridges__legend span::before {
  content: ""; width: 16px; height: 1.5px;
  background: var(--emerald);
}
.viz-bridges__legend span.flight::before {
  background: repeating-linear-gradient(90deg, var(--violet) 0 4px, transparent 4px 7px);
}

/* ============================================================
 * FOUNDER ORG CHART — CSS-3D mini diagram
 * ============================================================ */
.viz-founder3d {
  position: relative;
  width: 100%;
  aspect-ratio: 5 / 3;
  perspective: 900px;
  perspective-origin: 50% 38%;
  margin: 6px 0 10px;
  overflow: hidden;
  container-type: inline-size;
}
.viz-founder3d__stage {
  position: absolute; inset: 0;
  transform-style: preserve-3d;
  transform: rotateX(22deg) rotateZ(-4deg);
  animation: founder-spin 18s ease-in-out infinite alternate;
}
@keyframes founder-spin {
  0%   { transform: rotateX(22deg) rotateZ(-4deg) rotateY(-3deg); }
  100% { transform: rotateX(22deg) rotateZ(-4deg) rotateY(3deg);  }
}
.viz-founder3d__node {
  position: absolute;
  background: linear-gradient(180deg, rgba(255,255,255,.95), rgba(255,255,255,.78));
  border: 1px solid var(--rule);
  border-radius: 8px;
  padding: 6px 8px;
  font: 700 9px var(--display); letter-spacing: .04em; text-transform: uppercase;
  color: var(--fg);
  box-shadow: 0 8px 16px -8px rgba(17,19,24,.28), 0 1px 0 rgba(255,255,255,.5) inset;
  min-width: 56px;
  max-width: 86px;
  text-align: center;
  transform-style: preserve-3d;
  white-space: nowrap;
}
.viz-founder3d__node small {
  display: block;
  font: 500 7px var(--mono);
  letter-spacing: .14em;
  color: var(--fg-mute);
  margin-top: 2px;
}
.viz-founder3d__node--ceo {
  background: linear-gradient(180deg, #163A2E, #0B1E18);
  color: var(--emerald-mint);
  border-color: rgba(216,230,211,.22);
  box-shadow: 0 14px 24px -10px rgba(11,30,24,.55), 0 0 0 1px rgba(143,207,176,.16) inset;
  min-width: 76px;
  padding: 8px 10px;
}
.viz-founder3d__node--ceo small { color: rgba(216,230,211,.7); }
.viz-founder3d__node--ceo::after {
  content: "";
  position: absolute; left: 50%; bottom: -3px;
  width: 6px; height: 6px;
  background: var(--emerald-mint);
  border-radius: 50%;
  transform: translate(-50%, 0);
  box-shadow: 0 0 8px var(--emerald-mint);
}
/* Tighter positions — symmetric, well within the box */
.viz-founder3d__node--ceo-pos { left: 50%; top: 4%;  transform: translate(-50%, 0) translateZ(50px); }
.viz-founder3d__node--t1-pos  { left: 6%;  top: 64%; transform: translateZ(18px); }
.viz-founder3d__node--t2-pos  { left: 30%; top: 76%; transform: translateZ(18px); }
.viz-founder3d__node--t3-pos  { left: 52%; top: 76%; transform: translateZ(18px); }
.viz-founder3d__node--t4-pos  { left: 76%; top: 64%; transform: translateZ(18px); }

.viz-founder3d__lines {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  pointer-events: none;
  transform: translateZ(6px);
}
.viz-founder3d__lines line {
  stroke: var(--rule-strong);
  stroke-width: 0.8;
  stroke-dasharray: 2 3;
  opacity: .8;
}
.viz-founder3d__floor {
  position: absolute; left: 10%; right: 10%; bottom: 4%;
  height: 6px;
  background: radial-gradient(50% 100% at 50% 0%, rgba(17,19,24,.18), transparent 80%);
  transform: rotateX(80deg) translateZ(-2px);
  border-radius: 50%;
  filter: blur(3px);
}