/* Transmission, chromatic refraction, reflected light, a dark rim and elevation. */
.navigation {
  --glass-light-x: 24%;
  --glass-light-y: 0%;
  background: none;
  border-color: transparent;
  box-shadow: 0 0 0 .5px #21142e26, 0 10px 30px #30213f12, 0 2px 5px #30213f09;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
}

/* Filter only the background. The labels and dropdowns stay sharp and unclipped. */
.navigation::before,
.navigation::after {
  content: "";
  position: absolute;
  inset: -1px;
  border-radius: inherit;
  pointer-events: none;
}
.navigation::before {
  z-index: -2;
  background: linear-gradient(115deg, #ffffff80, #f6f0ff68 55%, #ffffff70);
  -webkit-backdrop-filter: blur(12px) saturate(115%);
  backdrop-filter: blur(12px) saturate(115%);
}
.navigation.has-liquid-refraction::before {
  /* Capture 40px of the surroundings, then clip the result to the capsule.
     Merely extending the SVG filter cannot read outside the backdrop element. */
  inset: -41px calc(-1px - var(--glass-capture-x, 0px));
  clip-path: inset(40px var(--glass-capture-x, 0px) round 999px);
  backdrop-filter: url("#navigation-glass-refraction") saturate(112%);
}
.navigation::after {
  z-index: -1;
  background:
    radial-gradient(ellipse 240px 85px at var(--glass-light-x) var(--glass-light-y), #ffffff70, #ffffff00 78%),
    linear-gradient(175deg, #ffffff28, transparent 40%, #b19cca12);
  box-shadow:
    inset 0 1.5px 1px #ffffffb0,
    inset 1px 0 1px #ffffff70,
    inset -1px 0 1px #ffffff55,
    inset 0 -1px 1px #ffffff80,
    inset 0 -3px 6px #72558c14;
  border: 1px solid #1e14291f;
}
.navigation .nav-login {
  background: linear-gradient(145deg, #ffffffa8, #ffffff60);
  border-color: #ffffffb0;
  box-shadow: inset 0 1px 0 #ffffffbf, 0 2px 6px #30213f0a;
}
.navigation .nav-login:hover { background: #ffffffe0; }
.navigation .nav-release {
  background: linear-gradient(145deg, #513967, #30213f 78%);
  border-color: #ffffff30;
  box-shadow: inset 0 1px 0 #ffffff30, 0 3px 8px #30213f22;
}
.navigation .nav-release:hover { background: #513967; }
.navigation .character-links {
  background: #f8f3fff0;
  border-color: #ffffffd0;
  box-shadow: inset 0 1px 0 #fff, 0 14px 40px #30213f1c;
  -webkit-backdrop-filter: blur(16px);
  backdrop-filter: blur(16px);
}
.navigation-glass-defs { position: absolute; width: 0; height: 0; pointer-events: none; }

@media (max-width: 767px) {
  .navigation .menu-toggle {
    background: linear-gradient(145deg, #ffffffa0, #ffffff50);
    box-shadow: inset 0 1px 0 #ffffffcf;
  }
  .navigation-links.is-open {
    background: #f8f3fff2;
    border-color: #ffffffdf;
    box-shadow: inset 0 1px 0 #fff, 0 14px 40px #30213f1c;
    -webkit-backdrop-filter: blur(16px);
    backdrop-filter: blur(16px);
  }
  .navigation .character-links { background: #eee4fb; box-shadow: none; }
}

@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  .navigation::before { background: #f1eafc; }
}
@media (prefers-reduced-transparency: reduce), (prefers-contrast: more) {
  .navigation::before, .navigation.has-liquid-refraction::before {
    background: #f1eafc;
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
  }
  .navigation::after { background: none; }
  .navigation .character-links, .navigation-links.is-open { background: #f8f3ff; }
}
@media (forced-colors: active) {
  .navigation { background: Canvas; border: 1px solid CanvasText; box-shadow: none; }
  .navigation::before, .navigation::after { display: none; }
}