/* =========================================================
   MECHANICAL NAVIGATION
   mechanical-nav.css

   Namespace:
       mnav-

   This stylesheet intentionally does NOT depend on:
       #mainNav
       .navbar
       .mobile-nav-bar
       .nav-item
       Bootstrap classes
       project-specific classes

   The JavaScript dynamically assigns the mnav-* classes.
   ========================================================= */


/* =========================================================
   ROOT NAVIGATION
   ========================================================= */

.mnav-root {

    /*
     * The library controls vertical movement through
     * transform rather than changing top/position.
     */
    will-change: transform;

    /*
     * Smooth settling when the user's interaction ends.
     */
    transition:
        transform var(--mnav-settle-duration, 380ms)
        var(--mnav-easing, cubic-bezier(0.22, 1, 0.36, 1));

    /*
     * The JavaScript changes this value continuously
     * during touch interaction.
     */
    transform:
        translate3d(
            0,
            var(--mnav-offset, 0px),
            0
        );

    /*
     * Prevent accidental text selection while physically
     * manipulating the navigation.
     */
    -webkit-user-select: none;
    user-select: none;

}


/* =========================================================
   ACTIVE / DIRECT MANIPULATION
   ========================================================= */

.mnav-root.mnav-direct {

    /*
     * While the finger is physically manipulating the
     * navigation, JavaScript controls the transform.
     *
     * Removing transition here makes the nav follow the
     * finger immediately rather than trailing behind it.
     */
    transition: none;

}


/* =========================================================
   SETTLING
   ========================================================= */

.mnav-root.mnav-settling {

    transition:
        transform var(--mnav-settle-duration, 380ms)
        var(--mnav-easing, cubic-bezier(0.22, 1, 0.36, 1));

}


/* =========================================================
   FULLY REVEALED
   ========================================================= */

.mnav-root.mnav-visible {

    --mnav-offset: 0px;

}


/* =========================================================
   FULLY RETRACTED
   ========================================================= */

.mnav-root.mnav-hidden {

    /*
     * The JavaScript supplies the actual navigation height.
     */
    --mnav-offset:
        calc(
            -1 * var(--mnav-height, 0px)
        );

}


/* =========================================================
   INTERACTIVE CHILDREN
   ========================================================= */

.mnav-root .mnav-link {

    /*
     * Do not force a project's typography.
     *
     * These are behavioral hooks, not visual overrides.
     */
    touch-action: manipulation;

}


/* =========================================================
   NAVIGATION TOGGLE
   ========================================================= */

.mnav-root .mnav-toggle {

    touch-action: manipulation;

}


/* =========================================================
   TOUCH MODE
   ========================================================= */

.mnav-root.mnav-touching {

    /*
     * Prevent browser gestures from fighting the
     * navigation's direct manipulation.
     */
    -webkit-user-select: none;
    user-select: none;

}


/* =========================================================
   REDUCED MOTION
   ========================================================= */

@media (prefers-reduced-motion: reduce) {

    .mnav-root {

        transition: none !important;

    }

    .mnav-root.mnav-direct {

        transition: none !important;

    }

}


/* =========================================================
   TOUCH DEVICES
   ========================================================= */

@media (hover: none) and (pointer: coarse) {

    .mnav-root {

        /*
         * The JS still controls the navigation.
         *
         * We deliberately don't disable transitions here
         * because touchend needs a natural settling motion.
         */
        touch-action: pan-y;

    }

}