/* ==========================================================================
   Menu — open / close animation
   ========================================================================== */

.menu {
  --menu-enter-ease: cubic-bezier(0.22, 1, 0.36, 1);
  --menu-panel-duration: 0.85s;
  --menu-item-step: 75ms;
  --menu-item-duration: 0.55s;
  visibility: hidden;
  pointer-events: none;
  opacity: 1;
  transition: visibility 0s linear var(--menu-panel-duration);
}

.menu.is-open,
.menu.is-menu-closing {
  visibility: visible;
  pointer-events: auto;
  transition: visibility 0s;
}

.menu__inner {
  transform: translateY(100%);
  transition: transform var(--menu-panel-duration) var(--menu-enter-ease);
}

.menu.is-open:not(.is-menu-panel-out) .menu__inner {
  transform: translateY(0);
}

.menu.is-menu-closing.is-menu-panel-out .menu__inner {
  transform: translateY(100%);
}

.menu.is-open .menu__link,
.menu.is-open .menu__social-link,
.menu.is-open .header--menu .header__logo,
.menu.is-open .header--menu .header__nav > * {
  opacity: 0;
  transition:
    opacity var(--menu-item-duration) var(--menu-enter-ease),
    transform var(--menu-item-duration) var(--menu-enter-ease);
}

.menu.is-open .header--menu .header__logo {
  transform: translateY(-16px);
}

.menu.is-open.is-menu-header-visible .header--menu .header__logo {
  opacity: 1;
  transform: translateY(0);
  transition-delay: 0s;
}

.menu.is-open.is-menu-header-nav-visible .header--menu .header__nav > * {
  opacity: 1;
  transform: translateX(0);
  transition-delay: calc(var(--menu-index, 0) * var(--menu-item-step));
}

.menu.is-open .menu__link {
  transform: translateY(22px);
}

.menu.is-open .menu__social-link {
  transform: translateY(18px);
}

.menu.is-open .header--menu .header__nav > * {
  transform: translateX(-18px);
}

.menu.is-open.is-menu-links-visible .menu__link {
  opacity: 1;
  transform: translateY(0);
  transition-delay: calc(var(--menu-index, 0) * var(--menu-item-step));
}

.menu.is-open.is-menu-social-visible .menu__social-link {
  opacity: 1;
  transform: translateY(0);
  transition-delay: calc(var(--menu-index, 0) * var(--menu-item-step));
}

.menu.is-open .menu__search {
  opacity: 0;
  transform: translateY(22px);
  pointer-events: none;
  transition:
    opacity var(--menu-item-duration) var(--menu-enter-ease),
    transform var(--menu-item-duration) var(--menu-enter-ease);
}

.menu.is-open.is-menu-search-visible .menu__search,
.menu.is-menu-closing .menu__search {
  margin: auto;
}

.menu.is-open.is-menu-search-visible .menu__search {
  opacity: 1;
  transform: translateY(0);
  pointer-events: auto;
  transition-delay: 0s;
}

.menu.is-menu-closing:not(.is-menu-search-visible) .menu__search {
  opacity: 0;
  transform: translateY(22px);
  transition-delay: 0s;
}

.menu.is-menu-closing:not(.is-menu-header-nav-visible) .header--menu .header__nav > * {
  opacity: 0;
  transform: translateX(-18px);
  transition-delay: calc(var(--menu-close-index, 0) * var(--menu-item-step));
}

.menu.is-menu-closing:not(.is-menu-social-visible) .menu__social-link,
.menu.is-menu-to-search:not(.is-menu-social-visible) .menu__social-link {
  opacity: 0;
  transform: translateY(18px);
  transition-delay: calc(var(--menu-close-index, 0) * var(--menu-item-step));
}

/* Close / to-search — step 2: nav links hide bottom to top */
.menu.is-menu-closing:not(.is-menu-links-visible) .menu__link,
.menu.is-menu-to-search:not(.is-menu-links-visible) .menu__link {
  opacity: 0;
  transform: translateY(22px);
  transition-delay: calc(var(--menu-close-index, 0) * var(--menu-item-step));
}

/* Close — panel slides down, logo hides */
.menu.is-menu-closing.is-menu-panel-out .header--menu .header__logo {
  opacity: 0;
  transform: translateY(-16px);
  transition-delay: 0s;
}

.menu.is-menu-closing.is-menu-panel-out .header--menu .header__nav > * {
  opacity: 0;
  transform: translateX(-18px);
  transition-delay: 0s;
}

.menu:not(.is-open):not(.is-menu-closing) .menu__link,
.menu:not(.is-open):not(.is-menu-closing) .menu__social-link,
.menu:not(.is-open):not(.is-menu-closing) .menu__search,
.menu:not(.is-open):not(.is-menu-closing) .header--menu .header__logo,
.menu:not(.is-open):not(.is-menu-closing) .header--menu .header__nav > * {
  transition: none;
}

@media (prefers-reduced-motion: reduce) {
  .menu {
    transition: none;
  }

  .menu__inner {
    transform: none;
    transition: none;
  }

  .menu.is-open .menu__link,
  .menu.is-open .menu__social-link,
  .menu.is-open .menu__search,
  .menu.is-open .header--menu .header__logo,
  .menu.is-open .header--menu .header__nav > * {
    opacity: 1;
    transform: none;
    transition: none;
  }
}