/* =================================
   Space Vanta Theme 1.0
   Viewport content: Vision
   Path: public/header/viewport/vision/vision.css

   Static look. Motion (orbits, drawing lids, ignition, scan) lives in
   public/header/motion/motion.css
   ================================= */

.sv-vision__panel { max-width: 1040px; }
.sv-vision__body {
  display: grid;
  grid-template-columns: 1.15fr 0.85fr;
  grid-template-areas:
    "text art"
    "pillars pillars"
    "eco eco";
  gap: 8px 40px;
  padding: 56px 56px 56px;
  align-items: center;
}
.sv-vision__text { grid-area: text; }
.sv-vision__art {
  position: relative;
  grid-area: art;
  justify-self: center;
  width: min(100%, 300px);
  /* tilts toward the pointer (--px / --py set by motion.js) */
  transform: perspective(800px) rotateX(calc(var(--py, 0) * -5deg)) rotateY(calc(var(--px, 0) * 7deg));
  transition: transform 0.25s ease-out;
}
.sv-vision__art svg { display: block; width: 100%; height: auto; overflow: visible; }
.sv-vision__pillars { grid-area: pillars; }
.sv-vision__eco { grid-area: eco; }

.sv-vision__title {
  margin: 0 0 18px;
  font-size: 46px;
  font-weight: 600;
  letter-spacing: -0.02em;
  line-height: 1.1;
}
.sv-vision__word { display: inline-block; overflow: hidden; vertical-align: top; padding-bottom: 0.12em; }
.sv-vision__word > span { display: inline-block; }
.sv-vision__lead { margin: 0; max-width: 520px; font-size: 16px; line-height: 1.75; color: var(--sv-muted, #7a7167); }

/* art: broken orbits + big linear eye */
.sv-vision__orbit { transform-origin: 120px 120px; }
.sv-vision__ring { fill: none; stroke: #c9c2b6; stroke-width: 0.8; }
.sv-vision__ring--1 { stroke-dasharray: 90 14 40 18 150 12; }
.sv-vision__ring--2 { stroke-dasharray: 60 10 120 16 60 10; stroke: #d9d3c8; }
.sv-vision__ring--3 { stroke-dasharray: 40 8 80 12; stroke: #e4dfd5; }
.sv-vision__bit { fill: url(#svg-metal-light); stroke: rgba(36, 44, 60, 0.4); stroke-width: 0.6; stroke-linejoin: round; }
.sv-vision__bit--blue { fill: var(--sv-blue, #1d6bff); stroke: none; filter: url(#svg-glow); }

.sv-vision__lid { fill: none; stroke: var(--sv-ink, #252321); stroke-width: 0.5; stroke-linecap: round; stroke-linejoin: round; stroke-dasharray: 1; stroke-dashoffset: 0; }
.sv-vision__tip { fill: none; stroke: var(--sv-blue, #1d6bff); stroke-width: 0.6; stroke-linecap: round; filter: url(#svg-glow); }
.sv-vision__ray { stroke: var(--sv-blue, #1d6bff); stroke-width: 0.5; stroke-linecap: round; filter: url(#svg-glow); }
.sv-vision__iris { stroke: var(--sv-ink, #252321); stroke-width: 0.4; stroke-linejoin: round; }
.sv-vision__facet { fill: rgba(120, 112, 100, 0.28); }
.sv-vision__pupil { filter: url(#svg-glow); }
.sv-vision__look {
  transform: translate(calc(var(--lx, 0) * 1px), calc(var(--ly, 0) * 1px));
  transition: transform 0.18s ease-out;
}

/* ---------- pillars ---------- */
.sv-vision__pillars { list-style: none; margin: 28px 0 0; padding: 0; display: grid; grid-template-columns: repeat(3, 1fr); gap: 28px; }
.sv-vision__pillars li { position: relative; padding-top: 18px; border-top: 1px solid #d8d2c7; }
.sv-vision__pillars li::before {
  content: "";
  position: absolute;
  top: -1px; left: 0;
  width: 30px; height: 2px;
  background: var(--sv-blue, #1d6bff);
  box-shadow: 0 0 8px var(--sv-blue-glow, rgba(29, 107, 255, 0.38));
  transform-origin: left;
  transition: width 0.5s cubic-bezier(0.2, 0.7, 0.2, 1);
}
.sv-vision__pillars li:hover::before { width: 100%; }

.sv-vision__picon { display: block; width: 28px; height: 28px; margin-bottom: 12px; transition: transform 0.35s cubic-bezier(0.2, 0.7, 0.2, 1); }
.sv-vision__picon svg { display: block; width: 100%; height: 100%; overflow: visible; }
.sv-vision__picon--gem .sv-icon-gem { width: 28px; height: 28px; }
.sv-vision__pillars li:hover .sv-vision__picon { transform: translateY(-3px) rotate(-4deg); }
.sv-pi__ring { fill: none; stroke: var(--sv-ink, #252321); stroke-width: 1; stroke-linejoin: round; stroke-dasharray: 5 2 18 2 40; }
.sv-pi__bit { fill: var(--sv-blue, #1d6bff); filter: url(#svg-glow); }
.sv-pi__core { stroke: var(--sv-blue, #1d6bff); stroke-width: 1.4; stroke-linecap: round; filter: url(#svg-glow); }
.sv-pi__hair { stroke: var(--sv-ink, #252321); stroke-width: 0.8; }
.sv-pi__fill { fill: url(#svg-blue-core); filter: url(#svg-glow); }

.sv-vision__index { font-size: 11px; color: var(--sv-muted, #7a7167); letter-spacing: 0.1em; }
.sv-vision__pillars h3 { margin: 6px 0; font-size: 17px; transition: color 0.2s ease; }
.sv-vision__pillars li:hover h3 { color: var(--sv-blue, #1d6bff); }
.sv-vision__pillars p { margin: 0; font-size: 13px; line-height: 1.65; color: var(--sv-muted, #7a7167); }

/* ---------- ecosystem: one lit node, the rest still to come ---------- */
.sv-vision__eco { margin-top: 36px; padding-top: 30px; border-top: 1px solid #d8d2c7; }
.sv-vision__eco .sv-sheet__eyebrow { margin-bottom: 22px; }
.sv-vision__nodes { position: relative; list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(5, 1fr); gap: 18px; }
/* the broken line that joins the nodes, lit only up to the first one */
.sv-vision__nodes::before {
  content: "";
  position: absolute;
  top: 17px; left: 20px; right: 20px;
  height: 1px;
  background: repeating-linear-gradient(90deg, #cfc8bb 0 10px, transparent 10px 16px);
}
.sv-vision__nodes::after {
  content: "";
  position: absolute;
  top: 16px; left: 20px;
  width: 14%;
  height: 3px;
  background: linear-gradient(90deg, var(--sv-blue, #1d6bff), var(--sv-blue-2, #4d8dff) 70%, transparent);
  box-shadow: 0 0 10px var(--sv-blue-glow, rgba(29, 107, 255, 0.38));
}
.sv-vision__node { position: relative; z-index: 1; }
.sv-vision__nicon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 36px; height: 36px;
  margin-bottom: 12px;
  background: #fbf7f0;
  transition: transform 0.35s cubic-bezier(0.2, 0.7, 0.2, 1);
}
.sv-vision__nicon svg { display: block; width: 28px; height: 28px; overflow: visible; }
.sv-eco__face { stroke: rgba(36, 44, 60, 0.45); stroke-width: 0.5; stroke-linejoin: round; }
.sv-eco__core { filter: url(#svg-glow); }
.sv-eco__line { fill: none; stroke: #9a9185; stroke-width: 1.1; stroke-linecap: round; stroke-linejoin: round; transition: stroke 0.25s ease; }
.sv-vision__node:hover .sv-vision__nicon { transform: translateY(-3px); }
.sv-vision__node:hover .sv-eco__line { stroke: var(--sv-blue, #1d6bff); }

.sv-vision__nstate {
  display: inline-block;
  margin-bottom: 6px;
  font-size: 10px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--sv-muted, #7a7167);
}
.sv-vision__node[data-state="live"] .sv-vision__nstate { color: var(--sv-blue, #1d6bff); }
.sv-vision__node h3 { margin: 0 0 6px; font-size: 16px; }
.sv-vision__node[data-state="planned"] h3 { color: var(--sv-ink-2, #4b443c); }
.sv-vision__node p { margin: 0; font-size: 12.5px; line-height: 1.6; color: var(--sv-muted, #7a7167); }

@media (max-width: 900px) {
  .sv-vision__nodes { grid-template-columns: 1fr; gap: 20px; padding-left: 0; }
  .sv-vision__nodes::before { top: 18px; bottom: 18px; left: 17px; right: auto; width: 1px; height: auto; background: repeating-linear-gradient(180deg, #cfc8bb 0 10px, transparent 10px 16px); }
  .sv-vision__nodes::after { top: 18px; left: 16px; width: 3px; height: 40px; background: linear-gradient(180deg, var(--sv-blue, #1d6bff), transparent); }
  .sv-vision__node { display: grid; grid-template-columns: 36px 1fr; column-gap: 14px; }
  .sv-vision__nicon { grid-row: 1 / span 3; margin: 0; }
}

@media (max-width: 900px) {
  .sv-vision__body {
    grid-template-columns: 1fr;
    grid-template-areas: "art" "text" "pillars" "eco";
    padding: 64px 24px 44px;
    gap: 16px;
  }
  .sv-vision__art { width: min(70%, 220px); }
  .sv-vision__title { font-size: 32px; }
  .sv-vision__lead { font-size: 15px; }
  .sv-vision__pillars { grid-template-columns: 1fr; gap: 22px; margin-top: 12px; }
}