/* =========================================================
   NAVIGATION — PREMIUM / EDITORIAL
   ========================================================= */


/* =========================================================
   PAGE NAV ENTER
   ========================================================= */

@keyframes page-nav-enter {

  0% {
    opacity: 0;

    transform:
      translate3d(-50%, -18px, 0)
      scale(.985);

    filter: blur(8px);
  }

  55% {
    opacity: 1;
  }

  100% {
    opacity: 1;

    transform:
      translate3d(-50%, 0, 0)
      scale(1);

    filter: blur(0);
  }
}


/* =========================================================
   NAV SHELL
   ========================================================= */

.bento-nav {

  position: fixed;

  top: 14px;
  left: 50%;

  z-index: 9999;

  width: min(
    1160px,
    calc(100% - 32px)
  );

  height: 58px;

  padding:
    0 10px
    0 18px;

  display: flex;
  align-items: center;
  justify-content: space-between;

  border:
    1px solid #ffffff14;

  border-radius: 14px;


  /* -------------------------------------------------------
     GLASS
     ------------------------------------------------------- */

  background:
    linear-gradient(
      135deg,
      #171a22d9 0%,
      #0d1016d2 55%,
      #11131bd9 100%
    );

  backdrop-filter:
    blur(28px)
    saturate(155%);

  -webkit-backdrop-filter:
    blur(28px)
    saturate(155%);


  /* -------------------------------------------------------
     DEPTH
     ------------------------------------------------------- */

  box-shadow:
    0 20px 60px #00000045,
    0 1px 0 #ffffff0d inset,
    0 -1px 0 #ffffff04 inset;


  /* -------------------------------------------------------
     POSITION / ANIMATION
     ------------------------------------------------------- */

  transform:
    translate3d(-50%, 0, 0);

  animation:
    page-nav-enter
    700ms
    var(--ease)
    both;

  transform-origin:
    center top;

  transition:
    border-color 300ms var(--ease),
    box-shadow 300ms var(--ease),
    background 300ms var(--ease);
}


/* =========================================================
   NAV AMBIENT PURPLE GLOW
   ========================================================= */

.bento-nav::before {

  content: "";

  position: absolute;

  inset: -1px;

  z-index: -1;

  border-radius: inherit;

  background:
    linear-gradient(
      110deg,
      transparent 0%,
      transparent 28%,
      color-mix(
        in srgb,
        var(--purple) 12%,
        transparent
      ) 50%,
      transparent 72%,
      transparent 100%
    );

  opacity: .45;

  filter: blur(18px);

  pointer-events: none;
}


/* =========================================================
   TOP GLASS HIGHLIGHT
   ========================================================= */

.bento-nav::after {

  content: "";

  position: absolute;

  top: 0;

  left: 8%;
  right: 8%;

  height: 1px;

  background:
    linear-gradient(
      90deg,
      transparent,
      #ffffff18,
      transparent
    );

  pointer-events: none;
}


/* =========================================================
   BRAND
   ========================================================= */

.bento-brand {

  position: relative;

  display: inline-flex;
  align-items: center;

  height: 100%;

  color: #f4f5f8;

  text-decoration: none;

  font-family:
    var(--font-mono);

  font-size: 13px;

  font-weight: 800;

  letter-spacing: -.035em;

  transform:
    translate3d(0, 0, 0);

  transition:
    color 250ms var(--ease),
    transform 400ms var(--ease);
}


/* status dot */

.bento-brand::before {

  content: "";

  width: 6px;
  height: 6px;

  margin-right: 9px;

  border-radius: 50%;

  background:
    var(--purple);

  box-shadow:

    0 0 0 3px
    color-mix(
      in srgb,
      var(--purple) 10%,
      transparent
    ),

    0 0 14px
    color-mix(
      in srgb,
      var(--purple) 65%,
      transparent
    );

  transform:
    scale(1);

  transition:
    transform 400ms var(--ease),
    box-shadow 400ms var(--ease);
}


/* first character */

.bento-brand:first-letter {
  color: var(--purple);
}


/* ---------------------------------------------------------
   BRAND HOVER
   --------------------------------------------------------- */

.bento-brand:hover {

  color: #fff;

  transform:
    translate3d(0, -2px, 0);
}


.bento-brand:hover::before {

  transform:
    scale(1.35);

  box-shadow:

    0 0 0 4px
    color-mix(
      in srgb,
      var(--purple) 12%,
      transparent
    ),

    0 0 20px
    color-mix(
      in srgb,
      var(--purple) 85%,
      transparent
    );
}


/* =========================================================
   NAV LINKS CONTAINER
   ========================================================= */

.bento-nav nav {

  position: absolute;

  left: 50%;
  top: 50%;

  display: flex;
  align-items: center;

  gap: 6px;

  transform:
    translate3d(-50%, -50%, 0);
}


/* =========================================================
   NAV LINKS
   ========================================================= */

.bento-nav nav a {

  position: relative;

  display: inline-flex;
  align-items: center;
  justify-content: center;

  min-width: 74px;
  height: 36px;

  padding:
    0 12px;

  border-radius: 9px;

  color: #737b8d;

  text-decoration: none;

  font-family:
    var(--font-mono);

  font-size: 10px;

  font-weight: 600;

  letter-spacing: .015em;

  transform:
    translate3d(0, 0, 0)
    scale(1);

  transition:
    color 220ms var(--ease),
    background 260ms var(--ease),
    transform 420ms var(--ease),
    box-shadow 420ms var(--ease);
}


/* =========================================================
   NAV LINK GLASS SURFACE
   ========================================================= */

.bento-nav nav a::before {

  content: "";

  position: absolute;

  inset: 0;

  border-radius: inherit;

  background:
    linear-gradient(
      135deg,
      #ffffff09,
      #ffffff02 55%,
      transparent
    );

  opacity: 0;

  transform:
    scale(.82)
    translateY(2px);

  filter: blur(2px);

  transition:
    opacity 280ms var(--ease),
    transform 420ms var(--ease),
    filter 420ms var(--ease);
}


/* =========================================================
   NAV LINK UNDERLINE
   ========================================================= */

.bento-nav nav a::after {

  content: "";

  position: absolute;

  left: 50%;
  bottom: 4px;

  width: 18px;
  height: 1px;

  border-radius: 999px;

  background:
    linear-gradient(
      90deg,
      transparent,
      var(--purple),
      transparent
    );

  box-shadow:
    0 0 9px
    color-mix(
      in srgb,
      var(--purple) 65%,
      transparent
    );

  opacity: 0;

  transform:
    translate3d(-50%, 0, 0)
    scaleX(.15);

  transform-origin:
    center;

  transition:
    opacity 220ms ease,
    transform 500ms var(--ease);
}


/* =========================================================
   NAV LINK HOVER
   ========================================================= */

.bento-nav nav a:hover {

  color: #f0f1f5;

  background:
    #ffffff06;

  transform:
    translate3d(0, -2px, 0)
    scale(1.025);

  box-shadow:
    0 8px 22px #00000018;
}


.bento-nav nav a:hover::before {

  opacity: 1;

  transform:
    scale(1)
    translateY(0);

  filter:
    blur(0);
}


.bento-nav nav a:hover::after {

  opacity: 1;

  transform:
    translate3d(-50%, 0, 0)
    scaleX(1.15);
}


/* =========================================================
   NAV LINK PRESS
   ========================================================= */

.bento-nav nav a:active {

  transform:
    translate3d(0, 1px, 0)
    scale(.96);

  transition-duration:
    100ms;
}


/* =========================================================
   ACTIVE NAV LINK
   ========================================================= */

.bento-nav nav .active {

  color: #f5f6fa;

  background:
    linear-gradient(
      135deg,
      #ffffff09,
      #ffffff03
    );

  box-shadow:
    0 1px 0 #ffffff08 inset,
    0 5px 18px #00000012;
}


.bento-nav nav .active::before {

  opacity: 1;

  transform:
    scale(1)
    translateY(0);

  filter:
    blur(0);
}


.bento-nav nav .active::after {

  opacity: 1;

  transform:
    translate3d(-50%, 0, 0)
    scaleX(1.2);
}


/* =========================================================
   HOME PILL
   ========================================================= */

.nav-pill {

  position: relative;

  display: inline-flex;
  align-items: center;
  justify-content: center;

  gap: 7px;

  min-width: 76px;
  height: 34px;

  padding:
    0 13px;

  overflow: hidden;

  border:
    1px solid #ffffff12;

  border-radius: 9px;

  background:
    linear-gradient(
      135deg,
      #ffffff07,
      #ffffff02
    );

  color: #aeb5c5;

  text-decoration: none;

  font-family:
    var(--font-mono);

  font-size: 9px;

  font-weight: 600;

  letter-spacing: .015em;

  box-shadow:
    0 1px 0 #ffffff06 inset;

  transform:
    translate3d(0, 0, 0)
    scale(1);

  transition:
    color 250ms var(--ease),
    border-color 300ms var(--ease),
    background 300ms var(--ease),
    box-shadow 350ms var(--ease),
    transform 420ms var(--ease);
}


/* =========================================================
   HOME PILL — LIGHT SWEEP
   ========================================================= */

.nav-pill::before {

  content: "";

  position: absolute;

  top: -70%;
  left: -100%;

  width: 55%;
  height: 240%;

  background:
    linear-gradient(
      90deg,
      transparent,
      #ffffff13,
      transparent
    );

  transform:
    rotate(22deg)
    translate3d(0, 0, 0);

  transition:
    transform 700ms var(--ease);
}


/* =========================================================
   HOME PILL — ARROW
   ========================================================= */

.nav-pill::after {

  content: "↗";

  font-size: 11px;

  transform:
    translate3d(0, 0, 0)
    rotate(0deg);

  transition:
    transform 420ms var(--ease);
}


/* =========================================================
   HOME PILL HOVER
   ========================================================= */

.nav-pill:hover {

  border-color:
    color-mix(
      in srgb,
      var(--purple) 42%,
      #ffffff12
    );

  background:
    linear-gradient(
      135deg,
      color-mix(
        in srgb,
        var(--purple) 11%,
        transparent
      ),
      #ffffff06
    );

  color: #fff;

  transform:
    translate3d(0, -2px, 0)
    scale(1.025);

  box-shadow:

    0 0 0 1px
    color-mix(
      in srgb,
      var(--purple) 13%,
      transparent
    ) inset,

    0 10px 28px
    color-mix(
      in srgb,
      var(--purple) 12%,
      transparent
    );
}


/* light sweep */

.nav-pill:hover::before {

  transform:
    rotate(22deg)
    translate3d(340%, 0, 0);
}


/* arrow motion */

.nav-pill:hover::after {

  transform:
    translate3d(3px, -3px, 0)
    rotate(8deg);
}


/* =========================================================
   HOME PILL PRESS
   ========================================================= */

.nav-pill:active {

  transform:
    translate3d(0, 1px, 0)
    scale(.95);

  transition-duration:
    100ms;
}


/* =========================================================
   MOBILE
   ========================================================= */

@media (max-width: 700px) {

  .bento-nav {

    top: 10px;

    width:
      calc(100% - 20px);

    height: 56px;

    padding:
      0 8px
      0 14px;

    border-radius:
      13px;
  }


  .bento-nav nav {

    position: static;

    margin-left: auto;
    margin-right: 8px;

    gap: 2px;

    transform: none;
  }


  .bento-nav nav a {

    min-width: auto;

    height: 34px;

    padding:
      0 8px;

    font-size: 9px;
  }


  .bento-brand {

    font-size: 11px;
  }


  .bento-brand::before {

    width: 5px;
    height: 5px;

    margin-right: 7px;
  }


  .nav-pill {

    min-width: 34px;

    width: 34px;

    padding: 0;

    font-size: 0;
  }


  .nav-pill::after {

    margin: 0;

    font-size: 12px;
  }
}


/* =========================================================
   SMALL MOBILE
   ========================================================= */

@media (max-width: 430px) {

  .bento-nav nav {

    margin-right: 4px;
  }


  .bento-nav nav a {

    padding:
      0 6px;
  }


  .bento-nav nav a:nth-child(3) {

    display: none;
  }
}


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

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

  .bento-nav,
  .bento-nav *,
  .bento-nav::before,
  .bento-nav::after {

    animation:
      none !important;

    transition:
      none !important;
  }
}