@keyframes hero-img-scale-up {
  from {
    width: var(--sp-447);
  }
}
.hero {
  container: hero / inline-size;

  at-inner {
    h1 {
      --special-h1-size: clamp(4rem, 20.5vw, 19.4rem);
      font-size: var(--special-h1-size);
      font-family: var(--f-r);
      letter-spacing: calc(var(--neg-4) * var(--special-h1-size));
      line-height: var(--lh-100);
      width: fit-content;
      margin-inline: auto;
    }

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

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

  picture {
    margin-inline: auto;
    will-change: width;
    animation: hero-img-scale-up ease-in-out forwards;
    animation-timeline: scroll(block root);
    animation-range: 0% 10%;
    max-width: var(--sp-1880);
  }

  @container (inline-size < 31.25rem) {
    picture {
      animation: none;
      margin-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);
  }
}

@keyframes reduce-image-size {
  to {
    height: var(--image-shrink-size);
  }
}
:root {
  --card-height: clamp(21.3125rem, 11.1436rem + 23.2432vw, 32.0625rem);
  /* --card-height: 100vw; */
  --card-margin: 4vw;
  --image-shrink-size: var(--sp-74);
  --first-card-offset: calc(var(--header-height) + var(--sp-20));
  --shrink-card-height: calc(2 * var(--sp-40-20) + var(--image-shrink-size));
}
.work {
  container: work / inline-size;

  h2 {
    transform: translateY(var(--first-card-offset));
  }

  ul {
    --numcards: calc(attr(data-card-number type(<number>)) + 1);

    display: grid;
    grid-template-columns: 1fr;
    grid-template-rows: repeat(var(--numcards), var(--card-height));
    margin-block-end: calc(var(--header-height) + (var(--numcards) - 1) * var(--header-height));

    view-timeline-name: --home-work-timeline;

    li {
      --card-top-offset: calc(var(--first-card-offset) + var(--index0) * var(--shrink-card-height));

      position: sticky;
      top: 0;
      padding-block-start: var(--card-top-offset);

      &:nth-of-type(1) {
        padding-block-start: var(--first-card-offset);
      }

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

      --index: calc(var(--index0) + 1);
      --index0: attr(data-card-index type(<number>));

      work-content {
        --start-range: calc(var(--index0) / var(--numcards) * 100%);
        --end-range: calc(var(--index) / var(--numcards) * 100%);
        --fade-end-range: calc(var(--start-range) + 10%);

        display: grid;
        grid-template-columns: repeat(12, 1fr);
        background-color: var(--bg);
        column-gap: var(--sp-20);
        padding-block: var(--sp-40-20);
        border-block-start: var(--border);
      }

      hgroup {
        grid-column: 1 / span 2;

        h3 {
          text-wrap: nowrap;
        }

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

      picture {
        grid-column: 5 / -1;

        img {
          object-fit: cover;
          animation: linear reduce-image-size forwards;
          animation-timeline: --home-work-timeline;
          animation-range: exit-crossing var(--start-range) exit-crossing var(--end-range);
        }
      }
    }
  }

  ol {
    li:last-of-type {
      details {
        border-block-end: var(--border);
      }
    }

    details {
      --each-grid-column-width: calc((min(calc(var(--sp-1440) - 2 * var(--sp-30-16)), calc(100vw - 2 * var(--sp-30-16))) - 11 * var(--sp-20)) / 12);
      --img-width: calc(8 * var(--each-grid-column-width) + 7 * var(--sp-20));
      --img-aspect-ratio-height-width: 512 / 913;
      --img-height: calc(var(--img-width) * var(--img-aspect-ratio-height-width));
      --details-height: calc(var(--img-height) + 2 * var(--sp-40-20));

      padding-block: var(--sp-40-20);
      border-block-start: var(--border);
      height: auto;
      overflow: clip;
      transition: height var(--animation-time) var(--animation-timing-function);

      &::details-content {
        width: calc(4 * var(--each-grid-column-width) + 3 * var(--sp-20));
        height: 0;
        overflow: clip;
        transition:
          height var(--animation-time) var(--animation-timing-function),
          content-visibility var(--animation-time) var(--animation-timing-function) allow-discrete;
      }

      &[open] {
        height: var(--details-height);

        &::details-content {
          height: auto;
        }

        summary {
          img {
            aspect-ratio: 913 / 512;
            height: auto;
          }
        }
      }
    }

    summary {
      display: grid;
      grid-template-columns: repeat(12, 1fr);
      background-color: var(--bg);
      column-gap: var(--sp-20);
      position: relative;
      cursor: pointer;

      hgroup {
        grid-column: 1 / span 2;

        h3 {
          text-wrap: nowrap;
        }
      }

      picture {
        position: absolute;
        top: 0;
        grid-column: 5 / -1;
        width: 100%;
        height: 100%;

        img {
          object-fit: cover;
          height: 90px;
          transition: 
            height var(--animation-time) var(--animation-timing-function),
            aspect-ratio var(--animation-time) var(--animation-timing-function);
        }
      }
    }
  }

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

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

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

@property --_progress {
  syntax: "<percentage>";
  inherits: false;
  initial-value: 0%;
}
@keyframes progress-bar {
  to {
    --_progress: 100%;
  }
}
.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;
    scroll-marker-group: after;
    scroll-timeline: --testimonial-timeline inline;

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

    /* 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);

      animation: progress-bar linear both;
      animation-timeline: --testimonial-timeline;
    }


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

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

    q,span {
      display: block;
    }

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

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