/* ---------------------------------------------------------------------------
 * burnt-synapse background — organic extensions v1
 *
 * styles for the three living-system variants in assets/bg/ext/organic-v1.js:
 *   .bo-boids / .bo-current  — canvas hosts (the canvases do the drawing)
 *   .bo-garden                — digital garden: seeded branch text that grows
 *                               out of the ground once per load. transform +
 *                               opacity only, one-shot growth self-clears,
 *                               steady state ~13 infinite compositor layers.
 *
 * palette + monospace stack match bg-v1.css; sharp edges only (no
 * border-radius anywhere); prefers-reduced-motion renders the static
 * fully-grown state (base styles are the end state; keyframes start from
 * the seed). all classes are prefixed bo- to avoid collisions with bb-*.
 * --------------------------------------------------------------------------- */

/* ---- canvas hosts ---- */
#bg .bo-boids,
#bg .bo-current {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
}

/* ---- garden ---- */
#bg .bo-garden {
  position: absolute; inset: 0;
  animation: bo-garden-sway 160s ease-in-out infinite alternate;
}
#bg .bo-tree {
  position: absolute;
  bottom: calc(10vh - 2px);
  width: 0; /* width is carried by the pre; keeps the sway origin stable */
  transform-origin: 50% 100%;
  animation: bo-tree-sway var(--sd, 15s) ease-in-out var(--sdel, 0s) infinite alternate;
}
#bg .bo-branch {
  margin: 0;
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 11px;
  line-height: 15px;
  letter-spacing: 0;
  white-space: pre;
  transform-origin: 50% 100%;
  animation: bo-grow var(--gd, 12s) cubic-bezier(.25, .6, .3, 1) var(--gdel, 2s) both;
}
#bg .bo-c0 { color: rgba(255, 196, 107, 0.13); }  /* oldest wood — dim amber */
#bg .bo-c1 { color: rgba(255, 196, 107, 0.27); }  /* mid */
#bg .bo-c2 { color: rgba(255, 122, 47, 0.42); }   /* young growth — ember   */
#bg .bo-tip {
  position: absolute;
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 12px;
  line-height: 1;
  font-style: normal;
  color: rgba(255, 122, 47, 1);
  opacity: 0.4;
  animation: bo-tip var(--td, 4.5s) ease-in-out var(--tdel, 3s) infinite alternate;
}
#bg .bo-ground {
  position: absolute;
  left: 3%; right: 3%;
  bottom: 10vh;
  height: 1px;
  background: linear-gradient(90deg,
    rgba(255, 255, 255, 0) 0%,
    rgba(255, 255, 255, 0.09) 12%,
    rgba(255, 196, 107, 0.12) 50%,
    rgba(255, 255, 255, 0.09) 88%,
    rgba(255, 255, 255, 0) 100%);
}
#bg .bo-moss {
  position: absolute;
  width: 2px; height: 2px;
  background: rgba(255, 196, 107, 1);
}

@keyframes bo-grow {
  from { opacity: 0; transform: scale(1, 0.04); }
  to   { opacity: 1; transform: none; }
}
@keyframes bo-tree-sway {
  from { transform: rotate(-0.7deg); }
  to   { transform: rotate(0.7deg); }
}
@keyframes bo-tip {
  from { opacity: 0.15; }
  to   { opacity: 0.55; }
}
@keyframes bo-garden-sway {
  from { transform: translateX(-1vw); }
  to   { transform: translateX(1vw); }
}

/* one switch for every animation in this file: reduced motion = the
 * fully-grown, resting garden (base styles are the end state) */
@media (prefers-reduced-motion: reduce) {
  #bg .bo-anim { animation: none !important; }
}