/* Four independent ball-label concepts. Loaded only by the four new preview pages. */
@property --ball-label-hue {
  syntax: "<angle>";
  inherits: false;
  initial-value: 8deg;
}

/* 01 — Holographic prism label */
html body[data-ball-label-style="prism-tag"] .node-label {
  top: 70% !important;
  width: 76% !important;
  max-width: 76% !important;
  min-height: 0 !important;
  padding: var(--label-pad-y, 0px) var(--label-prism-pad-x, 0px) !important;
  overflow: hidden !important;
  border: 0 !important;
  clip-path: polygon(8% 0, 92% 0, 100% 50%, 92% 100%, 8% 100%, 0 50%) !important;
  background:
    linear-gradient(90deg, transparent 0 4%, rgba(38, 239, 255, .18) 12%, rgba(5, 12, 30, .9) 30% 70%, rgba(213, 72, 255, .18) 88%, transparent 96%),
    linear-gradient(180deg, rgba(255,255,255,.1), transparent 42%, rgba(0,0,0,.34)) !important;
  box-shadow:
    inset 0 1px rgba(105, 247, 255, .82),
    inset 0 -1px rgba(225, 95, 255, .68),
    0 0 10px color-mix(in srgb, var(--accent) 32%, transparent) !important;
  font-family: "HarmonyOS Sans SC", "MiSans", "Microsoft YaHei UI", sans-serif !important;
  font-size: var(--label-font-px, 0px) !important;
  font-weight: 720 !important;
  letter-spacing: var(--label-letter-spacing-px, 0px) !important;
}

html body[data-ball-label-style="prism-tag"] .node-label-char {
  --char-glow: rgba(116, 239, 255, .66);
  z-index: 3;
  background: linear-gradient(180deg, #fff 0 32%, #aef7ff 48%, #ddaeff 70%, #fff 100%) !important;
  background-size: 100% 220% !important;
  filter: drop-shadow(0 1px 1px #000) drop-shadow(0 0 3px var(--char-glow)) !important;
  animation: prism-letter-shift 4.8s ease-in-out infinite !important;
  animation-delay: calc(var(--label-delay) + var(--char-delay)) !important;
}

html body[data-ball-label-style="prism-tag"] .node-label::before {
  content: "" !important;
  position: absolute !important;
  inset: 0 auto 0 -32% !important;
  z-index: 2 !important;
  width: 24% !important;
  height: 100% !important;
  opacity: .72 !important;
  transform: skewX(-18deg) !important;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,.78), rgba(89,239,255,.28), transparent) !important;
  filter: blur(.5px) !important;
  animation: prism-tag-scan 5.4s linear infinite !important;
  animation-delay: var(--label-delay) !important;
}

html body[data-ball-label-style="prism-tag"] .node-label::after {
  content: "" !important;
  position: absolute !important;
  inset: var(--label-pad-y, 0px) 5% !important;
  display: block !important;
  padding: 0 !important;
  opacity: .52 !important;
  background:
    linear-gradient(90deg, #6ff4ff, transparent 18% 82%, #d968ff) top/100% var(--label-border-px, 0px) no-repeat,
    linear-gradient(90deg, #d968ff, transparent 18% 82%, #6ff4ff) bottom/100% var(--label-border-px, 0px) no-repeat !important;
  filter: none !important;
  animation: prism-edge-breathe 3.6s ease-in-out infinite !important;
}

/* 02 — No label; text follows the animated brand-logo colour logic. */
html body[data-ball-label-style="brand-type"] .node-label {
  top: 72% !important;
  width: auto !important;
  max-width: 76% !important;
  min-width: 0 !important;
  min-height: 0 !important;
  padding: 0 !important;
  overflow: visible !important;
  border: 0 !important;
  border-radius: 0 !important;
  clip-path: none !important;
  background: none !important;
  box-shadow: none !important;
  font-family: "HarmonyOS Sans SC", "MiSans", "Alibaba PuHuiTi 3.0", "Microsoft YaHei UI", sans-serif !important;
  font-size: var(--label-font-px, 0px) !important;
  font-weight: 750 !important;
  line-height: 1 !important;
  letter-spacing: var(--label-letter-spacing-px, 0px) !important;
}

html body[data-ball-label-style="brand-type"] .node-label::before,
html body[data-ball-label-style="brand-type"] .node-label::after {
  display: none !important;
  content: none !important;
  animation: none !important;
}

html body[data-ball-label-style="brand-type"] .node-label-char {
  --ball-label-hue: 8deg;
  color: #fff !important;
  background-image: linear-gradient(100deg,
    hsl(var(--ball-label-hue) 100% 64%) 0%,
    hsl(calc(var(--ball-label-hue) + 38deg) 100% 67%) 48%,
    hsl(calc(var(--ball-label-hue) + 190deg) 100% 70%) 100%) !important;
  background-size: 100% 100% !important;
  background-position: 50% 50% !important;
  -webkit-background-clip: text !important;
  background-clip: text !important;
  -webkit-text-fill-color: transparent !important;
  filter: drop-shadow(0 1px 1px rgba(0,0,0,.9)) drop-shadow(0 0 4px color-mix(in srgb, var(--accent) 50%, transparent)) !important;
  animation: brand-type-spectrum 7.2s linear infinite !important;
  animation-delay: calc(var(--label-delay) - var(--char-delay)) !important;
}

/* 03 — Orbital inscription: no conventional label, only a light orbit and marker. */
html body[data-ball-label-style="orbit-inscription"] .node-label {
  top: 72% !important;
  width: 76% !important;
  max-width: 76% !important;
  min-height: 0 !important;
  padding: 0 var(--label-pad-x, 0px) !important;
  overflow: visible !important;
  border: 0 !important;
  border-radius: 0 !important;
  clip-path: none !important;
  background: none !important;
  box-shadow: none !important;
  font-family: "HarmonyOS Sans SC", "MiSans", "Microsoft YaHei UI", sans-serif !important;
  font-size: var(--label-font-px, 0px) !important;
  font-weight: 640 !important;
  letter-spacing: var(--label-letter-spacing-px, 0px) !important;
}

html body[data-ball-label-style="orbit-inscription"] .node-label-char {
  z-index: 3;
  background: linear-gradient(90deg, #fff7d3, #fff, #a9efff, #d9b7ff, #fff7d3) !important;
  background-size: 240% 100% !important;
  filter: drop-shadow(0 1px 1px #000) drop-shadow(0 0 3px rgba(154, 231, 255, .54)) !important;
  animation: orbit-text-shimmer 6.8s linear infinite !important;
  animation-delay: calc(var(--label-delay) + var(--char-delay)) !important;
}

html body[data-ball-label-style="orbit-inscription"] .node-label::before,
html body[data-ball-label-style="orbit-inscription"] .node-label::after {
  content: none !important;
  display: none !important;
  animation: none !important;
}

/* 04 — Plain black naming: keep the label position, remove the coordinate plate. */
html body[data-ball-label-style="starmap-coordinate"] .node-label {
  top: 72% !important;
  width: auto !important;
  max-width: 76% !important;
  min-width: 0 !important;
  min-height: 0 !important;
  padding: 0 !important;
  overflow: visible !important;
  border: 0 !important;
  border-radius: 0 !important;
  clip-path: none !important;
  background: none !important;
  box-shadow: none !important;
  font-family: "Cascadia Mono", "Microsoft YaHei UI", monospace !important;
  font-size: var(--label-font-px, 0px) !important;
  font-weight: 650 !important;
  letter-spacing: var(--label-letter-spacing-px, 0px) !important;
}

html body[data-ball-label-style="starmap-coordinate"] .node-label-char {
  z-index: 3;
  color: #05070b !important;
  -webkit-text-fill-color: #05070b !important;
  background: none !important;
  -webkit-background-clip: border-box !important;
  background-clip: border-box !important;
  filter: none !important;
  animation: none !important;
}

html body[data-ball-label-style="starmap-coordinate"] .node-label::before,
html body[data-ball-label-style="starmap-coordinate"] .node-label::after {
  content: none !important;
  display: none !important;
  animation: none !important;
}

/* 05 — Soft capsule: rounded glass instead of a hard rectangular plate. */
html body[data-ball-label-style="soft-capsule"] .node-label {
  top: 70% !important;
  width: auto !important;
  max-width: 76% !important;
  min-width: 0 !important;
  min-height: 0 !important;
  padding: var(--label-capsule-pad-y, 3px) var(--label-capsule-pad-x, 7px) !important;
  overflow: hidden !important;
  border: var(--label-border-px, 0px) solid rgba(119, 232, 255, .54) !important;
  border-color: color-mix(in srgb, var(--accent) 58%, rgba(255,255,255,.66)) !important;
  border-radius: 999px !important;
  clip-path: none !important;
  background:
    linear-gradient(180deg, rgba(255,255,255,.09), rgba(255,255,255,.015) 42%, rgba(0,0,0,.26)),
    rgba(2, 5, 13, .93) !important;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.22),
    inset 0 -1px 0 rgba(0,0,0,.44),
    0 2px 7px rgba(0,0,0,.42),
    0 0 8px color-mix(in srgb, var(--accent) 30%, transparent) !important;
  -webkit-backdrop-filter: blur(5px) saturate(1.16) !important;
  backdrop-filter: blur(5px) saturate(1.16) !important;
  font-size: var(--label-capsule-font-px, 0px) !important;
  font-weight: 680 !important;
  line-height: 1.1 !important;
  letter-spacing: var(--label-letter-spacing-px, 0px) !important;
  animation: capsule-label-breathe 4.8s ease-in-out infinite !important;
  animation-delay: var(--label-delay) !important;
}

html body[data-ball-label-style="soft-capsule"] .node-label-char {
  /* Chinese glyph metrics sit slightly high inside their line box. Offset by
     em so the optical correction scales with near/far label size. */
  transform: translateY(.055em) !important;
}

html body[data-ball-label-style="soft-capsule"] .node-label::before {
  content: "" !important;
  position: absolute !important;
  z-index: 2 !important;
  left: -38% !important;
  top: 0 !important;
  width: 30% !important;
  height: 100% !important;
  opacity: 0 !important;
  border-radius: inherit !important;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,.44), transparent) !important;
  filter: blur(.4px) !important;
  transform: skewX(-18deg) !important;
  animation: capsule-sheen 6.2s ease-in-out infinite !important;
  animation-delay: var(--label-delay) !important;
}

html body[data-ball-label-style="soft-capsule"] .node-label::after {
  content: "" !important;
  position: absolute !important;
  inset: var(--label-border-px, 0px) !important;
  display: block !important;
  padding: 0 !important;
  border: var(--label-border-px, 0px) solid rgba(255,255,255,.07) !important;
  border-radius: inherit !important;
  background: none !important;
  opacity: 1 !important;
  filter: none !important;
  animation: none !important;
  pointer-events: none !important;
}

/* 06 — Compact original: preserve the dark plate but fit it to the text. */
html body[data-ball-label-style="compact-original"] .node-label {
  top: 70% !important;
  width: 76% !important;
  max-width: 76% !important;
  min-width: 0 !important;
  min-height: 0 !important;
  padding: var(--label-pad-y, 0px) var(--label-pad-x, 0px) !important;
  overflow: hidden !important;
  border-radius: var(--label-compact-radius-px, 0px) !important;
  background: linear-gradient(90deg, transparent 0, rgba(0,0,0,.94) 13% 87%, transparent 100%) !important;
  font-size: var(--label-font-px, 0px) !important;
  font-weight: 680 !important;
  line-height: 1.05 !important;
  letter-spacing: var(--label-letter-spacing-px, 0px) !important;
}

html body[data-ball-label-style="compact-original"] .node-label::after {
  padding: 0 !important;
}

/* 07 — Rounded panel: a softened rectangle, intentionally not a capsule. */
html body[data-ball-label-style="rounded-panel"] .node-label {
  top: 70% !important;
  width: 76% !important;
  max-width: 76% !important;
  min-width: 0 !important;
  min-height: 0 !important;
  padding: var(--label-pad-y, 0px) var(--label-pad-x, 0px) !important;
  overflow: hidden !important;
  border: var(--label-border-px, 0px) solid rgba(119, 232, 255, .44) !important;
  border-color: color-mix(in srgb, var(--accent) 48%, rgba(255,255,255,.48)) !important;
  border-radius: var(--label-radius-px, 0px) !important;
  clip-path: none !important;
  background:
    linear-gradient(180deg, rgba(255,255,255,.1), transparent 38%, rgba(0,0,0,.18)),
    linear-gradient(90deg, rgba(2,7,16,.72), rgba(0,0,0,.95) 18% 82%, rgba(2,7,16,.72)) !important;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.16),
    inset 0 -1px 0 rgba(0,0,0,.55),
    0 2px 6px rgba(0,0,0,.38),
    0 0 6px color-mix(in srgb, var(--accent) 24%, transparent) !important;
  font-size: var(--label-font-px, 0px) !important;
  font-weight: 680 !important;
  line-height: 1.05 !important;
  letter-spacing: var(--label-letter-spacing-px, 0px) !important;
}

html body[data-ball-label-style="rounded-panel"] .node-label::before,
html body[data-ball-label-style="rounded-panel"] .node-label::after {
  border-radius: inherit !important;
}

html body[data-ball-label-style="rounded-panel"] .node-label::after {
  padding: 0 !important;
}

@keyframes prism-letter-shift {
  0%,100% { background-position: 50% 0%; filter: drop-shadow(0 1px 1px #000) drop-shadow(0 0 2px var(--char-glow)); }
  50% { background-position: 50% 100%; filter: drop-shadow(0 1px 1px #000) drop-shadow(0 0 4px var(--char-glow)); }
}
@keyframes prism-tag-scan { 0%,14% { left:-32%;opacity:0 } 22%{opacity:.72} 68%{left:108%;opacity:.76} 76%,100%{left:108%;opacity:0} }
@keyframes prism-edge-breathe { 50% { opacity:.9; filter:drop-shadow(0 0 3px rgba(119,237,255,.36)) } }
@keyframes brand-type-spectrum { from { --ball-label-hue:8deg } to { --ball-label-hue:368deg } }
@keyframes orbit-text-shimmer { to { background-position:-140% 50% } }
@keyframes orbit-ring-breathe { 50% { opacity:.95; transform:translate(-50%,-48%) rotate(3deg) scaleX(.96) } }
@keyframes orbit-marker-travel { from { left:6% } to { left:90% } }
@keyframes coordinate-letter-pulse { 0%,100%{background-position:50% 0;opacity:.9} 50%{background-position:50% 100%;opacity:1} }
@keyframes coordinate-scan { 0%,18%{left:-32%;opacity:0} 24%{opacity:.68} 67%{left:104%;opacity:.72} 75%,100%{left:104%;opacity:0} }
@keyframes coordinate-lock { 50% { opacity:.4 } }
@keyframes capsule-label-breathe {
  0%,100% { filter: brightness(.96); }
  50% { filter: brightness(1.09) drop-shadow(0 0 3px rgba(122,233,255,.25)); }
}
@keyframes capsule-sheen {
  0%,22% { left:-38%;opacity:0 }
  29% { opacity:.6 }
  58% { left:110%;opacity:.46 }
  66%,100% { left:110%;opacity:0 }
}

/* Gradient shorthands above reset background-clip; restore text-only painting last. */
html body[data-ball-label-style] .node-label-char {
  color: transparent !important;
  -webkit-text-fill-color: transparent !important;
  -webkit-background-clip: text !important;
  background-clip: text !important;
}

/* Scheme 04 intentionally uses solid ink instead of clipped gradient text. */
html body[data-ball-label-style="starmap-coordinate"] .node-label-char {
  color: #05070b !important;
  -webkit-text-fill-color: #05070b !important;
  -webkit-background-clip: border-box !important;
  background-clip: border-box !important;
  text-shadow:
    -1px 0 0 rgba(255, 255, 255, .9),
    1px 0 0 rgba(255, 255, 255, .9),
    0 -1px 0 rgba(255, 255, 255, .9),
    0 1px 0 rgba(255, 255, 255, .9) !important;
}

@media (prefers-reduced-motion: reduce) {
  html body[data-ball-label-style] .node-label,
  html body[data-ball-label-style] .node-label::before,
  html body[data-ball-label-style] .node-label::after,
  html body[data-ball-label-style] .node-label-char {
    animation: none !important;
  }
}