:root { scroll-behavior: smooth; }
.dots-neo{
  /* Base */
  --c: #fff;
  --dot: 20px;
  --ring: 2px;
  --hit: 44px;
  --gap: 48px;
  --line-w: 2px;
  --label-gap: 14px;
  --label-size: 24px;
  --label-weight: 600;
  --label-rest-scale: .98;
  --e-fast: .22s cubic-bezier(.2,.7,.2,1);
  --e-med:  .38s cubic-bezier(.2,.7,.2,1);

  /* Glass (shared between sticky bar + sticky labels) */
  --glass-bg: rgba(20, 20, 20, 0.35);
  --glass-shadow: 0 5px 15px rgba(0,0,0,.35);
  --glass-blur: 6px;

  /* Sticky label gap */
  --label-gap-sticky: 16px; /* adjust here to increase space between bar and label */
}

.dots-neo.is-static{
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--gap);
  color: var(--c) !important;
}

.dots-neo a{
  position: relative;
  width: var(--hit);
  height: var(--hit);
  display: grid;
  place-items: center;
  border-radius: 999px;
  color: currentColor !important;
  outline: none;
}

/* Dot */
.dots-neo a::before{
  content: "";
  width: var(--dot);
  height: var(--dot);
  border-radius: 999px;
  box-shadow: inset 0 0 0 var(--ring) currentColor;
  background: transparent;
  opacity: .92;
  transition: transform var(--e-fast), opacity var(--e-fast), box-shadow var(--e-fast);
}

/* Connector line */
.dots-neo a:not(:last-child)::after{
  content: "";
  position: absolute;
  left: calc(var(--hit) / 2);
  transform: translateX(-50%);
  top: calc(50% + var(--dot) / 2 + var(--ring));
  width: var(--line-w);
  height: calc(var(--gap) + var(--hit) - var(--dot) - (var(--ring) * 2));
  background: currentColor;
  pointer-events: none;
  opacity: .7;
}

/* Labels (base, static look) */
.dots-neo a .label{
  position: absolute;
  right: calc(100% + var(--label-gap));
  top: 50%;
  transform: translateY(-50%) scale(var(--label-rest-scale));
  opacity: .55;
  color: currentColor !important;
  font: var(--label-weight) var(--label-size)/1.06 system-ui,-apple-system,Segoe UI,Roboto,sans-serif;
  letter-spacing: -0.01em;
  white-space: nowrap;
  transition: opacity var(--e-fast), transform var(--e-fast), filter var(--e-fast), background var(--e-fast), box-shadow var(--e-fast);
  filter: brightness(.92);
  background: transparent; /* keep hero labels plain */
  box-shadow: none;
}

/* Interactions */
.dots-neo a:hover .label,
.dots-neo a:focus-visible .label,
.dots-neo a.is-active .label{
  opacity: 1;
  transform: translateY(-50%) scale(1.03);
  filter: brightness(1);
}

.dots-neo a:hover::before,
.dots-neo a:focus-visible::before,
.dots-neo a.is-active::before{
  transform: scale(1.2);
  opacity: 1;
  box-shadow: inset 0 0 0 calc(var(--ring) + 1px) currentColor;
}

/* Keyboard focus ring */
.dots-neo a:focus-visible{
  box-shadow: 0 0 0 4px color-mix(in oklab, currentColor 35%, transparent);
  border-radius: 12px;
}

.dots-neo.is-sticky{
  /* size overrides */
  --c: #fff;
  --dot: 14px;
  --hit: 40px;
  --gap: 20px;
  --line-w: 1px;
  --label-size: 16px;

  position: fixed;
  right: clamp(14px, 2vw, 28px);
  top: 50%;
  transform: translate(120px, -50%); /* off-screen start */
  opacity: 0;
  z-index: 9999;
  align-items: center;
  transition: transform var(--e-med), opacity var(--e-med);

  /* Glass panel */
  padding: 4px 4px;
  border-radius: 12px;
  background: var(--glass-bg);
  box-shadow: var(--glass-shadow);
  backdrop-filter: blur(var(--glass-blur));
  -webkit-backdrop-filter: blur(var(--glass-blur));
}

/* Reveal on scroll */
.dots-neo.is-sticky.is-visible{
  transform: translate(0, -50%);
  opacity: 1;
}

/* Connector stronger in sticky mode */
.dots-neo.is-sticky a::after{ opacity: .9; }

/* Dot inner shadow in sticky */
.dots-neo.is-sticky a::before{
  box-shadow:
	inset 0 0 0 var(--ring) currentColor,
	0 1px 2px rgba(0,0,0,.18);
}

/* Sticky labels: glass effect + hidden by default */
.dots-neo.is-sticky a .label{
  right: calc(100% + var(--label-gap-sticky));
  opacity: 0;
  transform: translateY(-50%) scale(.98);
  filter: none;
  pointer-events: none; /* prevent hidden label area from triggering hover */

  padding: .35em .6em;
  border-radius: 10px;
  background: var(--glass-bg);
  box-shadow: var(--glass-shadow);
  backdrop-filter: blur(var(--glass-blur));
  -webkit-backdrop-filter: blur(var(--glass-blur));
}

/* Sticky label interaction lift */
.dots-neo.is-sticky a:hover .label,
.dots-neo.is-sticky a:focus-visible .label,
.dots-neo.is-sticky a.is-active .label{
  opacity: .96;
  transform: translateY(-50%) scale(1);
  background: rgba(20,20,20,.42);
  box-shadow: var(--glass-shadow);
}

/* Ensure hero/static labels remain plain */
.dots-neo.is-static a .label{
  background: transparent;
  box-shadow: none;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
}

@media (prefers-reduced-motion: reduce){
  .dots-neo,
  .dots-neo a::before,
  .dots-neo a .label{ transition: none !important; }
}

@supports not ((backdrop-filter: blur(4px)) or (-webkit-backdrop-filter: blur(4px))){
  .dots-neo.is-sticky{
	background: rgba(20,20,20,.55);
  }
  .dots-neo.is-sticky a .label{
	background: rgba(20,20,20,.55);
  }
}

[id] { scroll-margin-top: 16px; }