:root {
  --motion-ease: cubic-bezier(.22, 1, .36, 1);
  --motion-reveal: 700ms;
  --motion-drawer: 300ms;
}

html.motion :is(
  .hero__row > *, .section__inner > *, .breakline__logo, .prefooter__card,
  .contact-hero__inner > *, .contact-form-wrap,
  .legal-hero__inner > *, .legal
) {
  opacity: 0;
  translate: 0 24px;
  transition:
    opacity var(--motion-reveal) var(--motion-ease) var(--reveal-delay, 0ms),
    translate var(--motion-reveal) var(--motion-ease) var(--reveal-delay, 0ms);
}
html.motion .is-in { opacity: 1; translate: none; }

html.motion .site-header__inner { animation: motion-fade-down 600ms var(--motion-ease) both; }
@keyframes motion-fade-down { from { opacity: 0; translate: 0 -8px; } }

@media (max-width: 767px) and (prefers-reduced-motion: no-preference) {
  .nav-drawer {
    opacity: 1;
    transition: opacity var(--motion-drawer) var(--motion-ease), display var(--motion-drawer) allow-discrete;
  }
  .nav-drawer[hidden] { opacity: 0; }
  .nav-drawer__inner { translate: none; transition: translate var(--motion-drawer) var(--motion-ease); }
  .nav-drawer[hidden] .nav-drawer__inner { translate: 0 -12px; }
  @starting-style {
    .nav-drawer { opacity: 0; }
    .nav-drawer__inner { translate: 0 -12px; }
  }
}

html section[tabindex="-1"]:focus, html header[tabindex="-1"]:focus { outline: none; }