.site-header {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  z-index: 240;
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 34px 42px;
  opacity: 0;
  pointer-events: none;
  transform: translateY(-12px);
  transition:
    opacity 700ms var(--ease-cinema),
    transform 700ms var(--ease-cinema);
}

body.is-work-open .site-header,
body.is-project-open .site-header,
body.is-info-open .site-header {
  opacity: 1;
  pointer-events: auto;
  transform: translateY(0);
}

.header-logo {
  font-size: 13px;
  font-weight: 800;
  letter-spacing: var(--tracking-medium);
  text-transform: uppercase;
  filter: blur(0.15px);
  color: rgba(255,255,255,0.92);
}

.header-nav {
  display: flex;
  gap: 34px;
}

.header-link {
  font-size: 10px;
  font-weight: 800;
  letter-spacing: var(--tracking-medium);
  text-transform: uppercase;
  opacity: 0.84;
  filter: blur(0.12px);
  color: rgba(255,255,255,0.9);
  transition: opacity 300ms ease, transform 300ms ease;
}

.header-link:hover {
  opacity: 1;
  transform: translateY(-1px);
}

@media (max-width: 760px) {
  .site-header {
    padding: 24px 22px;
  }

  .header-logo {
    font-size: 10px;
    letter-spacing: 0.22em;
  }

  .header-nav {
    gap: 16px;
  }

  .header-link {
    font-size: 9px;
    letter-spacing: 0.2em;
  }
}