/* thegammvibe — abstract SVG motifs as background imagery
   No literal illustrations. Lines, circles, grids, breath.
*/

/* base wrapper for figure cells */
.fig {
  position: relative;
  background: var(--bg-2);
  overflow: hidden;
  border: 1px solid var(--rule);
}
.fig__cap {
  position: absolute;
  left: 12px; bottom: 10px;
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--ink-3);
  display: flex; gap: 10px; align-items: center;
}
.fig__cap .num { color: var(--accent); }
.fig__tag {
  position: absolute;
  right: 12px; top: 10px;
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--ink-3);
}

/* ---- motifs ---- */
/* m1 — concentric rings: breath / 호흡 */
.m-breath { background: radial-gradient(ellipse at center, var(--bg-3), var(--bg) 70%); }
.m-breath svg { width: 100%; height: 100%; }
.m-breath circle { fill: none; stroke: var(--ink-3); stroke-width: 0.5; opacity: 0.55; }
.m-breath circle.acc { stroke: var(--accent); opacity: 0.9; }

/* m2 — converging lines: alignment / 정렬 */
.m-align { background: var(--bg-2); }
.m-align line { stroke: var(--ink-3); stroke-width: 0.5; opacity: 0.7; }
.m-align line.acc { stroke: var(--accent); stroke-width: 0.75; opacity: 1; }

/* m3 — drifting dots: scatter→gather */
.m-scatter circle.d { fill: var(--ink-3); }
.m-scatter circle.acc { fill: var(--accent); }

/* m4 — horizon: 지평 */
.m-horizon {
  background: linear-gradient(180deg, var(--bg-3) 0%, var(--bg-2) 50%, var(--bg) 100%);
}
.m-horizon line { stroke: var(--ink-3); opacity: 0.4; }
.m-horizon .sun { fill: none; stroke: var(--accent); stroke-width: 0.75; }

/* m5 — wave / 결 */
.m-wave path { fill: none; stroke: var(--ink-3); stroke-width: 0.5; opacity: 0.6; }
.m-wave path.acc { stroke: var(--accent); opacity: 1; }

/* m6 — grid plot: scatter chart of feelings */
.m-plot { background: var(--bg-2); }
.m-plot .gx, .m-plot .gy { stroke: var(--rule); stroke-width: 0.5; }
.m-plot .ax { stroke: var(--ink-3); stroke-width: 0.75; }
.m-plot .pt { fill: var(--ink-2); }
.m-plot .pt.acc { fill: var(--accent); }
.m-plot text { fill: var(--ink-3); font-family: var(--mono); font-size: 7px; letter-spacing: 0.08em; }

/* m7 — vertical seed: 씨 */
.m-seed line { stroke: var(--ink-3); }
.m-seed .acc { stroke: var(--accent); }