@font-face{ font-display:swap;
  font-family: "Mona Sans";
  src: url("https://assets.codepen.io/64/Mona-Sans.woff2") format("woff2 supports variations"), url("https://assets.codepen.io/64/Mona-Sans.woff2") format("woff2-variations");
  font-weight: 100 1000;
 }

/* 
-- Why the @layer ?
   I misuse the @layer for a good reason. 
   Since I do a lot of demo featuring #houdini
   I like to store my @property --foo {} within
   A @layer so that the viewer can simply fold the layer 
   And access to the interesting part of the CSS panel.
*/

@layer properties {
  @property --after-bg-position {
    syntax: "<number>";
    inherits: true;
    initial-value: 0;
  }

  @property --after-radial-bg-position {
    syntax: "<number>";
    inherits: true;
    initial-value: 0;
  }

  @property --after-bg-width {
    syntax: "<number>";
    inherits: true;
    initial-value: 100;
  }

  @property --after-bg-opacity {
    syntax: "<number>";
    inherits: true;
    initial-value: 20;
  }

  @property --after-shadow-offset {
    syntax: "<number>";
    inherits: true;
    initial-value: 15;
  }

  @property --after-scale {
    syntax: "<number>";
    inherits: true;
    initial-value: 0.85;
  }

  @property --li-before-opacity {
    syntax: "<number>";
    inherits: true;
    initial-value: 0;
  }
}

:root {
  /* -- Colors: */
  --body-bg-color: hsl(221deg 16% 6%);
  /* -- Background */
  --bg-position: 0;
  /* -- misc */
  --debug: 0;
  --trs-easing: cubic-bezier(.41, -0.09, .55, 1.09);
  --trs-timing: 300ms;
  --trs-delay: 80ms;
}

*,
*:before,
*:after {
  box-sizing: border-box;
  /* debug */
  outline: calc(var(--debug) * 1px) dashed rgba(255, 0, 0, 0.5);
}

html,
body {
  width: 100%;
  height: 100%;
  padding: 0;
  margin: 0;
}

body {
  background: var(--body-bg-color);
  display: grid;
  place-items: center;
  font-family: "Mona Sans", sans-serif;
}

main {
  width: 100%;
  max-width: 700px;
  color: white;
}

main header {
  text-align: center;
  margin-bottom: 6em;
}

main header h2 {
  font-size: 2em;
  font-weight: 500;
}

.nav {
  transition: --after-bg-position var(--trs-timing) var(--trs-easing) 0.2s, --after-radial-bg-position var(--trs-timing) var(--trs-easing) 0.2s, --after-bg-width var(--trs-timing) var(--trs-easing) 0.2s, --after-bg-opacity var(--trs-timing) var(--trs-easing) 0.2s, --li-before-opacity var(--trs-timing) var(--trs-easing) 0.2s;
  background: var(--body-bg-color);
  border-radius: 100px;
  position: relative;
}

.nav:before {
  content: "";
  display: block;
  position: absolute;
  width: calc(calc(var(--after-bg-width) * 1px) - 8px);
  height: 100%;
  background: rgb(255 255 255/calc(var(--after-shadow-offset)*1%));
  border-radius: 100px;
  filter: blur(20px);
  left: 0;
  top: 0;
  transform: translateX(calc(var(--after-bg-position) * 1px)) scale(1.1);
}

.nav ul {
  position: relative;
  padding: 0;
  margin: 0;
  list-style: none;
  display: flex;
  justify-content: space-between;
  height: 80px;
  border-radius: 100px;
  background-position: center center;
  background-image: radial-gradient(ellipse 150px 100px at calc(var(--after-radial-bg-position)*1px) bottom, white 0%, rgba(255, 255, 255, 0.2) 100%);
  /*
   &:has(li.active:hover):after {
    --after-bg-opacity: 50;
    --after-shadow-offset: 10;
  }
  */
  /* 
    Some :has() goodness to control the 
    nav:after border-radius hihihi 
  */
}

.nav ul:active {
  --after-scale: 0.75;
}

.nav ul:before {
  content: "";
  display: block;
  position: absolute;
  width: calc(100% - 2px);
  height: calc(100% - 2px);
  background: var(--body-bg-color);
  top: 1px;
  left: 1px;
  border-radius: 100px;
}

.nav ul:after {
  content: "";
  display: block;
  position: absolute;
  z-index: 1;
  width: calc(calc(var(--after-bg-width) * 1px) - 12px);
  height: calc(100% - 12px);
  background: linear-gradient(to bottom, rgb(255 255 255/calc(calc(var(--after-bg-opacity, 0)/10)*1%)), rgba(255, 255, 255, 0.1));
  box-shadow: inset 0 -6px calc(var(--after-shadow-offset, 0)*1px) rgb(255 255 255/calc(var(--after-bg-opacity)*1%));
  left: 6px;
  top: 6px;
  transform: translate(calc(var(--after-bg-position) * 1px), 0);
  border-radius: 100px 12px 12px 100px;
  transition: --after-bg-opacity var(--trs-timing) var(--trs-easing) var(--trs-delay), --after-shadow-offset var(--trs-timing) var(--trs-easing) var(--trs-delay), border-radius var(--trs-timing) var(--trs-easing) var(--trs-delay);
  pointer-events: none;
}

.nav ul li {
  padding: 1em;
  height: 100%;
  width: 100%;
  position: relative;
  transform-style: preserve-3d;
  perspective: 800px;
}

.nav ul li:not(.active):hover {
  --li-before-opacity: 0.3;
}

.nav ul li:before {
  content: "";
  display: block;
  position: absolute;
  z-index: 1;
  background: rgba(255, 0, 0, 0.1);
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  border-radius: 8px;
  pointer-events: none;
  user-select: none;
  background: linear-gradient(to bottom, rgba(255, 255, 255, 0.05), rgba(255, 255, 255, 0.35));
  opacity: var(--li-before-opacity);
  transform: scale(var(--after-scale)) rotateY(calc(var(--tilt-bg-y) * 3 * -1deg)) rotateX(calc(var(--tilt-bg-x) * 3 * 1deg)) translateZ(15px);
  transition: --li-before-opacity var(--trs-timing) var(--trs-easing), --after-scale calc(var(--trs-timing)/2) var(--trs-easing) calc(var(--trs-delay)/2);
}

.nav ul li:first-of-type:before {
  border-radius: 100px 12px 12px 100px;
}

.nav ul li:last-of-type:before {
  border-radius: 12px 100px 100px 12px;
}

.nav ul li a {
  display: block;
  color: inherit;
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  text-decoration: none;
  position: relative;
  z-index: 10;
}

.nav ul:has(li.active:first-of-type a):after {
  border-radius: 100px 12px 12px 100px;
}

.nav ul:has(li.active:last-of-type a):after {
  border-radius: 12px 100px 100px 12px;
}

.nav ul:has(li.active:nth-child(n+2):nth-child(-n+3) a):after {
  border-radius: 100px;
}