@charset "UTF-8";

/* =====================
  header
===================== */
@layer style {
  /* ==== header ==== */
  .header {
    position: sticky;
    inset: 0 auto;
    z-index: 22;
    display: block grid;
    grid-template-columns: 1fr auto;
    gap: 16px;
    align-items: center;
    padding-block: 32px;
    padding-inline: 40px 102px;
    margin-inline: auto;
    pointer-events: none;

    @media (width <= 768px) {
      padding-block: 6.7vw;
      padding-inline: calc((100 / 390) * 16 * 1vw);
    }

    & > * {
      pointer-events: auto;
    }

    /* ==== logo ==== */
    .logo {
      display: block flex;
      gap: 16px;
      align-items: center;
      inline-size: fit-content;
      font-size: 20px;

      @media (width <= 768px) {
        gap: 2.9vw;
        font-size: calc((100 / 390) * 18 * 1vw);
      }

      & img {
        filter: brightness(0) saturate(100%) invert(21%) sepia(0%) saturate(0%) hue-rotate(0deg) brightness(100%) contrast(100%);

        @media (width <= 768px) {
          inline-size: calc((100 / 390) * 83 * 1vw);
          block-size: calc((100 / 390) * 44 * 1vw);
        }
      }
    }

    /* ==== entry ==== */
    .entry {
      position: fixed;
      inset-block-start: 32px;
      inset-inline-end: 102px;
      display: block grid;
      place-content: center;
      align-self: flex-start;
      padding-block: 7.4px;
      padding-inline: 28px 27px;
      font-size: 16px;
      font-weight: 700;
      background: white;
      border: 1px solid currentcolor;
      border-radius: calc(infinity * 1px);
      transition: all 250ms ease 0s;

      @media (any-hover: hover) {
        &:hover {
          color: white;
          background: var(--color-text-primary);
          border: 1px solid var(--color-text-primary);
        }
      }

      @media (width <= 768px) {
        display: none;
      }
    }

    /* ==== nav ==== */
    .nav {
      position: fixed;
      inset-block-start: 95px;
      inset-inline-end: 110px;
      display: block grid;
      gap: 0;
      font-size: 15px;
      font-weight: 700;
      text-align: right;
      transition: all 400ms var(--slideInBezier) 0s;

      --active-anchor: --top;

      &::before {
        position: absolute;
        inset-block-end: calc(anchor(bottom) + 4px);
        inset-inline-start: anchor(left);
        z-index: 1;
        inline-size: anchor-size(width);
        block-size: 2px;
        position-anchor: var(--active-anchor);
        pointer-events: none;
        content: '';
        background: currentcolor;
        border-radius: calc(infinity * 1px);
        opacity: 0;
        transition: all 400ms var(--slideInBezier) 0s;
      }

      a {
        position: relative;
        display: block flow;
        inline-size: fit-content;
        padding-block: 7.5px;
        margin-inline: auto 0;
        transition: inherit;

        @media (any-hover: hover) {
          &:hover {
            opacity: 0.7;
          }
        }
      }

      @media (width <= 768px) {
        display: none;
      }
    }
  }

  /* =====================
    Group
  ===================== */
  [data-group='second'] .header .nav {
    display: none;
  }

  /* =====================
    scrolled
  ===================== */
  body.scrolled .header .nav {
    pointer-events: none;
    opacity: 0;
    translate: 0 -10px;
  }

  /* =====================
    header active
  ===================== */
  .header .nav:has([data-id='about']:hover) {
    --active-anchor: --about;

    &::before {
      opacity: 0.4;
    }
  }

  .header .nav:has([data-id='brand']:hover) {
    --active-anchor: --brand;

    &::before {
      opacity: 0.4;
    }
  }

  .header .nav:has([data-id='career']:hover) {
    --active-anchor: --career;

    &::before {
      opacity: 0.4;
    }
  }

  .header .nav:has([data-id='job']:hover) {
    --active-anchor: --job;

    &::before {
      opacity: 0.4;
    }
  }

  .header .nav:has([data-id='interview']:hover) {
    --active-anchor: --interview;

    &::before {
      opacity: 0.4;
    }
  }

  .header .nav:has([data-id='numbers']:hover) {
    --active-anchor: --numbers;

    &::before {
      opacity: 0.4;
    }
  }

  .header .nav:has([data-id='movie']:hover) {
    --active-anchor: --movie;

    &::before {
      opacity: 0.4;
    }
  }
}