/* Homepage motion and natural Japanese line wrapping. */
body.home :is(.hb-firstview, .hb-process, .hb-next, .hb-lower, .hb-home-next) :is(h2, h3, p) {
  word-break: auto-phrase;
  text-wrap: pretty;
}

body.home #hb-firstview-title {
  animation: hb-title-fade-in 2200ms cubic-bezier(.22, .61, .36, 1) 120ms both;
}

@keyframes hb-title-fade-in {
  from { opacity: .25; transform: translateY(16px); }
  to { opacity: 1; transform: translateY(0); }
}

@media (prefers-reduced-motion: no-preference) {
  body.home .hb-home-next--outcomes :is(h2, .hb-home-card).hb-motion-entered {
    animation: hb-outcome-enter 1900ms cubic-bezier(.22, .61, .36, 1) both;
  }

  body.home #hb-process-title.hb-motion-entered {
    --hb-process-heading-start: -40px;
    animation: hb-process-heading-enter 2400ms cubic-bezier(.22, .61, .36, 1) both;
  }

  body.home .hb-process__step > h3.hb-motion-entered {
    animation: hb-process-heading-enter 2200ms cubic-bezier(.22, .61, .36, 1) both;
  }

  body.home .hb-process__step:nth-child(2) > h3 {
    --hb-process-heading-start: 32px;
  }
}

@keyframes hb-outcome-enter {
  from { opacity: .62; transform: translateY(18px); }
  to { opacity: 1; transform: translateY(0); }
}

@keyframes hb-process-heading-enter {
  from { opacity: .5; transform: translateX(var(--hb-process-heading-start, -32px)); }
  to { opacity: 1; transform: translateX(0); }
}

@media (max-width: 767px) and (prefers-reduced-motion: no-preference) {
  body.home #hb-process-title.hb-motion-entered {
    --hb-process-heading-start: -20px;
  }

  body.home .hb-process__step > h3 {
    --hb-process-heading-start: -18px;
  }

  body.home .hb-process__step:nth-child(2) > h3 {
    --hb-process-heading-start: 18px;
  }
}

@keyframes hb-photo-intro-slide {
  from { transform: translate3d(0, var(--hb-photo-intro-y), 0) scale(var(--hb-photo-scale)); }
  to { transform: translate3d(0, var(--hb-hero-shift, 0px), 0) scale(var(--hb-photo-scale)); }
}

@media (min-width: 1024px) {
  body.home .hb-firstview__visual img {
    filter: brightness(1.20) contrast(.92);
  }

  body.home.hb-sticky-nav #st-menubox {
    position: fixed;
    top: var(--hb-sticky-top, 0px);
    right: 0;
    left: 0;
    z-index: 9990;
    width: 100%;
    background: #fff;
  }

  body.home .hb-nav-spacer {
    display: block;
    pointer-events: none;
  }

  body.home h1[id],
  body.home h2[id],
  body.home h3[id] {
    scroll-margin-top: calc(var(--hb-sticky-top, 0px) + var(--hb-sticky-height, 42px) + 12px);
  }
}

@media (min-width: 1024px) and (prefers-reduced-motion: no-preference) {
  body.home.hb-parallax-on .hb-firstview__visual {
    overflow: hidden;
  }

  body.home.hb-parallax-on .hb-firstview__visual img {
    --hb-photo-intro-y: -18px;
    --hb-photo-scale: 1.09;
    transform: translate3d(0, var(--hb-hero-shift, 0px), 0) scale(var(--hb-photo-scale));
    animation: hb-photo-intro-slide 2600ms cubic-bezier(.22, .61, .36, 1);
    transition: transform 1800ms cubic-bezier(.22, .61, .36, 1);
  }
}

@media (max-width: 1023px) and (prefers-reduced-motion: no-preference) {
  body.home.hb-parallax-on .hb-firstview__visual {
    overflow: hidden;
  }

  body.home.hb-parallax-on .hb-firstview__visual img {
    --hb-photo-intro-y: -8px;
    --hb-photo-scale: 1.08;
    transform: translate3d(0, var(--hb-hero-shift, 0px), 0) scale(var(--hb-photo-scale));
    animation: hb-photo-intro-slide 2200ms cubic-bezier(.22, .61, .36, 1);
    transition: transform 1500ms cubic-bezier(.22, .61, .36, 1);
  }
}

@media (prefers-reduced-motion: reduce) {
  body.home #hb-firstview-title {
    animation: none !important;
    opacity: 1 !important;
  }

  body.home .hb-firstview__visual img {
    transform: none !important;
    transition: none !important;
  }

  body.home .hb-home-next--outcomes :is(h2, .hb-home-card).hb-motion-entered {
    animation: none !important;
    opacity: 1 !important;
    transform: none !important;
  }

  body.home .hb-process__step > h3.hb-motion-entered {
    animation: none !important;
    opacity: 1 !important;
    transform: none !important;
  }

  body.home #hb-process-title.hb-motion-entered {
    animation: none !important;
    opacity: 1 !important;
    transform: none !important;
  }
}