/* Aurora-Figur (0.73, DEC-037): rundes Porträt mit drehendem Nordlicht-Ring, Entwurf docs/design/aurora/Avatar.dc.html.
   Eine Definition für Dashboard, Login und Kiosk. Größe über --fig oder die Klassen --sm / --lg / --xl. Reines Dekor. */
.aurora-figure {
  --fig: 56px;
  --fig-ring: max(2px, calc(var(--fig) * .022));
  position: relative; flex: none; display: inline-block; width: var(--fig); height: var(--fig);
  border-radius: 50%; isolation: isolate;
  animation: figure-breathe 7s ease-in-out infinite;
}
.aurora-figure--sm { --fig: 44px; }
.aurora-figure--lg { --fig: 168px; }
.aurora-figure--xl { --fig: 200px; }
/* Ring: dreht (nur transform) */
.aurora-figure::before {
  content: ""; position: absolute; inset: 0; z-index: -1; border-radius: 50%;
  background: conic-gradient(from 200deg, #5EE6C8, #7DB6FC, #A98BFA, #5EE6C8);
  animation: figure-spin 16s linear infinite;
}
/* Leuchten: pulsiert (nur opacity) */
.aurora-figure::after {
  content: ""; position: absolute; inset: -30%; z-index: -2; border-radius: 50%; pointer-events: none;
  background: radial-gradient(circle, rgba(94, 230, 200, .38) 0%, rgba(169, 139, 250, .2) 42%, rgba(169, 139, 250, 0) 68%);
  animation: figure-pulse 5s ease-in-out infinite;
}
.aurora-figure img {
  position: absolute; inset: var(--fig-ring); display: block;
  width: calc(100% - 2 * var(--fig-ring)); height: calc(100% - 2 * var(--fig-ring));
  border-radius: 50%; object-fit: cover; background: #070B18;
}
/* Feine Zeilen, Randschatten und ein Lichtschimmer, der gelegentlich über das Porträt zieht */
.aurora-figure i {
  position: absolute; inset: var(--fig-ring); border-radius: 50%; overflow: hidden; pointer-events: none;
  background: repeating-linear-gradient(0deg, rgba(191, 255, 241, .05) 0 1px, rgba(0, 0, 0, 0) 1px 4px);
  box-shadow: inset 0 0 calc(var(--fig) * .12) rgba(7, 11, 24, .55);
}
.aurora-figure i::after {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(115deg, rgba(191, 255, 241, 0) 35%, rgba(191, 255, 241, .26) 50%, rgba(191, 255, 241, 0) 65%);
  transform: translateX(-120%);
  animation: figure-shimmer 9s ease-in-out infinite;
}
@keyframes figure-spin { to { transform: rotate(360deg); } }
@keyframes figure-breathe { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.03); } }
@keyframes figure-pulse { 0%, 100% { opacity: .55; } 50% { opacity: 1; } }
@keyframes figure-shimmer { 0%, 70% { transform: translateX(-120%); } 100% { transform: translateX(120%); } }

/* „Bewegung reduzieren“: Figur steht still */
@media (prefers-reduced-motion: reduce) {
  .aurora-figure, .aurora-figure::before, .aurora-figure::after, .aurora-figure i::after { animation: none !important; }
}
