/* Aulendra motion styles. Transform and opacity only. Hover effects are gated by (hover:hover) and
   (pointer:fine). Without JavaScript the crossfade panels are plain flow and nothing is hidden. */

/* Press and hover feedback on calls to action. */
.button {
  transition: transform var(--a-d-press) var(--a-ease), background-color var(--a-d-fast) var(--a-ease);
}
.button:active {
  transform: scale(.97);
}
@media (hover: hover) and (pointer: fine) {
  .button:hover {
    transform: translate3d(0,-1px,0);
  }
}

/* Feature crossfade: panels stack only once motion.js has marked the document ready. */
.motion-ready [data-motion~="crossfade"] {
  display: grid;
}
.motion-ready [data-motion~="crossfade"] > [data-motion-panel] {
  grid-area: 1 / 1;
  opacity: 0;
  pointer-events: none;
  transition: opacity var(--a-d-base) var(--a-ease-inout);
}
.motion-ready [data-motion~="crossfade"] > [data-motion-panel].is-active {
  opacity: 1;
  pointer-events: auto;
}
/* Keyboard selection is instant: no transition. */
[data-motion~="crossfade"][data-instant="true"] > [data-motion-panel] {
  transition: none;
}

@media (prefers-reduced-motion: reduce) {
  .button,
  .button:active,
  .button:hover {
    transition: opacity var(--a-d-press) linear;
    transform: none;
  }
  .motion-ready [data-motion~="crossfade"] > [data-motion-panel] {
    transition: opacity 150ms linear;
  }
}