@import url(common.css);

html {
  scroll-behavior: smooth;
  scroll-padding-top: var(--header-h);
}

/* ========== hero ========== */

header {
  margin-top: calc(100vmin - var(--header-h));
}
.fixed-bg {
  position: sticky;
  z-index: -1;
  top: 0;
  margin-top: -100vh;
  height: 100vh;
  img {
    width: 100%;
    height: 100%;
    object-fit: cover;
  }
}
.hero {
  display: grid;
  place-items: start;
  overflow: hidden;
  height: 100vh;
  padding-top: calc(var(--header-h) + max(5vw, 50px));
  margin-top: calc(-100vh - var(--header-h));
  h1 {
    display: flex;
    flex-direction: column;
    align-items: start;
    gap: 10px;
    > span {
      overflow: hidden;
      translate: -100%;
      animation: appear 1s forwards;
      &:last-child,
      &:last-child span {
        animation-delay: 0.6s;
      }
      span {
        display: inline-block;
        font-size: max(4vw, 34px);
        font-weight: 600;
        background-color: var(--primary-c);
        background-color: var(--secondary-c);
        padding-inline: 0.4em;
        translate: 100%;
        animation: appear 1s forwards;
      }
    }
  }
  ~ section {
    background-color: #fff;
  }
}
@keyframes appear {
  to {
    translate: 0;
  }
}

.message {
  position: relative;
  margin-top: var(--header-h);
  padding-block: max(8vw, 60px);
  display: flex;
  align-items: end;
  justify-content: space-between;
  h2 {
    font-size: max(2.8vw, 1.2em);
    font-weight: 500;
    display: flex;
    align-items: start;
    flex-direction: column;
    gap: 0.2em;
    span {
      position: relative;
      &::before {
        position: absolute;
        inset: 0;
        content: attr(data-text);

        background-image: linear-gradient(
          135deg,
          var(--secondary-c),
          var(--thin-c)
        );
        background-size: 100% 100%;
        background-repeat: no-repeat;
        background-clip: text;
        background-position: right;
        -webkit-background-clip: text;
        color: transparent;
        transition: background-size 2s ease-in;
      }
      &.show::before {
        background-size: 0 100%;
      }
    }
  }
}

.link-btn {
  display: flex;
  flex-direction: column;
  width: 9em;
  gap: 0.4em;
  .en {
    color: var(--primary-c);
    text-transform: capitalize;
  }
  &:after {
    content: "";
    width: 60%;
    height: 8px;
    transform: skew(45deg);
    border-bottom: 1px solid;
    border-right: 1.5px solid;
    margin-top: 0.6em;
    transition: width 0.4s;
  }
  @media (any-hover: hover) {
    &:hover:after {
      width: 100%;
    }
  }
}

.recruit,
.environment {
  position: relative;
  padding-block: max(8vw, 60px);
  &::before {
    position: absolute;
    inset: 0 0 auto;
    height: 1px;
    content: "";
    background-color: #ddd;
  }
  .contents {
    display: flex;
    align-items: center;
    gap: max(5vw, 2em);
    img {
      width: 100%;
      aspect-ratio: 16/9;
      object-fit: cover;
    }
  }
  .body {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 2em;
    p {
      line-height: 1.8;
    }
  }
  h3 {
    font-size: max(2vw, 1.3em);
    line-height: 1.6;
  }
  .link-btn {
    align-self: end;
    width: 7em;
  }
}

.image-cover {
  width: 55%;
  margin-left: -5vw;
  position: relative;
  overflow: hidden;
  border-radius: 0 var(--r) var(--r) 0;
  &::before {
    inset: 0;
    content: "";
    position: absolute;
    background-color: #000;
    transform-origin: right;
    transition-property: background-color, scale;
    transition-duration: 1s;
  }
  &.show::before {
    scale: 0 1;
    background-color: var(--secondary-c);
  }
}

.about {
  position: relative;
  padding-block: max(8vw, 60px);
  &::before,
  &:after {
    position: absolute;
    inset: 0;
    content: "";
  }
  &::before {
    background: linear-gradient(120deg, var(--thin-c), var(--secondary-c));
    opacity: 0.7;
  }
  &::after {
    background-image: linear-gradient(120deg, transparent 44%, #fff 56%);
    background-size: 300% 100%;
    background-position: right;
    transition: background-position 4s;
  }
  &.show::after {
    background-position: left;
  }
  > * {
    position: relative;
    z-index: 3;
  }
  .common-title {
    color: var(--deep-c);
  }
  .body {
    width: min(100%, 600px);
    margin-inline: auto;
    p {
      line-height: 1.8;
    }
  }
  h3 {
    font-size: max(2vw, 1.3em);
    margin-bottom: 1em;
  }
  .link-btn {
    margin: 2em 0 0 auto;
    width: 7em;
    .en {
      color: var(--deep-c);
    }
  }
}

.interview {
  .cards {
    display: flex;
    gap: 5vw;
  }
  li {
    flex: 1;
    aspect-ratio: 7/8;
    position: relative;
    overflow: hidden;
    position: relative;
    &::before {
      position: absolute;
      inset: 0 0 auto;
      aspect-ratio: 1;
      content: "";
      border-radius: var(--r);
      background: linear-gradient(120deg, var(--thin-c), var(--secondary-c));
      mix-blend-mode: darken;
      opacity: 0;
      transition-property: opacity, aspect-ratio;
      transition-duration: 0.5s;
    }
    a {
      position: absolute;
      inset: 0;
      z-index: 5;
    }
    img {
      width: 100%;
      height: auto;
      aspect-ratio: 1;
      object-fit: cover;
      transition: aspect-ratio 0.4s;
      border-radius: var(--r);
    }
    @media (any-hover: hover) {
      &:hover {
        &::before {
          opacity: 1;
          aspect-ratio: 7/8;
        }
        img {
          aspect-ratio: 7/8;
        }
        .name {
          translate: 0;
          transition: translate 0.3s 0.2s;
          span {
            opacity: 1;
          }
        }
      }
    }
  }
  .name {
    position: absolute;
    inset: auto auto 0 0;
    padding: 1em 2em 0 0;
    background-color: #fff;
    line-height: 1.8;
    border-radius: 0 1em 0 0;
    display: flex;
    flex-direction: column;
    translate: 0 100%;
    transition: translate 0.2s;
    span {
      opacity: 0;
      transition: opacity 0.3s 0.4s;
    }
  }
}

.environment {
  .image-cover {
    order: 1;
    margin-inline: 0 -5vw;
    border-radius: var(--r) 0 0 var(--r);
  }
}

section.cta {
  background-color: transparent;
}

@media (width < 880px) {
  header {
    margin-top: 0;
  }
  .fixed-bg {
    margin-top: 0;
    position: fixed;
  }
  .hero {
    margin-top: calc(var(--header-h) * -1);
  }
  .message {
    margin: 0;
  }
}

@media (width < 768px) {
  .fixed-bg img {
    object-position: 40% center;
  }
  .hero {
    padding-top: calc(var(--header-h) + 1em);
    h1 {
      writing-mode: vertical-rl;
      gap: 1.6em;
      > span {
        translate: 0 -100%;
        animation-duration: 1.6s;
        &:last-child {
          margin-top: 22vh;
        }
        span {
          padding: 0.6em 0.3em 0.2em;
          font-size: 4vh;
          translate: 0 100%;
          animation-duration: 1.6s;
        }
      }
    }
  }

  .message {
    flex-direction: column;
    gap: 2em;
    align-items: stretch;
  }
  .link-btn {
    align-self: end;
    &::after {
      margin-top: 0.2em;
      width: 5em;
      align-self: end;
    }
  }
  .recruit,
  .environment {
    .contents {
      flex-direction: column;
    }
  }
  .image-cover {
    width: 95vw;
  }
  .about {
    &::after {
      transition-duration: 3s;
    }
  }
  .interview {
    .cards {
      flex-direction: column;
      width: min(100%, 400px);
      margin-inline: auto;
      li {
        aspect-ratio: 16/9;
        img {
          aspect-ratio: auto;
          height: 100%;
          object-position: top;
        }
        &:nth-child(odd) .name {
          inset: auto 0 0 auto;
          padding-inline: 1em 0;
          border-radius: 1em 0 0 0;
        }
        &:nth-child(3) img {
          scale: -1 1;
        }
      }
    }
    .name {
      opacity: 1;
      pointer-events: auto;
      translate: 0;
      padding: 0.6em 1em 0 0;
      span {
        opacity: 1;
      }
    }
  }
  .environment {
    .image-cover {
      order: 0;
    }
  }
}