@import url(lower.css);

.back-line {
  position: fixed;
  inset: 0;
  z-index: -1;
  &::before,
  &::after {
    content: "";
    position: absolute;
    background-color: var(--bg-c);
    height: 10vmin;
    width: 0;
    inset: auto auto 20% -10%;
    transform-origin: 20%;
    animation: line-grow 3s forwards;
  }
  &::before {
    rotate: 20deg;
  }
  &::after {
    background-color: var(--secondary-c);
    mix-blend-mode: darken;
    rotate: -45deg;
    opacity: 0.5;
    animation-delay: 1s;
  }
}
.hero {
  padding-bottom: 0;
}
.main {
  padding-block: 0 max(8vw, 60px);
  position: relative;
  &::before {
    position: absolute;
    inset: 0;
    content: "";
    background: linear-gradient(transparent 50vh, var(--bg-c) 80%) #fff;
    z-index: -2;
  }
  .head-img {
    width: max(40%, 360px);
    aspect-ratio: 1;
    object-fit: cover;
    object-position: 50% 16%;
    margin-left: auto;
    display: block;
    border-radius: 1em;
  }
  h2 {
    container-type: inline-size;
    color: #ccc;
    position: sticky;
    margin-top: -16vw;
    top: calc(var(--header-h) + 30px);
    mix-blend-mode: difference;
    display: flex;
    gap: 0.2em;
    flex-direction: column;
    align-items: start;
    transform-origin: left bottom;
    animation: scroll forwards;
    animation-range: 15vh 90vh;
    animation-timeline: scroll();
    span {
      font-weight: 600;
      font-size: 6.66cqi;
      position: relative;
      &::before {
        position: absolute;
        inset: 0;
        content: attr(data-text);
        filter: invert();
        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;
        animation: title-appear 1s 0.4s ease-in forwards;
      }
      &:last-child::before {
        animation-duration: 1.6s;
        animation-delay: 1s;
      }
    }
  }
}
@keyframes title-appear {
  to {
    background-size: 0 100%;
  }
}
.body {
  padding-top: max(5vw, 50px);
  width: 45%;
  margin-left: auto;
  font-size: max(1.3vw, 1em);
  p {
    line-height: 1.8;
    ~ p {
      margin-top: 2em;
    }
  }
  .name {
    display: flex;
    align-items: baseline;
    justify-content: end;
    gap: 1em;
    font-size: 1rem;
    margin-top: max(5vw, 50px);
    span {
      display: block;
      font-size: 1.7em;
      font-weight: 500;
    }
  }
}
@keyframes scroll {
  to {
    scale: 50%;
  }
}
@keyframes line-grow {
  to {
    width: 140%;
  }
}

@media (orientation: portrait) {
  .back-line {
    &::after {
      bottom: 10%;
      left: -20%;
    }
  }
  @keyframes line-grow {
    to {
      width: 200%;
    }
  }
}

@media (width < 768px) {
  .main {
    padding-top: 50px;
    .head-img {
      width: max(60%, 260px);
    }
    h2 {
      animation: none;
      position: static;
    }
  }
  .body {
    width: 100%;
  }
}