/* Shared radial navigation and fan-out row motion.
   Base document styles keep every link visible. Motion starting states only
   apply after nav-motion-v1.js has initialised successfully. */

.nav-drawer {
  --nav-reveal-origin-x: calc(100vw - 5rem);
  --nav-reveal-origin-y: 5rem;
  --nav-reveal-radius: 150vmax;
  --nav-surface-top: #dff6fa;
  --nav-surface-mid: #edf8fa;
  --nav-surface-bottom: #f6f8f9;
  left: 0;
  right: auto;
  width: 100vw;
  max-width: none;
  height: 100vh;
  height: 100dvh;
  min-height: 100vh;
  min-height: 100dvh;
  border-left: 0;
  background-color: var(--nav-surface-top);
  background-image:
    radial-gradient(
      circle at var(--nav-reveal-origin-x) var(--nav-reveal-origin-y),
      rgba(120, 208, 231, .2) 0,
      rgba(120, 208, 231, .08) 18rem,
      rgba(120, 208, 231, 0) 38rem
    ),
    radial-gradient(
      85% 70% at 12% 8%,
      rgba(255, 255, 255, .72) 0,
      rgba(255, 255, 255, 0) 62%
    ),
    linear-gradient(
      180deg,
      var(--nav-surface-top) 0%,
      #e8f7f9 30%,
      var(--nav-surface-mid) 54%,
      #f2f8f9 76%,
      var(--nav-surface-bottom) 100%
    );
  color: var(--deep-blue);
  box-shadow: none;
  overflow: hidden;
  -webkit-clip-path: circle(0 at var(--nav-reveal-origin-x) var(--nav-reveal-origin-y));
  clip-path: circle(0 at var(--nav-reveal-origin-x) var(--nav-reveal-origin-y));
  transition:
    -webkit-clip-path 320ms cubic-bezier(.22, 1, .36, 1) 120ms,
    clip-path 320ms cubic-bezier(.22, 1, .36, 1) 120ms,
    visibility 0s linear 460ms !important;
}

.nav-drawer.is-open {
  -webkit-clip-path: circle(var(--nav-reveal-radius) at var(--nav-reveal-origin-x) var(--nav-reveal-origin-y));
  clip-path: circle(var(--nav-reveal-radius) at var(--nav-reveal-origin-x) var(--nav-reveal-origin-y));
  transition:
    -webkit-clip-path 680ms cubic-bezier(.22, 1, .36, 1),
    clip-path 680ms cubic-bezier(.22, 1, .36, 1),
    visibility 0s linear 0s !important;
}

.nav-drawer__top {
  min-height: 6.4rem;
  justify-content: space-between;
  padding-top: max(1.4rem, env(safe-area-inset-top));
  padding-right: 2rem;
  padding-right: calc(2rem + env(safe-area-inset-right));
  padding-left: max(2rem, env(safe-area-inset-left));
  position: relative;
  z-index: 2;
}

.nav-drawer__close {
  position: relative;
  top: auto;
  right: auto;
  bottom: auto;
  left: auto;
  flex: 0 0 auto;
  z-index: 3;
  background: rgba(255, 255, 255, .82);
  box-shadow: 0 10px 30px rgba(3, 42, 64, .12);
  transform-origin: center;
}

.nav-drawer.is-open .nav-drawer__close {
  animation: nav-close-arrive 260ms cubic-bezier(.22, 1, .36, 1) 80ms backwards;
}

.nav-drawer__scroll {
  width: min(100%, 90rem);
  margin-inline: auto;
  padding-right: max(2rem, env(safe-area-inset-right));
  padding-bottom: max(2.2rem, env(safe-area-inset-bottom));
  padding-left: max(2rem, env(safe-area-inset-left));
  overflow-x: hidden;
  overflow-x: clip;
  overscroll-behavior: contain;
  -webkit-overflow-scrolling: touch;
  position: relative;
  z-index: 1;
}

/* Fan motion: the complete numbered row rotates around its left edge and
   settles in order. CSS transitions reverse safely during rapid toggles. */
html.nav-motion-ready .nav-drawer.nav-motion-reset .nav-drawer__main > a {
  opacity: 0;
  transform: translate3d(-6px, -16px, 0) rotate(-2.7deg);
  transform-origin: left center;
  transition-property: opacity, transform;
  transition-duration: 170ms;
  transition-delay: 0ms;
  transition-timing-function: cubic-bezier(.4, 0, 1, 1);
}

html.nav-motion-ready .nav-drawer.nav-motion-reset.nav-motion-run .nav-drawer__main > a {
  opacity: 1;
  transform: translate3d(0, 0, 0) rotate(0deg);
  transition-duration: 300ms;
  transition-delay: calc(180ms + var(--index, 0) * 40ms);
  transition-timing-function: cubic-bezier(.22, 1, .36, 1);
}

html.nav-motion-ready .nav-drawer .nav-drawer__main > a:focus,
html.nav-motion-ready .nav-drawer .nav-drawer__main > a:focus-visible {
  opacity: 1 !important;
  transform: none !important;
  transition-delay: 0ms !important;
  transition-duration: 0ms !important;
}

@keyframes nav-close-arrive {
  from {
    opacity: 0;
    transform: scale(.88) rotate(-8deg);
  }

  to {
    opacity: 1;
    transform: scale(1) rotate(0deg);
  }
}

@media (width <= 620px) {
  .nav-drawer {
    --nav-reveal-origin-x: calc(100vw - 4rem);
    --nav-reveal-origin-y: 4.5rem;
  }

  .nav-drawer__top {
    min-height: 5.85rem;
    padding-right: 1.15rem;
    padding-right: calc(1.15rem + env(safe-area-inset-right));
    padding-left: max(1.15rem, env(safe-area-inset-left));
  }

  .nav-drawer__scroll {
    padding-right: max(1.15rem, env(safe-area-inset-right));
    padding-left: max(1.15rem, env(safe-area-inset-left));
  }

  html.nav-motion-ready .nav-drawer.nav-motion-reset .nav-drawer__main > a {
    transform: translate3d(-4px, -12px, 0) rotate(-2.2deg);
  }

  html.nav-motion-ready .nav-drawer.nav-motion-reset.nav-motion-run .nav-drawer__main > a {
    transform: translate3d(0, 0, 0) rotate(0deg);
  }
}

@supports not (clip-path: circle(1px at 1px 1px)) {
  .nav-drawer {
    opacity: 0;
    -webkit-clip-path: none !important;
    clip-path: none !important;
    transition: opacity 160ms ease, visibility 0s linear 160ms !important;
  }

  .nav-drawer.is-open {
    opacity: 1;
    transition: opacity 160ms ease, visibility 0s linear 0s !important;
  }
}

@media (prefers-reduced-motion: reduce) {
  .nav-drawer,
  .nav-drawer.is-open {
    -webkit-clip-path: none !important;
    clip-path: none !important;
    transition: visibility 0s linear 0s !important;
  }

  .nav-drawer.is-open .nav-drawer__close {
    animation: none !important;
  }

  html.nav-motion-ready .nav-drawer.nav-motion-reset .nav-drawer__main > a,
  html.nav-motion-ready .nav-drawer.nav-motion-reset.nav-motion-run .nav-drawer__main > a {
    opacity: 1 !important;
    transform: none !important;
    transition: none !important;
  }
}

@media print {
  .nav-drawer,
  html.nav-motion-ready .nav-drawer .nav-drawer__main > a {
    -webkit-clip-path: none !important;
    clip-path: none !important;
    opacity: 1 !important;
    transform: none !important;
    transition: none !important;
    animation: none !important;
  }
}