feat: lift a graph node on hover

packages/interloper-app/app/app/assets/css/main.css

@@ -107,8 +107,11 @@
     --id-chip-text: #1b5fbf;
     --graph-model: #6c5ce7;
     --graph-card-shadow: 0 2px 8px rgb(11 42 66 / 0.07);
+    --graph-card-shadow-raised: 0 6px 16px rgb(11 42 66 / 0.11);
     --graph-asset-shadow: 0 1px 4px rgb(11 42 66 / 0.06);
+    --graph-asset-shadow-raised: 0 4px 12px rgb(11 42 66 / 0.1);
     --graph-layer-shadow: 0 2px 6px rgb(11 42 66 / 0.06);
+    --graph-layer-shadow-raised: 0 4px 10px rgb(11 42 66 / 0.09);
 }
 
 /* Design mono section label ("eyebrow"): pair with a text color utility. */
@@ -194,8 +197,11 @@
     --id-chip-text: color-mix(in srgb, var(--ui-primary) 70%, white);
     --graph-model: #9d8ff0;
     --graph-card-shadow: 0 2px 8px rgb(0 0 0 / 0.45);
+    --graph-card-shadow-raised: 0 6px 16px rgb(0 0 0 / 0.55);
     --graph-asset-shadow: 0 1px 4px rgb(0 0 0 / 0.4);
+    --graph-asset-shadow-raised: 0 4px 12px rgb(0 0 0 / 0.5);
     --graph-layer-shadow: 0 2px 6px rgb(0 0 0 / 0.4);
+    --graph-layer-shadow-raised: 0 4px 10px rgb(0 0 0 / 0.5);
 
     --vf-node-bg: var(--ui-bg-elevated);
     --vf-node-text: var(--color-gray-400);
@@ -216,6 +222,42 @@
     box-shadow: var(--graph-layer-shadow);
 }
 
+/* Hovering anywhere on a node lifts it: the top card and the folded layers under
+   it travel together, as one stack. Driven from the node root so the corner
+   badges, which sit over the card but outside it, don't break the hover. Worn by
+   collapsed cards only: an expanded container's members are separate canvas
+   nodes that wouldn't travel with it. */
+.graph-raise,
+.graph-stack-layer {
+    transition: transform 150ms ease-out, box-shadow 150ms ease-out;
+}
+
+.graph-node:hover .graph-raise,
+.graph-node:hover .graph-stack-layer {
+    transform: translateY(-2px);
+}
+
+/* Only the floor of the stack deepens its shadow — the one card actually casting
+   onto the canvas. The shadows between the folded layers stay put. */
+.graph-node:hover .graph-layer.graph-stack-floor {
+    box-shadow: var(--graph-layer-shadow-raised);
+}
+
+.graph-node:hover .graph-card.graph-stack-floor {
+    box-shadow: var(--graph-card-shadow-raised);
+}
+
+.graph-node:hover .graph-asset.graph-stack-floor {
+    box-shadow: var(--graph-asset-shadow-raised);
+}
+
+@media (prefers-reduced-motion: reduce) {
+    .graph-node:hover .graph-raise,
+    .graph-node:hover .graph-stack-layer {
+        transform: none;
+    }
+}
+
 /* Identifier chip: a discriminator or other machine id shown next to a name. */
 .id-chip {
     padding: 2px 8px;

packages/interloper-app/app/app/components/graph/AssetNode.vue

@@ -151,7 +151,7 @@ const contextMenuItems = computed<ContextMenuItem[][]>(() => {
 
 <template>
     <UContextMenu :items="graphReadonly ? [] : contextMenuItems">
-        <div class="relative w-[256px] transition-opacity duration-200"
+        <div class="graph-node relative w-[256px] transition-opacity duration-200"
              :class="shouldFade && 'opacity-25'">
             <Handle v-if="showTargetHandle"
                     type="target"
@@ -212,7 +212,7 @@ const contextMenuItems = computed<ContextMenuItem[][]>(() => {
                 <div class="text-xs">{{ destinationBadge.label }}</div>
             </GraphCornerBadge>
 
-            <div class="graph-asset overflow-hidden rounded-xl border bg-default"
+            <div class="graph-asset graph-raise graph-stack-floor overflow-hidden rounded-xl border bg-default"
                  :class="frameClass">
                 <div class="flex h-10 items-center gap-[9px] border-b border-[var(--graph-head-line)] bg-elevated px-3.5">
                     <span v-if="standalone"

packages/interloper-app/app/app/components/graph/CardStack.vue

@@ -16,7 +16,10 @@ withDefaults(defineProps<{
     <span v-for="i in layers"
           :key="i"
           aria-hidden="true"
-          class="pointer-events-none absolute rounded-xl border"
-          :class="nested ? 'h-5 border-[var(--graph-nested-line)] bg-[var(--graph-nested-bg)]' : ['graph-layer h-6 bg-default', borderClass]"
+          class="graph-stack-layer pointer-events-none absolute rounded-xl border"
+          :class="[
+              i === layers && 'graph-stack-floor',
+              nested ? 'h-5 border-[var(--graph-nested-line)] bg-[var(--graph-nested-bg)]' : ['graph-layer h-6 bg-default', borderClass],
+          ]"
           :style="{ left: `${8 * i}px`, right: `${8 * i}px`, bottom: `${-6 * i}px`, zIndex: -i }" />
 </template>

packages/interloper-app/app/app/components/graph/SourceNode.vue

@@ -125,14 +125,19 @@ const isMaterializing = computed(() =>
 
 const headHeight = computed(() => props.nested ? 64 : 84)
 const showChip = computed(() => !!props.source.discriminator && props.source.discriminator !== props.source.name)
-const frameClass = computed(() => props.nested
-    ? 'rounded-[14px] border border-[var(--graph-nested-line)] bg-[var(--graph-nested-bg)]'
-    : ['graph-card rounded-2xl border border-[var(--graph-card-line)] bg-default', props.selected && 'outline-2 outline-primary outline-offset-4'])
+const frameClass = computed(() => [
+    collapsed.value && 'graph-raise',
+    // With layers folded under it the card is no longer what the stack casts from.
+    collapsed.value && props.layers === 0 && 'graph-stack-floor',
+    props.nested
+        ? 'rounded-[14px] border border-[var(--graph-nested-line)] bg-[var(--graph-nested-bg)]'
+        : ['graph-card rounded-2xl border border-[var(--graph-card-line)] bg-default', props.selected && 'outline-2 outline-primary outline-offset-4'],
+])
 </script>
 
 <template>
     <UContextMenu :items="graphReadonly ? [] : contextMenuItems">
-        <div class="relative h-full w-full transition-opacity duration-200"
+        <div class="graph-node relative h-full w-full transition-opacity duration-200"
              :class="shouldFade && 'opacity-25'">
             <Handle id="source-target"
                     type="target"

packages/interloper-app/app/app/components/graph/SourceTypeNode.vue

@@ -46,7 +46,7 @@ const issueCount = computed(() =>
 </script>
 
 <template>
-    <div class="relative h-full w-full">
+    <div class="graph-node relative h-full w-full">
         <Handle id="group-target"
                 type="target"
                 :position="Position.Left"
@@ -64,7 +64,8 @@ const issueCount = computed(() =>
         <div class="relative isolate h-full w-full">
             <GraphCardStack v-if="!open"
                             :layers="layers" />
-            <div class="graph-card relative z-[1] flex h-full w-full flex-col rounded-2xl border border-[var(--graph-card-line)] bg-default">
+            <div class="graph-card relative z-[1] flex h-full w-full flex-col rounded-2xl border border-[var(--graph-card-line)] bg-default"
+                 :class="[!open && 'graph-raise', !open && layers === 0 && 'graph-stack-floor']">
                 <div class="flex h-[76px] shrink-0 items-center gap-3.5 px-5">
                     <div class="flex size-9 shrink-0 items-center justify-center rounded-[10px] bg-elevated">
                         <UIcon :name="icon"