/* Strategy Cartography — executive terrain engine (distinct from hyperlinks.space orb) */

.stratviz-stage.ai-orb-zone {
  --sv-accent: hsl(var(--orb-reactive-hue, 248), 82%, 62%);
  --sv-gold: hsl(var(--orb-reactive-hue, 278), 78%, 58%);
  --sv-glow: hsla(var(--orb-reactive-hue, 248), 80%, 55%, calc(0.12 + var(--orb-reactive-intensity, 0.16) * 0.38));
  cursor: default;
  pointer-events: none;
  isolation: isolate;
  border-radius: clamp(12px, 2vw, 20px);
  border: 1px solid hsla(265, 55%, 58%, 0.22);
  background:
    radial-gradient(ellipse 120% 90% at 50% 110%, hsla(248, 45%, 12%, 0.55), transparent 58%),
    linear-gradient(168deg, hsl(234, 42%, 6%) 0%, hsl(248, 38%, 4%) 42%, hsl(260, 35%, 3%) 100%);
  box-shadow:
    inset 0 1px 0 hsla(278, 80%, 72%, 0.1),
    inset 0 0 0 1px hsla(248, 40%, 52%, 0.08),
    inset 0 -48px 90px hsla(265, 55%, 22%, calc(var(--orb-reactive-intensity, 0.16) * 0.14)),
    0 0 calc(36px + var(--orb-reactive-intensity, 0.16) * 56px) var(--sv-glow);
  transition: border-color 0.4s ease, box-shadow 0.4s ease, filter 0.3s ease, transform 0.35s cubic-bezier(0.22, 1, 0.36, 1);
  overflow: hidden;
  transform: perspective(1200px)
    rotateX(calc(var(--stratviz-tilt-x, 0) * 0.35deg))
    rotateY(calc(var(--stratviz-tilt-y, 0) * 0.35deg));
  animation: stratviz-stage-enter 1.1s cubic-bezier(0.22, 1, 0.36, 1) both;
}

@keyframes stratviz-stage-enter {
  from {
    opacity: 0;
    transform: perspective(1200px) rotateX(8deg) scale(0.96);
    filter: blur(6px);
  }
  to {
    opacity: 1;
    transform: perspective(1200px)
      rotateX(calc(var(--stratviz-tilt-x, 0) * 0.35deg))
      rotateY(calc(var(--stratviz-tilt-y, 0) * 0.35deg));
    filter: none;
  }
}

.stratviz-stage.ai-orb-zone::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  pointer-events: none;
  z-index: 9;
  padding: 1px;
  background: conic-gradient(
    from calc(var(--orb-speaking-phase, 0) * 360deg),
    hsla(var(--orb-reactive-hue, 265), 72%, 58%, 0.45),
    transparent 25%,
    hsla(198, 70%, 52%, 0.2) 50%,
    transparent 75%,
    hsla(var(--orb-reactive-hue, 278), 68%, 55%, 0.35)
  );
  mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  mask-composite: exclude;
  -webkit-mask-composite: xor;
  opacity: calc(0.28 + var(--orb-reactive-intensity, 0.16) * 0.5);
  animation: stratviz-border-spin calc(14s / var(--orb-reactive-speed, 1)) linear infinite;
}

.stratviz-backdrop {
  position: absolute;
  inset: 0;
  border-radius: inherit;
  pointer-events: none;
  z-index: 0;
  overflow: hidden;
}

.stratviz-depth {
  position: absolute;
  inset: -20%;
  background:
    radial-gradient(ellipse 80% 60% at 22% 78%, hsla(198, 65%, 42%, 0.11), transparent 50%),
    radial-gradient(ellipse 70% 55% at 82% 22%, hsla(278, 70%, 48%, 0.1), transparent 48%);
  opacity: calc(0.5 + var(--orb-reactive-intensity, 0.16) * 0.5);
  animation: stratviz-depth-drift calc(22s / var(--orb-reactive-speed, 1)) ease-in-out infinite alternate;
}

.stratviz-lattice {
  position: absolute;
  inset: 0;
  opacity: 0.22;
  background-image:
    linear-gradient(hsla(265, 42%, 58%, 0.1) 1px, transparent 1px),
    linear-gradient(90deg, hsla(198, 38%, 52%, 0.08) 1px, transparent 1px);
  background-size: 56px 28px;
  mask-image: radial-gradient(ellipse 95% 85% at 50% 48%, #000 10%, transparent 82%);
  transform: perspective(720px) rotateX(62deg) scale(1.45)
    translate(calc((var(--stratviz-cursor-x, 50) - 50) * 0.05%), calc((var(--stratviz-cursor-y, 44) - 44) * 0.04%));
  transform-origin: 50% 85%;
  transition: transform 0.3s ease;
}

.stratviz-radar {
  position: absolute;
  inset: 0;
  pointer-events: none;
  opacity: calc(0.18 + var(--orb-reactive-intensity, 0.16) * 0.4);
  background:
    radial-gradient(circle at 50% 44%, transparent 16%, hsla(162, 58%, 45%, 0.05) 17%, transparent 18%),
    radial-gradient(circle at 50% 44%, transparent 30%, hsla(162, 58%, 45%, 0.04) 31%, transparent 32%),
    radial-gradient(circle at 50% 44%, transparent 44%, hsla(162, 58%, 45%, 0.03) 45%, transparent 46%);
  mix-blend-mode: screen;
}

.stratviz-radar::after {
  content: "";
  position: absolute;
  left: 50%;
  top: 44%;
  width: 52%;
  height: 52%;
  margin: -26% 0 0 -26%;
  border-radius: 50%;
  background: conic-gradient(
    from calc(var(--orb-speaking-phase, 0) * 360deg),
    transparent 0deg,
    hsla(var(--orb-reactive-hue, 162), 72%, 55%, 0.22) 8deg,
    transparent 16deg,
    transparent 360deg
  );
  mask-image: radial-gradient(circle, #000 0%, #000 48%, transparent 49%);
  animation: stratviz-radar-sweep calc(4.5s / var(--orb-reactive-speed, 1)) linear infinite;
}

.stratviz-horizon {
  position: absolute;
  left: -10%;
  right: -10%;
  bottom: 8%;
  height: 38%;
  pointer-events: none;
  background: linear-gradient(
    180deg,
    transparent 0%,
    hsla(var(--orb-reactive-hue, 248), 55%, 38%, calc(0.04 + var(--orb-reactive-intensity, 0.16) * 0.08)) 55%,
    hsla(248, 45%, 18%, 0.18) 100%
  );
  transform: perspective(520px) rotateX(68deg) scale(1.2);
  transform-origin: 50% 100%;
  opacity: calc(0.45 + var(--orb-reactive-intensity, 0.16) * 0.35);
}

.stratviz-grain {
  position: absolute;
  inset: 0;
  pointer-events: none;
  opacity: 0.045;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='1'/%3E%3C/svg%3E");
  mix-blend-mode: overlay;
}

.stratviz-sheen {
  position: absolute;
  inset: -40%;
  background: conic-gradient(
    from calc(var(--orb-reactive-hue, 248) * 1deg) at 50% 46%,
    transparent 0deg,
    hsla(278, 85%, 58%, 0.12) 40deg,
    transparent 100deg,
    hsla(198, 72%, 50%, 0.1) 200deg,
    transparent 300deg
  );
  filter: blur(42px);
  opacity: calc(0.28 + var(--orb-reactive-intensity, 0.16) * 0.45);
  animation: stratviz-sheen-drift calc(40s / var(--orb-reactive-speed, 1)) linear infinite;
}

.stratviz-scanline {
  position: absolute;
  inset: 0;
  background: repeating-linear-gradient(
    0deg,
    transparent,
    transparent 3px,
    hsla(210, 30%, 50%, 0.025) 3px,
    hsla(210, 30%, 50%, 0.025) 4px
  );
  opacity: 0.55;
  pointer-events: none;
}

.stratviz-scanline::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  height: 2px;
  background: linear-gradient(90deg, transparent, hsla(var(--orb-reactive-hue, 210), 70%, 62%, 0.35), transparent);
  animation: stratviz-scan-sweep 5.5s linear infinite;
  opacity: calc(0.35 + var(--orb-reactive-intensity, 0.16) * 0.4);
}

.stratviz-fx-canvas {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  z-index: 1;
  pointer-events: none;
}

.stratviz-webgl,
.hero-orb-canvas.stratviz-webgl {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  z-index: 2;
  pointer-events: none;
}

.stratviz-frame-corners {
  position: absolute;
  inset: 10px;
  z-index: 6;
  pointer-events: none;
}

.stratviz-corner {
  position: absolute;
  width: 22px;
  height: 22px;
  border-color: hsla(278, 80%, 62%, calc(0.38 + var(--orb-reactive-intensity, 0.16) * 0.4));
  border-style: solid;
  border-width: 0;
  transition: border-color 0.35s ease;
}

.stratviz-corner--tl { top: 0; left: 0; border-top-width: 2px; border-left-width: 2px; }
.stratviz-corner--tr { display: none !important; }
.stratviz-corner--bl { bottom: 0; left: 0; border-bottom-width: 2px; border-left-width: 2px; }
.stratviz-corner--br { bottom: 0; right: 0; border-bottom-width: 2px; border-right-width: 2px; }

.stratviz-mode-badge {
  position: absolute;
  top: 14px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 8;
  pointer-events: none;
  padding: 4px 12px;
  font: 600 9px/1.2 ui-monospace, "Cascadia Code", monospace;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: hsla(278, 90%, 72%, 0.88);
  border: 1px solid hsla(265, 60%, 55%, 0.32);
  border-radius: 4px;
  background: hsla(222, 40%, 8%, 0.72);
  backdrop-filter: blur(8px);
  opacity: calc(0.55 + var(--orb-reactive-intensity, 0.16) * 0.45);
  transition: opacity 0.3s ease, color 0.35s ease, border-color 0.35s ease;
}

.stratviz-stage[data-orb-mode="idle"] .stratviz-mode-badge::before { content: "DECISION GRAPH · LIVE"; }
.stratviz-stage[data-orb-mode="listening"] .stratviz-mode-badge::before { content: "◉ VOICE CAPTURE"; color: hsl(162, 82%, 62%); }
.stratviz-stage[data-orb-mode="thinking"] .stratviz-mode-badge::before { content: "◈ REASONING"; color: hsl(278, 78%, 70%); }
.stratviz-stage[data-orb-mode="typing"] .stratviz-mode-badge::before { content: "▸ SYNTHESIZING"; color: hsl(292, 82%, 68%); }
.stratviz-stage[data-orb-mode="speaking"] .stratviz-mode-badge::before { content: "♫ BROADCAST"; color: hsl(318, 82%, 70%); }
.stratviz-stage[data-orb-mode="user"] .stratviz-mode-badge::before { content: "▲ SIGNAL IN"; color: hsl(340, 88%, 66%); }
.stratviz-stage[data-orb-mode="navigate"] .stratviz-mode-badge::before { content: "⬡ ROUTING"; color: hsl(198, 82%, 62%); }
.stratviz-stage[data-orb-mode="tour"] .stratviz-mode-badge::before { content: "◎ GUIDED PATH"; color: hsl(265, 80%, 68%); }

.stratviz-coords {
  position: absolute;
  bottom: 14px;
  right: 16px;
  z-index: 8;
  pointer-events: none;
  font: 500 9px/1.3 ui-monospace, monospace;
  letter-spacing: 0.08em;
  color: hsla(210, 30%, 62%, 0.45);
  opacity: calc(var(--stratviz-cursor-active, 0) * 0.9 + 0.15);
  transition: opacity 0.25s ease, color 0.25s ease;
}

.stratviz-stage.stratviz-cursor-on .stratviz-coords {
  color: hsla(var(--orb-reactive-hue, 278), 75%, 68%, 0.82);
}

.stratviz-stage.orb-reactive--speaking .stratviz-mode-ring {
  animation: stratviz-speak-ring calc(1s / var(--orb-reactive-pulse, 0.98)) ease-in-out infinite;
  border-color: hsla(var(--orb-reactive-hue, 318), 68%, 58%, calc(0.2 + var(--orb-reactive-intensity, 0.16) * 0.35));
}

.stratviz-stage.orb-reactive--user .stratviz-radar::after {
  animation-duration: 1.8s;
  opacity: 1;
}

.stratviz-stage.orb-reactive--navigate .stratviz-horizon {
  animation: stratviz-horizon-shift 1.2s ease-out;
}

@keyframes stratviz-radar-sweep {
  from { transform: rotate(0deg); }
  to { transform: rotate(360deg); }
}

@keyframes stratviz-horizon-shift {
  0% { filter: brightness(1.35); transform: perspective(520px) rotateX(68deg) scale(1.28); }
  100% { filter: brightness(1); transform: perspective(520px) rotateX(68deg) scale(1.2); }
}

.stratviz-cursor-reticle,
.stratviz-cursor-trail {
  display: none !important;
}

.stratviz-cursor-aura {
  position: absolute;
  left: calc(var(--stratviz-cursor-x, 50) * 1%);
  top: calc(var(--stratviz-cursor-y, 44) * 1%);
  width: 120px;
  height: 90px;
  margin: -45px 0 0 -60px;
  pointer-events: none;
  z-index: 4;
  opacity: 0;
  border-radius: 50%;
  background:
    radial-gradient(ellipse, hsla(var(--orb-reactive-hue, 278), 88%, 58%, calc(var(--stratviz-cursor-active, 0) * 0.14)), transparent 72%);
  transition: opacity 0.25s ease;
  transform: scale(calc(0.85 + var(--stratviz-cursor-active, 0) * 0.15));
}

.stratviz-stage.stratviz-cursor-on {
  transform: perspective(1200px)
    rotateX(calc(var(--stratviz-tilt-x, 0) * 0.35deg))
    rotateY(calc(var(--stratviz-tilt-y, 0) * 0.35deg));
  filter: saturate(calc(1 + var(--stratviz-cursor-active, 0) * 0.06));
}

.stratviz-stage.stratviz-cursor-on .stratviz-cursor-aura {
  opacity: 1;
}

.stratviz-stage.stratviz-cursor-on .stratviz-depth {
  transform: translate(calc((var(--stratviz-cursor-x, 50) - 50) * 0.04%), calc((var(--stratviz-cursor-y, 44) - 44) * 0.03%));
  transition: transform 0.35s ease;
}

.stratviz-hud {
  position: absolute;
  inset: 14px;
  border-radius: calc(clamp(10px, 1.6vw, 18px) - 6px);
  pointer-events: none;
  z-index: 6;
  border: 1px solid hsla(210, 35%, 50%, 0.08);
}

.stratviz-hud::before {
  content: "";
  position: absolute;
  top: 0;
  left: 18%;
  right: 18%;
  height: 1px;
  background: linear-gradient(90deg, transparent, hsla(42, 70%, 58%, 0.35), transparent);
  opacity: calc(0.25 + var(--orb-reactive-intensity, 0.16) * 0.55);
}

.stratviz-mode-ring {
  position: absolute;
  inset: 22%;
  pointer-events: none;
  z-index: 3;
  border: 1px solid hsla(42, 55%, 52%, calc(0.06 + var(--orb-reactive-intensity, 0.16) * 0.18));
  border-radius: 4px;
  opacity: calc(0.35 + var(--orb-reactive-pulse, 0.28) * 0.4);
  transform: perspective(400px) rotateX(8deg) scale(calc(0.94 + var(--orb-reactive-pulse, 0.28) * 0.06));
  transition: border-color 0.4s ease, transform 0.35s ease;
}

.stratviz-vignette {
  position: absolute;
  inset: 0;
  border-radius: inherit;
  pointer-events: none;
  z-index: 7;
  background:
    radial-gradient(ellipse 88% 78% at 50% 46%, transparent 35%, hsla(248, 42%, 3%, 0.72) 100%);
}

.stratviz-signal-bars {
  position: absolute;
  left: 14px;
  bottom: 14px;
  z-index: 8;
  display: flex;
  align-items: flex-end;
  gap: 3px;
  height: 28px;
  pointer-events: none;
}

.stratviz-signal-bars span {
  display: block;
  width: 4px;
  border-radius: 2px 2px 0 0;
  background: hsla(var(--orb-reactive-hue, 248), 72%, 58%, calc(0.25 + var(--orb-reactive-intensity, 0.16) * 0.55));
  height: calc(22% + var(--orb-reactive-intensity, 0.16) * 55%);
  transform-origin: bottom center;
  animation: stratviz-bar-dance calc(1.1s / var(--orb-reactive-speed, 1)) ease-in-out infinite;
}

.stratviz-signal-bars span:nth-child(1) { animation-delay: 0s; height: calc(18% + var(--orb-reactive-intensity, 0.16) * 40%); }
.stratviz-signal-bars span:nth-child(2) { animation-delay: 0.08s; }
.stratviz-signal-bars span:nth-child(3) { animation-delay: 0.16s; height: calc(28% + var(--orb-reactive-intensity, 0.16) * 62%); }
.stratviz-signal-bars span:nth-child(4) { animation-delay: 0.04s; }
.stratviz-signal-bars span:nth-child(5) { animation-delay: 0.12s; height: calc(32% + var(--orb-reactive-intensity, 0.16) * 68%); }
.stratviz-signal-bars span:nth-child(6) { animation-delay: 0.2s; }
.stratviz-signal-bars span:nth-child(7) { animation-delay: 0.1s; height: calc(24% + var(--orb-reactive-intensity, 0.16) * 50%); }

.stratviz-cursor-trail {
  position: absolute;
  left: calc(var(--stratviz-cursor-x, 50) * 1%);
  top: calc(var(--stratviz-cursor-y, 44) * 1%);
  width: 80px;
  height: 80px;
  margin: -40px 0 0 -40px;
  pointer-events: none;
  z-index: 4;
  opacity: 0;
  border-radius: 50%;
  border: 1px dashed hsla(var(--orb-reactive-hue, 278), 75%, 62%, calc(var(--stratviz-cursor-active, 0) * 0.35));
  transition: opacity 0.2s ease;
  animation: stratviz-trail-spin 8s linear infinite;
}

.stratviz-stage.stratviz-cursor-on .stratviz-cursor-trail {
  opacity: 1;
}

.stratviz-stage.orb-reactive--speaking .stratviz-signal-bars span {
  animation-duration: calc(0.55s / var(--orb-reactive-pulse, 0.98));
}

.stratviz-stage.orb-reactive--listening .stratviz-signal-bars span {
  background: hsla(162, 72%, 52%, calc(0.35 + var(--orb-reactive-intensity, 0.16) * 0.6));
}

@keyframes stratviz-bar-dance {
  0%, 100% { transform: scaleY(0.72); opacity: 0.55; }
  50% { transform: scaleY(1.08); opacity: 1; }
}

@keyframes stratviz-trail-spin {
  from { transform: rotate(0deg) scale(calc(0.85 + var(--stratviz-cursor-active, 0) * 0.2)); }
  to { transform: rotate(360deg) scale(calc(0.85 + var(--stratviz-cursor-active, 0) * 0.2)); }
}

/* Mode reactions */
.stratviz-stage.orb-reactive--listening {
  border-color: hsla(162, 55%, 50%, 0.42);
  --sv-glow: hsla(162, 70%, 45%, 0.28);
}

.stratviz-stage.orb-reactive--listening .stratviz-mode-ring {
  animation: stratviz-frame-pulse calc(2.2s / var(--orb-reactive-speed, 1)) ease-out infinite;
}

.stratviz-stage.orb-reactive--listening .stratviz-corner {
  border-color: hsla(162, 72%, 55%, 0.6);
}

.stratviz-stage.orb-reactive--thinking {
  border-color: hsla(278, 50%, 58%, 0.4);
}

.stratviz-stage.orb-reactive--thinking .stratviz-mode-ring {
  animation: stratviz-frame-pulse calc(1.8s / var(--orb-reactive-speed, 1)) ease-out infinite;
}

.stratviz-stage.orb-reactive--thinking .stratviz-sheen {
  animation-duration: calc(14s / var(--orb-reactive-speed, 1));
}

.stratviz-stage.orb-reactive--thinking .stratviz-scanline::after {
  animation-duration: 2.8s;
}

.stratviz-stage.orb-reactive--typing {
  border-color: hsla(292, 58%, 55%, 0.42);
}

.stratviz-stage.orb-reactive--typing .stratviz-lattice {
  animation: stratviz-lattice-shift 3.5s linear infinite;
}

.stratviz-stage.orb-reactive--speaking {
  border-color: hsla(var(--orb-reactive-hue, 318), 72%, 55%, 0.52);
  animation: stratviz-speak-pulse calc(1s / var(--orb-reactive-pulse, 0.98)) ease-in-out infinite;
}

.stratviz-stage.orb-reactive--speaking .stratviz-signal-bars span {
  background: hsla(var(--orb-reactive-hue, 318), 78%, 58%, calc(0.4 + var(--orb-reactive-intensity, 0.16) * 0.55));
}

.stratviz-stage.orb-reactive--user .stratviz-lattice {
  animation: stratviz-lattice-shift 0.8s linear;
}

.stratviz-stage.orb-reactive--navigate {
  border-color: hsla(198, 62%, 52%, 0.48);
  filter: saturate(1.15);
}

.stratviz-stage.orb-reactive--navigate .stratviz-frame-corners {
  animation: stratviz-corner-flash 0.8s ease-out;
}

.stratviz-stage.orb-reactive--user {
  animation: stratviz-user-burst 0.5s ease-out;
}

.stratviz-stage.orb-reactive--user .stratviz-corner {
  border-color: hsla(340, 88%, 62%, 0.78);
}

.stratviz-stage.orb-reactive--tour .stratviz-hud {
  border-color: hsla(265, 58%, 55%, 0.24);
}

.stratviz-stage.orb-reactive--user .stratviz-backdrop {
  animation: stratviz-user-flash 0.55s ease-out;
}

.stratviz-stage.orb-reactive--listening .stratviz-radar::after {
  animation-duration: 2.2s;
}

.stratviz-stage.orb-reactive--typing .stratviz-signal-bars span {
  animation-duration: calc(0.45s / var(--orb-reactive-speed, 1));
  background: hsla(292, 72%, 58%, calc(0.35 + var(--orb-reactive-intensity, 0.16) * 0.65));
}

.stratviz-stage.orb-reactive--thinking .stratviz-lattice {
  opacity: 0.32;
  animation: stratviz-lattice-shift 2.8s linear infinite;
}

.stratviz-cursor-trail::after {
  content: "";
  position: absolute;
  left: 50%;
  top: 50%;
  width: 1px;
  height: 42%;
  margin-left: -0.5px;
  transform-origin: 50% 0;
  transform: rotate(calc(var(--stratviz-beam-angle, 0) * 1deg));
  background: linear-gradient(
    180deg,
    hsla(var(--orb-reactive-hue, 278), 88%, 68%, calc(var(--stratviz-cursor-active, 0) * 0.55)),
    transparent
  );
  opacity: calc(var(--stratviz-cursor-active, 0) * 0.85);
}

.stratviz-stage.orb-reactive--thinking .stratviz-radar {
  animation: stratviz-radar-pulse 2.2s ease-in-out infinite;
}

.stratviz-stage.orb-reactive--thinking .stratviz-mode-badge {
  animation: stratviz-badge-flicker 0.12s steps(2) infinite;
}

@keyframes stratviz-badge-flicker {
  0%, 100% { opacity: calc(0.55 + var(--orb-reactive-intensity, 0.16) * 0.45); }
  50% { opacity: calc(0.75 + var(--orb-reactive-intensity, 0.16) * 0.55); }
}

@keyframes stratviz-radar-pulse {
  0%, 100% { opacity: calc(0.15 + var(--orb-reactive-intensity, 0.16) * 0.35); }
  50% { opacity: calc(0.35 + var(--orb-reactive-intensity, 0.16) * 0.55); }
}

[data-theme="light"] .stratviz-stage.ai-orb-zone {
  border-color: hsla(210, 30%, 42%, 0.16);
  background:
    radial-gradient(ellipse 100% 85% at 50% 110%, hsla(210, 35%, 92%, 0.5), transparent 55%),
    linear-gradient(168deg, hsl(220, 25%, 97%) 0%, hsl(215, 22%, 94%) 100%);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.95), 0 10px 36px rgba(15, 23, 42, 0.07);
}

[data-theme="light"] .stratviz-vignette {
  background: radial-gradient(ellipse 92% 82% at 50% 46%, transparent 50%, hsla(220, 18%, 86%, 0.35) 100%);
}

[data-theme="light"] .stratviz-lattice {
  background-image:
    linear-gradient(hsla(210, 25%, 38%, 0.05) 1px, transparent 1px),
    linear-gradient(90deg, hsla(42, 40%, 42%, 0.05) 1px, transparent 1px);
}

[data-theme="light"] .stratviz-mode-badge {
  background: hsla(220, 30%, 96%, 0.85);
  color: hsl(215, 35%, 32%);
  border-color: hsla(210, 25%, 42%, 0.15);
}

.hero--fullscreen .ai-core-aurora {
  opacity: 0.08;
  mix-blend-mode: soft-light;
}

.hero-stage-layout .stratviz-stage.ai-orb-zone {
  min-height: clamp(280px, 52vh, 680px);
}

.stratviz-stage.orb-reactive--typing .stratviz-signal-bars span {
  background: hsla(292, 78%, 58%, calc(0.35 + var(--orb-reactive-intensity, 0.16) * 0.65));
  animation-duration: calc(0.65s / var(--orb-reactive-speed, 1));
}

.stratviz-stage.orb-reactive--speaking .stratviz-radar::after {
  animation-duration: calc(2.2s / var(--orb-reactive-pulse, 0.98));
}

.stratviz-stage.orb-reactive--user .stratviz-lattice {
  filter: brightness(1.25);
  transition: filter 0.35s ease;
}

.stratviz-stage.stratviz-cursor-on .stratviz-radar {
  opacity: calc(0.22 + var(--orb-reactive-intensity, 0.16) * 0.42);
}

.stratviz-stage.stratviz-cursor-on .stratviz-horizon {
  transform: perspective(520px) rotateX(68deg) scale(1.24)
    translate(calc((var(--stratviz-cursor-x, 50) - 50) * 0.02%), calc((var(--stratviz-cursor-y, 44) - 44) * 0.015%));
}

.ai-orb-zone.stratviz-stage.orb-reactive--speaking {
  animation: stratviz-speak-pulse calc(1s / var(--orb-reactive-pulse, 0.98)) ease-in-out infinite;
}

.ai-orb-zone.stratviz-stage.ai-orb-zone {
  background:
    radial-gradient(ellipse 120% 90% at 50% 110%, hsla(248, 45%, 12%, 0.55), transparent 58%),
    linear-gradient(168deg, hsl(234, 42%, 6%) 0%, hsl(248, 38%, 4%) 42%, hsl(260, 35%, 3%) 100%);
  border: 1px solid hsla(265, 55%, 58%, 0.22);
  box-shadow:
    inset 0 1px 0 hsla(278, 80%, 68%, 0.1),
    0 0 calc(36px + var(--orb-reactive-intensity, 0.16) * 56px) var(--sv-glow);
}

@keyframes stratviz-border-spin {
  from { transform: rotate(0deg); }
  to { transform: rotate(360deg); }
}

@keyframes stratviz-depth-drift {
  from { transform: translate(-2%, -1%) scale(1); }
  to { transform: translate(2%, 1%) scale(1.05); }
}

@keyframes stratviz-sheen-drift {
  from { transform: rotate(0deg) scale(1); }
  to { transform: rotate(360deg) scale(1.02); }
}

@keyframes stratviz-scan-sweep {
  from { top: -4%; }
  to { top: 104%; }
}

@keyframes stratviz-reticle-spin {
  from { transform: rotate(0deg); }
  to { transform: rotate(360deg); }
}

@keyframes stratviz-frame-pulse {
  0% { transform: perspective(400px) rotateX(8deg) scale(0.9); opacity: 0.5; }
  100% { transform: perspective(400px) rotateX(8deg) scale(1.02); opacity: 0.2; }
}

@keyframes stratviz-lattice-shift {
  from { background-position: 0 0; }
  to { background-position: 56px 28px; }
}

@keyframes stratviz-speak-ring {
  0%, 100% { transform: perspective(400px) rotateX(8deg) scale(0.92); opacity: 0.4; }
  50% { transform: perspective(400px) rotateX(8deg) scale(1.06); opacity: 0.72; }
}

@keyframes stratviz-speak-pulse {
  0%, 100% { box-shadow: 0 0 28px var(--sv-glow); }
  50% { box-shadow: 0 0 64px hsla(var(--orb-reactive-hue, 330), 80%, 52%, 0.32); }
}

@keyframes stratviz-user-burst {
  0% { filter: brightness(1.4) saturate(1.25); }
  100% { filter: brightness(1) saturate(1); }
}

@keyframes stratviz-corner-flash {
  0% { opacity: 1; }
  100% { opacity: 1; }
  50% { opacity: 0.6; }
}

@media (max-width: 768px) {
  .stratviz-stage.ai-orb-zone {
    min-height: 0;
    cursor: default;
    overflow: hidden;
    isolation: isolate;
  }
  .stratviz-cursor-reticle,
  .stratviz-cursor-aura,
  .stratviz-coords,
  .stratviz-signal-bars,
  .stratviz-hud::before,
  .stratviz-frame-corners,
  .stratviz-cursor-trail {
    display: none;
  }
  .stratviz-hud {
    inset: 8px 8px 10px;
  }
  .stratviz-vignette {
    background:
      radial-gradient(ellipse 88% 72% at 50% 42%, transparent 32%, hsla(248, 42%, 3%, 0.78) 100%);
  }
  .stratviz-mode-badge {
    top: 6px;
    left: 8px;
    right: auto;
    transform: none;
    font-size: 7px;
    padding: 2px 7px;
    max-width: calc(100% - 16px);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
  .stratviz-scanline {
    opacity: 0.35;
  }
}

@media (max-width: 480px) {
  .stratviz-mode-badge {
    top: 4px;
    left: 6px;
    font-size: 6px;
    padding: 2px 5px;
    max-width: calc(100% - 12px);
  }
}

@media (prefers-reduced-motion: reduce) {
  .stratviz-sheen,
  .stratviz-depth,
  .stratviz-mode-ring,
  .stratviz-scanline::after,
  .stratviz-cursor-reticle::before { animation: none !important; }
  .stratviz-stage.orb-reactive--speaking,
  .stratviz-stage.orb-reactive--user { animation: none !important; }
}

#hero[data-hero-visible="0"] .stratviz-stage *,
.hls-scrolling .stratviz-stage * {
  animation-play-state: paused !important;
}

.hls-lite .stratviz-scanline,
.hls-lite .stratviz-radar,
.hls-lite .stratviz-lattice {
  animation-duration: calc(var(--orb-reactive-speed, 1) * 12s) !important;
}

/* Mic debug overlay — subtle watermark on stratviz stage */
.stratviz-mic-debug {
  --mic-debug-green: color-mix(in srgb, var(--brand-green-display) 48%, transparent);
  position: absolute;
  inset: 0;
  z-index: 12;
  display: none;
  flex-direction: column;
  padding: 10px 12px 12px;
  pointer-events: none;
  background: transparent;
}

.stratviz-mic-debug.is-active {
  display: flex;
}

.stratviz-mic-debug-copy {
  position: absolute;
  top: 6px;
  right: 6px;
  z-index: 20;
  display: none;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  padding: 0;
  border: none;
  border-radius: 6px;
  background: transparent;
  color: color-mix(in srgb, var(--brand-green-display) 50%, transparent);
  cursor: pointer;
  pointer-events: auto;
  transition: color 0.2s ease, transform 0.15s ease;
}

.stratviz-stage:has(.stratviz-mic-debug.is-active) .stratviz-mic-debug-copy {
  display: inline-flex;
}

.stratviz-mic-debug-copy:hover {
  color: color-mix(in srgb, var(--brand-green-display) 68%, transparent);
  transform: translateY(-1px);
}

.stratviz-mic-debug-copy:active { transform: translateY(0); }

.stratviz-mic-debug-copy.is-copied {
  color: color-mix(in srgb, var(--brand-green-display) 72%, transparent);
}

.stratviz-mic-debug-list {
  flex: 1;
  min-height: 0;
  margin-top: 8px;
  overflow: hidden;
  font: 500 clamp(8px, 0.95vw, 10px) / 1.45 ui-monospace, SFMono-Regular, Menlo, monospace;
  letter-spacing: 0.02em;
  color: var(--mic-debug-green);
  opacity: 0.46;
  text-shadow: none;
  pointer-events: none;
  mask-image: linear-gradient(to bottom, transparent 0%, #000 10%, #000 88%, transparent 100%);
  -webkit-mask-image: linear-gradient(to bottom, transparent 0%, #000 10%, #000 88%, transparent 100%);
}

.stratviz-mic-debug-line {
  padding: 1px 0;
  white-space: pre-wrap;
  word-break: break-word;
}

.stratviz-mic-debug-line--warn {
  color: color-mix(in srgb, #e8c860 52%, var(--brand-green-display) 48%);
  opacity: 0.58;
}

.stratviz-mic-debug-line--error {
  color: color-mix(in srgb, #e8a0a0 50%, var(--brand-green-display) 50%);
  opacity: 0.58;
}

@media (max-width: 768px) {
  .stratviz-mic-debug { padding: 8px 10px 10px; }
  .stratviz-mic-debug-copy { top: 5px; right: 5px; width: 26px; height: 26px; }
  .stratviz-mic-debug-list { margin-top: 6px; font-size: 8px; line-height: 1.4; opacity: 0.42; }
}

[data-theme="light"] .stratviz-mic-debug-copy {
  color: color-mix(in srgb, var(--brand-green-solid) 50%, transparent);
}

[data-theme="light"] .stratviz-mic-debug-list {
  opacity: 0.4;
  color: color-mix(in srgb, var(--brand-green-solid) 52%, transparent);
}