/* Menu visuals (menu-motion.js): surface from the top, opacity-only exit. */
.menu.menu-motion-opening::backdrop { background: transparent; }

/* A closed <dialog> leaves the screen at once; keep it drawn, unclickable, for the fade. */
.menu.menu-motion-closing { display: block; z-index: 50; pointer-events: none; }

/* Logo and languages stay until the descending surface covers them. */
html:has(.menu.menu-motion-opening) .site-bar:not(.is-scrolled) .site-logo,
html:has(.menu.menu-motion-opening) .site-bar:not(.is-scrolled) .site-languages {
  visibility: visible;
  opacity: 1;
}

.menu-motion .menu-links { transform-origin: left center; transform: translateZ(0); will-change: transform; }

@media (hover: hover) and (pointer: fine) {
  .menu-motion .menu-links {
    --menu-link-hover-reach: clamp(5px,.8svh,10px);
  }

  .menu-motion:not(.menu-motion-opening):not(.menu-motion-closing) .menu-link {
    position: relative;
    transition: opacity .28s cubic-bezier(.165,.84,.44,1);
  }

  .menu-motion:not(.menu-motion-opening):not(.menu-motion-closing) .menu-link::before {
    content: "";
    position: absolute;
    inset-block: calc(-1 * var(--menu-link-hover-reach));
    inset-inline: 0;
  }

  .menu-motion:not(.menu-motion-opening):not(.menu-motion-closing) .menu-links:has(.menu-link:hover) .menu-link:not(:hover) {
    opacity: .28;
  }

  .menu-motion:not(.menu-motion-opening):not(.menu-motion-closing) .menu-links:has(.menu-link:hover) .menu-link[aria-current="location"]:not(:hover) {
    opacity: .55;
  }
}

@media (hover: hover) and (pointer: fine) and (max-width: 700px) {
  .menu-motion .menu-links {
    --menu-link-hover-reach: clamp(3.5px,.7svh,7px);
  }
}

@media (hover: hover) and (pointer: fine) and (max-height: 450px) and (min-width: 701px) {
  .menu-motion .menu-links {
    --menu-link-hover-reach: 4px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .menu-motion, .menu-motion .menu-links, .menu-motion .menu-photo, .menu-motion .menu-foot {
    opacity: 1 !important;
    transform: none !important;
    clip-path: none !important;
  }

  .menu-motion .menu-link {
    transition: none !important;
  }
}