/* 通常イントロ、マスク文字、ビューイン、画像リビールを担当する。
   本文は常時可視とし、JS無効時はすべて最終状態で表示する。 */
.js .hero-media {
  animation: hero-media-arrive .84s var(--ease-out) both;
}

.js .hero-copy {
  animation: hero-copy-arrive .72s var(--ease-out) .08s both;
}

.js .route-stage {
  animation: hero-map-arrive .68s var(--ease-out) .18s backwards;
}

.js .hero-foot {
  animation: hero-copy-arrive .58s var(--ease-out) .22s both;
}

@keyframes hero-media-arrive {
  from { opacity: .72; transform: scale(1.025); }
  to { opacity: 1; transform: scale(1); }
}

@keyframes hero-copy-arrive {
  from { opacity: 0; transform: translate3d(0, 18px, 0); }
  to { opacity: 1; transform: translate3d(0, 0, 0); }
}

@keyframes hero-map-arrive {
  from { opacity: 0; transform: translate3d(18px, 0, 0); }
  to { opacity: 1; transform: translate3d(0, 0, 0); }
}

.js.motion-ready [data-reveal]:not(.is-visible) {
  opacity: 0;
  transform: translate3d(0, 28px, 0);
}

.js.motion-ready [data-reveal] {
  transition: opacity .8s var(--ease-out), transform .8s var(--ease-out);
}

.js.motion-ready [data-reveal="hero"] {
  opacity: 1;
  transform: none;
}

.js.motion-ready [data-mask-reveal] .mask-line > span {
  transform: translate3d(0, 112%, 0);
  transition: transform .82s var(--ease-out);
}

.js.motion-ready [data-mask-reveal].is-visible .mask-line > span {
  transform: translate3d(0, 0, 0);
}

.js.motion-ready [data-mask-reveal] .mask-line:nth-child(2) > span {
  transition-delay: .07s;
}

.js.motion-ready [data-image-reveal] .image-reveal-media {
  opacity: .34;
  transform: translate3d(0, 11%, 0) scale(1.075);
}

.js.motion-ready [data-image-reveal].is-visible .image-reveal-media {
  opacity: 1;
  transform: translate3d(0, 0, 0) scale(1);
}

[data-image-reveal] .image-reveal-media {
  transition: opacity .9s var(--ease-out), transform 1s var(--ease-out);
}

.js.motion-ready .story-bud {
  opacity: .26;
  transform: scale(.5);
  transition: opacity .7s var(--ease-out), transform .7s var(--ease-out);
}

.js.motion-ready .story-bud::before,
.js.motion-ready .story-bud::after {
  transition: transform .72s var(--ease-out) .08s, opacity .5s var(--ease-standard);
}

.js.motion-ready [data-path-node].is-path-reached .story-bud {
  opacity: 1;
  transform: scale(1);
}

.js.motion-ready [data-path-node].is-path-reached .story-bud::before {
  transform: scale(1) rotate(-24deg);
}

.js.motion-ready [data-path-node].is-path-reached .story-bud::after {
  transform: scale(1) rotate(114deg);
}

.is-parallax-active .image-reveal-media,
.is-parallax-active.route-stage {
  will-change: transform;
}