/* ============================================================================
   ecosystem-motion.css — two authored graphic-motion compositions
   ----------------------------------------------------------------------------
   Loaded only on soffio.html and matchbox.html, after ecosystem-pages.css.
   Companion driver: assets/ecosystem-motion.js.

   Both compositions are inline SVG frame animations derived from Video
   Shotcraft recipe cards. Nothing is rendered to video, no stills are faked,
   and the markup in each SVG is the complete finished state, so a visitor
   without JavaScript, or with reduced motion, reads the settled diagram.

     01. Soffio    glow-flyline-moves, form B (flyline-arc), light-ground recipe
                   references/shots/effects/glow-flyline-moves.md
                   demos/effects/glow-flyline-moves/FlylineArc.tsx
     02. Matchbox  scan-bracket-sweep
                   references/shots/effects/scan-bracket-sweep.md
                   demos/effects/scan-bracket-sweep/ScanBracketSweep.tsx

   Card timings and mechanic notes live next to the code that copies them, in
   ecosystem-motion.js. Adaptations forced by this world (flat solids only, no
   gradients, no blur, Common Ground palette, page scale) are listed there too.

   Flat surfaces, hairline rules, no gradients, no blur, no drop shadows.
   White linework keeps a dark underlay rail so it reads on ivory and on the
   pale blue band.
   ========================================================================== */

/* ----------------------------------------------------------------------------
   00. Frame shared by both compositions
   ------------------------------------------------------------------------- */
.ec-motion {
  margin: clamp(28px, 3.4vw, 46px) 0 0;
  padding-top: clamp(18px, 2vw, 26px);
  border-top: 1px solid var(--ch-line-2);
}

.ec-motion-frame {
  max-width: 620px;
  margin: 0 auto;
}

.ec-motion-art {
  display: block;
  width: 100%;
  height: auto;
  overflow: visible;
}

.ec-motion text {
  font-family: var(--ch-ui);
  letter-spacing: -.01em;
}

.ec-motion-cap {
  max-width: 58ch;
  margin: 14px auto 0;
  font-size: .86rem;
  line-height: 1.55;
  color: var(--ch-body);
  text-align: center;
  text-wrap: pretty;
}

/* ----------------------------------------------------------------------------
   01. Soffio: flyline arc
   Three stages as flat plates; short bezier paths join the gaps between them,
   with a bright head leading a dimmer tail and the receiving plate answering.
   ------------------------------------------------------------------------- */
.ec-net-plate-fill {
  fill: var(--ch-ivory-2);
  stroke: var(--ch-line-2);
  stroke-width: 1;
}

.ec-net-name {
  font-size: 18px;
  font-weight: 600;
  fill: var(--ch-ink);
}

.ec-net-note {
  font-size: 15px;
  fill: var(--ch-body);
}

/* Dark rail under the white core: the light-ground recipe from the card. */
.ec-net-rail {
  fill: none;
  stroke: var(--ch-ink);
  stroke-width: 9;
  stroke-opacity: .82;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.ec-net-core {
  fill: none;
  stroke: #ffffff;
  stroke-width: 4.5;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.ec-net-seg {
  stroke: #ffffff;
  stroke-width: 4.5;
  stroke-linecap: butt;
}

/* Comet tail while a line is being drawn: created by the driver, never in markup. */
.ec-net-comet {
  fill: none;
  stroke: #ffffff;
  stroke-width: 6;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.ec-net-anchor-halo { fill: var(--ch-ink); fill-opacity: .22; }
.ec-net-node {
  fill: #ffffff;
  stroke: var(--ch-ink);
  stroke-width: 1.4;
}

/* Arrival: a darkening veil instead of the dark-ground lift, per the card. */
.ec-net-veil { fill: var(--ch-ink); fill-opacity: 0; }
.ec-net-outline {
  fill: none;
  stroke: var(--ch-ink);
  stroke-width: 1.6;
  stroke-opacity: 0;
}
.ec-net-ring {
  fill: none;
  stroke: var(--ch-ink);
  stroke-width: 2;
  stroke-opacity: 0;
  vector-effect: non-scaling-stroke;
}

/* ----------------------------------------------------------------------------
   02. Matchbox: scan bracket sweep
   A scoped credential plate sits still, four corner brackets land in sequence,
   a light band reads it five times, and the rows it passes are lit.
   ------------------------------------------------------------------------- */
.ec-token-plate {
  fill: var(--ch-ivory-2);
  stroke: var(--ch-line-2);
  stroke-width: 1;
}

.ec-token-title {
  font-size: 17px;
  font-weight: 600;
  fill: var(--ch-ink);
}

.ec-token-sub {
  font-size: 14px;
  fill: var(--ch-body);
}

.ec-token-chip {
  fill: var(--ch-band);
}

.ec-token-chip-text {
  font-size: 12px;
  font-weight: 600;
  fill: var(--ch-band-ink);
  letter-spacing: .1em;
}

.ec-token-head {
  font-size: 12px;
  font-weight: 600;
  fill: var(--ch-label);
  letter-spacing: .11em;
}

.ec-token-key {
  font-size: 16px;
  font-weight: 600;
  fill: var(--ch-ink);
}

.ec-token-val {
  font-size: 16px;
  fill: var(--ch-body);
}

.ec-token-foot-key {
  font-size: 15px;
  font-weight: 600;
  fill: var(--ch-ink);
}

.ec-token-foot-val {
  font-size: 15px;
  fill: var(--ch-body);
}

.ec-token-hair {
  fill: var(--ch-line);
}

.ec-token-rowlit { fill: var(--ch-ink); fill-opacity: 0; }

.ec-token-bracket {
  fill: none;
  stroke: var(--ch-ink);
  stroke-width: 1.6;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.ec-token-band-core { fill: var(--ch-ink); }
.ec-token-band-glow { fill: var(--ch-ink); fill-opacity: .14; }
.ec-token-band-near { fill: var(--ch-ink); fill-opacity: .16; }
.ec-token-band-far { fill: var(--ch-ink); fill-opacity: .06; }

/* ----------------------------------------------------------------------------
   03. Small screens: keep the diagrams legible rather than shrunken
   ------------------------------------------------------------------------- */
@media (max-width: 620px) {
  .ec-net-name { font-size: 18px; }
  .ec-net-note { font-size: 15px; }
  .ec-token-title { font-size: 17px; }
  .ec-token-sub { font-size: 14px; }
  .ec-token-key,
  .ec-token-val { font-size: 16px; }
  .ec-token-foot-key,
  .ec-token-foot-val { font-size: 15px; }
  .ec-token-head,
  .ec-token-chip-text { font-size: 12px; }
  .ec-motion-cap { font-size: .82rem; }
}

/* The finished diagram is the fallback in every case; nothing here animates,
   so reduced motion needs no separate still. */
/* Shotcraft list-stack-press: each scope row settles with a brief press and
   its scope tag answers immediately after. */
.ec-scope.is-stacking .ec-scope-row { animation: scope-press .42s cubic-bezier(.45,.05,.25,1.12) calc(.15s + var(--scope) * .28s) both; }
.ec-scope.is-stacking .ec-mark { animation: scope-mark .32s cubic-bezier(.2,.75,.3,1) calc(.25s + var(--scope) * .28s) both; }
@keyframes scope-press { 0%, 100% { transform: translateY(0); } 45% { transform: translateY(5px); } }
@keyframes scope-mark { 0%, 100% { background-color: var(--ch-band); color: var(--ch-band-ink); } 50% { background-color: #1b2f5c; color: #f6efe0; } }

/* Shotcraft brand-frame-snap: the top frame of each Matchbox mode card snaps
   between brand colors in turn, then returns to ink. */
.ec-modes.is-snapping .ec-mode { animation: mode-frame-snap .7s steps(1, end) calc(.2s + var(--mode) * .68s) both; }
.ec-modes.is-snapping .ec-mode-return { animation: mode-tag-snap .7s steps(1, end) calc(.2s + var(--mode) * .68s) both; }
@keyframes mode-frame-snap { 0%, 100% { border-top-color: var(--ch-ink); } 15%, 80% { border-top-color: var(--ch-orange); } }
@keyframes mode-tag-snap { 0%, 100% { color: var(--ch-label); } 15%, 80% { color: #91391e; } }

@media (prefers-reduced-motion: reduce) {
  .ec-motion-art { transition: none; }
  .ec-scope.is-stacking .ec-scope-row,
  .ec-scope.is-stacking .ec-mark,
  .ec-modes.is-snapping .ec-mode,
  .ec-modes.is-snapping .ec-mode-return { animation: none; }
}