/* ============================================================
   Convergence ring — disciplines orbiting one core. Ported from the mockup's
   .vconv (styles/lithography.css, "The Imaging Heart").

   THE RING IS ITS OWN NAMED CONTAINER. The rule that a block cannot query its
   own container still holds — the queries below sit on the ring's CHILDREN
   (the nodes, the core), never on .vt-ring itself. It has to be the ring and
   not the section, because what decides the label layout is the ring's OWN
   width: inside a 50% column and full-band on a phone the section is the same
   width and the ring is not.

   Two label layouts:
   · SIDE (the mockup's, at the full 540px): label radiates outward beside the
     dot, one line. The mockup tuned this so the labels just clear a half-band
     column at full page width — any narrower and they overflow the page,
     which the mockup accepts and this block does not.
   · COMPACT (below 538px): label wraps under the dot (over it in the top
     half), centred — the reach is bounded, so a narrow column or a phone can
     never scroll sideways.
   ============================================================ */
.vt-ring {
  position: relative;
  width: min(540px, 100%);
  aspect-ratio: 1 / 1;
  margin-inline: auto;
  container-type: inline-size;
  container-name: vt-ring;
}

/* ---- wires (SVG) ---- */
.vt-ring__wires {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  overflow: visible;
  z-index: 1;
}
.vt-ring__line {
  fill: none;
  stroke: var(--color-light-purple);
  stroke-width: 1.5;
  opacity: 0;
  stroke-dasharray: 100;
  stroke-dashoffset: 100;
  transition: opacity var(--dur-base) var(--ease-standard), stroke-width var(--dur-base) var(--ease-standard);
}
.vt-ring.is-in .vt-ring__line {
  opacity: 0.3;
  animation: vt-ring-wire 0.7s var(--ease-standard) var(--d, 0s) forwards;
}
@keyframes vt-ring-wire {
  to { stroke-dashoffset: 0; }
}

.vt-ring__sig {
  fill: none;
  stroke: var(--color-light-purple);
  stroke-width: 2.5;
  stroke-linecap: round;
  stroke-dasharray: 7 93;
  stroke-dashoffset: 100;
  opacity: 0;
  filter: drop-shadow(0 0 6px color-mix(in srgb, var(--color-light-purple) 55%, transparent));
}
.vt-ring.is-in .vt-ring__sig {
  animation: vt-ring-sig 3.6s linear calc(1.1s + var(--p, 0s)) infinite;
}
@keyframes vt-ring-sig {
  0%   { stroke-dashoffset: 100; opacity: 0; }
  14%  { opacity: 0.9; }
  84%  { opacity: 0.9; }
  100% { stroke-dashoffset: 0; opacity: 0; }
}

.vt-ring__wire.is-dim { opacity: 0.28; }
.vt-ring__wire.is-active .vt-ring__line { opacity: 0.8; stroke-width: 2.5; }
.vt-ring__wire.is-active .vt-ring__sig { stroke-width: 4; }

/* the solid flow-ring enclosing the core, with packets orbiting it */
.vt-ring__orbit {
  fill: none;
  stroke: color-mix(in srgb, var(--color-light-purple) 55%, transparent);
  stroke-width: 2;
  opacity: 0;
  transition: opacity 0.6s var(--ease-standard) 0.9s;
}
.vt-ring.is-in .vt-ring__orbit { opacity: 1; }
.vt-ring__orbit-flow {
  fill: none;
  stroke: var(--color-light-purple);
  stroke-width: 2.5;
  stroke-linecap: round;
  stroke-dasharray: 1.5 15.1667;
  filter: drop-shadow(0 0 5px color-mix(in srgb, var(--color-light-purple) 60%, transparent));
  opacity: 0;
  transition: opacity 0.8s var(--ease-standard) 1s;
}
.vt-ring.is-in .vt-ring__orbit-flow {
  opacity: 1;
  animation: vt-ring-orbit 4.5s linear 1s infinite;
}
@keyframes vt-ring-orbit {
  from { stroke-dashoffset: 0; }
  to { stroke-dashoffset: -16.6667; }
}

/* ---- discipline nodes — dot anchored on its point, label radiating ---- */
.vt-ring__node {
  position: absolute;
  display: flex;
  align-items: center;
  gap: 11px;
  padding: 0;
  border: 0;
  background: none;
  cursor: pointer;
  font: inherit;
  color: var(--vt-fg, var(--color-text));
  white-space: nowrap;
  opacity: 0;
  transition: opacity 0.5s var(--ease-standard), transform 0.5s var(--ease-standard), color var(--dur-base);
  transition-delay: var(--d, 0s);
  z-index: 2;
}
.vt-ring__node--r { transform: translate(-11px, -50%) scale(0.82); }
.vt-ring__node--l { flex-direction: row-reverse; transform: translate(calc(-100% + 11px), -50%) scale(0.82); }
.vt-ring.is-in .vt-ring__node--r { opacity: 1; transform: translate(-11px, -50%) scale(1); }
.vt-ring.is-in .vt-ring__node--l { opacity: 1; transform: translate(calc(-100% + 11px), -50%) scale(1); }

.vt-ring__dot {
  width: 22px;
  height: 22px;
  border-radius: 50%;
  flex: 0 0 auto;
  background: radial-gradient(circle,
    color-mix(in srgb, var(--color-light-purple) 72%, transparent) 0%,
    color-mix(in srgb, var(--color-light-purple) 28%, transparent) 46%,
    transparent 84%);
  transition: transform var(--dur-base) var(--ease-standard), background var(--dur-base) var(--ease-standard);
}
.vt-ring__label {
  font-size: 14px;
  font-weight: var(--fw-medium);
  letter-spacing: -0.01em;
}
.vt-ring__node:hover,
.vt-ring__node:focus-visible {
  color: var(--color-dark-purple);
  outline: none;
}
/* the hover colour above is a LIGHT-band value; on a dark band brightening is
   the same gesture */
.vt-section.is-dark .vt-ring__node:hover,
.vt-section.is-dark .vt-ring__node:focus-visible { color: #ffffff; }
.vt-ring__node:hover .vt-ring__dot,
.vt-ring__node:focus-visible .vt-ring__dot {
  transform: scale(1.32);
  background: radial-gradient(circle,
    color-mix(in srgb, var(--color-light-purple) 92%, transparent) 0%,
    color-mix(in srgb, var(--color-light-purple) 42%, transparent) 48%,
    transparent 86%);
}

/* ---- the core ---- */
.vt-ring__core {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%) scale(0.85);
  width: 33%;
  height: 33%;
  border-radius: 50%;
  background: var(--gradient-feature-dark);
  border: 1px solid color-mix(in srgb, #ffffff 12%, transparent);
  box-shadow: 0 18px 50px -22px color-mix(in srgb, var(--color-ink) 70%, transparent),
    0 0 44px -6px color-mix(in srgb, var(--color-electric-blue) 28%, transparent);
  color: #ffffff;
  opacity: 0;
  transition: opacity 0.6s var(--ease-standard) 0.3s, transform 0.6s var(--ease-standard) 0.3s;
  z-index: 3;
}
.vt-ring.is-in .vt-ring__core {
  opacity: 1;
  transform: translate(-50%, -50%) scale(1);
}
.vt-ring__summary,
.vt-ring__detail {
  position: absolute;
  inset: 0;
  padding: 0 16px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  transition: opacity 0.3s var(--ease-standard);
}
/* Every node's detail panel is REAL, stacked content (the SSR contract — the
   mockup kept these in data-* attributes and crawlers never saw them); the
   script only toggles which one shows. */
.vt-ring__detail { opacity: 0; }
.vt-ring__core.is-detail .vt-ring__summary { opacity: 0; }
.vt-ring__detail.is-active { opacity: 1; }

.vt-ring__core-label {
  font-family: var(--font-display);
  font-weight: var(--fw-medium);
  font-size: 30px;
  line-height: 1.05;
  letter-spacing: -0.015em;
  background: var(--gradient-electric);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
/* Forced colours (Windows high contrast) drop background images, and this
   text is transparent over one — draw it in the system text colour instead
   (launch list B3, 2026-09-30). */
@media (forced-colors: active) {
  .vt-ring__core-label { background: none; color: CanvasText; }
}
.vt-ring__detail-no {
  font-size: max(11px, var(--fs-floor, 0px));
  font-weight: var(--fw-bold);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--color-light-purple);
}
.vt-ring__detail-name {
  font-family: var(--font-display);
  font-weight: 200;
  font-size: 23px;
  letter-spacing: -0.02em;
  line-height: 1.05;
  margin-top: 3px;
}
.vt-ring__detail-desc {
  font-size: 12px;
  line-height: 1.35;
  color: color-mix(in srgb, #ffffff 60%, transparent);
  margin-top: 6px;
  max-width: 132px;
}

/* ---- COMPACT — the ring is narrower than the mockup's 540px ----
   Labels wrap and stack against their dot (under it, or over it in the top
   half), so the widest reach is the label's own 84px and nothing can push a
   phone sideways. The dot stays anchored on its point in both layouts. */
@container vt-ring (max-width: 537.9px) {
  .vt-ring__node--r,
  .vt-ring__node--l {
    flex-direction: column;
    gap: 6px;
    white-space: normal;
    transform: translate(-50%, -11px) scale(0.82);
  }
  .vt-ring__node--up.vt-ring__node--r,
  .vt-ring__node--up.vt-ring__node--l {
    flex-direction: column-reverse;
    transform: translate(-50%, calc(-100% + 11px)) scale(0.82);
  }
  .vt-ring.is-in .vt-ring__node--r,
  .vt-ring.is-in .vt-ring__node--l {
    transform: translate(-50%, -11px) scale(1);
  }
  .vt-ring.is-in .vt-ring__node--up.vt-ring__node--r,
  .vt-ring.is-in .vt-ring__node--up.vt-ring__node--l {
    transform: translate(-50%, calc(-100% + 11px)) scale(1);
  }
  .vt-ring__label {
    font-size: max(11px, var(--fs-floor, 0px));
    max-width: 84px;
    text-align: center;
  }
  .vt-ring__core-label { font-size: 22px; }
  .vt-ring__detail-name { font-size: 19px; }
  .vt-ring__detail-desc { font-size: max(11px, var(--fs-floor, 0px)); max-width: 108px; }
}

/* the mockup's own reduced-motion contract: everything drawn, nothing moving */
@media (prefers-reduced-motion: reduce) {
  .vt-ring__line { animation: none; stroke-dashoffset: 0; }
  .vt-ring__sig { display: none; }
  .vt-ring__orbit-flow { animation: none; opacity: 0.6; }
  .vt-ring__node,
  .vt-ring__core { transition: none; }
}