/* VIRUS2027 — pinned social rail.
 *
 * A second, fixed copy of the footer icon row that stays on screen while the
 * page scrolls. The footer row is kept as-is: below 1100px the rail hides and
 * the footer takes over, so the two never compete for space on a narrow
 * screen. The rail is a visual convenience — the footer row is the one that
 * carries the accessible name for the same links.
 *
 * z-index sits above the homepage HUD (100), which is pointer-events:none.
 */

.social-rail {
  position: fixed;
  left: clamp(12px, 1.7vw, 28px);
  top: 50%;
  transform: translateY(-50%);
  z-index: 110;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 16px;
  color: oklch(0.72 0.006 286);
}

/* Thin rules top and bottom — echoes the transmission/HUD styling. */
.social-rail::before,
.social-rail::after {
  content: "";
  width: 1px;
  height: clamp(22px, 5vh, 44px);
  background: currentColor;
  opacity: .22;
}

.social-rail a {
  display: inline-flex;
  color: inherit;
  opacity: .6;
  transition: opacity .18s ease, color .18s ease, transform .18s ease;
}

.social-rail a:hover,
.social-rail a:focus-visible {
  opacity: 1;
  color: oklch(0.646 0.222 33);
  transform: translateX(2px);
}

.social-rail a:focus-visible {
  outline: 2px solid oklch(0.646 0.222 33);
  outline-offset: 4px;
  border-radius: 2px;
}

@media (max-width: 1100px) {
  .social-rail { display: none; }
}

@media (prefers-reduced-motion: reduce) {
  .social-rail a { transition: none; }
}