/* Final interaction layer: loaded after the entrance-animation stylesheet. */

.button:not(.secondary),
.aerial-callout .button.secondary {
  background-image: none;
  transition:
    transform 150ms cubic-bezier(.22, 1, .36, 1),
    box-shadow 150ms cubic-bezier(.22, 1, .36, 1);
  -webkit-tap-highlight-color: transparent;
}

/* Keep every CTA's resting palette intact. Interaction is communicated only
   by the existing hard-shadow press movement. */
.button:not(.secondary),
.button:not(.secondary):hover,
.button:not(.secondary):focus-visible {
  border-color: var(--line);
  background-color: var(--accent);
  color: #fffdf7;
  opacity: 1;
}

.hero .button:not(.secondary),
.hero .button:not(.secondary):hover,
.hero .button:not(.secondary):focus-visible {
  border-color: #fffdf7;
  background-color: var(--accent);
  color: #fffdf7;
}

.aerial-callout .button.secondary,
.aerial-callout .button.secondary:hover,
.aerial-callout .button.secondary:focus-visible {
  border-color: #111;
  background-color: #111;
  color: #fffdf7;
  opacity: 1;
}

/* Once a button has entered, release the animation's transform so hover can
   move the whole control instead of fighting the animation fill state. */
.button.content-motion.motion-complete,
.button.content-motion.is-motion-visible.motion-complete {
  animation: none !important;
  opacity: 1 !important;
  filter: none !important;
  transform: translate3d(0, 0, 0);
  transition-delay: 0s !important;
  will-change: auto;
}

.button:not(.secondary):focus-visible {
  box-shadow: 2px 2px 0 var(--line);
  transform: translate(3px, 3px);
}

.hero .button:not(.secondary):focus-visible {
  box-shadow: 2px 2px 0 #fffdf7;
}

.aerial-callout .button.secondary:focus-visible {
  box-shadow: 2px 2px 0 #111;
  transform: translate(3px, 3px);
}

@media (hover: hover) and (pointer: fine) {
  .button:not(.secondary):hover {
    box-shadow: 2px 2px 0 var(--line);
    transform: translate(3px, 3px);
  }

  .hero .button:not(.secondary):hover {
    box-shadow: 2px 2px 0 #fffdf7;
  }

  .aerial-callout .button.secondary:hover {
    box-shadow: 2px 2px 0 #111;
    transform: translate(3px, 3px);
  }
}

@media (hover: none), (pointer: coarse) {
  .button:hover {
    transform: none;
  }
}