/* ==========================================
   BOWHUMAN-ORBIT (nur aboutme.html, Abschnitt #privat)
   Uebernommen aus dem bowhuman-Design-System, Kap. 10 §8
   (Websites/shared/bowhuman-components.css: .bh-appicon/.bhi-*,
   Websites/www.bowhuman.eu/css/www.css: .orbit-*).
   Die Icons kommen unveraendert aus js/bowhuman-app-icon(-data).js,
   Kopien aus /Users/peterklein/Projekte/BOWHUMAN/Websites/shared/.
   Alle bowhuman-Tokens sind auf .bh-orbit-panel begrenzt, damit sie
   das uxi.one-Design nicht beruehren.
   ========================================== */

.bh-orbit-panel {
  --cyan: #00BCD4;
  --magenta: #E91E8C;
  --orange: #FF9100;
  --green: #B4FF2E;
  --bh-dur-2: 220ms;
  --bh-dur-enter: 640ms;
  --bh-ease-out: cubic-bezier(.2, .8, .2, 1);
  --bh-spring: cubic-bezier(.34, 1.56, .64, 1);

  align-items: center;
  justify-content: center;
  background: linear-gradient(135deg, #1a2e4a 0%, #0d1117 100%);
  border: 1px solid rgba(255, 255, 255, 0.06);
  color: #fff;
  overflow: hidden;
}

.bh-orbit-caption {
  margin: 0;
  font-size: 0.75rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.55);
  text-align: center;
}

/* --- App-Icon als animierbares Inline-SVG (unveraendert aus bowhuman) --- */
@property --glint { syntax: '<percentage>'; inherits: true; initial-value: 0%; }

.bh-appicon {
  display: inline-block; flex-shrink: 0; line-height: 0;
  width: var(--bhi-size, 56px); height: var(--bhi-size, 56px);
}
.bh-appicon:not([data-variant="mark"]) { border-radius: 22.37%; overflow: hidden; }
.bh-appicon svg { width: 100%; height: 100%; display: block; overflow: visible; }
.bh-appicon:not([data-variant="mark"]) svg { overflow: hidden; }

/* uxi.one hat kein Dark-Theme: alle Icons tragen data-tone="dark" (Navy-Fassung) */
.bh-appicon polygon {
  --f: var(--l, currentColor);
  fill:   color-mix(in srgb, #fff var(--glint, 0%), var(--f, currentColor));
  stroke: color-mix(in srgb, #fff var(--glint, 0%), var(--f, currentColor));
  stroke-width: 2; stroke-linejoin: round;
  transform-box: fill-box; transform-origin: center;
}
.bhi-tile-d { display: none; }
.bh-appicon[data-tone="dark"] polygon { --f: var(--d, currentColor); }
.bh-appicon[data-tone="dark"] .bhi-tile-d { display: inline; }
.bh-appicon[data-tone="dark"] .bhi-tile-l { display: none; }

.bhi-fly, .bhi-motif { transform-box: view-box; transform-origin: 512px 512px; }
.bhi-motif { rotate: var(--spin, 0deg); transition: rotate 900ms var(--bh-spring); }

.bhi-pre polygon { opacity: 0; }
.bhi-assemble polygon {
  animation: bhi-in var(--bh-dur-enter) var(--bh-spring) both;
  animation-delay: calc(var(--o, 0) * 24ms);
}
@keyframes bhi-in {
  from { opacity: 0; translate: var(--dx, 0px) var(--dy, 0px); rotate: var(--r, 0deg); scale: .35; }
  60%  { opacity: 1; }
}

.bhi-sig-glint polygon {
  animation: bhi-glint 760ms var(--bh-ease-out) both;
  animation-delay: calc(var(--o, 0) * 26ms);
}
@keyframes bhi-glint { 0% { --glint: 0%; } 35% { --glint: 48%; } 100% { --glint: 0%; } }
.bhi-sig-sway .bhi-motif   { transform-origin: var(--px, 512px) var(--py, 512px); animation: bhi-sway 1000ms var(--bh-ease-out); }
.bhi-sig-rustle .bhi-motif { transform-origin: var(--px, 512px) var(--py, 512px); animation: bhi-rustle 900ms ease-in-out; }
@keyframes bhi-sway   { 25% { rotate: -7deg; } 55% { rotate: 4deg; } 80% { rotate: -1.5deg; } }
@keyframes bhi-rustle { 20% { rotate: 2.5deg; } 40% { rotate: -2deg; } 60% { rotate: 1.4deg; } 80% { rotate: -.6deg; } }
.bhi-gate { transform-box: fill-box; transform-origin: top; translate: 0 -100%; }
.bhi-gate-bar { fill: #ffb24d; }
.bhi-sig-gate .bhi-gate { animation: bhi-gate 1100ms var(--bh-ease-out); }
@keyframes bhi-gate { 35%, 65% { translate: 0 0; } }

/* --- Orbit (aus www.bowhuman.eu) --- */
.orbit { position: relative; width: min(400px, 100%); aspect-ratio: 1; --ring: 39%; }
.orbit-lines { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; pointer-events: none; }
.orbit-ring { fill: none; stroke: rgba(255, 255, 255, .08); stroke-width: .25; stroke-dasharray: .8 1.2; vector-effect: non-scaling-stroke; }
.orbit-ring-outer { fill: none; stroke: rgba(0, 188, 212, .12); stroke-width: 1; vector-effect: non-scaling-stroke; }
.orbit-line { stroke: rgba(255, 255, 255, .14); stroke-width: 1; vector-effect: non-scaling-stroke; transition: stroke var(--bh-dur-2) var(--bh-ease-out); }
.orbit.is-armed .orbit-line { stroke-dasharray: 1; stroke-dashoffset: 1; }
.orbit.is-armed.is-on .orbit-line { animation: orbit-draw 700ms var(--bh-ease-out) forwards; animation-delay: calc(900ms + var(--i, 0) * 90ms); }
@keyframes orbit-draw { to { stroke-dashoffset: 0; } }
.orbit-line.is-hot { stroke: var(--c, currentColor); }
.orbit-dot { fill: var(--c, currentColor); opacity: 0; }
.orbit-dot.is-run { opacity: 1; }
.orbit-center {
  position: absolute; left: 50%; top: 50%; translate: -50% -50%;
  width: 44%; aspect-ratio: 1; display: grid; place-items: center; border-radius: 50%;
}
.orbit-center::before {
  content: ''; position: absolute; inset: 8%; border-radius: 50%;
  background: radial-gradient(circle, rgba(0, 188, 212, .18), rgba(233, 30, 140, .06) 55%, transparent 70%);
  filter: blur(6px);
}
.orbit-center .bh-appicon { --bhi-size: 100%; position: relative; }
.orbit-node {
  position: absolute;
  left: calc(50% + var(--ring) * cos(var(--a, 0deg)));
  top: calc(50% + var(--ring) * sin(var(--a, 0deg)));
  translate: -50% -50%;
  display: flex; flex-direction: column; align-items: center; gap: 6px; text-decoration: none;
}
.orbit.is-armed .orbit-node { opacity: 0; }
.orbit.is-armed.is-on .orbit-node { animation: orbit-node-in 520ms var(--bh-spring) forwards; animation-delay: calc(760ms + var(--i, 0) * 90ms); }
@keyframes orbit-node-in { from { opacity: 0; scale: .6; } to { opacity: 1; scale: 1; } }
.orbit-node .bh-appicon {
  --bhi-size: clamp(44px, 11vw, 60px);
  box-shadow: 0 10px 30px rgba(0, 0, 0, .45);
  transition: box-shadow var(--bh-dur-2) var(--bh-ease-out);
}
.orbit-node:hover .bh-appicon, .orbit-node:focus-visible .bh-appicon { box-shadow: 0 0 0 3px var(--c, currentColor), 0 14px 40px rgba(0, 0, 0, .55); }
.orbit-node:focus-visible { outline: none; }
.orbit-name { font-size: 10px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: rgba(255, 255, 255, .85); }
.orbit-role { font-size: 10px; color: rgba(255, 255, 255, .55); margin-top: -4px; }

@media (max-width: 480px) {
  .orbit-role { display: none; }
}

@media (prefers-reduced-motion: reduce) {
  .bhi-motif { transition: none; }
  .orbit.is-armed .orbit-node { opacity: 1; animation: none; }
  .orbit.is-armed .orbit-line { stroke-dashoffset: 0; animation: none; }
}