/* AD.JUST Studio — Nav hover: Magnetic Rail + Letter Dance
   The cursor takes care of the snapping pill rail. This file handles the
   text choreography that runs on the link the rail is hugging.
*/

/* Hide the screen-reader fallback */
.aj-nav__sr {
  position: absolute;
  width: 1px; height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
}

/* Reset default nav anchor styling — magnetic rail demands consistent box */
.aj-nav__link {
  position: relative;
  display: inline-block;
  font-family: var(--font-display);
  font-size: 11px;
  letter-spacing: 0.5px;
  text-transform: uppercase;
  color: var(--body);
  text-decoration: none;
  padding: 10px 14px;
  line-height: 1;
  transition: color 280ms cubic-bezier(0.16,1,0.3,1);
}

.aj-nav__link-inner {
  position: relative;
  display: inline-block;
  vertical-align: top;
}

/* Hide the legacy bottom-layer DOM (kept for the earlier mask variant) */
.aj-nav__layer--bottom { display: none; }

/* Per-letter wave: stagger via --i, lift on hover, drop on leave.
   Cursor-pull adds an additional translate via --mx / --my (set by JS). */
.aj-nav__char {
  display: inline-block;
  transition:
    transform 380ms cubic-bezier(0.34, 1.56, 0.64, 1),
    color 280ms ease,
    text-shadow 280ms ease;
  transition-delay: calc(var(--i, 0) * 28ms);
  will-change: transform, color;
  --mx: 0px;
  --my: 0px;
}

/* Hover: each letter rises and turns violet, in sequence */
.aj-nav__link:hover .aj-nav__char,
.aj-nav__link.is-active .aj-nav__char,
.aj-nav__link.is-magnet-target .aj-nav__char {
  transform: translate(var(--mx), calc(var(--my) - 3px));
  color: #7c3aed;
  text-shadow: 0 0 12px rgba(124,58,237,0.45);
}

/* While the cursor is *inside* this link, switch to a tighter spring so the
   letter follows the mouse responsively instead of waiting for the wave. */
.aj-nav__link.is-magnet-target .aj-nav__char {
  transition:
    transform 220ms cubic-bezier(0.16, 1, 0.3, 1),
    color 280ms ease,
    text-shadow 280ms ease;
  transition-delay: 0ms;
}

/* Active page: subtle ongoing breath */
@keyframes aj-nav-breathe {
  0%, 100% { text-shadow: 0 0 10px rgba(124,58,237,0.35); }
  50%      { text-shadow: 0 0 18px rgba(124,58,237,0.55); }
}
.aj-nav__link.is-active .aj-nav__char {
  animation: aj-nav-breathe 2.6s ease-in-out infinite;
  animation-delay: calc(var(--i, 0) * 60ms);
}

/* Tiny reverse wave on leave — handled by removing the hover class so the
   transition runs back through with the same per-letter delay */

/* Subtle accent bar that pulses underneath the active item only — sits
   inside the letter-row and doesn't compete with the cursor rail */
.aj-nav__link.is-active::after {
  content: '';
  position: absolute;
  left: 50%; bottom: 4px;
  width: 4px; height: 4px;
  margin-left: -2px;
  border-radius: 50%;
  background: #7c3aed;
  box-shadow: 0 0 10px rgba(124,58,237,0.7);
}