/* ============================================================
   sidenav.css – ROG-Style seitliches Navigationsmenü
   ============================================================
   Das Seitenmenü erscheint wenn die Navbar nach oben
   verschwindet (nach ~70% der ersten Sektion).
   JS-Steuerung: js/main.js → initNavSwap()

   Neues Item hinzufügen (in index.html):
     <a class="sn-item" href="#sectionId"
        data-section="sectionId" data-label="Titel">
       <span class="sn-bracket">
         <span class="sn-corner tl"></span>
         <span class="sn-corner br"></span>
       </span>
       <span class="sn-tick"></span>
     </a>
   ============================================================ */

.side-nav {
  position: fixed;
  right: 1.5rem;
  top: 50%;
  z-index: 900;
  display: flex;
  flex-direction: column;
  gap: 1.2rem;
  align-items: center;

  /* Startet unsichtbar – fährt von rechts rein */
  opacity: 0;
  pointer-events: none;
  transform: translateY(-50%) translateX(20px);
  transition: opacity  0.45s cubic-bezier(.4,0,.2,1),
              transform 0.45s cubic-bezier(.4,0,.2,1);
}

/* Sichtbar – wenn Navbar nav-hidden hat */
.side-nav.sn-visible {
  opacity: 1;
  pointer-events: all;
  transform: translateY(-50%) translateX(0);
}

/* ---- Einzelner Eintrag ---- */
.sn-item {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  cursor: pointer;
  text-decoration: none;
}

/* ---- Eckrahmen ---- */
.sn-bracket { position: absolute; inset: 0; }

.sn-corner {
  position: absolute;
  width: 9px;
  height: 9px;
  opacity: 0.3;
  transition: opacity .3s ease, width .3s ease, height .3s ease, border-color .3s ease;
}
.sn-corner.tl { top:0; left:0;   border-top: 1.5px solid #fff; border-left:  1.5px solid #fff; }
.sn-corner.br { bottom:0; right:0; border-bottom:1.5px solid #fff; border-right: 1.5px solid #fff; }

/* ---- Diagonaler Strich ---- */
.sn-tick {
  display: block;
  width: 14px;
  height: 1.5px;
  background: rgba(255,255,255,0.3);
  transform: rotate(-45deg);
  transition: background-color .3s ease, width .3s ease, filter .3s ease;
}

/* ---- Hover ---- */
.sn-item:hover .sn-corner     { opacity: 1; width: 12px; height: 12px; }
.sn-item:hover .sn-tick        { background: var(--clr-accent, #5b8cf7); width: 18px; }

/* ---- Label (erscheint links beim Hover) ---- */
.sn-item::before {
  content: attr(data-label);
  position: absolute;
  right: calc(100% + 12px);
  top: 50%;
  transform: translateY(-50%) translateX(8px);
  white-space: nowrap;
  font-family: 'Syne', sans-serif;
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: rgba(255,255,255,0.85);
  background: rgba(13,15,20,0.9);
  border: 1px solid rgba(255,255,255,0.1);
  padding: 3px 9px;
  border-radius: 4px;
  opacity: 0;
  pointer-events: none;
  backdrop-filter: blur(8px);
  transition: opacity .2s ease, transform .2s ease;
}
.sn-item:hover::before { opacity: 1; transform: translateY(-50%) translateX(0); }

/* ---- Aktive Sektion ---- */
.sn-item.sn-active .sn-corner {
  opacity: 1;
  border-color: var(--clr-accent, #5b8cf7);
  width: 11px;
  height: 11px;
}
.sn-item.sn-active .sn-tick {
  background: var(--clr-accent, #5b8cf7);
  width: 16px;
  filter: drop-shadow(0 0 5px var(--clr-accent, #5b8cf7));
}
.sn-item.sn-active::before { color: var(--clr-accent, #5b8cf7); border-color: rgba(91,140,247,0.3); }

/* ---- Bereits besucht ---- */
.sn-item.sn-visited .sn-tick   { background: rgba(91,140,247,0.45); }
.sn-item.sn-visited .sn-corner { border-color: rgba(91,140,247,0.4); opacity: 0.6; }

/* ---- Mobile: ausblenden ---- */
@media (max-width: 768px) { .side-nav { display: none; } }