/* Package scope visualization — focused tier pages
   Same SVG structure; palette swaps via CSS variables for dark/light themes.
   JS (package-scope-viz.js) arms then plays staggered reveal on scroll. */

.package-scope-viz {
  position: relative;
  --psv-bg: rgba(8, 12, 18, 0.78);
  --psv-border: rgba(148, 210, 233, 0.18);
  --psv-grid-a: rgba(34, 211, 238, 0.04);
  --psv-grid-b: rgba(45, 212, 191, 0.02);
  --psv-grid-line: rgba(148, 210, 233, 0.06);
  --psv-node: rgba(34, 211, 238, 0.9);
  --psv-node-dim: rgba(34, 211, 238, 0.42);
  --psv-hub: #2dd4bf;
  --psv-line: rgba(45, 212, 191, 0.32);
  --psv-label: rgba(186, 230, 253, 0.72);
  --psv-badge-bg: rgba(10, 18, 28, 0.82);
  --psv-badge-text: rgba(224, 242, 254, 0.88);
  --psv-accent: #22d3ee;
  --psv-accent-2: #2dd4bf;
  --psv-glow: rgba(34, 211, 238, 0.45);
  --psv-wave: rgba(34, 211, 238, 0.55);
  --psv-orbit: rgba(148, 210, 233, 0.14);
  --psv-tier-band: rgba(34, 211, 238, 0.06);
  --psv-silo-col: rgba(45, 212, 191, 0.07);
  --psv-floor: rgba(34, 211, 238, 0.05);
  --psv-hull: rgba(45, 212, 191, 0.22);
  --psv-deck: rgba(34, 211, 238, 0.55);
  --psv-radar: rgba(34, 211, 238, 0.35);
  --psv-hex: rgba(167, 139, 250, 0.55);
  width: 100%;
  min-height: 220px;
  border-radius: 20px;
  overflow: hidden;
}

.package-scope-viz[data-package='premium-authority'] {
  --psv-accent: #d4956a;
  --psv-accent-2: #e8b48a;
  --psv-node: rgba(212, 149, 106, 0.92);
  --psv-hub: #e8b48a;
  --psv-line: rgba(212, 149, 106, 0.34);
  --psv-wave: rgba(212, 149, 106, 0.5);
}

.package-scope-viz[data-package='authority-plus'] {
  --psv-accent: #cbd5e1;
  --psv-accent-2: #94a3b8;
  --psv-node: rgba(203, 213, 225, 0.92);
  --psv-hub: #e2e8f0;
  --psv-line: rgba(148, 163, 184, 0.38);
}

.package-scope-viz[data-package='authority-pro'] {
  --psv-accent: #fbbf24;
  --psv-accent-2: #f59e0b;
  --psv-node: rgba(251, 191, 36, 0.92);
  --psv-hub: #fcd34d;
  --psv-line: rgba(251, 191, 36, 0.34);
}

.package-scope-viz[data-package='enterprise-authority'] {
  --psv-accent: #a3a3a3;
  --psv-accent-2: #737373;
  --psv-node: rgba(163, 163, 163, 0.9);
  --psv-hub: #d4d4d4;
  --psv-line: rgba(115, 115, 115, 0.38);
}

.package-scope-viz[data-package='authority-battleship-seo'] {
  --psv-accent: #38bdf8;
  --psv-accent-2: #22d3ee;
  --psv-hex: rgba(56, 189, 248, 0.62);
}

html[data-theme='light'] .package-scope-viz {
  --psv-bg: rgba(248, 250, 252, 0.96);
  --psv-border: rgba(15, 23, 42, 0.1);
  --psv-grid-a: rgba(8, 145, 178, 0.05);
  --psv-grid-b: rgba(13, 148, 136, 0.03);
  --psv-grid-line: rgba(15, 23, 42, 0.05);
  --psv-node: rgba(8, 145, 178, 0.88);
  --psv-node-dim: rgba(8, 145, 178, 0.38);
  --psv-hub: #0d9488;
  --psv-line: rgba(13, 148, 136, 0.28);
  --psv-label: rgba(30, 41, 59, 0.72);
  --psv-badge-bg: rgba(255, 255, 255, 0.92);
  --psv-badge-text: rgba(15, 23, 42, 0.82);
  --psv-accent: #0891b2;
  --psv-accent-2: #0d9488;
  --psv-glow: rgba(8, 145, 178, 0.28);
  --psv-wave: rgba(8, 145, 178, 0.45);
  --psv-orbit: rgba(15, 23, 42, 0.08);
  --psv-tier-band: rgba(8, 145, 178, 0.07);
  --psv-silo-col: rgba(13, 148, 136, 0.08);
  --psv-floor: rgba(8, 145, 178, 0.06);
  --psv-hull: rgba(13, 148, 136, 0.18);
  --psv-deck: rgba(8, 145, 178, 0.42);
  --psv-radar: rgba(8, 145, 178, 0.32);
  --psv-hex: rgba(7, 89, 133, 0.45);
}

html[data-theme='light'] .package-scope-viz[data-package='premium-authority'] {
  --psv-node: rgba(180, 83, 9, 0.82);
  --psv-hub: #c2410c;
  --psv-line: rgba(180, 83, 9, 0.26);
  --psv-accent: #c2410c;
}

html[data-theme='light'] .package-scope-viz[data-package='authority-plus'] {
  --psv-node: rgba(71, 85, 105, 0.82);
  --psv-hub: #475569;
  --psv-accent: #475569;
}

html[data-theme='light'] .package-scope-viz[data-package='authority-pro'] {
  --psv-node: rgba(180, 83, 9, 0.82);
  --psv-hub: #b45309;
  --psv-accent: #b45309;
}

html[data-theme='light'] .package-scope-viz[data-package='enterprise-authority'] {
  --psv-node: rgba(64, 64, 64, 0.78);
  --psv-hub: #404040;
  --psv-accent: #404040;
}

.package-scope-viz__sr {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

.package-scope-viz__svg {
  display: block;
  width: 100%;
  height: auto;
  min-height: 220px;
}

.package-scope-viz .psv-panel {
  fill: url(#psv-grid-premium);
  stroke: var(--psv-border);
  stroke-width: 1;
}

.package-scope-viz[data-package] .psv-panel {
  fill: var(--psv-bg);
}

.package-scope-viz .psv-grid-line {
  stroke: var(--psv-grid-line);
  stroke-width: 1;
}

.package-scope-viz .psv-node {
  fill: var(--psv-node);
  filter: drop-shadow(0 0 4px var(--psv-glow));
}

.package-scope-viz .psv-hub {
  fill: var(--psv-hub);
  stroke: var(--psv-accent);
  stroke-width: 1.5;
  filter: drop-shadow(0 0 10px var(--psv-glow));
}

.package-scope-viz .psv-link {
  stroke: var(--psv-line);
  stroke-width: 1.2;
  stroke-linecap: round;
}

.package-scope-viz .psv-spine {
  stroke: var(--psv-line);
  stroke-width: 2;
  stroke-linecap: round;
  stroke-dasharray: 6 8;
}

.package-scope-viz .psv-tier-band,
.package-scope-viz .psv-silo-col,
.package-scope-viz .psv-floor {
  fill: var(--psv-tier-band);
  stroke: var(--psv-border);
  stroke-width: 1;
}

.package-scope-viz .psv-silo-col {
  fill: var(--psv-silo-col);
}

.package-scope-viz .psv-floor {
  fill: var(--psv-floor);
}

.package-scope-viz .psv-orbit {
  fill: none;
  stroke: var(--psv-orbit);
  stroke-width: 1;
}

.package-scope-viz .psv-campus-block {
  fill: var(--psv-node-dim);
  stroke: var(--psv-border);
  stroke-width: 1;
}

.package-scope-viz .psv-hull {
  fill: var(--psv-hull);
  stroke: var(--psv-accent);
  stroke-width: 1.2;
}

.package-scope-viz .psv-deck {
  fill: var(--psv-deck);
}

.package-scope-viz .psv-wave {
  fill: none;
  stroke: var(--psv-wave);
  stroke-width: 2;
  stroke-linecap: round;
}

.package-scope-viz .psv-radar-ring {
  fill: none;
  stroke: var(--psv-radar);
  stroke-width: 1;
}

.package-scope-viz .psv-radar-sweep {
  stroke: var(--psv-accent);
  stroke-width: 2;
  stroke-linecap: round;
  transform-origin: 0 0;
}

.package-scope-viz .psv-hex {
  fill: var(--psv-hex);
  stroke: var(--psv-accent);
  stroke-width: 1;
}

.package-scope-viz .psv-tier-label,
.package-scope-viz .psv-label {
  fill: var(--psv-label);
  font-family: system-ui, -apple-system, 'Segoe UI', sans-serif;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  text-anchor: middle;
}

.package-scope-viz .psv-tier-label {
  text-anchor: start;
  font-size: 10px;
}

.package-scope-viz .psv-badge rect {
  fill: var(--psv-badge-bg);
  stroke: var(--psv-border);
  stroke-width: 1;
}

.package-scope-viz .psv-badge text {
  fill: var(--psv-badge-text);
  font-family: system-ui, -apple-system, 'Segoe UI', sans-serif;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  text-anchor: middle;
}

/* Armed / live animation states */
.package-scope-viz.is-armed .psv-node,
.package-scope-viz.is-armed .psv-hub,
.package-scope-viz.is-armed .psv-link,
.package-scope-viz.is-armed .psv-spine,
.package-scope-viz.is-armed .psv-wave,
.package-scope-viz.is-armed .psv-hex,
.package-scope-viz.is-armed .psv-deck,
.package-scope-viz.is-armed .psv-hull,
.package-scope-viz.is-armed .psv-orbit,
.package-scope-viz.is-armed .psv-tier-band,
.package-scope-viz.is-armed .psv-silo-col,
.package-scope-viz.is-armed .psv-floor,
.package-scope-viz.is-armed .psv-campus-block,
.package-scope-viz.is-armed .psv-radar-ring,
.package-scope-viz.is-armed .psv-radar-sweep {
  opacity: 0;
}

.package-scope-viz.is-armed .psv-node,
.package-scope-viz.is-armed .psv-hub {
  transform-box: fill-box;
  transform-origin: center;
  transform: scale(0.4);
}

.package-scope-viz.is-live .psv-node,
.package-scope-viz.is-live .psv-hub,
.package-scope-viz.is-live .psv-link,
.package-scope-viz.is-live .psv-spine,
.package-scope-viz.is-live .psv-wave,
.package-scope-viz.is-live .psv-hex,
.package-scope-viz.is-live .psv-deck,
.package-scope-viz.is-live .psv-hull,
.package-scope-viz.is-live .psv-orbit,
.package-scope-viz.is-live .psv-tier-band,
.package-scope-viz.is-live .psv-silo-col,
.package-scope-viz.is-live .psv-floor,
.package-scope-viz.is-live .psv-campus-block,
.package-scope-viz.is-live .psv-radar-ring,
.package-scope-viz.is-live .psv-radar-sweep {
  opacity: 1;
  transition: opacity 0.55s ease, transform 0.55s cubic-bezier(0.22, 1, 0.36, 1);
  transition-delay: calc(var(--i, 0) * 14ms);
}

.package-scope-viz.is-live .psv-node,
.package-scope-viz.is-live .psv-hub {
  transform: scale(1);
}

.package-scope-viz.is-live .psv-wave {
  stroke-dasharray: 520;
  stroke-dashoffset: 520;
  animation: psv-wave-draw 2.4s ease forwards;
  animation-delay: calc(0.35s + var(--i, 0) * 0.18s);
}

.package-scope-viz.is-live .psv-radar-sweep {
  animation: psv-radar-spin 4.5s linear infinite;
  animation-delay: 0.8s;
}

@keyframes psv-wave-draw {
  to {
    stroke-dashoffset: 0;
  }
}

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

.silo-figure .package-scope-viz {
  border: 1px solid var(--psv-border);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.04),
    0 16px 40px rgba(2, 8, 16, 0.28);
}

html[data-theme='light'] .silo-figure .package-scope-viz {
  box-shadow: var(--shadow-card, 0 8px 24px rgba(15, 23, 42, 0.08));
}

@media (prefers-reduced-motion: reduce) {
  .package-scope-viz.is-armed .psv-node,
  .package-scope-viz.is-armed .psv-hub,
  .package-scope-viz.is-armed .psv-link,
  .package-scope-viz.is-armed .psv-spine,
  .package-scope-viz.is-armed .psv-wave,
  .package-scope-viz.is-armed .psv-hex,
  .package-scope-viz.is-armed .psv-deck,
  .package-scope-viz.is-armed .psv-hull,
  .package-scope-viz.is-armed .psv-orbit,
  .package-scope-viz.is-armed .psv-tier-band,
  .package-scope-viz.is-armed .psv-silo-col,
  .package-scope-viz.is-armed .psv-floor,
  .package-scope-viz.is-armed .psv-campus-block,
  .package-scope-viz.is-armed .psv-radar-ring,
  .package-scope-viz.is-armed .psv-radar-sweep {
    opacity: 1;
    transform: none;
  }

  .package-scope-viz.is-live .psv-wave {
    stroke-dashoffset: 0;
    animation: none;
  }

  .package-scope-viz.is-live .psv-radar-sweep {
    animation: none;
    transform: rotate(45deg);
  }
}

@media (max-width: 768px) {
  .package-scope-viz__svg {
    min-height: 180px;
  }

  .package-scope-viz .psv-label,
  .package-scope-viz .psv-tier-label {
    font-size: 9px;
  }
}