@keyframes hero-img-scale-up {
  to {
    width: 100%;
  }
}

.hero {
  container: hero / inline-size;

  at-inner {
    p {
      margin-block-start: var(--sp-120-40);
    }

    padding-block-end: var(--sp-120-40);
  }

  picture {
    --hd-min-width: calc( 3 * var(--sp-20) + 4 * (100vw - 11 * var(--sp-20)) / 12 );
    --sd-min-width: var(--sp-447); 
    margin-inline: auto;
    width: max(var(--hd-min-width), var(--sd-min-width));
    will-change: width;
    animation: hero-img-scale-up ease-in-out forwards;
    animation-timeline: scroll(block root);
    animation-range: 0% 10%;
  }

  @container (inline-size < 31.25rem) {
    picture {
      animation: none;
      padding-inline: var(--sp-16);
    }
  }
}

.studio {
  container: studio / inline-size;

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

  ol {
    counter-reset: counter;
    color: var(--font);

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

      &::before {
        content: "(" counter(counter, decimal-leading-zero) ")";
      }

      border-block-start: var(--border);

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

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

.work {
  container: work / inline-size;

  ul {
    li {
      display: grid;
      grid-template-columns: repeat(12, 1fr);
      column-gap: var(--sp-20);
      padding-block: var(--sp-40-20);
      border-block-start: var(--border);

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

      details {
        grid-column: 1 / span 3;

        @container (inline-size < 64rem) {
          grid-column: 1 / span 4;
        }

        summary {
          display: grid;
          grid-template-columns: 1fr auto;
          gap: var(--sp-8);
          list-style: none;
          cursor: pointer;

          h3 {
            text-box-trim: trim-start;
            text-box-edge: cap alphabetic;
          }

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

        >p {
          margin-block-start: 0;
          transition: margin-block-start var(--animation-time) var(--animation-timing-function);
        }

        >a {
          margin-block-start: var(--sp-20);
        }

        &::details-content {
          overflow: clip;
          height: 0;
          opacity: 0;
          transition:
            height var(--animation-time) var(--animation-timing-function),
            opacity var(--animation-time) var(--animation-timing-function),
            content-visibility var(--animation-time) var(--animation-timing-function) allow-discrete;
        }

        &[open] {
          &::details-content {
            height: auto;
            opacity: 1;
          }

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

      picture {
        grid-column: 5 / -1;

        img {
          object-fit: cover;
          height: var(--sp-74);
          transition: height var(--animation-time) var(--animation-timing-function);
        }
      }

      &:has(details[open]) {
        img {
          height: auto;
        }
      }
    }

    @container (inline-size < 43.75rem) {
      li {
        grid-template-columns: 1fr;
        row-gap: var(--sp-20);

        details {
          grid-column: auto;
        }

        picture {
          grid-column: auto;
        }
      }
    }
  }

  boxed-wrapper {
    margin-block-start: var(--sp-80-40);

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

.service {
  container: service / inline-size;

  ol {
    counter-reset: counter;

    >li {
      display: grid;
      grid-template-columns: auto 1fr;
      grid-template-areas:
        "num title"
        ". list";
      align-items: center;
      gap: var(--sp-20-12);
      color: var(--font);
      counter-increment: counter;
      padding-block: var(--sp-20);
      border-block-start: var(--border);

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

      &::before {
        content: "(" counter(counter, decimal-leading-zero) ")";
        grid-area: num;
      }

      h3 {
        grid-area: title;
        color: var(--font);
      }

      ul {
        grid-area: list;
        display: flex;
        flex-direction: column;
        row-gap: var(--sp-8);
        color: var(--font-tint-15);
      }
    }
  }

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

@property --_progress {
  syntax: "<percentage>";
  inherits: false;
  initial-value: 0%;
}

@keyframes progress-bar {
  to {
    --_progress: 100%;
  }
}

@supports (scroll-marker-group: after) {
  .testimonial {
    ol {
      scroll-marker-group: after;

      /* css scroll */
      &::scroll-button(*) {
        font-family: var(--f-r);
        font-size: var(--fs-16);
        letter-spacing: var(--zero);
        line-height: var(--lh-100);
        color: var(--font);
        border: none;
        text-decoration: underline;
        text-underline-offset: var(--sp-2);
        background-color: transparent;
        position: absolute;
        padding: 0;
        top: calc(anchor(bottom) + var(--sp-24-20));
        position-anchor: --testimonial;
        cursor: pointer;
        transition: opacity var(--animation-time) var(--animation-timing-function);
      }

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

      &::scroll-button(*):disabled {
        opacity: 0.2;
        cursor: unset;
      }

      &::scroll-button(left) {
        content: "Prev";
        right: calc(anchor(right) + var(--sp-50));
      }

      &::scroll-button(right) {
        content: "Next";
        right: anchor(right);
      }

      &::scroll-marker-group {
        position: absolute;
        position-anchor: --testimonial;
        top: calc(anchor(bottom) + var(--sp-20));
        left: anchor(left);
        background: linear-gradient(black 0 0);
        background-size: var(--_progress, 0) var(--sp-1);
        background-repeat: no-repeat;
        background-position: left center;
        display: flex;
        flex-direction: row;
        align-items: center;
        gap: var(--sp-8);
      }

      >li {
        &::scroll-marker {
          content: counter(counter, decimal-leading-zero);
          font-family: var(--f-r);
          font-size: var(--fs-16);
          letter-spacing: var(--zero);
          line-height: var(--lh-150);
          text-decoration: none;
          border: none;
          padding-inline: var(--sp-4);
          background-color: var(--bg);
          color: color-mix(in srgb, var(--font) 50%, var(--bg) 50%);
          transform: scale(0.8);
          transition: color var(--animation-time) var(--animation-timing-function), transform var(--animation-time) var(--animation-timing-function);
        }

        &::scroll-marker:target-current {
          color: var(--font);
          transform: scale(1);
        }
      }
    }
  }
}

@supports (animation-timeline: scroll()) {
  .testimonial {
    ol {
      scroll-timeline: --testimonial-timeline inline;

      &::scroll-marker-group {
        animation: progress-bar linear both;
        animation-duration: 1ms;
        animation-timeline: --testimonial-timeline;
      }
    }
  }
}

.testimonial {
  container: testimonial / inline-size;

  at-inner {
    padding-block-end: calc(var(--sp-160-40) + var(--sp-24-20));
  }

  ol {
    margin-block-start: var(--sp-20);
    padding-block: var(--sp-20);
    border-block: var(--border);
    display: flex;
    flex-direction: row;
    column-gap: var(--sp-40);
    overflow-x: scroll;
    scroll-snap-type: x mandatory;
    scroll-behavior: smooth;
    counter-reset: counter;

    /* anchor position */
    anchor-name: --testimonial;


    >li {
      flex: 0 0 100%;
      scroll-snap-align: start;
      scroll-snap-stop: always;
      counter-increment: counter;
      opacity: 1;
    }

    q,
    span {
      display: block;
    }

    q {
      &::before,
      &::after {
        display: none;
      }
    }

    span {
      &:nth-of-type(1) {
        margin-block: var(--sp-20) var(--sp-4);
        color: var(--font);
      }
    }
  }

  @container (inline-size < 28.125rem) {
    at-inner {
      padding-block-end: calc(var(--sp-160-40) + var(--sp-60));
    }

    ol {
      &::scroll-button(*) {
        top: calc(anchor(bottom) + var(--sp-60));
      }

      &::scroll-marker-group {
        width: 90%;
        justify-content: space-between;
        top: calc(anchor(bottom) + var(--sp-16));
        left: 50%;
        transform: translateX(-50%);
      }
    }
  }
}