/*
 * 画像マスク・ビューイン・参加型UIの動きに必要な状態を担当する。
 * 毎フレーム変化する指定はtransformとopacityに限定する。
 */
.image-frame img,
.image-wash,
.reveal,
[data-stagger-list] li {
  transform-origin: center;
}

.button,
.site-nav a,
.faq-question {
  transition-duration: .3s;
  transition-timing-function: var(--ease-calm);
}

.site-nav a,
.faq-question {
  transition-property: color, outline-color;
}

html.js .process-icon i {
  transform: scaleX(1);
}

.breath-ring,
.breath-ripple,
.breath-particle-field i {
  will-change: transform, opacity;
}

.breath-phase > span,
.breath-count > span {
  will-change: transform, opacity;
}

[data-parallax-image] {
  transform: scale(1.02);
  transform-origin: center;
}

html.intro-running .hero-title-line {
  display: block;
  overflow: hidden;
}

.hero-title-line {
  display: block;
  white-space: nowrap;
}

html.intro-running .hero-title-line > span {
  animation: hero-line-rise .82s var(--ease-calm) both;
  display: block;
}

html.intro-running .hero-title-line + .hero-title-line > span {
  animation-delay: .08s;
}

.hero-leaf-shadow-one {
  animation: leaf-shadow-one 24s ease-in-out infinite alternate;
  animation-play-state: paused;
}

.hero-leaf-shadow-two {
  animation: leaf-shadow-two 29s ease-in-out infinite alternate;
  animation-play-state: paused;
}

.hero.is-ambient-active .hero-leaf-shadow,
.values-band.is-ambient-active .curtain-light i {
  animation-play-state: running;
}

.curtain-light i {
  animation: curtain-dust-drift 7.2s ease-in-out infinite alternate;
  animation-play-state: paused;
}

.curtain-light i:nth-child(2) { animation-delay: -2.1s; }
.curtain-light i:nth-child(3) { animation-delay: -4.6s; }
.curtain-light i:nth-child(4) { animation-delay: -6.2s; }

@keyframes hero-line-rise {
  from {
    opacity: 0;
    transform: translateY(108%);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes leaf-shadow-one {
  from {
    opacity: .09;
    transform: translate3d(-1.4%, -.8%, 0) rotate(-1.2deg) scale(1.025);
  }
  to {
    opacity: .14;
    transform: translate3d(1.5%, .9%, 0) rotate(1.4deg) scale(1.055);
  }
}

@keyframes leaf-shadow-two {
  from {
    opacity: .055;
    transform: translate3d(1.2%, -.5%, 0) scaleX(-1) rotate(-3.2deg) scale(1.02);
  }
  to {
    opacity: .09;
    transform: translate3d(-1.1%, 1%, 0) scaleX(-1) rotate(-1.4deg) scale(1.05);
  }
}

@keyframes curtain-dust-drift {
  from {
    opacity: .22;
    transform: translate3d(-5px, 7px, 0) scale(var(--dust-scale));
  }
  to {
    opacity: .84;
    transform: translate3d(8px, -9px, 0) scale(var(--dust-scale));
  }
}