/* Vision: one SVG, one camera. .vis-visual[data-phase] is set by
   src/vision.js; each phase only changes what's visible, the camera does
   the rest. */
.vision { border-top: 1px solid var(--line); overflow: clip; }

.vis-visual { position: relative; width: 100%; height: 100%; }
.vis-map { position: absolute; inset: 0 0 72px; }
.vis-map .map { overflow: visible; }

.vis-wards path {
  fill: color-mix(in srgb, var(--map-hi) calc(var(--a) * 100%), var(--map-lo));
  stroke-width: .6;
}
.vis-city { opacity: 1; }
.vis-state { fill: color-mix(in srgb, var(--brand) 3%, transparent); stroke: var(--brand); stroke-width: 1.2; vector-effect: non-scaling-stroke; stroke-linejoin: round; opacity: 0; transition: opacity 1s var(--ease); }
.vis-lines { fill: none; stroke: var(--line-2); stroke-width: .6; vector-effect: non-scaling-stroke; opacity: 0; transition: opacity 1s var(--ease); }

/* phase 1: every source — the whole city fills in */
.vis-visual[data-phase='1'] .vis-wards path { fill: color-mix(in srgb, var(--map-hi) calc((0.35 + var(--a) * 0.65) * 100%), var(--map-lo)); }

/* phase 2+: state scale — the city becomes a single bright mark */
.vis-visual[data-phase='2'] .vis-state,
.vis-visual[data-phase='3'] .vis-state,
.vis-visual[data-phase='4'] .vis-state { opacity: 1; }
.vis-visual[data-phase='2'] .vis-lines { opacity: 1; }
.vis-visual[data-phase='3'] .vis-lines,
.vis-visual[data-phase='4'] .vis-lines { opacity: .45; }
.vis-visual[data-phase='2'] .vis-wards path,
.vis-visual[data-phase='3'] .vis-wards path,
.vis-visual[data-phase='4'] .vis-wards path { fill: var(--brand-hi); stroke: none; }

.vis-dot { fill: var(--brand-hi); opacity: 0; transition: opacity .6s var(--ease); }
.vis-visual:is([data-phase='2'], [data-phase='3'], [data-phase='4']) .vis-dot { opacity: .9; animation: vis-beacon 2.4s var(--ease) infinite; transform-box: fill-box; transform-origin: center; }
@keyframes vis-beacon { 50% { opacity: .45; } }

/* phases 3–4: India. Hidden until then so it costs nothing at city scale */
.vis-states path, .vis-districts, .vis-borders, .vis-country { opacity: 0; transition: opacity .8s var(--ease); }
.vis-states path { fill: var(--map-lo); stroke: none; }
.vis-districts { fill: none; stroke: var(--brand); stroke-width: .4; vector-effect: non-scaling-stroke; }
.vis-borders { fill: none; stroke: var(--line-2); stroke-width: .7; vector-effect: non-scaling-stroke; stroke-linejoin: round; }
.vis-country { fill: none; stroke: var(--fg-faint); stroke-width: 1; vector-effect: non-scaling-stroke; stroke-linejoin: round; }

.vis-visual:is([data-phase='3'], [data-phase='4']) .vis-borders { opacity: 1; }
.vis-visual:is([data-phase='3'], [data-phase='4']) .vis-country { opacity: .9; }
.vis-visual:is([data-phase='3'], [data-phase='4']) .vis-lines { opacity: 0; }
/* phase 3: the 28 states, Jammu & Kashmir and Delhi light up, outward from
   Chennai; the other territories stay dark */
.vis-visual[data-phase='3'] .vis-states .is-lit {
  opacity: 1;
  transition-delay: calc(0.5s + var(--i) * 1.1s);
}
/* phase 4: every district, everywhere */
.vis-visual[data-phase='4'] .vis-states path { opacity: 1; fill: var(--map-all); transition-delay: 0s; }
.vis-visual[data-phase='4'] .vis-districts { opacity: .3; transition-delay: .3s; }
/* phase 4: every state drawn like Tamil Nadu (solid teal), clearly heavier
   than the district lines inside it */
.vis-borders { transition: opacity .8s var(--ease), stroke .6s var(--ease), stroke-width .6s var(--ease); }
.vis-visual[data-phase='4'] .vis-borders { stroke: var(--brand); stroke-width: 1.2; }
.vis-visual[data-phase='4'] .vis-country { stroke: var(--brand); stroke-width: 1.4; }

/* map sources, shown only while India is on screen */
.vis-credit {
  margin-left: auto; max-width: 230px; text-align: right; align-self: center;
  font: 400 11px/1.4 var(--mono); letter-spacing: .02em; color: var(--fg-faint);
  opacity: 0; transition: opacity .6s var(--ease);
}
/* phase 3 only: phase 4 is left uncluttered; the full credit is in #sources */
.vis-visual[data-phase='3'] .vis-credit { opacity: 1; }

/* the scope readout under the map */
.vis-scope {
  position: absolute; left: 0; right: 0; bottom: 0;
  display: flex; align-items: baseline; gap: 14px;
  padding-top: 18px; border-top: 1px solid var(--line);
}
.vis-n { font: 600 clamp(40px, 4vw, 56px)/0.9 var(--display); letter-spacing: -0.04em; color: var(--brand); font-variant-numeric: tabular-nums; min-width: 3ch; }
.vis-u { color: var(--fg-muted); font-size: 15px; }

/* sources in phase 1 */
.sources { display: flex; flex-wrap: wrap; gap: 8px; list-style: none; margin: 4px 0 0; padding: 0; }
.sources li {
  font: 400 12px/1 var(--mono); letter-spacing: .04em;
  padding: 8px 10px; border-radius: 6px;
  border: 1px dashed var(--line-2); color: var(--fg-muted);
}
.sources li.is-live { border: 1px solid color-mix(in srgb, var(--brand) 40%, transparent); color: var(--brand); background: var(--brand-tint); }
.sources li.is-live::before { content: ''; display: inline-block; width: 6px; height: 6px; border-radius: 50%; background: var(--brand); margin-right: 8px; vertical-align: 1px; }


/* ── tablet & phone ───────────────────────────────────────────────── */
@media (max-width: 900px) and (min-height: 501px) {
  .vis-visual { height: 50svh; }
  .vis-map { inset: 0 0 56px; }
  .vis-scope { padding-top: 12px; }
  .vis-n { font-size: 36px; }
  .vis-u { font-size: 14px; }
  .vis-credit { display: none; }
}

/* what stays constant as it grows */
.constants { border-top: 1px solid var(--line); }
.constants .trio { margin-top: 24px; }
/* map sources: a quiet reference table under the constants */
.map-refs { margin-top: 64px; padding-top: 24px; border-top: 1px solid var(--line); }
.map-refs .kicker { margin: 0 0 12px; }
.map-refs dl { margin: 0; }
.map-refs dl > div { display: grid; grid-template-columns: 140px minmax(0, 1fr); gap: 4px 24px; padding: 10px 0; border-bottom: 1px solid var(--line); font-size: 14px; }
.map-refs dt { color: var(--fg); font-weight: 500; }
.map-refs dd { margin: 0; color: var(--fg-muted); }
@media (max-width: 640px) {
  .map-refs dl > div { grid-template-columns: 1fr; padding: 12px 0; }
}