/* flexforest default stylesheet -- motion + structure only. Colours, fills, and strokes
   are the app's; this file owns the cascade that makes the view move. It is the source of
   truth for timing: the view JS reads --ff-rate / --ff-fade to size the camera glide and
   the leaver sweep, and writes a per-node --ff-d (a scene-px distance from the wave origin)
   that CSS turns into each node's opacity delay. Override the colour rules in your own
   sheet; override these custom properties to retune the motion. Do not move the durations
   into JS -- if 0.3s lives here, this is where it lives.

   Two timelines, enforced by where the delay lands:
     - position (transform on nodes, d on edges) transitions with NO delay  -> one shot,
       every survivor and every line glides to its final place together;
     - presence (opacity) transitions WITH the per-node delay                -> ripples
       outward from the origin as nodes enter/leave.
   That split is the whole continuity model: reflow is instant-and-together, only
   appearance/disappearance waves. */
:root {
	--ff-glide: .3s;    /* position glide: node transform + edge d */
	--ff-fade: .25s;    /* presence fade: opacity */
	--ff-rate: .667;    /* ms of delay per scene-px of wave radius (1 / 1.5 px-per-ms) */
	--ff-chase: 150;    /* ms the build wavefront trails the destroy wavefront */
	--ff-edge-inset: 12.5px;   /* how far an edge stops short of a node to clear its fold tag */
}

/* Each node carries its own --ff-d (default 0; the view overrides it per render). The
   transform transition has an explicit 0s delay so the reflow never inherits the ripple;
   only opacity is delayed. */
.node, .edge { --ff-d: 0; }
.node { transition: transform var(--ff-glide) ease 0s,
                    opacity var(--ff-fade) ease calc(var(--ff-d) * var(--ff-rate) * 1ms); }
.edge { transition: d var(--ff-glide) ease 0s,
                    opacity var(--ff-fade) ease calc(var(--ff-d) * var(--ff-rate) * 1ms); }
/* Enter and leave are the same resting state -- opacity 0; the view toggles the class and
   the cascade fades each node in/out after its own delay. */
.node.enter, .node.leave, .edge.enter, .edge.leave { opacity: 0; }

/* Camera surface. touch-action:none hands every gesture to the view's pointer handling. */
.ff-graph { touch-action: none; cursor: grab; }
.ff-graph.grabbing { cursor: grabbing; }
/* During a pan, content must not eat the drag as a click. */
.ff-graph.grabbing .node { pointer-events: none; }

/* Fold tag chrome (the +/- toggles that hang off a node's top/bottom edge). Colours and
   text metrics come from the app; the pointer affordance is the library's. */
.ctoggle { cursor: pointer; }