/* The single hover egg stays clear of labels without moving the menu. */
.sidebar .nav [data-sidebar-egg-icon] {
  --sidebar-egg-fade: 260ms;
  position: relative;
  display: inline-flex;
  width: 20px;
  height: 18px;
  flex: 0 0 20px;
  align-items: center;
  justify-content: center;
}

.sidebar .nav [data-sidebar-egg-icon] > svg {
  transition: opacity var(--sidebar-egg-fade) cubic-bezier(.2, .65, .3, 1);
}

.sidebar-egg-cluster {
  --bubble-cycle: 4s;
  --bubble-rise: 34px;
  position: absolute;
  top: -7px;
  left: -6px;
  width: 32px;
  height: 32px;
  opacity: 0;
  pointer-events: none;
  user-select: none;
  transition: opacity var(--sidebar-egg-fade) cubic-bezier(.2, .65, .3, 1);
}

/* Section headings have a shorter empty gap than the icon lane between menu rows. */
.nav-label + .nav-item .sidebar-egg-cluster { --bubble-rise: 33px; }

.sidebar-egg-cluster * { pointer-events: none; }

.sidebar-egg-cluster::before,
.sidebar-egg-cluster::after {
  position: absolute;
  z-index: 1;
  box-sizing: border-box;
  width: 9px;
  height: 9px;
  border: 1px solid rgba(78, 155, 158, .95);
  border-radius: 50%;
  background: radial-gradient(circle at 28% 24%, rgba(255, 255, 255, .98), rgba(215, 247, 246, .34) 48%, rgba(150, 216, 219, .12) 75%);
  box-shadow: inset 0 0 0 1px rgba(236, 255, 253, .6);
  opacity: 0;
  pointer-events: none;
  animation: none;
  content: '';
}

.sidebar-egg-cluster::before { top: 23px; left: 0; --bubble-sway: .8px; }
.sidebar-egg-cluster::after { top: 25px; left: 1px; width: 7px; height: 7px; --bubble-sway: -.6px; }

.sidebar-egg-shell {
  position: absolute;
  top: 0;
  left: 0;
  width: 32px;
  height: 32px;
  --egg-delay: -.6s;
  overflow: hidden;
  border: 1px solid rgba(122, 162, 152, .7);
  border-radius: 50%;
  background:
    radial-gradient(circle at 30% 22%, rgba(255, 255, 255, .82), transparent 31%),
    radial-gradient(circle at 65% 77%, rgba(199, 219, 157, .5), rgba(219, 240, 228, .32) 69%);
  box-shadow: inset 0 0 2px rgba(255, 255, 255, .9), inset -1px -1px 2px rgba(78, 120, 109, .18);
  animation: none;
}

.sidebar-egg-shell::after {
  position: absolute;
  top: 2px;
  left: 3px;
  width: 6px;
  height: 3px;
  border-radius: 50%;
  background: rgba(255, 255, 255, .76);
  transform: rotate(-28deg);
  content: '';
}

.sidebar-egg-shell img {
  position: absolute;
  top: -4%;
  left: -4%;
  display: block;
  width: 108%;
  height: 108%;
  max-width: none;
  object-fit: contain;
  transform-origin: 53% 52%;
  animation: none;
}

@media (hover: hover) and (pointer: fine) {
  /* Reserve a bubble lane before hover so neither the egg nor labels move on entry. */
  .sidebar .nav [data-sidebar-egg-icon] { width: 28px; flex-basis: 28px; }
  .sidebar-egg-cluster { left: -9px; width: 44px; }
  .sidebar-egg-shell { left: 12px; }
  .sidebar .nav [data-sidebar-egg-state="visible"] { --sidebar-egg-fade: 220ms; }
  .sidebar .nav [data-sidebar-egg-state="visible"]:not(.sidebar-egg-unavailable) > svg { opacity: 0; }
  .sidebar .nav [data-sidebar-egg-state="visible"]:not(.sidebar-egg-unavailable) .sidebar-egg-cluster { opacity: 1; }
  .sidebar .nav [data-sidebar-egg-state]:not(.sidebar-egg-unavailable) .sidebar-egg-shell {
    animation: sidebar-egg-drift 2.6s ease-in-out var(--egg-delay) infinite;
  }
  .sidebar .nav [data-sidebar-egg-state]:not(.sidebar-egg-unavailable) .sidebar-egg-shell img {
    animation: sidebar-embryo-wriggle 1.45s ease-in-out var(--egg-delay) infinite;
  }
  .sidebar .nav [data-sidebar-egg-state]:not(.sidebar-egg-unavailable) .sidebar-egg-cluster::before {
    animation: sidebar-bubble-rise var(--bubble-cycle) linear infinite;
  }
  .sidebar .nav [data-sidebar-egg-state]:not(.sidebar-egg-unavailable) .sidebar-egg-cluster::after {
    animation: sidebar-bubble-rise var(--bubble-cycle) linear calc(var(--bubble-cycle) * -.5) infinite;
  }
}

@keyframes sidebar-bubble-rise {
  0% { opacity: 0; transform: translate(0, 0) scale(.78); }
  12% { opacity: .85; transform: translate(0, -2px) scale(.82); }
  38% { opacity: .95; transform: translate(var(--bubble-sway), -11px) scale(.9); }
  66% { opacity: .85; transform: translate(0, calc(var(--bubble-rise) * -.78)) scale(.96); }
  82% { opacity: .65; transform: translate(var(--bubble-sway), calc(var(--bubble-rise) * -.97)) scale(1); }
  92% { opacity: .28; transform: translate(0, calc(var(--bubble-rise) * -.99)) scale(1); }
  100% { opacity: 0; transform: translate(0, calc(var(--bubble-rise) * -1)) scale(1); }
}

@keyframes sidebar-egg-drift {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-1px); }
}

@keyframes sidebar-embryo-wriggle {
  0%, 60%, 100% { transform: rotate(-5deg) translate(0, 0); }
  18% { transform: rotate(9deg) translate(.7px, -.8px); }
  31% { transform: rotate(-7deg) translate(-.6px, .6px); }
  43% { transform: rotate(4deg) translate(.4px, -.4px); }
}

@media (prefers-reduced-motion: reduce) {
  .sidebar .nav [data-sidebar-egg-icon] > svg,
  .sidebar-egg-cluster { transition: none; }
  .sidebar .nav .sidebar-egg-shell,
  .sidebar .nav .sidebar-egg-shell img { animation: none !important; transform: none !important; }
  .sidebar .nav .sidebar-egg-cluster::before,
  .sidebar .nav .sidebar-egg-cluster::after { animation: none !important; opacity: 0 !important; }
}