/* Gazellen der animierten Savanne im Reiter „Die Herde“.
   Nutzt die Farb-Variablen --panel-solid, --text, --text-dim, --accent, --accent-text. */
.sg {
  position: absolute;
  padding: 0;
  border: 0;
  background: none;
  cursor: pointer;
  color: #e9973f;
  transform: translateX(-50%);
  -webkit-tap-highlight-color: transparent;
}
:root[data-theme="night"] .sg { color: #f2a541; }
:root[data-theme="night"] .sg svg.gz { filter: drop-shadow(0 0 4px rgba(242,165,65,.6)) drop-shadow(0 2px 2px rgba(0,0,0,.6)); }
.sg .gz {
  display: block;
  width: 100%;
  height: 100%;
  overflow: visible;
  /* dunkle Kontur, damit sich die Gazellen vom Foto abheben */
  filter: drop-shadow(1px 0 0 #3a2010) drop-shadow(-1px 0 0 #3a2010) drop-shadow(0 1px 0 #3a2010)
          drop-shadow(0 -1px 0 #3a2010) drop-shadow(0 3px 3px rgba(0,0,0,.4));
  transform-origin: 50% 100%;
}
.sg.left .gz { transform: scaleX(-1); }
.sg.walking .gz { animation: sg-hop .45s ease-in-out infinite; }
.sg.left.walking .gz { animation-name: sg-hop-left; }
.sg.grazing .gz { animation: sg-graze 1.4s ease-in-out infinite; }
.sg.left.grazing .gz { animation-name: sg-graze-left; }
@keyframes sg-hop       { 50% { transform: translateY(-12%); } }
@keyframes sg-hop-left  { 0%, 100% { transform: scaleX(-1); } 50% { transform: scaleX(-1) translateY(-12%); } }
@keyframes sg-graze      { 0%, 100% { transform: rotate(0); } 40%, 70% { transform: rotate(9deg); } }
@keyframes sg-graze-left { 0%, 100% { transform: scaleX(-1) rotate(0); } 40%, 70% { transform: scaleX(-1) rotate(9deg); } }

.sg-name {
  position: absolute;
  left: 50%;
  bottom: 100%;
  transform: translate(-50%, -4px);
  padding: .2rem .55rem;
  border-radius: 8px;
  background: var(--panel-solid);
  color: var(--text);
  font: 800 .8rem/1.2 "Nunito", sans-serif;
  white-space: nowrap;
  box-shadow: 0 2px 8px rgba(0,0,0,.25);
  opacity: 0;
  pointer-events: none;
  transition: opacity .2s;
}
.sg.edge-l .sg-name { left: 0; transform: translate(0, -4px); }
.sg.edge-r .sg-name { left: auto; right: 0; transform: translate(0, -4px); }
.sg-name.anon { font-style: italic; }
.sg-name small { display: block; font-weight: 600; color: var(--text-dim); font-size: .7rem; }
.sg:hover .sg-name, .sg:focus-visible .sg-name, .sg.show-name .sg-name, .sg.me .sg-name { opacity: 1; }
.sg.me { z-index: 80 !important; color: var(--accent); }
.sg.me .gz { filter: drop-shadow(0 0 6px #fff) drop-shadow(0 0 12px var(--accent)); }
.sg.me .sg-name { background: var(--accent); color: var(--accent-text); }
.sg.me .sg-name small { color: inherit; opacity: .85; }

/* Foto-Gazellen: ohne Kontur, nachts passend abgedunkelt */
.sg.photo .gz { width: 100%; height: auto; filter: drop-shadow(0 5px 4px rgba(0,0,0,.35)); }
:root[data-theme="night"] .sg.photo .gz { filter: brightness(.55) saturate(.8) drop-shadow(0 0 3px rgba(242,140,60,.5)); }
.sg.photo.me .gz { filter: drop-shadow(0 0 6px #fff) drop-shadow(0 0 14px var(--accent)); }

/* Kommen, Gehen, Wachsen */
.sg { transition: opacity 1s; }
.sg.leaving { opacity: 0; pointer-events: none; }
.sg.grow { animation: sg-glow 1.8s ease-out; }
@keyframes sg-glow {
  0%   { filter: drop-shadow(0 0 0 rgba(255,215,120,0)); }
  30%  { filter: drop-shadow(0 0 18px rgba(255,215,120,1)); }
  100% { filter: drop-shadow(0 0 0 rgba(255,215,120,0)); }
}