/* Keep the homepage header's final footprint before and after navigation resolves. */
body[data-site-page-slug="home"] site-header {
  display: block;
  min-height: 109px;
}

.home-entrance-pending body[data-site-page-slug="home"] .site-header {
  opacity: 0;
  transform: translate3d(0, -18px, 0);
  transition:
    opacity 1200ms ease,
    transform 1200ms cubic-bezier(0.22, 1, 0.36, 1);
  will-change: opacity, transform;
}

.home-entrance-pending body[data-site-page-slug="home"] .cinematic-hero .hero-title-lockup,
.home-entrance-pending body[data-site-page-slug="home"] .cinematic-hero .hero-signature,
.home-entrance-pending body[data-site-page-slug="home"] .cinematic-hero .button-row {
  opacity: 0;
  transform: translate3d(0, 24px, 0);
  transition:
    opacity 1200ms ease,
    transform 1200ms cubic-bezier(0.22, 1, 0.36, 1);
  will-change: opacity, transform;
}

.home-header-visible body[data-site-page-slug="home"] .site-header,
.home-hero-visible body[data-site-page-slug="home"] .cinematic-hero .hero-title-lockup,
.home-hero-visible body[data-site-page-slug="home"] .cinematic-hero .hero-signature,
.home-hero-visible body[data-site-page-slug="home"] .cinematic-hero .button-row {
  opacity: 1;
  transform: translate3d(0, 0, 0);
}

.home-hero-visible body[data-site-page-slug="home"] .cinematic-hero .hero-title-lockup { transition-delay: 70ms; }
.home-hero-visible body[data-site-page-slug="home"] .cinematic-hero .hero-signature { transition-delay: 110ms; }
.home-hero-visible body[data-site-page-slug="home"] .cinematic-hero .button-row { transition-delay: 150ms; }

@media (max-width: 700px) {
  body[data-site-page-slug="home"] site-header {
    min-height: 135px;
  }
}

@media (max-width: 355px) {
  body[data-site-page-slug="home"] site-header {
    min-height: 166px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .home-entrance-pending body[data-site-page-slug="home"] .site-header,
  .home-entrance-pending body[data-site-page-slug="home"] .cinematic-hero .hero-title-lockup,
  .home-entrance-pending body[data-site-page-slug="home"] .cinematic-hero .hero-signature,
  .home-entrance-pending body[data-site-page-slug="home"] .cinematic-hero .button-row {
    opacity: 1;
    transform: none;
    transition: none;
  }
}