/* Classing motion layer inspired by React Bits: Spotlight Card and Fade Content.
 * React Bits: https://github.com/DavidHDev/react-bits
 * This is a lightweight native-CSS adaptation for the non-React service console. */
:root {
  --cl-motion-ease: cubic-bezier(.22, 1, .36, 1);
  --cl-motion-fast: 180ms;
  --cl-motion-enter: 460ms;
}
@media (prefers-reduced-motion: no-preference) {
  .cl-motion-target.cl-motion-waiting {
    opacity: .84;
    transform: translate3d(0, 12px, 0);
  }
  .cl-motion-target.cl-motion-visible {
    animation: cl-content-appear var(--cl-motion-enter) var(--cl-motion-ease) both;
  }
  .metric-grid > .metric-card:nth-child(2),
  .runtime-grid > .runtime-card:nth-child(2) { animation-delay: 45ms; }
  .metric-grid > .metric-card:nth-child(3),
  .runtime-grid > .runtime-card:nth-child(3) { animation-delay: 90ms; }
  .metric-grid > .metric-card:nth-child(4),
  .runtime-grid > .runtime-card:nth-child(4) { animation-delay: 135ms; }
  @keyframes cl-content-appear {
    from { opacity: .84; transform: translate3d(0, 12px, 0); }
    to { opacity: 1; transform: translate3d(0, 0, 0); }
  }
  .cl-spotlight {
    position: relative;
    isolation: isolate;
    overflow: hidden;
  }
  .cl-spotlight::after {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: inherit;
    pointer-events: none;
    background: radial-gradient(
      200px circle at var(--cl-spot-x, 50%) var(--cl-spot-y, 50%),
      color-mix(in srgb, var(--md-primary, #246bce) 18%, transparent),
      transparent 80%
    );
    opacity: 0;
    transition: opacity 260ms ease-out;
  }
  .cl-spotlight[data-cl-hover="true"]::after { opacity: 1; }
  .panel, .runtime-panel {
    transition: box-shadow 240ms var(--cl-motion-ease),
      transform 240ms var(--cl-motion-ease);
  }
  @media (hover: hover) and (pointer: fine) {
    .panel:hover, .runtime-panel:hover {
      box-shadow: 0 10px 32px rgba(31, 50, 86, .07);
    }
    .nav-item:hover .nav-icon { transform: scale(1.06); }
  }
  .nav-icon { transition: transform var(--cl-motion-fast) var(--cl-motion-ease); }
  .primary-button, .quiet-button, .tonal-button, .material-fab {
    transition-duration: var(--cl-motion-fast);
  }
  .primary-button:active, .quiet-button:active, .tonal-button:active {
    transform: scale(.98);
  }
}
@media (prefers-reduced-motion: reduce) {
  .cl-motion-target, .cl-motion-target.cl-motion-waiting,
  .cl-motion-target.cl-motion-visible { opacity: 1 !important; transform: none !important; animation: none !important; }
  .cl-spotlight::after { display: none !important; }
}