/* Subtle functional-card motion using the homepage's existing theme tokens. */
.knowledge-map-home #quick-access .km-workflow-group {
    position: relative;
    isolation: isolate;
    transition: transform 240ms cubic-bezier(.2,.8,.2,1),
        border-color 200ms ease, box-shadow 240ms ease;
}

.knowledge-map-home #quick-access .km-workflow-group::before {
    content: '';
    position: absolute;
    z-index: -1;
    inset: 0;
    border-radius: inherit;
    background: linear-gradient(155deg, var(--km-polish-soft), transparent 60%);
    opacity: 0;
    pointer-events: none;
    transition: opacity 240ms ease;
}

.knowledge-map-home #quick-access .km-workflow-number {
    animation: none;
    transform-origin: center;
    transition: transform 240ms cubic-bezier(.2,.8,.2,1),
        background-color 200ms ease, box-shadow 240ms ease;
}

.knowledge-map-home #quick-access .km-workflow-links .km-shortcut {
    align-items: center;
    transition: background-color 180ms ease, border-color 180ms ease;
}

.knowledge-map-home #quick-access .km-workflow-links .km-shortcut > i {
    display: inline-flex;
    justify-content: center;
    align-items: center;
    gap: 4px;
    width: 46px;
    height: 28px;
    padding: 0;
    border-radius: 8px;
    background: transparent;
    color: var(--km-blue);
    font-size: 11px;
    font-style: normal;
    white-space: nowrap;
    transform: none;
    transition: color 180ms ease, background-color 180ms ease;
}

.knowledge-map-home #quick-access .km-workflow-enter {
    opacity: 1;
    transition: opacity 200ms ease, transform 200ms ease;
}

/* Keyboard access gives the same feedback without relying on a pointer. */
.knowledge-map-home #quick-access .km-workflow-group:focus-within {
    border-color: var(--km-polish-accent);
    box-shadow: 0 12px 30px rgb(28 67 116 / 10%);
}

.knowledge-map-home #quick-access .km-workflow-group:focus-within::before {
    opacity: .75;
}

.knowledge-map-home #quick-access .km-shortcut:focus-visible > i,
.knowledge-map-home #quick-access .km-shortcut:active > i {
    background: var(--km-blue);
    color: #fff;
}

@media (hover: hover) and (pointer: fine) and (min-width: 621px) {
    .knowledge-map-home #quick-access .km-workflow-enter {
        opacity: 0;
        transform: translateX(-4px);
    }

    .knowledge-map-home #quick-access .km-workflow-group:hover,
    .knowledge-map-home #quick-access .km-workflow-group:focus-within {
        transform: translateY(-6px);
        border-color: var(--km-polish-accent);
        box-shadow: 0 16px 36px rgb(28 67 116 / 12%);
    }

    .knowledge-map-home #quick-access .km-workflow-group:hover::before {
        opacity: .75;
    }

    .knowledge-map-home #quick-access .km-workflow-group:hover .km-workflow-number,
    .knowledge-map-home #quick-access .km-workflow-group:focus-within .km-workflow-number {
        transform: scale(1.14);
        box-shadow: 0 5px 12px rgb(28 67 116 / 10%);
    }

    .knowledge-map-home #quick-access .km-workflow-group:hover .km-workflow-enter,
    .knowledge-map-home #quick-access .km-workflow-group:focus-within .km-workflow-enter {
        opacity: 1;
        transform: none;
    }

    .knowledge-map-home #quick-access .km-workflow-group:hover .km-shortcut > i,
    .knowledge-map-home #quick-access .km-workflow-group:focus-within .km-shortcut > i {
        background: var(--km-polish-soft);
    }

    .knowledge-map-home #quick-access .km-workflow-group .km-shortcut:hover > i,
    .knowledge-map-home #quick-access .km-workflow-group .km-shortcut:focus-visible > i {
        background: var(--km-blue);
        color: #fff;
    }
}

/* Touch targets stay visible and activate on the first tap. */
@media (hover: none), (pointer: coarse), (max-width: 620px) {
    .knowledge-map-home #quick-access .km-workflow-links .km-shortcut > i {
        width: 20px;
        height: 24px;
        background: var(--km-polish-soft);
    }

    .knowledge-map-home #quick-access .km-workflow-enter {
        display: none;
    }

    .knowledge-map-home #quick-access .km-workflow-links .km-shortcut:active {
        border-color: var(--km-polish-accent);
        background: var(--km-polish-soft);
    }

    .knowledge-map-home #quick-access .km-workflow-links .km-shortcut:active > i {
        background: var(--km-blue);
        color: #fff;
    }
}

@media (prefers-reduced-motion: reduce) {
    .knowledge-map-home #quick-access .km-workflow-group,
    .knowledge-map-home #quick-access .km-workflow-group:hover,
    .knowledge-map-home #quick-access .km-workflow-group:focus-within,
    .knowledge-map-home #quick-access .km-workflow-group::before,
    .knowledge-map-home #quick-access .km-workflow-number,
    .knowledge-map-home #quick-access .km-workflow-group:hover .km-workflow-number,
    .knowledge-map-home #quick-access .km-workflow-group:focus-within .km-workflow-number,
    .knowledge-map-home #quick-access .km-workflow-links .km-shortcut,
    .knowledge-map-home #quick-access .km-workflow-links .km-shortcut > i,
    .knowledge-map-home #quick-access .km-workflow-enter {
        animation: none;
        transition: none;
        transform: none;
    }
}