/* ─── Semantic Zoom Culling ──────────────────────────────────────────────────
 *
 * ViewportManager.js toggles one of three mutually-exclusive classes on
 * .canvas-container, debounced 700ms after zoom/pan settles:
 *
 *   .zoom-full      zoom ≥ 0.45   → render everything
 *   .zoom-mid       0.18 – 0.45   → hide secondary text, keep headers + ports
 *   .zoom-overview  zoom < 0.18   → hide all content, nodes become header pills
 *
 * HICCUP-FREE RULE: only animate opacity + visibility.
 * Never animate max-height, padding, margin, or display — those force
 * a full layout reflow and cause the visible jank/hiccup on class apply.
 * ─────────────────────────────────────────────────────────────────────────── */

/* Promote culled elements to their own compositor layer up front.
   This prevents the browser from having to repaint surrounding content
   when opacity changes. */
.node-desc,
.node-property>label,
.port-label,
.port-label>small,
.port-field,
.node-content {
    will-change: opacity;
}

/* Transition ONLY opacity + visibility — zero layout cost. */
.node-desc,
.node-property>label,
.port-label,
.port-label>small,
.port-field {
    transition: opacity 0.25s ease-out, visibility 0.25s ease-out;
}

.node-content {
    transition: opacity 0.25s ease-out, visibility 0.25s ease-out;
}

/* ── Level 2 · Mid zoom (0.18 – 0.45) ───────────────────────────────────────
   Keep:  node header, port circles, node chrome
   Hide:  port label text, type annotations, description, property labels,
          inline input/select fields (too small to read or interact with)       */

.canvas-container.zoom-mid .port-label,
.canvas-container.zoom-mid .port-label>small {
    visibility: hidden;
    opacity: 0;
}

.canvas-container.zoom-mid .node-desc {
    visibility: hidden;
    opacity: 0;
}

.canvas-container.zoom-mid .node-property>label {
    visibility: hidden;
    opacity: 0;
}

.canvas-container.zoom-mid .port-field {
    visibility: hidden;
    opacity: 0;
}

/* ── Level 3 · Overview zoom (< 0.18) ───────────────────────────────────────
   Keep:  node header (dimmed)
   Hide:  entire node-content — opacity only, NO layout changes.               */

.canvas-container.zoom-overview .node-content {
    visibility: hidden;
    opacity: 0;
    /* Do NOT touch max-height / padding / margin here — they cause reflow. */
}

/* Fade the header so the canvas reads as a silhouette map */
.canvas-container.zoom-overview .node-header {
    opacity: 0.5;
    transition: opacity 0.25s ease-out;
}