/* ============================================================
   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__core-mark { forced-color-adjust: none; background: CanvasText; }
}

/* The Visitech mark over the label (Visitech's feedback document, item 36,
   2026-10-08), painted through a mask so it wears the label's own gradient.
   The viewBox is cut tight round the glyph: assets/img/visitech-mark.svg pads
   it into a square for the admin menu. Sized in the ring's own units, because
   the core is a third of the ring at every size: beside the mark the label
   steps down so the pair fits the disc, and ja's "イメージング" keeps to one
   line, which at the bare label's 30px it did not. With the label cleared,
   the mark stands alone, larger. */
.vt-ring__core-mark {
  flex: none;
  width: 10cqi;
  aspect-ratio: 72.3 / 46.6;
  background: var(--gradient-electric);
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='161.1 353.6 72.3 46.6'%3E%3Cpath d='M222.128 353.689l-15.077 32.755h-.26v-.005H196.63l-1.275-9.083h10.5l-2.442-23.667H192.039l3.314 23.663-34.236 0 35.509 9.086 1.912 13.651h11.634l23.136-46.4Z'/%3E%3C/svg%3E") center / contain no-repeat;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='161.1 353.6 72.3 46.6'%3E%3Cpath d='M222.128 353.689l-15.077 32.755h-.26v-.005H196.63l-1.275-9.083h10.5l-2.442-23.667H192.039l3.314 23.663-34.236 0 35.509 9.086 1.912 13.651h11.634l23.136-46.4Z'/%3E%3C/svg%3E") center / contain no-repeat;
}
.vt-ring__core-mark--solo { width: 15cqi; }
.vt-ring__core-mark + .vt-ring__core-label {
  margin-top: 1.4cqi;
  font-size: clamp(12px, 3.8cqi, 22px);
}
.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; }
}