:root {
  --studio-carousel-perspective: var(--sp-447);
}
@keyframes adjust-z-index {
  0% {
    z-index: 1;
  }
  50% {
    z-index: 4;
  }
  100% {
    z-index: 1;
  }
}
@keyframes rotate-cover {
  0% {
    transform: translateX(-100%) translateZ(calc(-1 * var(--studio-carousel-perspective))) scale(0.5);
  }
  35% {
    transform: translateX(0) translateZ(calc(-1 * var(--studio-carousel-perspective) / 2)) scale(0.7);
  }
  50% {
    transform: rotateY(0deg) translateZ(var(--studio-carousel-perspective)) scale(1);
  }
  65% {
    transform: translateX(0) translateZ(calc(-1 * var(--studio-carousel-perspective) / 2)) scale(0.7);
  }
  100% {
    transform: translateX(100%) translateZ(calc(-1 * var(--studio-carousel-perspective))) scale(0.5);
  }
}
@property --_progress {
  syntax: "<percentage>";
  inherits: false;
  initial-value: 0%;
}
@keyframes progress-bar {
  to {
    --_progress: 100%;
  }
}
.hero {
  container: studio / inline-size;

  h1 {
    max-width: min(var(--sp-1030), 100%);
  }

  p {
    margin-block: var(--sp-120-40);
    color: var(--font);
  }

  ol {
    perspective: var(--studio-carousel-perspective);
    text-wrap: nowrap;
    overflow: scroll clip;
    scroll-snap-type: x mandatory;
    scroll-behavior: smooth;
    padding-block: var(--sp-20);

    anchor-name: --studio-carousel;

    /* hide windows edge scroll bar arrow */
    -ms-overflow-style: none;

    /* scroll buttons */
    &::scroll-button(*) {
      opacity: 0.8;
      cursor: pointer;
      position: absolute;
      display: block;
      width: var(--navigation-icon-size);
      height: var(--navigation-icon-size);
      border: var(--sp-2) solid var(--bg-shade-9);
      border-radius: 100%;
      visibility: hidden;
      opacity: 0;
      transition: 
        opacity var(--animation-time) var(--animation-timing-function),
        visibility var(--animation-time) var(--animation-timing-function);
      z-index: 1;
      position-anchor: --studio-carousel;
    }

    @media (hover: hover) {
      &:hover {
        &::scroll-button(*) {
          visibility: visible;
          opacity: 1;
        }
      }
    }

    &::scroll-button(*):active {
      translate: var(--sp-1) var(--sp-1);
    }

    &::scroll-button(*):disabled {
      opacity: 0.2;
      cursor: not-allowed;
    }
    
    &::scroll-button(*):disabled:active {
      translate: none;
    }

    --navigation-icon-size: var(--sp-32);

    &::scroll-button(left) {
      content: "";
      background: 
        url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" fill="none" viewBox="0 0 20 20"><path stroke="%23544F45" stroke-linecap="round" stroke-linejoin="round" d="M15.833 10H4.167m0 0L7.5 6.667M4.167 10 7.5 13.333"/></svg>') no-repeat,
        var(--bg-shade-9);
      background-size: cover;
      left: calc(anchor(left));
      top: calc(anchor(center) - var(--navigation-icon-size) / 2);
    }

    &::scroll-button(right) {
      content: "";
      background: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 20 20" fill="none"><path stroke="%23544F45" stroke-linecap="round" stroke-linejoin="round" d="M4.167 10h11.666m0 0L12.5 13.333M15.833 10 12.5 6.667"/></svg>') no-repeat,
      var(--bg-shade-9);
      background-size: cover;
      right: anchor(right);
      top: calc(anchor(center) - var(--navigation-icon-size) / 2);
    }

    li {
      scroll-snap-align: center;
      scroll-snap-stop: always;
      position: relative;
      display: inline-block;
      will-change: z-index, transform;
      animation: adjust-z-index linear both;
      view-timeline: --studio-carousel inline;
      animation-timeline: --studio-carousel;

      img {
        animation: rotate-cover linear both;
        animation-timeline: --studio-carousel;
      }
    }

    li:first-of-type {
      margin-inline-start: 50%;
    }
    li:last-of-type {
      margin-inline-end: 50%;
    }
  }

  @container (inline-size < 65.625rem) {
    at-inner {
      display: flex;
      flex-direction: column;
      align-items: center;
      padding-inline: 0;
    }

    h1 {
      padding-inline: var(--sp-30-16);
    }

    boxed-wrapper {
      margin-inline: var(--sp-30-16);
    }

    ol {
      display: flex;
      flex-direction: row;
      overflow-x: scroll;
      background-color: red;
      padding-block: 0;

      &::scroll-button(left) {
        left: calc(anchor(left) + var(--sp-8));
      }

      &::scroll-button(right) {
        right: calc(anchor(right) + var(--sp-8));
      }

      li {
        /* style reset */
        animation: none;

        &:first-of-type,
        &:last-of-type {
          margin-inline: 0;
        }

        img {
          animation: none;
        }

        /* new style */
        max-width: var(--sp-447);
        flex: 0 0 90%;
        scroll-snap-align: center;
        scroll-snap-stop: always;
      }
    }
  }
}

.principles {
  container: studio / inline-size;

  p+p {
    margin-block-start: var(--sp-20);
  }

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

.model {
  container: studio / inline-size;

  ol {
    counter-reset: counter;

    >li {
      counter-increment: counter;
      display: grid;
      grid-template-columns: auto 1fr;
      column-gap: var(--sp-20-12);
      border-block-start: var(--border);
      padding-block: var(--sp-20);

      &:last-of-type {
        border-block-end: var(--border);
      }

      &::before {
        content: "(" counter(counter, decimal-leading-zero) ")";
        font-family: var(--f-r);
        font-size: var(--fs-16-14);
        letter-spacing: var(--zero);
        line-height: var(--lh-150);
        margin-block-start: var(--sp-3);
      }

      p {
        font-size: var(--fs-16-14);
        margin-block-start: var(--sp-20-12);

        &:last-of-type {
          font-family: var(--f-m);
        }
      }
    }
  }
}

.team {
  container: studio / inline-size;

  ul {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    column-gap: var(--sp-20);
    margin-block-start: var(--sp-80-40);
  }
}