:root {
  --microsigil: #f1cf8c;
  --microsigil-dim: rgba(241, 207, 140, 0.34);
}

/* v0.10 keeps v0.9 as the visual base and replaces only the navigation grammar. */
.hero-conduit-core { stroke-width: 3.25; opacity: 0.56; }
.hero-conduit-glow { stroke-width: 10; opacity: 0.82; }

.doors-question {
  top: 9.5vh;
  width: min(570px, 42vw);
}

.sigil-hub,
.sigil-hub-mobile {
  opacity: 0;
  transform: scale(.82);
  transform-box: fill-box;
  transform-origin: center;
  transition: opacity 520ms ease, transform 680ms cubic-bezier(.2,.75,.15,1);
}
.doors.is-hub-visible .sigil-hub,
.doors.is-hub-visible .sigil-hub-mobile {
  opacity: .76;
  transform: scale(1);
}
.sigil-hub circle,
.sigil-hub path,
.sigil-hub line,
.sigil-hub-mobile circle,
.sigil-hub-mobile path,
.sigil-hub-mobile line {
  fill: none;
  stroke: rgba(241, 207, 140, .58);
  vector-effect: non-scaling-stroke;
}
.sigil-hub .hub-dot,
.sigil-hub-mobile .hub-dot {
  fill: rgba(255, 226, 166, .92);
  stroke: none;
}
.sigil-hub .hub-axis,
.sigil-hub-mobile .hub-axis { stroke-width: 1.2; opacity: .62; }
.sigil-hub .hub-ring,
.sigil-hub-mobile .hub-ring { stroke-width: 1.35; }
.sigil-hub .hub-ring-secondary,
.sigil-hub-mobile .hub-ring-secondary { stroke-width: .8; opacity: .52; }

.network-glow path { stroke-width: 9; stroke: rgba(241, 207, 140, 0.075); }
.network-core path { stroke-width: 2.7; opacity: .48; }

.micro-mark {
  color: var(--microsigil);
  opacity: 0;
  transition: opacity 300ms ease;
}
.micro-mark.is-visible { opacity: .42; }
.micro-mark circle,
.micro-mark line,
.micro-mark path,
.micro-mark polygon {
  vector-effect: non-scaling-stroke;
  stroke: currentColor;
  stroke-width: 1.05;
  fill: none;
}
.micro-mark .micro-fill { fill: currentColor; stroke: none; }
.doors[data-selected] .micro-mark { opacity: .12; }
.doors[data-selected="start"] .micro-mark[data-micro-owner="start"],
.doors[data-selected="improve"] .micro-mark[data-micro-owner="improve"],
.doors[data-selected="operate"] .micro-mark[data-micro-owner="operate"],
.doors[data-selected="particular"] .micro-mark[data-micro-owner="particular"],
.doors[data-selected="care"] .micro-mark[data-micro-owner="care"] { opacity: .78; }

/* Five destinations: an ordered shallow arc rather than a branching stick figure. */
.door-node {
  width: min(190px, 16vw);
  max-width: 210px;
  min-height: 88px;
  padding: 46px 8px 8px;
  justify-content: center;
  text-align: center;
  color: rgba(231, 220, 201, .48);
  font-size: clamp(.86rem, 1vw, 1.04rem);
  transform: translate(-50%, 9px);
}
.door-node.is-arrived { transform: translate(-50%, 0); }
.door-node::before {
  left: 50%;
  top: 21px;
  width: 19px;
  height: 19px;
  border: 1px solid rgba(241, 207, 140, .48);
  background: rgba(2, 6, 10, .88);
  transform: translate(-50%, -50%);
  box-shadow:
    0 0 0 7px rgba(241, 207, 140, .025),
    inset 0 0 0 5px rgba(241, 207, 140, .018);
}
.door-node::after {
  content: attr(data-index);
  position: absolute;
  top: -4px;
  left: 50%;
  transform: translateX(-50%);
  color: rgba(241, 207, 140, .48);
  font-size: .66rem;
  font-weight: 620;
  letter-spacing: .12em;
}
.door-node:hover::before,
.door-node:focus-visible::before,
.door-node.is-selected::before {
  transform: translate(-50%, -50%) scale(1.08);
  background: rgba(241, 207, 140, .72);
  box-shadow: 0 0 0 7px rgba(241, 207, 140, .04), 0 0 22px rgba(241, 207, 140, .18);
}

.door-start { left: 10%; top: 55%; }
.door-improve { left: 30%; top: 58%; }
.door-operate { left: 50%; right: auto; top: 61%; width: min(240px, 18vw); }
.door-particular { left: 70%; top: 58%; }
.door-care { left: 90%; right: auto; top: 55%; }

.door-detail {
  bottom: max(22px, 3.6vh);
  width: min(900px, 82vw);
  background: linear-gradient(to bottom, rgba(2, 6, 10, .12), rgba(2, 6, 10, .34));
  backdrop-filter: blur(3px);
}

@media (max-width: 960px) and (min-width: 681px) {
  .door-node { width: 17vw; font-size: .84rem; }
  .door-start { left: 9%; }
  .door-care { left: 91%; }
}

@media (max-width: 680px) {
  .hero-conduit-core { stroke-width: 2.4; }
  .hero-conduit-glow { stroke-width: 8; }
  .network-core path { stroke-width: 2.25; }
  .network-glow path { stroke-width: 7; }

  .doors-question { top: max(54px, 7vh); }

  .door-node {
    width: 44vw;
    max-width: 172px;
    min-height: 70px;
    padding: 38px 5px 6px;
    font-size: .82rem;
  }
  .door-node::before { top: 18px; width: 15px; height: 15px; }
  .door-node::after { top: -2px; font-size: .58rem; }

  .door-start { left: 24%; top: 27%; }
  .door-improve { left: 76%; top: 36%; }
  .door-operate { left: 50%; top: 46%; width: 48vw; }
  .door-particular { left: 24%; top: 56%; }
  .door-care { left: 76%; top: 66%; }

  .sigil-hub-mobile .hub-ring { stroke-width: 1.1; }
  .micro-mark.is-visible { opacity: .34; }
}

@media (prefers-reduced-motion: reduce) {
  .sigil-hub,
  .sigil-hub-mobile { opacity: .55 !important; transform: none !important; transition: none !important; }
  .micro-mark { opacity: .55 !important; transition: none !important; }
}