: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%;
  }
}
@supports (animation-timeline: view()) {
  .hero {
    ol {
      li {
        view-timeline: --studio-carousel inline;
        animation: adjust-z-index linear both;
        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%;
      }
    }
  }
}
.hero {
  container: studio / inline-size;

  h1 {
    text-align: center;
  }

  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;

    /* scroll buttons */
    &::scroll-button(*) {
      opacity: 0.8;
      cursor: pointer;
      position: absolute;
      display: block;
      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-48);

    &::scroll-button(left) {
      content: "";
      background: 
        url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" fill="none" viewBox="0 0 24 24"><path stroke="%232e2c28" stroke-linecap="round" stroke-linejoin="round" d="m15 6-6 6 6 6"/></svg>') no-repeat,
        var(--bg-shade-9);
      background-size: var(--sp-24) var(--sp-24);
      background-position: center;
      left: calc(anchor(left) - var(--navigation-icon-size) / 2);
      top: calc(anchor(center) - var(--navigation-icon-size) / 2);
      padding: var(--sp-16);
      width: var(--navigation-icon-size);
      height: var(--navigation-icon-size);
    }

    &::scroll-button(right) {
      content: "";
      background: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" fill="none" viewBox="0 0 24 24"><path stroke="%232e2c28" stroke-linecap="round" stroke-linejoin="round" d="m9 18 6-6-6-6"/></svg>') no-repeat,
      var(--bg-shade-9);
      background-size: var(--sp-24) var(--sp-24);
      background-position: center;
      right: calc(anchor(right) - var(--navigation-icon-size) / 2);
      top: calc(anchor(center) - var(--navigation-icon-size) / 2);
      padding: var(--sp-16);
      width: var(--navigation-icon-size);
      height: var(--navigation-icon-size);
    }

    li {
      scroll-snap-align: center;
      scroll-snap-stop: always;
      position: relative;
      display: inline-block;
      will-change: z-index, transform;

      picture {
        max-width: var(--sp-600);
      }
    }
  }

  @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;
      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;
      }
    }
  }

  @container (inline-size < 31.25rem) {
    at-inner {
      align-items: flex-start;

      h1 {
        text-align: left;
      }
    }
  }
}

.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;

    h3 {
      color: var(--font);
    }

    >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);
  }
}