.accent-tri {
  position:absolute;
  inset: -2%;
  z-index: 9;
  pointer-events:none;
  opacity:.96;
}
.accent-tri__outer,
.accent-tri__inner,
.accent-tri__third {
  position:absolute;
  inset:0;
  display:grid;
  place-items:center;
}

/*
 * Z_LOGO_THREE_TRI_LOCK_2026-05-13
 * Latest owner override: keep the logo to exactly three triangles.
 * This must never read as two connected triangles or a flat hexagram/star.
 *
 * Keep exactly three independently moving triangle layers:
 *   1. .accent-tri__outer = red, large, 8.2s clockwise path.
 *   2. .accent-tri__inner = cyan, offset upright, 10.7s reverse path.
 *   3. .accent-tri__third = green, independent 6.31s path without size pulse.
 *
 * Do not add fourth/fifth/sixth layers back. Do not reuse red/green
 * durations. Do not change red speed when the green speed is tuned.
 * Do not invert a triangle into a red+green/cyan pair. Do not make two
 * layers counter-rotate at matching speeds.
 *
 * CENTER_SPIN_LOCK_2026-05-13:
 * All three triangles must rotate around the exact center of the logo.
 * Do not put translate3d/translateX/translateY drift in triangle keyframes;
 * that makes the triangles orbit off-center. Only rotate and scale here.
 */
.accent-tri__outer {
  animation: zTriPathOuter 8.2s linear infinite;
}
.accent-tri__inner {
  animation: zTriPathInner 10.7s linear infinite reverse;
  opacity:.86;
}
.accent-tri__third {
  animation: zTriPathGreen 6.31s linear infinite;
  opacity: .94;
  transform-origin: 50% 50%;
}
.accent-tri svg { width:100%; height:100%; overflow:visible; }
.tri-stroke { fill:none; stroke-width:2; vector-effect:non-scaling-stroke; }
.tri-vertex { r: 4; }

.accent-ring {
  position: absolute;
  inset: -6%;
  /* ORBIT_DOTS_ZINDEX_2026-05-13: stay above the .z-disk pseudo-elements
   * (::before/::after at z-index up to ~1) and the layered glyph stack
   * (.layer-neon-z at 8, .accent-tri at 9). 20 gives headroom for future
   * additions without dropping dots under the disk halo. */
  z-index: 20;
  pointer-events: none;
  border-radius: 999px;
}

.accent-ring__orbit {
  position: absolute;
  inset: 0;
  border-radius: 999px;
  transform-origin: 50% 50%;
  animation: zOrbitDotsCw 7.9s linear infinite;
}

.accent-ring__orbit--ccw {
  inset: 6%;
  animation: zOrbitDotsCcw 11.4s linear infinite;
}

.accent-ring__dot {
  position: absolute;
  width: 4.2%;
  min-width: 3px;
  aspect-ratio: 1 / 1;
  border-radius: 999px;
  background: currentColor;
  /* ORBIT_DOT_OPACITY_2026-05-13: owner requested 0 transparency on the
   * glowing balls. The dot body and the inner two glow rings are solid
   * `currentColor`; the prior outer ring used color-mix(...transparent)
   * which made the halo edge fade out. Replace with solid currentColor so
   * the entire dot reads as fully opaque. Do not reintroduce transparent
   * color-mix here without a new instruction. */
  opacity: 1;
  box-shadow:
    0 0 7px currentColor,
    0 0 18px currentColor,
    0 0 30px currentColor;
}

.accent-ring__orbit--cw .accent-ring__dot:nth-child(1) { left: 49%; top: 1%; }
.accent-ring__orbit--cw .accent-ring__dot:nth-child(2) { left: 87%; top: 28%; }
.accent-ring__orbit--cw .accent-ring__dot:nth-child(3) { left: 17%; top: 73%; }
.accent-ring__orbit--ccw .accent-ring__dot:nth-child(1) { left: 78%; top: 75%; }
.accent-ring__orbit--ccw .accent-ring__dot:nth-child(2) { left: 11%; top: 31%; }
.accent-ring__orbit--ccw .accent-ring__dot:nth-child(3) { left: 50%; top: 91%; }
.accent-ring__dot.dot-c1 { color: var(--c1); }
.accent-ring__dot.dot-c2 { color: var(--c2); }
.accent-ring__dot.dot-c3 { color: #fff5d6; }

@keyframes zOrbitDotsCw {
  to { transform: rotate(360deg); }
}

@keyframes zOrbitDotsCcw {
  to { transform: rotate(-360deg); }
}

@keyframes zTriPathOuter {
  0%   { transform: rotate(0deg) scale(1); }
  25%  { transform: rotate(90deg) scale(1.025); }
  50%  { transform: rotate(180deg) scale(1); }
  75%  { transform: rotate(270deg) scale(.985); }
  100% { transform: rotate(360deg) scale(1); }
}
@keyframes zTriPathInner {
  0%   { transform: rotate(9deg) scale(.82); }
  25%  { transform: rotate(-56deg) scale(.88); }
  50%  { transform: rotate(-129deg) scale(.84); }
  75%  { transform: rotate(-201deg) scale(.9); }
  100% { transform: rotate(-351deg) scale(.82); }
}
@keyframes zTriPathGreen {
  0%   { transform: rotate(-37deg) scale(.88); }
  18%  { transform: rotate(41deg) scale(.88); }
  39%  { transform: rotate(119deg) scale(.88); }
  62%  { transform: rotate(211deg) scale(.88); }
  83%  { transform: rotate(287deg) scale(.88); }
  100% { transform: rotate(323deg) scale(.88); }
}