@keyframes scale-up {
  to {
    width: 100%;
    transform: translateY(calc(50vh + var(--sp-160-40)));
    right: 0;
    bottom: 0;
  }
}
@keyframes fade-away {
  to {
    opacity: 0;
  }
}
@supports (animation-timeline: scroll()) {
  .hero {
    inner-wrapper {
      h1,h2,process-info p, process-info span {
        animation: fade-away linear forwards;
        animation-timeline: scroll(block root);
        animation-range: 0% 10%;
      }

      process-info {
        picture {
          animation: scale-up linear forwards;
          animation-timeline: scroll(block root);
          animation-range: 0% 10%;
        }
      }
    }
  }

  .process {
    inner-wrapper {
      will-change: padding-block-start;
      animation: increase-start-padding linear forwards;
      animation-timeline: scroll(block root);
      animation-range: 0% 10%;
    }
  }
}
.hero {
  container: hero / inline-size;
  position: relative;

  inner-wrapper {
    h2 {
      margin-block-start: var(--sp-16-8);
    }

    process-info {
      display: grid;
      grid-template-columns: 3fr 2fr 2fr 2fr 3fr;
      grid-template-areas:
        "description . instruction . .";
      align-items: end;
      margin-block-start: var(--sp-120-80);

      p {
        grid-area: description;
      }

      span {
        grid-area: instruction;
      }

      picture {
        position: absolute;
        bottom: var(--sp-160-40);
        right: var(--sp-30-16);
        width: 25%;
        will-change: width, transform;
      }
    }

    @container (inline-size < 43.75rem) {
      h1,h2,process-info p, process-info span, process-info picture {
        animation: none;
      }

      process-info {
        grid-template-columns: 1fr;
        grid-template-areas:
          "picture"
          "description";

        p {
          text-wrap: wrap;
        }

        span {
          display: none;
        }

        picture {
          grid-area: picture;
          position: static;
          width: 100%;
          margin-block: var(--sp-80);
        }
      }
    }
  }
}

@keyframes increase-start-padding {
  to {
    padding-block-start: calc(50vh + 2 * var(--sp-160-40));
  }
}
.process {
  container: process / inline-size;

  inner-wrapper {
    ol {
      counter-reset: counter;
      margin-block-start: var(--sp-120-80);
      display: flex;
      flex-direction: column;
      gap: var(--sp-160-80);
      
      >li {
        display: grid;
        grid-template-columns: 3fr 1fr 8fr;
        grid-template-areas: 
          "count . info"
          "activities . info";
        counter-increment: counter;

        &::before {
          grid-area: count;
          content: "(" counter(counter, decimal-leading-zero) ")";
          font-family: var(--ft-m);
          font-size: var(--fs-128-40);
          letter-spacing: calc(var(--neg-4) * var(--fs-128-40));
          line-height: var(--lh-100);
        }

        step-info {
          grid-area: info;

          img {
            margin-block-start: var(--sp-40);
          }
        }

        key-activities {
          grid-area: activities;
          align-self: end;

          h3 {
            margin-block-end: var(--sp-20);
          }

          ul {
            display: flex;
            flex-direction: column;

            li {
              display: grid;
              grid-template-columns: auto 1fr;
              padding-block: var(--sp-12);
              border-block-end: var(--border);

              &:nth-of-type(1) {
                border-block-start: var(--border);
              }

              &::before {
                content: "•";
                display: inline-block;
                margin-inline-end: var(--sp-12);
              }
            }
          }
        }
      }
    }

    @container (inline-size < 43.75rem) {
      animation: none;

      ol > li {
        grid-template-columns: 1fr;
        grid-template-areas:
          "count"
          "info"
          "activities";
        row-gap: var(--sp-40);
      }
    }
  }
}