/* Interaction layer for the rendered prototype. The design compiler keeps
   cursor styles on actionable elements, even when template event attributes
   are removed from the final DOM. */
[style*="cursor: pointer"] {
  transition: transform 180ms cubic-bezier(.2,.8,.2,1),
              box-shadow 180ms ease,
              color 180ms ease,
              background-color 180ms ease,
              border-color 180ms ease,
              filter 180ms ease,
              opacity 180ms ease !important;
  will-change: transform;
}

[style*="cursor: pointer"]:focus-visible {
  outline: 3px solid rgba(47,107,88,.28);
  outline-offset: 3px;
}

@media (hover:hover) and (pointer:fine) {
  [style*="cursor: pointer"]:hover {
    transform: translateY(-2px);
    filter: brightness(1.02);
  }

  a[style*="cursor: pointer"][style*="border-radius"]:hover {
    transform: translateY(-5px);
    box-shadow: 0 16px 36px rgba(27,31,36,.16) !important;
  }

  header [style*="cursor: pointer"]:hover {
    transform: translateY(-1px);
    opacity: .72;
    box-shadow: none !important;
  }
}

[style*="cursor: pointer"]:active {
  transform: translateY(0) scale(.985) !important;
  transition-duration: 80ms !important;
}

@media (prefers-reduced-motion: reduce) {
  [style*="cursor: pointer"] {
    transition: color 120ms ease, background-color 120ms ease, opacity 120ms ease !important;
    will-change: auto;
  }

  [style*="cursor: pointer"]:hover,
  [style*="cursor: pointer"]:active {
    transform: none !important;
  }
}