[data-menu][hidden],
[data-tab-panel][hidden],
[data-engine-graphic][hidden] {
  display: none;
}

[data-menu="mobile"] {
  transition: opacity 100ms ease-out, transform 100ms ease-out;
}

[data-menu="mobile"].is-opening,
[data-menu="mobile"].is-closing {
  transform: scale(.95);
  opacity: 0;
}

[data-menu="mobile"].is-closing {
  transition-duration: 75ms;
}

[data-engine-graphic] {
  transition: opacity 300ms ease-in-out;
}

[role="tab"]:focus-visible {
  --tw-ring-opacity: 1;
  --tw-ring-color: rgb(89 216 149 / var(--tw-ring-opacity));
  --tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);
  --tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(3px + var(--tw-ring-offset-width)) var(--tw-ring-color);
  box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 #0000);
}

[data-entry="review-line"] {
  transform: scale(0);
  opacity: 0;
}

[data-entry="review-card"] {
  transform: translateX(-50%);
  opacity: 0;
}

[data-entry="monitoring-line"] {
  transform: scale(.5);
  opacity: 0;
}

[data-entry="monitoring-card"] {
  transform: scale(.75);
  opacity: 0;
}

/* Respect a reduced-motion preference. The security page carries a 100s infinite
 * background slide and several entry transitions; readers who ask for less
 * motion should get none of it. Font Awesome's own animations are already
 * covered by a matching block in styles.css. */
@media (prefers-reduced-motion: reduce) {
  .bg-infinite-slide-x {
    animation: none;
  }

  [data-menu],
  [data-engine-graphic],
  [data-entry],
  .anim-slow,
  .anim-medium,
  .anim-delayed {
    transition: none;
  }

  [data-entry] {
    transform: none;
    opacity: 1;
  }
}