/* =========================================================
   NAVBAR
========================================================= */

.main-navbar {
  position: fixed;

  top: 32px;
  left: 0;
  right: 0;

  z-index: 50;

  display: flex;

  flex-direction: column;

  align-items: center;

  padding: 0 16px;
}


/* =========================================================
   MAIN PILL
========================================================= */

.navbar-pill {
  position: relative;

  display: inline-flex;

  align-items: center;

  height: 64px;

  padding: 0 6px;

  max-width: calc(100vw - 32px);

  border-radius: 9999px;

  overflow: visible;

  isolation: isolate;

  white-space: nowrap;

  background:
    linear-gradient(
      180deg,
      rgba(255,255,255,.22) 0%,
      rgba(255,255,255,.12) 35%,
      rgba(255,255,255,.06) 100%
    );

  backdrop-filter:
    blur(46px)
    saturate(1.8);

  -webkit-backdrop-filter:
    blur(36px)
    saturate(1.8);

}


/* =========================================================
   CAUSTIC CANVAS
========================================================= */

.caustic-canvas {
  position: absolute;

  inset: 0;

  width: 100%;
  height: 100%;

  border-radius: 9999px;

  pointer-events: none;

  z-index: 0;

  mix-blend-mode: screen;

  opacity: .85;
}


/* =========================================================
   HIGHLIGHT
========================================================= */

.navbar-highlight {
  position: absolute;

  inset: 0;

  border-radius: 9999px;

  pointer-events: none;

  z-index: 2;

  background:
    radial-gradient(
      circle at 15% 10%,
      rgba(255,255,255,.7),
      transparent 35%
    ),

    radial-gradient(
      circle at 85% 90%,
      rgba(180,220,255,.25),
      transparent 50%
    );

  mix-blend-mode: overlay;
}


/* =========================================================
   PRISM LINE
========================================================= */

.navbar-prism-line {
  position: absolute;

  left: 8%;
  right: 8%;

  bottom: 0;

  height: 1px;

  pointer-events: none;

  z-index: 3;

  background:
    linear-gradient(
      90deg,
      transparent 0%,
      rgba(168,180,255,.70) 20%,
      rgba(120,210,255,.55) 40%,
      rgba(255,180,220,.45) 60%,
      rgba(140,230,200,.50) 80%,
      transparent 100%
    );

  animation:
    prismShift 8s ease-in-out infinite alternate;

  filter: blur(.3px);
}


@keyframes prismShift {

  0% {
    opacity: .55;

    background-position:
      0% 50%;
  }

  50% {
    opacity: .80;
  }

  100% {
    opacity: .55;

    background-position:
      100% 50%;
  }

}


/* =========================================================
   LOGO
========================================================= */

.navbar-logo-container {

  position: relative;

  z-index: 10;

  display: flex;

  align-items: center;

  height: 34px;

  padding-left: 18px;
  padding-right: 16px;

  flex-shrink: 0;

  border-right:
    1px solid
    rgba(150,185,225,.30);
}


.navbar-logo-link {

  display: flex;

  align-items: center;

  text-decoration: none;
}


.navbar-logo {

  display: block;

  width: 140px;

  height: 50px;

  object-fit: contain;
}


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

.navbar-links {

  position: relative;

  z-index: 10;

  display: flex;

  align-items: center;

  gap: 2px;

  padding: 0 8px;
}


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

.navbar-link {

  position: relative;

  display: flex;

  align-items: center;

  justify-content: center;

  height: 36px;

  padding: 0 18px;

  border-radius: 9999px;

  text-decoration: none;

  user-select: none;

  z-index: 10;
}


.navbar-link span {

  position: relative;

  z-index: 1;

  font-size: 14px;

  font-weight: 600;

  letter-spacing: -.1px;

  white-space: nowrap;

  color:
    rgba(60,75,110,.48);

  transition:
    color 220ms ease,
    font-size 220ms ease;
}


.navbar-link:hover span {

  color:
    rgba(60,75,110,.75);
}


.navbar-link.active {

  z-index: 20;
}


.navbar-link.active span {

  font-size: 16px;

  background:
    linear-gradient(
      135deg,
      #8a5a9a,
      #5e4a88
    );

  background-clip: text;

  -webkit-background-clip: text;

  -webkit-text-fill-color: transparent;
}


/* =========================================================
   LIQUID PILL
========================================================= */

.liquid-pill {

  position: absolute;

  top: 50%;

  min-width: 50px;

  min-height: 32px;

  border-radius: 9999px;

  pointer-events: none;

  z-index: 0;

  background:
    linear-gradient(
      90deg,
      rgba(244,254,255,.45) 0%,
      rgba(234,243,249,.38) 100%
    );

  backdrop-filter:
    blur(28px)
    saturate(1.8)
    brightness(1.05);

  -webkit-backdrop-filter:
    blur(28px)
    saturate(1.8)
    brightness(1.05);

  box-shadow:
    inset 0 2px 5px rgba(80,110,150,.16),
    inset 0 1px 2px rgba(60,90,130,.10),
    inset 0 -1px 3px rgba(255,255,255,.55);

  overflow: hidden;

  transform:
    translateY(-50%);

  transition:
    left .48s cubic-bezier(.34,1.56,.64,1),
    width .48s cubic-bezier(.34,1.56,.64,1);
}


/* =========================================================
   PILL DETAILS
========================================================= */

.pill-top-crease {

  position: absolute;

  top: 0;

  left: 10%;
  right: 10%;

  height: 1px;

  background:
    rgba(100,130,170,.14);

  filter: blur(.6px);
}


.pill-bottom-bounce {

  position: absolute;

  bottom: 0;

  left: 15%;
  right: 15%;

  height: 1px;

  background:
    rgba(255,255,255,.60);

  filter: blur(.5px);
}


.pill-ghost {

  position: absolute;

  left: 0;
  right: 0;

  height: 10px;

  line-height: 10px;

  font-size: 13px;

  font-weight: 600;

  letter-spacing: -.1px;

  text-align: center;

  white-space: nowrap;

  overflow: hidden;

  color:
    rgba(90,120,160,.45);

  filter: blur(.7px);

  pointer-events: none;

  z-index: 3;
}


.pill-ghost-top {

  top: 0;

  transform:
    translateY(-7px);
}


.pill-ghost-bottom {

  bottom: 0;

  transform:
    translateY(7px);
}


/* =========================================================
   DESKTOP ACTIONS
========================================================= */

.navbar-desktop-actions {

  position: relative;

  z-index: 10;

  display: flex;

  align-items: center;

  gap: 8px;

  padding-right: 4px;

  flex-shrink: 0;
}


.contact-sales,
.mobile-contact-sales {

  display: flex;

  align-items: center;

  justify-content: center;

  text-decoration: none;

  color:
    rgba(255,255,255,.96);

  font-weight: 600;

  letter-spacing: -.1px;

  background:
    linear-gradient(
      160deg,
      #1e1e36 0%,
      #0c0c1e 100%
    );

  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.12),
    0 4px 14px rgba(0,0,0,.32),
    0 1px 3px rgba(0,0,0,.20);

  transition:
    transform .2s ease;
}


.contact-sales {

  padding:
    10px 24px;

  border-radius: 9999px;

  font-size: 14px;
}


.contact-sales:hover {

  transform:
    translateY(-1px);
}


.contact-sales:active {

  transform:
    scale(.97);
}


/* =========================================================
   USER MENU PLACEHOLDER
========================================================= */

.user-menu-placeholder {

  display: flex;

  align-items: center;

  justify-content: center;
}


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

.navbar-mobile-actions {

  display: none;

  align-items: center;

  gap: 8px;

  padding-right: 4px;

  flex-shrink: 0;
}


/* =========================================================
   MOBILE MENU BUTTON
========================================================= */

.mobile-menu-button {

  position: relative;

  display: flex;

  align-items: center;

  justify-content: center;

  width: 40px;

  height: 40px;

  padding: 0;

  border: 0;

  border-radius: 9999px;

  overflow: hidden;

  cursor: pointer;

  color:
    rgba(30,40,90,.75);

  background:
    linear-gradient(
      155deg,
      rgba(255,255,255,.68) 0%,
      rgba(230,240,255,.35) 50%,
      rgba(210,230,255,.22) 100%
    );

  backdrop-filter:
    blur(30px)
    saturate(1.8);

  -webkit-backdrop-filter:
    blur(30px)
    saturate(1.8);

  border-top:
    1.5px solid
    rgba(255,255,255,.94);

  border-left:
    1px solid
    rgba(255,255,255,.75);

  border-right:
    1px solid
    rgba(255,255,255,.55);

  border-bottom:
    1px solid
    rgba(140,180,220,.40);

  box-shadow:
    inset 0 2px 4px rgba(255,255,255,.80),
    inset 0 -2px 4px rgba(100,150,210,.20),
    0 4px 12px rgba(100,140,220,.16);

  transition:
    transform .2s ease;
}


.mobile-menu-button:active {

  transform:
    scale(.96);
}


.menu-highlight {

  position: absolute;

  left: 10%;
  right: 10%;

  top: 0;

  height: 40%;

  border-radius: 9999px;

  pointer-events: none;

  background:
    linear-gradient(
      180deg,
      rgba(255,255,255,.80) 0%,
      transparent 100%
    );

  filter: blur(1px);
}


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

.mobile-dropdown {

  display: none;

  width: 100%;

  max-width:
    calc(100vw - 32px);

  margin-top: 12px;

  border-radius: 24px;

  overflow: hidden;

  opacity: 0;

  transform:
    translateY(-12px);

  pointer-events: none;

  transition:
    opacity .2s ease,
    transform .2s ease;

  background:
    linear-gradient(
      180deg,
      rgba(255,255,255,.92) 0%,
      rgba(245,248,255,.88) 100%
    );

  backdrop-filter:
    blur(40px)
    saturate(1.8);

  -webkit-backdrop-filter:
    blur(40px)
    saturate(1.8);

  border:
    1px solid
    rgba(255,255,255,.70);

  box-shadow:
    0 12px 32px rgba(80,130,210,.18),
    0 4px 12px rgba(0,0,0,.08),
    inset 0 1px 0 rgba(255,255,255,.80);
}


.mobile-dropdown.open {

  opacity: 1;

  transform:
    translateY(0);

  pointer-events: auto;
}


.mobile-dropdown-content {

  display: flex;

  flex-direction: column;

  padding: 8px 0;
}


.mobile-dropdown-content > a:not(.mobile-contact-sales) {

  display: flex;

  align-items: center;

  padding:
    12px 20px;

  color:
    rgba(60,75,110,.65);

  font-size: 14px;

  font-weight: 500;

  text-decoration: none;

  transition:
    background .2s ease,
    color .2s ease;
}


.mobile-dropdown-content > a:not(.mobile-contact-sales):hover {

  color:
    rgba(60,75,110,.85);

  background:
    rgba(255,255,255,.45);
}


.mobile-contact-wrapper {

  padding:
    8px 16px 12px;
}


.mobile-contact-sales {

  width: 100%;

  padding:
    12px 24px;

  border-radius: 9999px;

  font-size: 14px;
}


.mobile-contact-sales:active {

  transform:
    scale(.97);
}


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

@media (max-width: 1023px) {

  .navbar-links,
  .navbar-desktop-actions {

    display: none;
  }


  .navbar-mobile-actions {

    display: flex;
  }


  .navbar-logo-container {

    padding-left: 12px;

    padding-right: 8px;
  }


  .navbar-logo {

    width: 100px;
  }


  .mobile-dropdown {

    display: block;
  }

}


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

@media (max-width: 639px) {

  .main-navbar {

    top: 24px;

    padding:
      0 12px;
  }


  .navbar-pill {

    max-width:
      calc(100vw - 24px);
  }


  .navbar-logo {

    width: 100px;
  }


  .navbar-logo-container {

    padding-left: 12px;

    padding-right: 8px;
  }

}


/* =========================================================
   ACCESSIBILITY
========================================================= */

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

  .navbar-prism-line {

    animation: none;
  }

  .liquid-pill {

    transition: none;
  }

  .mobile-dropdown {

    transition: none;
  }

}