/* One reversible presentation of the existing menu spring; no new controller. */
#mobile-nav {
  --waterfall-header: 88px;
  color: #fff;
  background: rgb(21 19 46 / clamp(0, calc((var(--menu-progress, 0) - .90) * 20), 1));
  opacity: 1;
  transform: none;
  clip-path: none;
  max-height: calc(100svh - var(--waterfall-header));
  overflow-x: hidden;
  overflow-y: auto;
  overscroll-behavior: contain;
}
#mobile-nav::after { content: none; }
#mobile-nav .menu-waterfall {
  position: absolute;
  inset: 0;
  z-index: 0;
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  grid-template-rows: repeat(8, minmax(0, 1fr));
  pointer-events: none;
  user-select: none;
}
#mobile-nav .menu-waterfall span {
  --tile-row: 0;
  --tile-phase: 0;
  --tile-delay: calc(var(--tile-row) * .074 + var(--tile-phase));
  --tile-progress: clamp(0, calc((var(--menu-progress, 0) - var(--tile-delay)) * 3.846154), 1);
  background: #15132e;
  transform: scaleY(var(--tile-progress));
  transform-origin: 50% 0;
  pointer-events: none;
}
#mobile-nav .menu-waterfall [data-menu-row="1"] { --tile-row: 1; }
#mobile-nav .menu-waterfall [data-menu-row="2"] { --tile-row: 2; }
#mobile-nav .menu-waterfall [data-menu-row="3"] { --tile-row: 3; }
#mobile-nav .menu-waterfall [data-menu-row="4"] { --tile-row: 4; }
#mobile-nav .menu-waterfall [data-menu-row="5"] { --tile-row: 5; }
#mobile-nav .menu-waterfall [data-menu-row="6"] { --tile-row: 6; }
#mobile-nav .menu-waterfall [data-menu-row="7"] { --tile-row: 7; }
#mobile-nav .menu-waterfall span:nth-child(6n + 1) { --tile-phase: .040; }
#mobile-nav .menu-waterfall span:nth-child(6n + 2) { --tile-phase: .016; }
#mobile-nav .menu-waterfall span:nth-child(6n + 4) { --tile-phase: .010; }
#mobile-nav .menu-waterfall span:nth-child(6n + 5) { --tile-phase: .024; }
#mobile-nav .menu-waterfall span:nth-child(6n + 6) { --tile-phase: .043; }
#mobile-nav > a {
  --link-progress: clamp(0, calc((var(--menu-progress, 0) - var(--link-start, .44)) * 4), 1);
  position: relative;
  z-index: 1;
  color: #fff;
  opacity: var(--link-progress);
  transform: translate3d(0, calc((1 - var(--link-progress)) * 16px), 0);
  clip-path: inset(0 0 calc((1 - var(--link-progress)) * 100%) 0);
}
#mobile-nav > a:nth-of-type(2) { --link-start: .502; }
#mobile-nav > a:nth-of-type(3) { --link-start: .564; }
#mobile-nav > a:nth-of-type(4) { --link-start: .626; }
#mobile-nav > a:nth-of-type(5) { --link-start: .688; }
#mobile-nav > a[data-waterfall-ready="false"] { pointer-events: none; }
#mobile-nav > a:hover { color: #d4d6e5; }
/* Keyboard focus has an immediately readable surface, including mid-cascade. */
#mobile-nav > a:focus-visible {
  opacity: 1;
  transform: none;
  clip-path: none;
  background: #15132e;
  box-shadow: 0 0 0 5px #15132e;
  outline: 1px solid #fff;
  outline-offset: 5px;
}
html.fluid-reduced #mobile-nav { background: #15132e; }
html.fluid-reduced #mobile-nav .menu-waterfall span { transform: none; }
html.fluid-reduced #mobile-nav > a { opacity: 1; transform: none; clip-path: none; }
html.fluid-reduced.fluid-menu-transition #mobile-nav[hidden] { display: none !important; }
@media (max-width: 900px) { #mobile-nav { --waterfall-header: 76px; } }
@media (max-width: 600px) { #mobile-nav { --waterfall-header: 72px; } }
@media (prefers-reduced-motion: reduce) {
  #mobile-nav { background: #15132e; }
  #mobile-nav .menu-waterfall span { transform: none; }
  #mobile-nav > a { opacity: 1; transform: none; clip-path: none; }
  .fluid-menu-transition #mobile-nav[hidden] { display: none !important; }
}