/* ==========================================================================
   Search panel — open / close animation
   ========================================================================== */

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

.search-panel.is-open,
.search-panel.is-search-closing {
  display: block;
  visibility: visible;
  pointer-events: auto;
  transition: visibility 0s;
}

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

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

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

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

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

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

.search-panel.is-open .search-panel__form {
  transform: translateY(22px);
}

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

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

.search-panel.is-open.is-search-header-visible .search-panel__form,
.search-panel.is-search-closing .search-panel__form {
  margin: auto;
}

.search-panel.is-open.is-search-field-visible .search-panel__form {
  opacity: 1;
  transform: translateY(0);
  transition-delay: 0s;
}

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

.search-panel.is-search-closing.is-search-panel-out .header--menu .header__logo {
  opacity: 0;
  transform: translateY(-16px);
  transition-delay: 0s;
}

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

.search-panel:not(.is-open):not(.is-search-closing) .search-panel__form,
.search-panel:not(.is-open):not(.is-search-closing) .header--menu .header__logo,
.search-panel:not(.is-open):not(.is-search-closing) .header--menu .header__nav > * {
  transition: none;
}

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

  .search-panel__inner {
    transform: none;
    transition: none;
  }

  .search-panel.is-open .search-panel__form,
  .search-panel.is-open .header--menu .header__logo,
  .search-panel.is-open .header--menu .header__nav > * {
    opacity: 1;
    transform: none;
    transition: none;
  }
}