/* Navigationsleiste: ruhiger Hover, Trennlinie, Schild in der Icon-Leiste
   (app/side-nav-tips.js) und der Seitenwechsel (app/side-nav-switch.js).

   Hover: nur hellerer Text, ein Hauch Hintergrund und der kleine Ruck des
   Textes; Kasten und Lichtleiste bleiben dem aktiven Eintrag vorbehalten,
   damit die aktuelle Seite auf einen Blick erkennbar ist. */
header.sideNav .sideNavList button:hover:not(.is-current) {
  border-color: transparent;
}
header.sideNav .sideNavList button:hover:not(.is-current)::before,
header.sideNav .sideNavList button:focus-visible:not(.is-current)::before {
  background: transparent;
  box-shadow: none;
}
header.sideNav .sideNavList button:focus-visible {
  outline: 1px solid rgba(216, 177, 90, .5);
  outline-offset: -1px;
}

/* Sammlung und Community stehen ohne eigene Ueberschrift hinter einer Linie:
   eine Gruppe mit nur einem Eintrag braucht keinen Titel, der ihn wiederholt. */
header.sideNav .sideNavList .sideNavDivider {
  flex: 0 0 auto;
  height: 1px;
  margin: 12px 14px 8px;
  background: linear-gradient(90deg, transparent, rgba(216, 177, 90, .24), transparent);
}
body.side-nav-collapsed header.sideNav .sideNavList .sideNavDivider {
  width: 26px;
  margin: 6px auto;
}

/* Schild mit dem Namen neben dem Symbol in der eingeklappten Leiste. */
.sideNavTip {
  position: fixed;
  z-index: 1200;
  padding: 5px 9px;
  border: 1px solid rgba(216, 177, 90, .28);
  background: rgba(11, 13, 18, .94);
  color: var(--mp-bone, #e8dec5);
  font-family: var(--mp-sans, inherit);
  font-size: 11.5px;
  font-weight: 500;
  letter-spacing: .5px;
  white-space: nowrap;
  pointer-events: none;
  opacity: 0;
  translate: -4px -50%;
  transition: opacity .12s ease-out, translate .16s cubic-bezier(.22, .8, .24, 1);
}
.sideNavTip.is-on {
  opacity: 1;
  translate: 0 -50%;
}

/* Seitenwechsel. Die Klassen setzt app/side-nav-switch.js
   nur beim echten Wechsel des aktiven Eintrags:
   .sideNavGlide  gleitende Markierung, sieht aus wie der aktive Eintrag
   .is-arriving   Ziel, solange der Gleiter unterwegs ist (noch ohne Kasten)
   .is-leaving    alter Eintrag, Kasten verschwindet sofort unter dem Gleiter
   .is-waking     Ziel kurz nach dem Wechsel: Symbol und Text bewegen sich */

header.sideNav .sideNavList {
  position: relative;
}

/* Der Gleiter traegt dieselbe Optik wie button.is-current (main-04.css). */
.sideNavGlide {
  position: absolute;
  display: none;
  box-sizing: border-box;
  border: 1px solid rgba(77, 208, 196, .18);
  background: linear-gradient(90deg, rgba(77, 208, 196, .08), transparent 80%);
  pointer-events: none;
}
.sideNavGlide.is-on {
  display: block;
}
.sideNavGlide::before {
  content: "";
  position: absolute;
  inset: 0 auto 0 -1px;
  width: 2px;
  background: linear-gradient(180deg, transparent, var(--mp-teal-2) 30%, var(--mp-teal-2) 70%, transparent);
  box-shadow: 0 0 12px rgba(77, 208, 196, .45);
}

header.sideNav .sideNavList button.is-current.is-arriving {
  background: transparent;
  border-color: transparent;
  transition: none;
}
header.sideNav .sideNavList button.is-current.is-arriving::before {
  opacity: 0;
}
header.sideNav .sideNavList button.is-leaving {
  transition: none;
}

/* Hover: Text rueckt einen Hauch nach, Symbol wird heller. */
header.sideNav .sideNavList button .navLabel,
header.sideNav .sideNavList button .navIcon {
  transition: translate .2s cubic-bezier(.22, .8, .24, 1), color .16s ease;
}
header.sideNav .sideNavList button:not(.is-current):hover .navLabel {
  translate: 2px 0;
}
header.sideNav .sideNavList button:not(.is-current):hover .navIcon {
  color: var(--mp-gold-1);
}

/* Beim Ankommen setzt sich der Text mit dem Kasten. */
header.sideNav .sideNavList button.is-waking .navLabel {
  animation: navLabelSettle 420ms cubic-bezier(.22, .8, .24, 1);
}
@keyframes navLabelSettle {
  from { translate: 4px 0; }
}

/* ---- Symbol-Bewegungen je Eintrag (alle enden in der Ruhelage) ---- */
header.sideNav .navIcon svg :is(path, circle, rect) {
  transform-box: fill-box;
  transform-origin: center;
}
@keyframes navDraw {
  from { stroke-dashoffset: 1; }
  to { stroke-dashoffset: 0; }
}
@keyframes navPop {
  from { opacity: 0; transform: scale(.4); }
}

/* Start: der Edelstein dreht sich einmal um seine Achse. */
#navHome.is-waking .navIcon svg {
  animation: navGemTurn 560ms cubic-bezier(.3, .7, .2, 1);
}
@keyframes navGemTurn {
  from { transform: perspective(40px) rotateY(180deg); }
}

/* Play: das Dreieck drueckt nach vorn wie ein Start-Knopf. */
#navPlay.is-waking .navIcon svg {
  animation: navPlayPush 440ms cubic-bezier(.34, 1.56, .64, 1);
}
@keyframes navPlayPush {
  from { transform: translateX(-4px) scale(.8); }
}

/* Ranked: der Pokal hebt sich kurz an und setzt sich wieder. */
#navRanked.is-waking .navIcon svg {
  animation: navTrophyLift 560ms cubic-bezier(.22, .8, .24, 1);
}
@keyframes navTrophyLift {
  30% { transform: translateY(-3px) rotate(-7deg); }
  62% { transform: translateY(-2px) rotate(5deg); }
}

/* Training: die Zeilen in der Sprechblase schreiben sich. */
#navTutorial.is-waking .navIcon svg path:last-child {
  stroke-dasharray: 1;
  animation: navDraw 520ms ease-out 120ms both;
}

/* Codex: die beiden Seiten des Buches schreiben sich nacheinander. */
#navCodex.is-waking .navIcon svg path:not(:last-child) {
  stroke-dasharray: 1;
  animation: navDraw 460ms ease-out 80ms both;
}
#navCodex.is-waking .navIcon svg path:nth-child(2) { animation-delay: 170ms; }

/* Puzzle: das Teil dreht sich heran und rastet ein. */
#navPuzzle.is-waking .navIcon svg {
  animation: navSnap 480ms cubic-bezier(.34, 1.56, .64, 1);
}
@keyframes navSnap {
  from { transform: translate(-1px, 1px) rotate(-18deg) scale(.76); }
}

/* Collection: die drei Faecher sortieren sich nacheinander ein. */
#navCollection.is-waking .navIcon svg rect {
  animation: navShelf 360ms cubic-bezier(.22, .8, .24, 1) both;
}
#navCollection.is-waking .navIcon svg rect:nth-child(2) { animation-delay: 80ms; }
#navCollection.is-waking .navIcon svg rect:nth-child(3) { animation-delay: 160ms; }
@keyframes navShelf {
  from { opacity: 0; transform: translateY(-4px); }
}

/* Community: die Koepfe tauchen nacheinander auf, die Schultern zeichnen sich. */
#navCommunity.is-waking .navIcon svg circle {
  animation: navPop 380ms cubic-bezier(.34, 1.56, .64, 1) both;
}
#navCommunity.is-waking .navIcon svg circle:nth-child(2) { animation-delay: 110ms; }
#navCommunity.is-waking .navIcon svg path {
  stroke-dasharray: 1;
  animation: navDraw 420ms ease-out 140ms both;
}

/* Profil: die Figur tritt kurz vor. */
#navProfile.is-waking .navIcon svg {
  animation: navPop 420ms cubic-bezier(.34, 1.56, .64, 1);
}

/* Admin: der Haken im Schild zeichnet sich. */
#navAdmin.is-waking .navIcon svg path:last-child {
  stroke-dasharray: 1;
  animation: navDraw 380ms ease-out 140ms both;
}

/* Nachrichten (Fusszeile): die Lasche des Umschlags zeichnet sich. */
#navMessages.is-waking .navIcon path {
  stroke-dasharray: 1;
  animation: navDraw 420ms ease-out 100ms both;
}

@media (prefers-reduced-motion: reduce) {
  header.sideNav .sideNavList button .navLabel,
  header.sideNav .sideNavList button .navIcon {
    transition: color .16s ease;
  }
  header.sideNav .sideNavList button:not(.is-current):hover .navLabel {
    translate: none;
  }
}