@charset "utf-8";

/* DPC KOBE / contact lightweight motion
   Short page: hero + form only. Individual form controls remain static. */

.contact-page.motion-ready .motion-reveal {
  opacity: 0;
  transform: translate3d(0, 18px, 0);
  transition:
    opacity .72s cubic-bezier(.22,1,.36,1),
    transform .72s cubic-bezier(.22,1,.36,1);
  will-change: opacity, transform;
}

.contact-page.motion-ready .motion-reveal.is-visible {
  opacity: 1;
  transform: translate3d(0,0,0);
}

/* Hero entrance: restrained, not a long-page animation sequence. */
.contact-page.motion-ready .contact-hero__inner > * {
  opacity: 0;
  transform: translate3d(0, 14px, 0);
  transition:
    opacity .70s cubic-bezier(.22,1,.36,1),
    transform .70s cubic-bezier(.22,1,.36,1);
}

.contact-page.motion-ready.motion-loaded .contact-hero__inner > * {
  opacity: 1;
  transform: translate3d(0,0,0);
}

.contact-page.motion-ready.motion-loaded .contact-hero__inner > *:nth-child(1) { transition-delay: .08s; }
.contact-page.motion-ready.motion-loaded .contact-hero__inner > *:nth-child(2) { transition-delay: .16s; }
.contact-page.motion-ready.motion-loaded .contact-hero__inner > *:nth-child(3) { transition-delay: .24s; }

/* Existing hero background gets only a very small settling motion. */
.contact-page.motion-ready .contact-hero__visual {
  transform: scale(1.02);
  transition: transform 1.2s cubic-bezier(.22,1,.36,1);
}

.contact-page.motion-ready.motion-loaded .contact-hero__visual {
  transform: scale(1);
}

@media screen and (max-width:768px) {
  .contact-page.motion-ready .motion-reveal {
    transform: translate3d(0, 12px, 0);
    transition-duration: .64s;
  }

  .contact-page.motion-ready .motion-reveal.is-visible {
    transform: translate3d(0,0,0);
  }

  .contact-page.motion-ready .contact-hero__inner > * {
    transform: translate3d(0,10px,0);
  }
}

@media (prefers-reduced-motion: reduce) {
  .contact-page.motion-ready .motion-reveal,
  .contact-page.motion-ready .contact-hero__inner > *,
  .contact-page.motion-ready .contact-hero__visual {
    opacity: 1 !important;
    transform: none !important;
    transition: none !important;
    animation: none !important;
  }
}