/* ================================================================
   MiniMoto Gallery — active navigation / editorial slide
   ================================================================ */

:root {
  --nav-drift-blue: #243cff;
  --nav-drift-ink: #111111;
}

.primary-nav {
  overflow: visible;
}

.primary-nav .drift-link {
  position: relative;
  isolation: isolate;
  overflow: visible;
  border-color: transparent !important;
  background: transparent !important;
  color: var(--nav-drift-ink);
  transition:
    color 150ms ease,
    transform 180ms cubic-bezier(.2,.75,.25,1);
}

.primary-nav .drift-link > span {
  position: relative;
  z-index: 2;
  display: inline-block;
  white-space: nowrap;
  transition:
    color 150ms ease,
    transform 180ms cubic-bezier(.2,.75,.25,1),
    letter-spacing 180ms ease;
}

/* Thin offset frame: visible only for the active location. */
.primary-nav .drift-link::before {
  content: "";
  position: absolute;
  z-index: 0;
  inset: 4px 2px;
  opacity: 0;
  pointer-events: none;
  border: 1px solid var(--nav-drift-blue);
  transform: translate3d(-4px, 3px, 0);
  transition:
    opacity 140ms ease,
    transform 220ms cubic-bezier(.2,.75,.25,1);
}

/* Sliding underline: the new, quieter trace of movement. */
.primary-nav .drift-link::after {
  content: "";
  position: absolute;
  z-index: 3;
  left: 12px;
  right: 12px;
  bottom: 5px;
  height: 1px;
  opacity: 0;
  pointer-events: none;
  background: var(--nav-drift-blue);
  transform: translate3d(-8px, 0, 0) scaleX(.18);
  transform-origin: left center;
  transition:
    opacity 130ms ease,
    transform 220ms cubic-bezier(.2,.75,.25,1);
}

.primary-nav .drift-link:hover,
.primary-nav .drift-link:focus-visible {
  border-color: transparent !important;
  background: transparent !important;
}

.primary-nav .drift-link:hover > span,
.primary-nav .drift-link:focus-visible > span {
  transform: translate3d(1px, -1px, 0);
}

.primary-nav .drift-link:hover::after,
.primary-nav .drift-link:focus-visible::after {
  opacity: 1;
  transform: translate3d(0, 0, 0) scaleX(1);
}

.primary-nav .drift-link.is-active {
  color: var(--nav-drift-ink);
}

.primary-nav .drift-link.is-active::before {
  opacity: 1;
  transform: translate3d(2px, -2px, 0);
}

.primary-nav .drift-link.is-active::after {
  opacity: 1;
  transform: translate3d(0, 0, 0) scaleX(1);
}

.primary-nav .drift-link.is-active > span {
  color: var(--nav-drift-ink);
  transform: translate3d(0, 0, 0);
  letter-spacing: .01em;
}

/* Click: a short registration error, not a soft blob or bounce. */
.primary-nav .drift-link.is-skidding::before {
  animation: mmNavRegister 300ms cubic-bezier(.2,.75,.25,1) both;
}

.primary-nav .drift-link.is-skidding::after {
  animation: mmNavRule 300ms cubic-bezier(.2,.75,.25,1) both;
}

.primary-nav .drift-link.is-skidding > span {
  animation: mmNavTypeShift 300ms cubic-bezier(.2,.75,.25,1) both;
}

@keyframes mmNavRegister {
  0% {
    opacity: 0;
    transform: translate3d(-8px, 4px, 0);
  }
  58% {
    opacity: 1;
    transform: translate3d(4px, -3px, 0);
  }
  100% {
    opacity: 1;
    transform: translate3d(2px, -2px, 0);
  }
}

@keyframes mmNavRule {
  0% {
    opacity: .1;
    transform: translate3d(-13px, 0, 0) scaleX(.12);
  }
  62% {
    opacity: 1;
    transform: translate3d(2px, 0, 0) scaleX(1.08);
  }
  100% {
    opacity: 1;
    transform: translate3d(0, 0, 0) scaleX(1);
  }
}

@keyframes mmNavTypeShift {
  0% { transform: translate3d(-2px, 0, 0); }
  58% { transform: translate3d(2px, -1px, 0); }
  100% { transform: translate3d(0, 0, 0); }
}

html[lang="zh-CN"] .primary-nav .drift-link.is-active > span {
  letter-spacing: 0;
}

@media (max-width: 980px) {
  .primary-nav .drift-link::before {
    inset: 3px 1px;
  }

  .primary-nav .drift-link::after {
    left: 9px;
    right: 9px;
    bottom: 4px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .primary-nav .drift-link,
  .primary-nav .drift-link::before,
  .primary-nav .drift-link::after,
  .primary-nav .drift-link > span {
    transition: none !important;
    animation: none !important;
  }
}