/* 021 — Sliding Pill Nav
   La pill est positionnée par deux custom properties (--sliding-pill-nav-x/-w)
   écrites par anim.js. Le glissement utilise un cubic-bezier à overshoot
   (élastique), la largeur suit avec un easing légèrement plus sage, et la
   pill s'écrase verticalement pendant le trajet (.is-moving). */

.sliding-pill-nav {
  position: relative;
  display: inline-flex;
  gap: 4px;
  padding: 5px;
  border-radius: 999px;
  background: var(--ml-surface, #151a24);
  border: 1px solid color-mix(in oklab, var(--ml-fg, #e8eaf2) 9%, transparent);
}

.sliding-pill-nav__pill {
  position: absolute;
  top: 5px;
  left: 0;
  height: calc(100% - 10px);
  width: var(--sliding-pill-nav-w, 0px);
  transform: translateX(var(--sliding-pill-nav-x, 0px));
  border-radius: 999px;
  pointer-events: none;
  opacity: 0; /* révélée par .is-ready une fois positionnée par le JS */
  transition:
    transform 0.55s cubic-bezier(0.3, 1.45, 0.4, 1),
    width 0.55s cubic-bezier(0.32, 1.2, 0.45, 1),
    opacity 0.2s ease;
  will-change: transform, width;
}

.sliding-pill-nav__pill.is-ready { opacity: 1; }

/* Le visuel vit sur ::before pour pouvoir s'écraser (scaleY) pendant le
   glissement sans interférer avec le translateX de la pill. */
.sliding-pill-nav__pill::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: linear-gradient(
    135deg,
    var(--ml-accent, #7c8cff),
    color-mix(in oklab, var(--ml-accent, #7c8cff) 62%, var(--ml-accent-2, #2dd4bf))
  );
  box-shadow: 0 2px 14px color-mix(in oklab, var(--ml-accent, #7c8cff) 45%, transparent);
}

@keyframes sliding-pill-nav-squash {
  0%   { transform: scale(1, 1); }
  35%  { transform: scale(1.06, 0.82); }
  70%  { transform: scale(0.98, 1.05); }
  100% { transform: scale(1, 1); }
}

.sliding-pill-nav__pill.is-moving::before {
  animation: sliding-pill-nav-squash 0.55s cubic-bezier(0.36, 0.07, 0.19, 0.97);
}

.sliding-pill-nav__item {
  position: relative;
  z-index: 1;
  padding: 9px 16px;
  border: 0;
  border-radius: 999px;
  background: none;
  font: 500 13px/1 system-ui, -apple-system, sans-serif;
  letter-spacing: 0.01em;
  color: var(--ml-muted, #8b91a3);
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  /* léger délai : le texte change de couleur au moment où la pill le recouvre */
  transition: color 0.32s ease 0.1s;
}

.sliding-pill-nav__item:is(:hover, :focus-visible) {
  color: var(--ml-fg, #e8eaf2);
}

.sliding-pill-nav__item:focus-visible {
  outline: 2px solid var(--ml-accent-2, #2dd4bf);
  outline-offset: 2px;
}

.sliding-pill-nav__item.is-active {
  color: var(--ml-bg, #0d1017);
  transition-delay: 0.16s;
}

/* --- Reduced motion ------------------------------------------------------ */

@media (prefers-reduced-motion: reduce) {
  .sliding-pill-nav__pill {
    transition: opacity 0.2s ease;
  }
  .sliding-pill-nav__pill.is-moving::before {
    animation: none;
  }
  .sliding-pill-nav__item,
  .sliding-pill-nav__item.is-active {
    transition-delay: 0s;
  }
}