/* main header */
:root {
  --menu-button-width: 102.83px;
  --menu-shift-vertical: calc(100% + var(--sp-16));
  --contact-button-horizontal-transition: calc(var(--menu-button-width) + var(--sp-8));
  --header-height: var(--sp-81);

  @media only screen and (width < 56.25rem) {
    --header-height: var(--sp-80);
  }
}

@keyframes header-item-shift-up {
  from {
    transform: translateY(0);
  }

  to {
    transform: translateY(-200px);
  }
}

@keyframes header-button-shift-down {
  from {
    transform: translateY(calc(-1 * var(--menu-shift-vertical)));
  }

  to {
    transform: translateY(0);
  }
}

@keyframes header-contact-shift-left {
  from {
    transform: translateX(var(--contact-button-horizontal-transition));
  }

  to {
    transform: translateX(0);
  }
}
@supports (animation-timeline: scroll()) {
  .main-header {
    inner-wrapper {
      >a,
      nav {
        animation: header-item-shift-up linear forwards;
      }

      utility-group {
        a {
          animation: header-contact-shift-left linear forwards;
        }

        button {
          animation: header-button-shift-down linear forwards;
        }
      }

      >a,
      nav,
      utility-group a,
      utility-group button {
        animation-timeline: scroll(block root);
        animation-range: 0px 100px;
      }
    }
  }
}

.main-header {
  container: main-header / inline-size;
  /* position: fixed; */
  position: sticky;
  width: 100%;
  top: 0;
  z-index: 1;

  inner-wrapper {
    display: grid;
    grid-template-columns: auto 1fr auto;
    align-items: center;
    padding: var(--sp-16) var(--sp-30-16);

    nav {
      place-content: center;

      ul {
        display: flex;
        flex-direction: row;
        column-gap: var(--sp-20);
        justify-content: center;

        a {
          text-decoration: none;
          color: var(--black);
        }
      }
    }

    utility-group {
      display: flex;
      flex-direction: row;
      column-gap: var(--sp-8);

      a {
        transform: translateX(var(--contact-button-horizontal-transition));
      }

      button {
        display: grid;
        grid-template-columns: 1fr auto;
        align-items: center;
        column-gap: var(--sp-11);
        padding: var(--sp-17) var(--sp-20);
        transform: translateY(calc(-1 * var(--menu-shift-vertical)));
        color: inherit;

        background-color: var(--white-shade-8);
        border: none;
        border-radius: var(--sp-99);

        dec-bar {
          display: flex;
          flex-direction: column;
          row-gap: var(--sp-4);

          span {
            display: block;
            width: var(--sp-11);
            height: var(--sp-1);
            background-color: var(--black);
            transition: var(--transition-all);
          }
        }

        @media (hover: hover) {
          &:hover {
            dec-bar span {
              &:nth-of-type(1) {
                width: var(--sp-16);
              }

              &:nth-of-type(2) {
                width: var(--sp-8);
              }
            }
          }
        }
      }
    }

    @container (inline-size < 43.75rem) {
      display: flex;
      flex-direction: row;
      justify-content: space-between;
      padding: var(--sp-16);

      /* remove animations */
      >a,
      nav {
        animation: none;
      }

      utility-group {
        a {
          animation: none;
        }

        button {
          animation: none;
        }
      }

      >a,
      nav,
      utility-group a,
      utility-group button {
        animation-timeline: none;
        animation-range: normal;
      }

      /* end remove animations */

      nav,
      utility-group a {
        display: none;
      }

      utility-group button {
        display: block;
        transform: translateY(0);

        dec-bar {
          display: none;
        }
      }
    }
  }
}

:root {
  --project-header-height: var(--sp-40);
  --project-menu-button-width: var(--sp-41);
}

@keyframes project-header-contact-shift-left {
  from {
    transform: translateX(calc(var(--sp-12) + var(--project-menu-button-width)));
  }

  to {
    transform: translateX(0);
  }
}

/* dialog popup menu */
dialog.desktop-menu {
  container: dialog / inline-size;
  max-width: 100%;
  max-height: 100%;
  position: fixed;
  width: 100%;
  height: 100dvh;
  z-index: 2;
  background-color: var(--black);
  border: none;
  transition:
    display 0.3s ease-in-out allow-discrete,
    clip-path 0.3s ease-in-out;
  clip-path: inset(0 0 0 100%);

  &::backdrop {
    display: none;
  }

  inner-wrapper {
    display: grid;
    grid-template-columns: 4fr 3fr 5fr;
    grid-template-areas: "header . footer";
    padding: var(--sp-20-16) var(--sp-30-16);
    height: 100%;
    color: var(--white);

    .mo-show {
      display: none;
    }

    header {
      grid-area: header;
      display: flex;
      flex-direction: column;
      justify-content: space-between;

      a {
        text-decoration: none;
        color: var(--white);
      }

      nav {
        ul {
          display: flex;
          flex-direction: column;
          row-gap: var(--sp-12);
        }
      }
    }

    footer {
      grid-area: footer;
      display: grid;
      grid-template-columns: auto auto;
      grid-template-areas:
        ". button"
        "svg svg"
        "contact contact"
        "legal social";

      >button {
        grid-area: button;
        justify-self: end;
        border: none;
        height: fit-content;
        color: var(--white);
        background: none;
      }

      >svg {
        grid-area: svg;
      }

      contact-info {
        grid-area: contact;
      }

      legal-info {
        grid-area: legal;
      }

      social-info {
        grid-area: social;
      }

      a {
        text-decoration: none;
        color: var(--white);
      }

      address {
        span {
          display: block;

          &:not(:first-of-type) {
            margin-block-start: var(--sp-8);
          }
        }
      }
    }

    @container (inline-size < 40.625rem) {
      grid-template-columns: 3fr 1fr;
      grid-template-rows: 1fr auto;
      grid-template-areas:
        "header footer"
        "svg svg";

      header {
        justify-content: start;
        min-height: var(--sp-378);

        >a {
          &:nth-of-type(1) {
            margin-block-end: var(--sp-60);
          }

          &:nth-of-type(2) {
            margin-block-start: var(--sp-12);
          }
        }
      }

      footer {
        grid-template-columns: 1fr;
        grid-template-areas:
          "button"
          "svg"
          "contact"
          "legal"
          "social";

        svg,
        contact-info,
        legal-info,
        social-info {
          display: none;
        }
      }

      .mo-show {
        grid-area: svg;
        display: block;
        margin-inline: auto;
      }
    }
  }

  &[open] {
    clip-path: inset(0 0 0 0);

    @starting-style {
      clip-path: inset(0 0 0 100%);
    }
  }
}