/* Small feedback on existing controls; layouts and device compositions stay static. */
.hero-lifestyle .button,
.launch-section .launch-notify {
  transition: background-color 180ms ease, color 180ms ease, transform 160ms ease;
}

.hero-lifestyle .button:hover,
.launch-section .launch-notify:hover {
  background-color: #FFD200;
  transform: none;
}

.hero-lifestyle .button > span,
.launch-section .launch-notify > span {
  display: inline-block;
  transition: transform 220ms cubic-bezier(.2,.65,.25,1);
}

@media (hover: hover) and (pointer: fine) {
  .hero-lifestyle .button:hover,
  .launch-section .launch-notify:hover {
    background-color: #F3C900;
  }

  .hero-lifestyle .button:hover > span,
  .launch-section .launch-notify:hover > span {
    transform: translateX(4px);
  }
}

.hero-lifestyle .button:focus-visible,
.launch-section .launch-notify:focus-visible {
  background-color: #F3C900;
}

.hero-lifestyle .button:focus-visible > span,
.launch-section .launch-notify:focus-visible > span {
  transform: translateX(4px);
}

.hero-lifestyle .button:active,
.launch-section .launch-notify:active {
  background-color: #EEC400;
  transform: translateY(1px);
}

.hero-lifestyle .button:active > span,
.launch-section .launch-notify:active > span {
  transform: translateX(2px);
}

.navigation > a,
.site-footer .footer-main nav > a {
  background-image: linear-gradient(#FFD200, #FFD200);
  background-repeat: no-repeat;
  background-position: center bottom;
  background-size: 0% 2px;
  transition: background-size 220ms ease, color 180ms ease;
}

.site-footer .footer-main nav > a {
  background-position: center calc(100% - 4px);
}

.navigation > a:hover,
.navigation > a:focus-visible,
.site-footer .footer-main nav > a:hover,
.site-footer .footer-main nav > a:focus-visible {
  background-size: 100% 2px;
}

.navigation > a:hover,
.navigation > a:focus-visible {
  opacity: 1;
  color: inherit;
}

.site-footer .footer-main nav > a:hover,
.site-footer .footer-main nav > a:focus-visible {
  color: #191919;
}

.motion-enabled .focus-section .reveal,
.motion-enabled .launch-section .launch-content.reveal {
  transition-duration: 650ms;
}

.motion-enabled .focus-section .reveal.pending,
.motion-enabled .launch-section .launch-content.reveal.pending {
  transform: translateY(12px);
}

@media (prefers-reduced-motion: reduce) {
  .hero-lifestyle .button,
  .hero-lifestyle .button > span,
  .launch-section .launch-notify,
  .launch-section .launch-notify > span {
    transform: none !important;
    transition: none !important;
  }

  .navigation > a,
  .site-footer .footer-main nav > a {
    transition: none !important;
  }

  .motion-enabled .focus-section .reveal,
  .motion-enabled .focus-section .reveal.pending,
  .motion-enabled .launch-section .launch-content.reveal,
  .motion-enabled .launch-section .launch-content.reveal.pending {
    opacity: 1;
    transform: none;
    transition: none;
  }
}