/* Only the small navigation panel is animated; the movie and document keep
   their existing gesture handling and compositor layers. */
.mobile-nav.menu-animated {
  opacity: 0;
  transform: translate3d(0, -14px, 0) scale(.97);
  transform-origin: calc(100% - 30px) 0;
  pointer-events: none;
  transition: opacity 260ms ease, transform 320ms cubic-bezier(.22, .8, .25, 1);
  background: radial-gradient(ellipse at 94% 0%, rgba(190, 149, 236, .16), transparent 58%),
    linear-gradient(145deg, rgba(255, 255, 255, .09), rgba(221, 199, 251, .025) 50%, rgba(255, 255, 255, .045)),
    rgba(29, 20, 43, .97);
  border-color: rgba(237, 219, 255, .24);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .16), inset 0 -1px 0 rgba(255, 255, 255, .035), 0 22px 50px rgba(7, 3, 15, .3);
  /* Painted glass avoids rerasterizing a live blurred movie on iPhone. */
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
  touch-action: pan-y pinch-zoom;
  scrollbar-width: thin;
  scrollbar-color: rgba(210, 186, 255, .3) transparent;
}
.mobile-nav.menu-animated:not([hidden]) { will-change: opacity, transform; }
.mobile-nav.menu-animated.is-open {
  opacity: 1;
  transform: translate3d(0, 0, 0) scale(1);
  pointer-events: auto;
  transition-duration: 300ms, 380ms;
}
.mobile-nav.menu-animated > * {
  opacity: 0;
  transform: translate3d(0, 8px, 0);
  transition: opacity 170ms ease, transform 220ms cubic-bezier(.2, .75, .25, 1);
  transition-delay: 0ms;
}
.mobile-nav.menu-animated.is-open > * {
  opacity: 1;
  transform: translate3d(0, 0, 0);
  transition-duration: 240ms, 280ms;
  transition-delay: calc(var(--menu-order, 0) * 20ms + 30ms);
}
.mobile-nav.menu-animated > :nth-child(2) { --menu-order: 1; }
.mobile-nav.menu-animated > :nth-child(3) { --menu-order: 2; }
.mobile-nav.menu-animated > :nth-child(4) { --menu-order: 3; }
.mobile-nav.menu-animated > :nth-child(5) { --menu-order: 4; }
.mobile-nav.menu-animated > :nth-child(6) { --menu-order: 5; }
.menu-toggle { border-radius: 14px; transition: background-color 220ms ease; }
.menu-toggle[aria-expanded="true"] { background: rgba(226, 204, 255, .09); }
.menu-toggle span { transition: transform 340ms cubic-bezier(.22, .8, .25, 1); }
@media (prefers-reduced-motion: reduce) {
  .mobile-nav.menu-animated,
  .mobile-nav.menu-animated > *,
  .menu-toggle,
  .menu-toggle span { transition: none; }
  .mobile-nav.menu-animated,
  .mobile-nav.menu-animated > * { transform: none; }
}