/* ============================================================
   SoftwareDevCo — Fixed Top Navigation
   ============================================================ */


/* ============================================================
   NAVIGATION CONTAINER
   ============================================================ */

.top-nav {
  position: fixed;

  top: 0;
  left: 0;

  z-index: 40;

  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;

  width: 100%;
  height: 82px;

  padding: 0 54px;

  pointer-events: none;
}


/* Navigation becomes interactive after the loader finishes */

body.is-ready .top-nav {
  pointer-events: auto;
}


/* ============================================================
   LEFT AND RIGHT NAVIGATION GROUPS
   ============================================================ */

.nav-left,
.nav-right {
  display: flex;
  align-items: center;

  gap: 56px;

  opacity: 0;

  transform:
    translateY(-10px);

  transition:
    opacity 0.8s ease 0.08s,
    transform 0.8s cubic-bezier(0.2, 0.7, 0.2, 1) 0.08s;
}


.nav-right {
  justify-content: flex-end;
}


body.is-ready .nav-left,
body.is-ready .nav-right {
  opacity: 1;

  transform:
    translateY(0);
}


/* ============================================================
   NAVIGATION LINKS
   ============================================================ */

.top-nav a {
  position: relative;

  color: #ffffff;

  font-size: 11px;
  font-weight: 700;
  letter-spacing: 1.7px;
  line-height: 1;

  text-decoration: none;
  text-transform: uppercase;

  transition:
    opacity 0.3s ease;
}


.top-nav a:hover {
  opacity: 0.7;
}


/* ============================================================
   LINK UNDERLINE
   ============================================================ */

.nav-left a::after,
.nav-right a:not(.start-project)::after {
  content: "";

  position: absolute;

  left: 0;
  bottom: -6px;

  width: 100%;
  height: 1px;

  background:
    rgba(255, 255, 255, 0.7);

  transform:
    scaleX(0);

  transform-origin:
    right;

  transition:
    transform
    0.35s
    cubic-bezier(0.2, 0.7, 0.2, 1);
}


.nav-left a:hover::after,
.nav-right a:not(.start-project):hover::after {
  transform:
    scaleX(1);

  transform-origin:
    left;
}


/* ============================================================
   CENTRE LOGO
   ============================================================ */

.center-logo {
  display: grid;
  place-items: center;

  opacity: 0;
  visibility: hidden;

  pointer-events: none;
}


.center-logo.has-arrived {
  opacity: 1;
  visibility: visible;

  pointer-events: auto;
}


.center-logo img {
  display: block;

  width: 58px;
  height: auto;
}


/* ============================================================
   START PROJECT LINK
   ============================================================ */

.start-project {
  display: flex;
  align-items: center;

  gap: 12px;
}


.start-project .arrow-icon {
  transition:
    transform
    0.3s
    cubic-bezier(0.2, 0.7, 0.2, 1);
}


.start-project:hover .arrow-icon {
  transform:
    translate(4px, -4px);
}


/* ============================================================
   SVG ARROW ICON
   ============================================================ */

.arrow-icon {
  display: block;

  flex: 0 0 auto;

  width: 18px;
  height: 18px;

  fill: none;
  stroke: currentColor;

  stroke-width: 1.6;
  stroke-linecap: round;
  stroke-linejoin: round;
}


/* ============================================================
   MOBILE MENU DEFAULT STATE
   ============================================================ */

.mobile-menu-toggle,
.mobile-menu {
  display: none;
}


/* ============================================================
   MOBILE MENU BUTTON
   ============================================================ */

.mobile-menu-toggle {
  border: 0;

  font: inherit;

  -webkit-tap-highlight-color:
    transparent;
}


/* ============================================================
   MOBILE MENU
   ============================================================ */

.mobile-menu {
  color: #ffffff;
}


.mobile-menu a {
  -webkit-tap-highlight-color:
    transparent;
}


/* ============================================================
   REDUCED MOTION
   ============================================================ */

@media (prefers-reduced-motion: reduce) {

  .nav-left,
  .nav-right {
    transform: none;

    transition:
      opacity
      0.3s
      ease;
  }


  .start-project .arrow-icon {
    transition: none;
  }
}