/* ========================================
   NAVIGATION ITEMS
   ======================================== */

.nav-item {
  font-family: "IBM Plex Mono", monospace;
  font-size: 1rem;
  font-weight: 500;
  color: #000;
  text-decoration: none;
}

/* Visible buttons */
button.nav-item {
  background: transparent;
  border: none;
  padding: 0;
  margin: 0;
  font: inherit;
  color: inherit;
  cursor: pointer;
}

/* ========================================
   NAVIGATION EMPHASIS
   ======================================== */

/* Common */
.nav-item.is-common {
  color: rgb(0 0 0 / var(--nav-opacity-common));
  font-weight: var(--nav-weight-common);
}

/* Background */
.nav-item.is-background {
  color: rgb(0 0 0 / var(--nav-opacity-background));
  font-weight: var(--nav-weight-common);
}

/* Child */
.nav-item.is-child {
  color: rgb(0 0 0 / var(--nav-opacity-child));
  font-weight: var(--nav-weight-common);
}

/* Active */
.nav-item.is-active {
  color: rgb(0 0 0 / var(--nav-opacity-active));
  font-weight: var(--nav-weight-active);
}

/* Important */
.nav-item.is-important {
  color: rgb(0 0 0 / var(--nav-opacity-important));
  font-weight: var(--nav-weight-important);
}

/* ========================================
   NAVIGATION FEEDBACK
   ======================================== */

.nav-item {
  transition: color var(--nav-color-speed) ease;
}

.nav-item:active {
  color: rgb(0 0 0 / 0.35);
}

/* Hover */
@media (hover: hover) and (pointer: fine) {
  .nav-item:hover {
    color: rgb(0 0 0 / var(--nav-opacity-important));
    font-weight: var(--nav-weight-important);
  }
}

/* ========================================
   COLLAPSE BUTTONS
   ======================================== */

/* Button */
.collapse-button {
  position: absolute;
  top: 25%;
  left: 50%;
  width: 100%;

  transform: translateX(-50%);

  font-size: var(--collapse-button-size);
}

/* Spielwerk collapse alignment */
#spiel-werk-collapse-button {
  transform: translateX(
    calc(-50% + var(--spielwerk-collapse-horizontal-shift))
  );
}

/* Normal chevron */
.collapse-symbol {
  display: inline-block;
}

/* Hover bridge */
.open-close > .nav-item:not(.collapse-button) {
  position: relative;
}

.open-close > .nav-item:not(.collapse-button)::before {
  content: "";
  position: absolute;

  left: 0;
  right: 0;

  top: calc(var(--menu-drop) * -1);
  height: var(--menu-drop);
}

/* Animation area */
.collapse-animation {
  position: absolute;

  left: 50%;
  top: var(--collapse-animation-top);

  width: 1em;
  height: var(--collapse-animation-height);

  transform: translateX(-50%);

  pointer-events: none;
}

/* Animated chevrons */
.collapse-chevron {
  position: absolute;
  left: 50%;

  transform: translate(-50%, -50%);

  font-size: var(--collapse-button-size);
  font-weight: inherit;
  color: rgb(0 0 0 / var(--nav-opacity-background));

  opacity: 0;
}

/* Even positions */
.collapse-chevron-top {
  top: 0%;
}

.collapse-chevron-middle {
  top: 50%;
}

.collapse-chevron-bottom {
  top: 100%;
}

/* ========================================
   COLLAPSE ANIMATION
   ======================================== */

@media (hover: hover) and (pointer: fine) {
  /*
    Trigger when:
    - this slot's direct label is hovered
    - OR this slot's collapse button is hovered

    Then animate:
    - this slot's collapse button
    - AND visible child collapse buttons below it
  */

  /* Normal chevron countdown */
  .open-close:has(
      > .nav-item:not(.collapse-button):hover,
      > .collapse-button:hover
    )
    .collapse-button
    > .collapse-symbol {
    animation: collapse-symbol-countdown var(--collapse-animation-delay) linear
      forwards;
  }

  /* Bottom chevron */
  .open-close:has(
      > .nav-item:not(.collapse-button):hover,
      > .collapse-button:hover
    )
    .collapse-chevron-bottom {
    animation: collapse-cascade var(--collapse-animation-speed) steps(1, end)
      infinite;

    animation-delay: var(--collapse-animation-delay);
  }

  /* Middle chevron */
  .open-close:has(
      > .nav-item:not(.collapse-button):hover,
      > .collapse-button:hover
    )
    .collapse-chevron-middle {
    animation: collapse-cascade var(--collapse-animation-speed) steps(1, end)
      infinite;

    animation-delay: calc(
      var(--collapse-animation-delay) + var(--collapse-animation-speed) / 3
    );
  }

  /* Top chevron */
  .open-close:has(
      > .nav-item:not(.collapse-button):hover,
      > .collapse-button:hover
    )
    .collapse-chevron-top {
    animation: collapse-cascade var(--collapse-animation-speed) steps(1, end)
      infinite;

    animation-delay: calc(
      var(--collapse-animation-delay) + var(--collapse-animation-speed) / 3 * 2
    );
  }
}

/* ========================================
   CROSS-BRANCH COLLAPSE INDICATOR
   ======================================== */

@media (hover: hover) and (pointer: fine) {
  /*
    Project Management open
    + hover Parametric Design
    → indicate that Project Management will close
  */

  /* Normal chevron countdown */
  .parametric-design-slot:has(> #parametric-design-button:hover)
    ~ .project-management-slot.is-open
    > #project-management-collapse-button
    > .collapse-symbol {
    animation: collapse-symbol-countdown var(--collapse-animation-delay) linear
      forwards;
  }

  /* Bottom chevron */
  .parametric-design-slot:has(> #parametric-design-button:hover)
    ~ .project-management-slot.is-open
    > #project-management-collapse-button
    .collapse-chevron-bottom {
    animation: collapse-cascade var(--collapse-animation-speed) steps(1, end)
      infinite;

    animation-delay: var(--collapse-animation-delay);
  }

  /* Middle chevron */
  .parametric-design-slot:has(> #parametric-design-button:hover)
    ~ .project-management-slot.is-open
    > #project-management-collapse-button
    .collapse-chevron-middle {
    animation: collapse-cascade var(--collapse-animation-speed) steps(1, end)
      infinite;

    animation-delay: calc(
      var(--collapse-animation-delay) + var(--collapse-animation-speed) / 3
    );
  }

  /* Top chevron */
  .parametric-design-slot:has(> #parametric-design-button:hover)
    ~ .project-management-slot.is-open
    > #project-management-collapse-button
    .collapse-chevron-top {
    animation: collapse-cascade var(--collapse-animation-speed) steps(1, end)
      infinite;

    animation-delay: calc(
      var(--collapse-animation-delay) + var(--collapse-animation-speed) / 3 * 2
    );
  }

  /*
    Parametric Design open
    + hover Project Management
    → indicate that Parametric Design will close
  */

  /* Normal chevron countdown */
  .architecture-slot:has(
      > .project-management-slot > #project-management-button:hover
    )
    > .parametric-design-slot.is-open
    > #parametric-design-collapse-button
    > .collapse-symbol {
    animation: collapse-symbol-countdown var(--collapse-animation-delay) linear
      forwards;
  }

  /* Bottom chevron */
  .architecture-slot:has(
      > .project-management-slot > #project-management-button:hover
    )
    > .parametric-design-slot.is-open
    > #parametric-design-collapse-button
    .collapse-chevron-bottom {
    animation: collapse-cascade var(--collapse-animation-speed) steps(1, end)
      infinite;

    animation-delay: var(--collapse-animation-delay);
  }

  /* Middle chevron */
  .architecture-slot:has(
      > .project-management-slot > #project-management-button:hover
    )
    > .parametric-design-slot.is-open
    > #parametric-design-collapse-button
    .collapse-chevron-middle {
    animation: collapse-cascade var(--collapse-animation-speed) steps(1, end)
      infinite;

    animation-delay: calc(
      var(--collapse-animation-delay) + var(--collapse-animation-speed) / 3
    );
  }

  /* Top chevron */
  .architecture-slot:has(
      > .project-management-slot > #project-management-button:hover
    )
    > .parametric-design-slot.is-open
    > #parametric-design-collapse-button
    .collapse-chevron-top {
    animation: collapse-cascade var(--collapse-animation-speed) steps(1, end)
      infinite;

    animation-delay: calc(
      var(--collapse-animation-delay) + var(--collapse-animation-speed) / 3 * 2
    );
  }
}

/* ========================================
   COLLAPSE COUNTDOWN
   ======================================== */

@keyframes collapse-symbol-countdown {
  0% {
    color: rgb(0 0 0 / var(--nav-opacity-active));
    opacity: 1;
  }

  99% {
    color: rgb(0 0 0 / var(--nav-opacity-background));
    opacity: 1;
  }

  100% {
    color: rgb(0 0 0 / var(--nav-opacity-background));
    opacity: 0;
  }
}

/* ========================================
   COLLAPSE CASCADE
   ======================================== */

@keyframes collapse-cascade {
  0%,
  32% {
    opacity: 1;
  }

  33%,
  100% {
    opacity: 0;
  }
}