/* ============================================================
   Performance / Standard specifications — pinned scroll story
   ============================================================ */

.performance-showcase {
  --performance-panel: #39779d; --text-v37-performance-panel: #6b8194;
  --performance-progress: 0%; --text-v37-performance-progress: 0%;
  position: relative;
  height: 500vh;
  min-height: 3600px;
  background: #f3f0e9;
}

.performance-showcase__sticky {
  position: sticky;
  top: 0;
  display: grid;
  grid-template-columns: minmax(0, 63.5%) minmax(420px, 36.5%);
  width: 100%;
  height: 100vh;
  min-height: 680px;
  overflow: hidden;
  background: #e8e4dc;
}

.performance-showcase__visual {
  position: relative;
  min-width: 0;
  height: 100%;
  overflow: hidden;
  background: #d8d4cc;
  isolation: isolate;
}

.performance-showcase__slides,
.performance-showcase__slide {
  position: absolute;
  inset: 0;
}

.performance-showcase__slide {
  z-index: 1;
  margin: 0;
  overflow: hidden;
  background: #d8d4cc center / cover no-repeat;
  transform: translate3d(0, 100%, 0);
  will-change: transform;
  backface-visibility: hidden;
}

.performance-showcase__slide:first-child {
  transform: translate3d(0, 0, 0);
}

.performance-showcase__slide::after {
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(18, 28, 34, .04), transparent 36%, rgba(18, 28, 34, .12));
  content: "";
  pointer-events: none;
}

.performance-showcase__slide figcaption {
  position: absolute;
  right: 26px;
  bottom: 22px;
  z-index: 2;
  color: rgba(255, 255, 255, .84);
  font-size: 10px;
  letter-spacing: .14em;
  text-shadow: 0 1px 5px rgba(0, 0, 0, .3);
}

.performance-showcase__brand {
  position: absolute;
  top: 32px;
  left: 38px;
  z-index: 8;
  display: flex;
  align-items: center;
  gap: 14px;
  color: #fff;
  text-shadow: 0 1px 5px rgba(30, 42, 48, .28);
}

.performance-showcase__brand strong {
  font-size: 17px;
  font-weight: 500;
  letter-spacing: .08em;
}

.performance-showcase__brand span {
  padding-left: 14px;
  border-left: 1px solid rgba(255, 255, 255, .58);
  font-size: 11px;
  letter-spacing: .13em;
}

.performance-showcase__panel {
  position: relative;
  z-index: 4;
  height: 100%;
  overflow: hidden;
  color: #fff;
  background: var(--performance-panel);
  transition: background-color .65s cubic-bezier(.16, 1, .3, 1);
}

.performance-showcase__panel::before {
  position: absolute;
  top: -13vw;
  right: -11vw;
  width: 32vw;
  max-width: 520px;
  aspect-ratio: 1;
  border: 1px solid rgba(255, 255, 255, .13);
  border-radius: 47% 53% 62% 38%;
  content: "";
  transform: rotate(24deg);
  pointer-events: none;
}

.performance-showcase__jump {
  position: absolute;
  top: 29px;
  right: 42px;
  left: 42px;
  z-index: 4;
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  border-bottom: 1px solid rgba(255, 255, 255, .24);
}

.performance-showcase__jump button {
  position: relative;
  padding: 0 0 13px;
  border: 0;
  color: rgba(255, 255, 255, .48);
  background: transparent;
  cursor: pointer;
  font-family: var(--site-en);
  font-size: 12px;
  letter-spacing: .08em;
  text-align: center;
  transition: color .35s ease;
}

.performance-showcase__jump button::after {
  position: absolute;
  right: 0;
  bottom: -1px;
  left: 0;
  height: 1px;
  background: #fff;
  content: "";
  transform: scaleX(0);
  transition: transform .45s cubic-bezier(.16, 1, .3, 1);
}

.performance-showcase__jump button.is-active {
  color: #fff;
}

.performance-showcase__jump button.is-active::after {
  transform: scaleX(1);
}

.performance-showcase__counter {
  position: absolute;
  top: clamp(100px, 13vh, 138px);
  right: 45px;
  z-index: 3;
  display: flex;
  align-items: flex-start;
  color: rgba(255, 255, 255, .86);
  font-family: var(--site-en);
  font-weight: 400;
}

.performance-showcase__counter-window {
  width: 2.15em;
  height: 1em;
  overflow: hidden;
  font-size: clamp(82px, 8.4vw, 132px);
  line-height: 1;
}

.performance-showcase__counter-track {
  display: flex;
  flex-direction: column;
  transform: translate3d(0, 0, 0);
  transition: transform .6s cubic-bezier(.16, 1, .3, 1);
  will-change: transform;
}

.performance-showcase__counter-track span {
  display: block;
  height: 1em;
  line-height: 1;
}

.performance-showcase__counter-total {
  margin: .12em 0 0 7px;
  font-size: clamp(27px, 2.6vw, 40px);
  line-height: 1;
}

.performance-showcase__contents {
  position: absolute;
  top: clamp(244px, 32vh, 330px);
  right: 46px;
  bottom: 76px;
  left: 46px;
}

.performance-showcase__content {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  opacity: 0;
  transform: translate3d(0, 24px, 0);
  pointer-events: none;
  transition: opacity .42s ease, transform .62s cubic-bezier(.16, 1, .3, 1);
}

.performance-showcase__content.is-active {
  opacity: 1;
  transform: translate3d(0, 0, 0);
  pointer-events: auto;
}

.performance-showcase__eyebrow {
  margin: 0 0 16px;
  color: rgba(255, 255, 255, .72);
  font-size: 12px;
  letter-spacing: .16em;
}

.performance-showcase__title {
  margin: 0;
  color: #fff;
  font-family: var(--site-jp) !important;
  font-size: clamp(27px, 2.4vw, 38px);
  font-weight: 500 !important;
  line-height: 1.55;
  letter-spacing: .08em !important;
}

.performance-showcase__body {
  max-width: 35em;
  margin: 22px 0 0;
  color: rgba(255, 255, 255, .9);
  font-size: clamp(12px, 1.02vw, 14px);
  line-height: 2;
  letter-spacing: .045em;
}

.performance-showcase__points {
  display: grid;
  gap: 7px;
  margin: 20px 0 0;
  padding: 18px 0 0;
  border-top: 1px solid rgba(255, 255, 255, .25);
}

.performance-showcase__points li {
  position: relative;
  padding-left: 19px;
  color: rgba(255, 255, 255, .78);
  font-size: 11px;
  line-height: 1.65;
  letter-spacing: .035em;
}

.performance-showcase__points li::before {
  position: absolute;
  top: .78em;
  left: 0;
  width: 7px;
  height: 1px;
  background: rgba(255, 255, 255, .72);
  content: "";
}

.performance-showcase__standards {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 7px;
  margin-top: 18px;
}

.performance-showcase__standards span {
  display: grid;
  place-items: center;
  min-height: 34px;
  padding: 5px 3px;
  border: 1px solid rgba(255, 255, 255, .24);
  color: rgba(255, 255, 255, .82);
  font-size: 9px;
  line-height: 1.35;
  letter-spacing: .03em;
  text-align: center;
}

.performance-showcase__progress {
  position: absolute;
  top: 50%;
  right: 18px;
  width: 1px;
  height: 76px;
  overflow: hidden;
  background: rgba(255, 255, 255, .22);
  transform: translateY(-50%);
}

.performance-showcase__progress::after {
  position: absolute;
  inset: 0;
  background: #fff;
  content: "";
  transform: translateY(calc(-100% + var(--performance-progress)));
  transition: transform .12s linear;
}

/* The showcase owns the reveals of its text and imagery. */
.performance-showcase :is(.motion-heading, .motion-copy, .motion-item, .motion-image, .reveal, .wipe) {
  clip-path: none !important;
  filter: none !important;
  transition: none;
}

/* The active article controls visibility for all of its copy. Individual
   paragraphs and list items must not remain hidden while waiting for the
   global reveal observer, including the last point near the panel bottom. */
.performance-showcase .performance-showcase__content :is(.motion-heading, .motion-copy) {
  opacity: 1 !important;
  transform: none !important;
}

@media (max-height: 760px) and (min-width: 901px) {
  .performance-showcase__counter {
    top: 92px;
  }

  .performance-showcase__contents {
    top: 214px;
    bottom: 48px;
  }

  .performance-showcase__body {
    margin-top: 14px;
    line-height: 1.8;
  }

  .performance-showcase__points {
    gap: 4px;
    margin-top: 13px;
    padding-top: 12px;
  }
}

@media (max-width: 900px) {
  .performance-showcase {
    height: 500svh;
    min-height: 2800px;
  }

  .performance-showcase__sticky {
    position: sticky;
    top: 0;
    display: grid;
    grid-template-columns: 1fr;
    grid-template-rows: clamp(220px, 42svh, 360px) minmax(0, 1fr);
    height: 100svh;
    min-height: 0;
    overflow: hidden;
  }

  .performance-showcase__visual {
    height: 100%;
    min-height: 0;
  }

  .performance-showcase__brand {
    top: 18px;
    left: 18px;
    gap: 10px;
  }

  .performance-showcase__brand strong {
    font-size: 14px;
  }

  .performance-showcase__brand span {
    padding-left: 10px;
    font-size: 9px;
  }

  .performance-showcase__panel {
    height: 100%;
    min-height: 0;
    padding: 0;
    color: #fff;
    background: var(--performance-panel);
  }

  .performance-showcase__panel::before {
    top: -80px;
    right: -90px;
    width: 260px;
  }

  .performance-showcase__jump {
    top: 13px;
    right: 18px;
    left: 18px;
    display: grid;
  }

  .performance-showcase__jump button {
    padding-bottom: 8px;
    font-size: 10px;
  }

  .performance-showcase__counter {
    top: 50px;
    right: 18px;
    display: flex;
  }

  .performance-showcase__counter-window {
    width: 2.05em;
    font-size: clamp(42px, 12vw, 62px);
  }

  .performance-showcase__counter-total {
    margin-left: 4px;
    font-size: clamp(17px, 4.7vw, 25px);
  }

  .performance-showcase__contents {
    position: absolute;
    top: clamp(104px, 16svh, 132px);
    right: 22px;
    bottom: 18px;
    left: 22px;
  }

  .performance-showcase__content,
  .performance-showcase__content.is-active {
    position: absolute;
    inset: 0;
    display: flex;
    padding: 0;
    border: 0;
  }

  .performance-showcase__content {
    opacity: 0;
    transform: translate3d(0, 18px, 0);
    pointer-events: none;
  }

  .performance-showcase__content.is-active {
    opacity: 1;
    transform: translate3d(0, 0, 0);
    pointer-events: auto;
  }

  .performance-showcase__eyebrow {
    margin-bottom: 7px;
    color: rgba(255, 255, 255, .72);
    font-size: 9px;
  }

  .performance-showcase__title {
    max-width: calc(100% - 82px);
    color: #fff;
    font-size: clamp(20px, 5.7vw, 28px);
    line-height: 1.4;
  }

  .performance-showcase__body {
    margin-top: 10px;
    color: rgba(255, 255, 255, .9);
    font-size: clamp(9px, 2.55vw, 12px);
    line-height: 1.7;
  }

  .performance-showcase__points {
    gap: 3px;
    margin-top: 9px;
    padding-top: 8px;
    border-color: rgba(255, 255, 255, .25);
  }

  .performance-showcase__points li {
    padding-left: 14px;
    color: rgba(255, 255, 255, .78);
    font-size: clamp(8px, 2.25vw, 10px);
    line-height: 1.45;
  }

  .performance-showcase__points li::before {
    background: rgba(255, 255, 255, .72);
  }

  .performance-showcase__standards {
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 4px;
    margin-top: 10px;
  }

  .performance-showcase__standards span {
    min-height: 26px;
    padding: 3px 2px;
    border-color: rgba(255, 255, 255, .24);
    color: rgba(255, 255, 255, .82);
    font-size: 7px;
  }

  .performance-showcase__progress {
    right: 8px;
    display: block;
    height: 58px;
  }
}

@media (max-width: 480px) and (max-height: 700px) {
  .performance-showcase__sticky {
    grid-template-rows: 38svh minmax(0, 1fr);
  }

  .performance-showcase__contents {
    top: 96px;
    right: 18px;
    bottom: 12px;
    left: 18px;
  }

  .performance-showcase__title {
    font-size: 19px;
  }

  .performance-showcase__body {
    margin-top: 7px;
    font-size: 8.5px;
    line-height: 1.55;
  }

  .performance-showcase__points {
    margin-top: 6px;
    padding-top: 6px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .performance-showcase {
    height: auto;
    min-height: 0;
  }

  .performance-showcase__sticky {
    position: relative;
    height: auto;
    min-height: 760px;
  }

  .performance-showcase__slide {
    transition: none !important;
  }
}