/* --------------------------------------- */
/* ------------- Navigation -------------- */
/* --------------------------------------- */

body[data-page="intro-1"] nav {
  block-size: 0;
  inline-size: 100%;
  min-inline-size: 0;
  z-index: 3000;
  pointer-events: all;
}

body[data-page="intro-1"] .nav-links {
  display: flex;
  flex-direction: column;
  justify-content: safe center;
  align-items: center;
  position: fixed;
  inset: 0;
  inline-size: 100%;
  block-size: 100svh;
  overflow-y: auto;
  margin: 0;
  padding: 0;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  z-index: 4000;
  gap: var(--space-s);
  transition:
    opacity 0.52s cubic-bezier(0.22, 1, 0.36, 1),
    visibility 0s linear 0.52s;
}

body[data-page="intro-1"] .nav-links.open {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
  transition-delay: 0s;
}

body[data-page="intro-1"] .nav-links.closing {
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
}

body[data-page="intro-1"] .nav-item {
  list-style: none;
  display: flex;
  align-items: center;
  flex: 0 0 auto;
  inline-size: min(100vw, 8rem);
  position: relative;
  pointer-events: all;
}

body[data-page="intro-1"] .nav-item a,
body[data-page="intro-1"] .nav-item .nav-close {
  font-family: var(--primary-font-secondary);
  display: flex;
  flex: 0 0 100%;
  inline-size: 100%;
  min-inline-size: 0;
  gap: var(--space-2xs);
  justify-content: space-between;
  align-items: center;
  transition: none;
}

body[data-page="intro-1"] .nav-item a {
  padding-block-end: var(--space-2xs);
  text-decoration: none;
}

body[data-page="intro-1"] .nav-item .nav-close {
  justify-content: center;
  text-align: center;
  margin: 0;
  padding: 0;
  padding-block-end: var(--space-2xs);
  border: 0;
  color: inherit;
  background-color: transparent;
  font-size: var(--fs-0);
}

body[data-page="intro-1"] .nav-item a span {
  font-size: var(--fs-0);
  margin-inline: auto;
}

body[data-page="intro-1"] .nav-item svg {
  height: var(--space-m);
  width: var(--space-m);
  object-fit: cover;
  border-radius: 50%;
  fill: var(--text-color);
}

@media (min-width: 48rem) {
  body[data-page="intro-1"] .site-header {
    grid-template-columns: auto minmax(0, 1fr);
  }

  body[data-page="intro-1"] nav {
    block-size: auto;
    grid-column: 2;
  }

  body[data-page="intro-1"] .nav-links {
    position: static;
    inset: auto;
    block-size: auto;
    overflow: visible;
    flex-flow: row nowrap;
    gap: var(--space-4xs-3xs);
    padding-block: var(--space-xs);
  }

  body[data-page="intro-1"] .nav-item {
    flex: 1 1 auto;
    inline-size: auto;
    min-inline-size: max-content;
  }

  body[data-page="intro-1"] .nav-item a,
  body[data-page="intro-1"] .nav-item .nav-close {
    white-space: nowrap;
    background-image:
      linear-gradient(90deg, var(--text-span) 2px, transparent 2px),
      linear-gradient(var(--text-span) 2px, transparent 2px);
    background-repeat: no-repeat;
    background-size: 0% 2px;
    background-position: center calc(100% - 0.05em);
    transition: background-size 0.3s ease;
  }

  body[data-page="intro-1"] .nav-item a:hover,
  body[data-page="intro-1"] .nav-item a:focus-visible,
  body[data-page="intro-1"] .nav-item a.is-current,
  body[data-page="intro-1"] .nav-item .nav-close:hover,
  body[data-page="intro-1"] .nav-item .nav-close:focus-visible {
    background-size: 100% 2px;
  }

  body[data-page="intro-1"] .nav-item svg {
    flex-shrink: 0;
    height: var(--space-s-m);
    width: var(--space-s-m);
  }
}

@media (min-width: 48rem) and (max-width: 89.999rem) {
  body[data-page="intro-1"] .site-header {
    column-gap: 0.5rem;
    padding-inline: 0.75rem;
  }

  body[data-page="intro-1"] .header-inner {
    gap: 0.375rem;
    font-size: clamp(0.75rem, 1.1vw, 1rem);
  }

  body[data-page="intro-1"] .header-title,
  body[data-page="intro-1"] .header-title span {
    margin-inline-end: 0.25rem;
  }

  body[data-page="intro-1"] .logo img {
    width: clamp(1.5rem, 2.5vw, 2.5rem);
    height: clamp(1.5rem, 2.5vw, 2.5rem);
  }

  body[data-page="intro-1"] .nav-links {
    gap: clamp(0.125rem, 0.3vw, 0.25rem);
  }

  body[data-page="intro-1"] .nav-item a,
  body[data-page="intro-1"] .nav-item .nav-close {
    min-block-size: 1.5rem;
    gap: clamp(0.125rem, 0.3vw, 0.25rem);
    padding-block-end: 0.25rem;
  }

  body[data-page="intro-1"] .nav-item a span,
  body[data-page="intro-1"] .nav-item .nav-close {
    font-size: clamp(0.78125rem, 1.6vw, 1.125rem);
  }

  body[data-page="intro-1"] .nav-item svg {
    width: clamp(1rem, 2.1vw, 1.5rem);
    height: clamp(1rem, 2.1vw, 1.5rem);
  }
}

@media (prefers-reduced-motion: reduce) {
  body[data-page="intro-1"] .nav-links,
  body[data-page="intro-1"] .nav-item a,
  body[data-page="intro-1"] .nav-item .nav-close {
    transition: none;
  }
}