:root { --kuma-ease: cubic-bezier(.2, .75, .2, 1); }

/* 本文の見出しは画像の寸法ではなく、書体の組版でそろえる。 */
#screens .screens-title {
  font-size: clamp(27px, 3.3vw, 46px);
  font-weight: 500;
  line-height: 1.5;
  letter-spacing: .045em;
  font-kerning: normal;
  font-feature-settings: "palt";
}
.title-line { display: block; overflow: hidden; padding-block: .04em; }
.title-line > span { display: block; }
/* 「ど」の左の字面を、同じ書体の「足」に光学的に合わせる。 */
.title-line:nth-child(2) > span { text-indent: -.09em; }
.motion-line, .resolve-line { display: block; }
.scene-media { overflow: hidden; }
.walk-picture { overflow: hidden; }

.walk-picture > img { transform: translate3d(0, var(--scene-shift, 0px), 0) scale(1.035); }
.scene-image { transform: translate3d(0, var(--scene-shift, 0px), 0) scale(1.045); }

.js [data-enter="poster"].ps-reveal {
  transform: none;
  transition: opacity 1.7s ease;
}
.js [data-enter="landscape"].ps-reveal {
  transform: translate3d(0, 26px, 0);
  transition: opacity 1.6s ease, transform 2s var(--kuma-ease);
}
.js [data-enter="vertical"].ps-reveal {
  transform: translate3d(0, 18px, 0);
  transition: opacity 1.5s ease, transform 1.7s var(--kuma-ease);
}
.js [data-enter="quiet"].ps-reveal {
  transform: translate3d(0, 8px, 0);
  transition: opacity 1.35s ease, transform 1.5s var(--kuma-ease);
}
.js .departure.ps-reveal { transition-delay: .25s; }
.js .presence > p:nth-child(2).ps-reveal { transition-delay: .2s; }
.js [data-enter].ps-reveal.is-in { opacity: 1; transform: none; }

.js [data-enter="sentences"].ps-reveal,
.js [data-enter="heading"].ps-reveal,
.js [data-enter="facts"].ps-reveal {
  opacity: 1;
  transform: none;
}
.js [data-enter="sentences"] .motion-line,
.js [data-enter="sentences"] > p,
.js [data-enter="facts"] .info-list > div {
  opacity: 0;
  transform: translate3d(0, 12px, 0);
  transition: opacity 1s ease, transform 1.2s var(--kuma-ease);
}
.js .is-in .motion-line,
.js [data-enter="sentences"].is-in > p,
.js .resolve.is-in .resolve-line,
.js [data-enter="facts"].is-in .info-list > div { opacity: 1; transform: none; }
.js [data-enter="sentences"] .motion-line:nth-child(2) { transition-delay: .2s; }
.js [data-enter="sentences"] .motion-line:nth-child(3) { transition-delay: .45s; }
.js .scene-prose > p:nth-child(2) { transition-delay: .4s; }
.resolve-line--lead { --resolve-delay: 0s; }
.resolve-line--goal { --resolve-delay: .22s; }
.resolve-line--turn { --resolve-delay: .55s; }
.resolve-line--end { --resolve-delay: .85s; }
.js .presence .resolve .resolve-line {
  opacity: 0;
  transform: translate3d(0, 28px, 0);
  transition: opacity 1.1s ease var(--resolve-delay), transform 1.6s var(--kuma-ease) var(--resolve-delay);
}
.js .presence .resolve.is-in .resolve-line { opacity: 1; transform: none; }
.js.ps-still .presence .resolve .resolve-line { opacity: 1; transform: none; transition: none; }
.js [data-enter="facts"] .info-list > div:nth-child(2) { transition-delay: .07s; }
.js [data-enter="facts"] .info-list > div:nth-child(3) { transition-delay: .14s; }
.js [data-enter="facts"] .info-list > div:nth-child(4) { transition-delay: .21s; }
.js [data-enter="facts"] .info-list > div:nth-child(5) { transition-delay: .28s; }
.js [data-enter="facts"] .info-list > div:nth-child(6) { transition-delay: .35s; }

.js [data-enter="heading"] .title-line > span {
  opacity: 0;
  transform: translate3d(0, 105%, 0);
  transition: opacity 1s ease, transform 1.2s var(--kuma-ease);
}
.js [data-enter="heading"].is-in .title-line > span { opacity: 1; transform: none; }
.js [data-enter="heading"] .title-line:nth-child(2) > span { transition-delay: .45s; }
.js [data-enter="heading"] .ps-eyebrow,
.js [data-enter="heading"] > p { opacity: 0; transition: opacity 1s ease; }
.js [data-enter="heading"].is-in .ps-eyebrow,
.js [data-enter="heading"].is-in > p { opacity: 1; }
.js [data-enter="heading"] > p { transition-delay: .4s; }

.js [data-enter="photo"].ps-reveal { opacity: 1; transform: none; }
.js [data-enter="photo"] .scene-media {
  clip-path: inset(0 0 100% 0);
  transition: clip-path 1.35s var(--kuma-ease);
}
.js [data-enter="photo"] .scene-media img {
  transform: scale(1.07);
  transition: transform 1.8s var(--kuma-ease);
}
.js [data-enter="photo"].is-in .scene-media { clip-path: inset(0); }
.js [data-enter="photo"].is-in .scene-media img { transform: none; }
.js [data-enter="photo"] figcaption,
.js [data-enter="photo"] .scene-note {
  opacity: 0;
  transform: translate3d(0, 8px, 0);
  transition: opacity 1s ease .5s, transform 1.2s var(--kuma-ease) .5s;
}
.js [data-enter="photo"].is-in figcaption,
.js [data-enter="photo"].is-in .scene-note { opacity: 1; transform: none; }
.js [data-enter="photo"] .scene-note { transition-delay: .7s; }

/* 共通の停止操作で、子要素の段階表示もすべて読める終端へ戻す。 */
.js.ps-still [data-enter].ps-reveal,
.js.ps-still [data-enter] .motion-line,
.js.ps-still [data-enter="sentences"] > p,
.js.ps-still .resolve .resolve-line,
.js.ps-still [data-enter="facts"] .info-list > div,
.js.ps-still [data-enter="heading"] .title-line > span,
.js.ps-still [data-enter="heading"] .ps-eyebrow,
.js.ps-still [data-enter="heading"] > p,
.js.ps-still [data-enter="photo"] figcaption,
.js.ps-still [data-enter="photo"] .scene-note,
.js.ps-still [data-enter="photo"] .scene-media img {
  opacity: 1;
  transform: none;
  transition: none;
}
.js.ps-still [data-enter="photo"] .scene-media { clip-path: none; transition: none; }
.ps-still .walk-picture > img, .ps-still .scene-image { transform: none; }

.screens-note {
  margin-top: 24px;
  color: #7f8d99;
  font-size: 10px;
  line-height: 1.7;
  letter-spacing: .03em;
}
.scene-credit { color: #7f8d99; font-size: 9px; letter-spacing: .03em; }

@media (max-width: 699px) {
  #screens .screens-title { font-size: clamp(27px, 7.4vw, 40px); }
}
@media (prefers-reduced-motion: reduce), print {
  .js [data-enter].ps-reveal,
  .js [data-enter] *,
  .js .resolve.ps-reveal,
  .js .resolve .resolve-line {
    opacity: 1 !important;
    transform: none !important;
    transition: none !important;
    clip-path: none !important;
  }
  .walk-picture > img, .scene-image { transform: none !important; }
}