/* ==========================================================================
   AGRIYANA — The Agriyana Line: hover behaviour

   The diagram already draws its own wires, circulates packets in both
   directions and swaps a readout as you move across it. What it did not do was
   respond to a specific stage in a way that meant anything — every node did the
   same generic lift.

   Each of the ten stages now animates its own icon in a way that describes what
   that stage actually does. A sprout grows. A scale tips. A snowflake turns
   slowly, the way something cold does. The tractor rolls forward. The loop
   marker rotates a full turn, because that stage IS the loop closing.

   No WebGL. Ten 24px line icons do not need a 3D renderer, and pulling one in
   would cost more than the whole rest of the page — every one of these is a
   transform on an element that is already on screen, which is the difference
   between motion that feels instant and motion that feels expensive.

   Loads after dataflow.css.
   ========================================================================== */

/* ------------------------------------------------------------------ focus
   Hovering one stage quiets the other nine, so the eye is not asked to hold
   ten equally-bright boxes while reading one. `:has()` degrades silently: in a
   browser without it nothing dims and the diagram is exactly as it was. */
.flow-stage:has(.flow-node:hover) .flow-node:not(:hover),
.flow-stage:has(.flow-node:focus-visible) .flow-node:not(:focus-visible) {
  opacity: .34;
  filter: saturate(.45);
}
.flow-node { transition: opacity var(--dur-2) var(--ease-out), filter var(--dur-2) var(--ease-out), transform var(--dur-2) var(--ease-soil), border-color var(--dur-2) var(--ease-out); }

/* the hovered stage lifts a little and its step number brightens */
.flow-node:hover,
.flow-node:focus-visible { transform: translateY(-3px); }
.flow-node:hover .fn-step,
.flow-node:focus-visible .fn-step { color: var(--node-tint, var(--band-sprout)); }
.fn-step { transition: color var(--dur-2) var(--ease-out); }

/* ------------------------------------------------------------------ icons */
.fn-icon {
  transform-origin: 50% 50%;
  transition: transform var(--dur-2) var(--ease-spring);
  will-change: auto;
}

/* 01 FARM — a sprout grows from its base */
.flow-node[data-node='farm']:hover .fn-icon,
.flow-node[data-node='farm']:focus-visible .fn-icon {
  transform-origin: 50% 100%;
  animation: fn-grow 900ms var(--ease-soil);
}
@keyframes fn-grow {
  0%   { transform: scaleY(.55) translateY(2px); }
  60%  { transform: scaleY(1.08); }
  100% { transform: scaleY(1); }
}

/* 02 HARVEST — the basket tips, the way one does when it is being filled */
.flow-node[data-node='harvest']:hover .fn-icon,
.flow-node[data-node='harvest']:focus-visible .fn-icon {
  animation: fn-tip 900ms var(--ease-spring);
}
@keyframes fn-tip {
  0%, 100% { transform: rotate(0); }
  35%      { transform: rotate(-13deg); }
  70%      { transform: rotate(6deg); }
}

/* 03 GRADING — the scale settles, which is the whole job of that stage */
.flow-node[data-node='grading']:hover .fn-icon,
.flow-node[data-node='grading']:focus-visible .fn-icon {
  animation: fn-weigh 1200ms var(--ease-out);
}
@keyframes fn-weigh {
  0%   { transform: rotate(0); }
  25%  { transform: rotate(9deg); }
  50%  { transform: rotate(-6deg); }
  75%  { transform: rotate(3deg); }
  100% { transform: rotate(0); }
}

/* 04 COLD CHAIN — slow, even rotation. Cold things do not hurry. */
.flow-node[data-node='coldchain']:hover .fn-icon,
.flow-node[data-node='coldchain']:focus-visible .fn-icon {
  animation: fn-turn 2600ms linear infinite;
}
@keyframes fn-turn { to { transform: rotate(360deg); } }

/* 05 CITY HUB — the parcel lifts off the pile */
.flow-node[data-node='hub']:hover .fn-icon,
.flow-node[data-node='hub']:focus-visible .fn-icon {
  animation: fn-lift 800ms var(--ease-spring);
}
@keyframes fn-lift {
  0%, 100% { transform: translateY(0); }
  45%      { transform: translateY(-4px) scale(1.06); }
}

/* 06 HOME — arrival: settles down rather than bouncing up */
.flow-node[data-node='home']:hover .fn-icon,
.flow-node[data-node='home']:focus-visible .fn-icon {
  animation: fn-arrive 760ms var(--ease-soil);
}
@keyframes fn-arrive {
  0%   { transform: translateY(-6px); opacity: .5; }
  100% { transform: translateY(0); opacity: 1; }
}

/* 07 AGRIYANA — one full turn. This stage IS the loop closing. */
.flow-node[data-node='agriyana']:hover .fn-icon,
.flow-node[data-node='agriyana']:focus-visible .fn-icon {
  animation: fn-loop 1100ms var(--ease-in-out);
}
@keyframes fn-loop { to { transform: rotate(360deg); } }

/* 08 MACHINERY — rolls forward and stops, like a tractor pulling away */
.flow-node[data-node='machinery']:hover .fn-icon,
.flow-node[data-node='machinery']:focus-visible .fn-icon {
  animation: fn-roll 900ms var(--ease-soil);
}
@keyframes fn-roll {
  0%   { transform: translateX(-5px); }
  70%  { transform: translateX(3px); }
  100% { transform: translateX(0); }
}

/* 09 BIO-INPUTS — the flask swirls */
.flow-node[data-node='bio']:hover .fn-icon,
.flow-node[data-node='bio']:focus-visible .fn-icon {
  animation: fn-swirl 1400ms var(--ease-in-out);
}
@keyframes fn-swirl {
  0%, 100% { transform: rotate(0) translateX(0); }
  25%      { transform: rotate(-8deg) translateX(-2px); }
  75%      { transform: rotate(8deg) translateX(2px); }
}

/* 10 SEED — a slow pulse, the pause before the next cycle */
.flow-node[data-node='seed']:hover .fn-icon,
.flow-node[data-node='seed']:focus-visible .fn-icon {
  animation: fn-pulse 1500ms var(--ease-in-out) infinite;
}
@keyframes fn-pulse {
  0%, 100% { transform: scale(1); }
  50%      { transform: scale(1.14); }
}

/* ------------------------------------------------------------------ readout
   The panel under the diagram changes as you move across it, so its arrival
   needs to be quick — anything slower than this reads as lag rather than
   as a transition. */
.flow-readout { transition: border-color var(--dur-2) var(--ease-out); }
.fr-key .ico,
.fr-key-text,
.fr-body,
.fr-go-text { transition: opacity var(--dur-1) var(--ease-out); }
.flow-readout.is-swapping .fr-key-text,
.flow-readout.is-swapping .fr-body,
.flow-readout.is-swapping .fr-go-text { opacity: 0; }

/* ------------------------------------------------------------------ legend */
.flow-legend span { transition: opacity var(--dur-2) var(--ease-out); }
.flow-legend span i { transition: transform var(--dur-2) var(--ease-spring); }
.flow-legend span:hover i { transform: scale(1.5); }

/* ------------------------------------------------------------------ reduced motion
   Every animation above is decorative. None of them carries information that
   is not also in the label, so they all simply stop. */
@media (prefers-reduced-motion: reduce) {
  .flow-node[data-node] .fn-icon { animation: none !important; }
  .flow-node:hover, .flow-node:focus-visible { transform: none; }
  .flow-stage:has(.flow-node:hover) .flow-node:not(:hover) { opacity: 1; filter: none; }
}