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

      >picture {
        animation: about-scale-up 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);
    }
    
    >picture {
      position: absolute;
      transform: translateY(-200%);
      bottom: var(--sp-160-40);
      right: var(--sp-30-16);
      width: var(--sp-330);
      will-change: width, transform;
    }

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

      p {
        grid-area: text;
      }

      span {
        grid-area: instruction;
      }

      value-list {
        grid-area: list;

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

        ol {
          counter-reset: counter;

          li {
            padding-block: var(--sp-12);
            border-block-end: var(--border);

            &::before {
              counter-increment: counter;
              content: "(" counter(counter, decimal-leading-zero) ")";
              display: inline-block;
              margin-inline-end: var(--sp-20);
            }
          }
        }
      }
    }

    @container (inline-size < 53.125rem) {
      h1,h2,about-info, >picture {
        animation: none;
      }

      >picture {
        position: static;
        transform: none;
        width: 100%;
        margin-block-start: var(--sp-80);
      }

      about-info {
        grid-template-columns: 1fr;
        grid-template-areas:
          "text"
          "list";
        row-gap: var(--sp-80);

        span {
          display: none;
        }
      }
    }
  }
}

@keyframes padding-block-start-increase {
  to {
    padding-block-start: calc(50vh + 2 * var(--sp-160-40))
  }
}
@supports (animation-timeline: scroll()) {
  .our-mission {
    inner-wrapper {
      animation: padding-block-start-increase linear forwards;
      animation-timeline: scroll(block root);
      animation-range: 0% 10%;
    }
  }
}
.our-mission {
  container: mission / inline-size;

  inner-wrapper {
    display: grid;
    grid-template-columns: 1fr 2fr;
    grid-template-areas:
      ". hgroup1"
      "img img"
      ". hgroup2";
    will-change: padding-block-start;

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

    img-wrapper {
      grid-area: img;
      width: 75%;
      padding-block: var(--sp-120-40);

      display: grid;
      grid-template-columns: 1fr 2fr;
      width: 100%;

      picture {
        &:nth-of-type(1) {
          width: 75%;
        }
      }
    }

    hgroup {
      &:nth-of-type(1) {
        grid-area: hgroup1;
      }
      &:nth-of-type(2) {
        grid-area: hgroup2;
      }
    }

    mission-content {
      grid-area: content;
    }

    @container (inline-size < 56.25rem) {
      grid-template-columns: 1fr;
      grid-template-areas:
        "hgroup1"
        "img"
        "hgroup2";
      
      img-wrapper {
        grid-template-columns: 1fr;
        row-gap: var(--sp-120-40);

        picture:nth-of-type(1) {
          width: 100%;
        }
      }
    }
  }
}

.our-team {
  container: team / inline-size;

  inner-wrapper {
    display: grid;
    grid-template-columns: 1fr 2fr;
    grid-template-areas:
      "hgroup hgroup"
      ". img-grid"
      ". picture";
    
    hgroup {
      grid-area: hgroup;
    }

    img-grid {
      grid-area: img-grid;
      display: grid;
      grid-template-columns: 3fr 5fr;
      grid-template-areas:
        "picture list";
      column-gap: var(--sp-20);
      margin-block-start: var(--sp-120-40);
      
      >picture {
        grid-area: picture;
        visibility: hidden;
        opacity: 0;
        height: 0;
        overflow: clip;
        transition: 
          height 0.3s ease-in-out,
          opacity 0.3s ease-in-out,
          visibility 0.3s ease-in-out allow-discrete;
        transform-origin: bottom;

        img {
          max-height: var(--sp-413);
          object-fit: cover;
        }
      }

      &:has(ol li:nth-of-type(1):hover) >picture:nth-of-type(1),
      &:has(ol li:nth-of-type(2):hover) >picture:nth-of-type(2),
      &:has(ol li:nth-of-type(3):hover) >picture:nth-of-type(3),
      &:has(ol li:nth-of-type(4):hover) >picture:nth-of-type(4),
      &:has(ol li:nth-of-type(5):hover) >picture:nth-of-type(5),
      &:has(ol li:nth-of-type(6):hover) >picture:nth-of-type(6),
      &:has(ol li:nth-of-type(7):hover) >picture:nth-of-type(7),
      &:has(ol li:nth-of-type(8):hover) >picture:nth-of-type(8),
      &:has(ol li:nth-of-type(9):hover) >picture:nth-of-type(9),
      &:has(ol li:nth-of-type(10):hover) >picture:nth-of-type(10) {
        visibility: visible;
        opacity: 1;
        height: auto;
      }

      ol {
        grid-area: list;

        li {
          grid-template-columns: auto 2fr 3fr;

          picture {
            display: none;
          }

          span {
            &:nth-of-type(1) {
              margin-inline-end: var(--sp-59);
            }
          }
        }
      }
    }

    >picture {
      grid-area: picture;
      margin-block-start: var(--sp-120-40);
    }

    @container (inline-size < 56.25rem) {
      grid-template-columns: 1fr;
      grid-template-areas:
        "hgroup"
        "img-grid"
        "picture";
    }

    @container (inline-size < 43.75rem) {
      --scroll-button-width: 2.375rem;

      img-grid {
        grid-template-columns: 1fr;
        grid-template-areas:
          "list";

        >picture {
          display: none
        }

        ol {
          display: flex;
          flex-direction: row;
          overflow-x: scroll;
          scroll-snap-type: x mandatory;
          scroll-behavior: smooth;
          gap: var(--sp-12);

          /* anchor positioning */
          anchor-name: --team-carousel;

          &::scroll-button(left) {
            content: url('/assets/monolume/svg/left-arrow.svg');

            /* anchor positioning */
            left: anchor(left);
            bottom: calc(anchor(bottom) - var(--scroll-button-width) - var(--sp-12));
          }

          &::scroll-button(right) {
            content: url('/assets/monolume/svg/right-arrow.svg');

            /* anchor positioning */
            right: anchor(right);
            bottom: calc(anchor(bottom) - var(--scroll-button-width) - var(--sp-12));
          }

          &::scroll-button(*) {
            /* anchor positioning */
            position: absolute;
            position-anchor: --team-carousel;

            border: var(--border);
            border-radius: 100%;
            background-color: transparent;
            aspect-ratio: 1 / 1;
            color: var(--black);
            cursor: pointer;
          }

          &::scroll-button(*):active {
            translate: var(--sp-1) var(--sp-1);
            background-color: var(--white-shade-8);
          }

          /* scroll marker */
          scroll-marker-group: after;

          &::scroll-marker-group {
            /* anchor positioning */
            position: absolute;
            position-anchor: --team-carousel;

            bottom: calc(anchor(bottom) - var(--scroll-button-width));
            justify-self: anchor-center;

            display: flex;
            justify-content: center;
            gap: var(--sp-20);
          }

          li {
            display: flex;
            flex-direction: column;
            scroll-snap-align: center;
            flex: 0 0 100%;

            /* scroll marker */
            &::scroll-marker {
              content: "";
              width: var(--sp-12);
              height: var(--sp-12);
              background-color: transparent;
              border: var(--border);
              border-radius: 50%;
              transition: var(--transition-all);
            }

            &::scroll-marker:target-current {
              background-color: var(--black);
            }

            picture {
              display: block;
            }

            span {
              &:nth-of-type(1) {
                margin-block-start: var(--sp-12);
              }
            }
          }
        }
      }

      >picture {
        margin-block-start: calc(var(--sp-120-40) + var(--scroll-button-width));
      }
    }

    @container (inline-size < 28.75rem) {
      img-grid ol {
        &::scroll-button(left) {
          content: url('/assets/monolume/svg/left-arrow.svg');

          /* anchor positioning */
          left: unset;
          right: calc(anchor(right) + var(--scroll-button-width) + var(--sp-12));
          bottom: calc(anchor(bottom) - var(--scroll-button-width) - var(--sp-12) - var(--sp-40));
        }

        &::scroll-button(right) {
          content: url('/assets/monolume/svg/right-arrow.svg');

          /* anchor positioning */
          right: anchor(right);
          bottom: calc(anchor(bottom) - var(--scroll-button-width) - var(--sp-12) - var(--sp-40));
        }

        &::scroll-marker-group {
          width: 90%;
          gap: var(--sp-12);
        }
      }
    }
  }
}

.awards {
  container: awards / inline-size;

  inner-wrapper {
    display: grid;
    grid-template-columns: 1fr 2fr;

    @container (inline-size < 28.75rem) {
      padding-block-start: calc(var(--sp-160-40) + var(--sp-80));
    }

    table {
      border-collapse: collapse;
      
      td {
        place-content: start;
      }

      thead {
        text-align: left;

        tr {
          border-block-end: var(--border);
        }

        th {
          padding-inline-end: var(--sp-50);
          padding-block-end: var(--sp-20);
        }
      }

      tbody {
        td {
          padding-block: var(--sp-20);
          border-block-end: var(--border);
          padding-inline-end: var(--sp-50);

          span {
            display: none;
          }
        }
      }
    }

    @container (inline-size < 56.25rem) {
      grid-template-columns: 1fr;
    }

    @container (inline-size < 37.5rem) {
      table {
        thead {
          th {
            padding-inline-end: var(--sp-20);

            &:not(:first-of-type) {
              display: none;
            }
          }
        }
        tbody {
          td {
            padding-inline-end: var(--sp-20);
            
            span {
              display: block;
              margin-block-start: var(--sp-4);
            }

            &:nth-of-type(3) {
              display: none;
            }
          }
        }
      }
    }
  }
}