/* How the garden paints. Plants are drawn by garden/draw into public/garden/*.svg and
   fetched for the plants a layout shows. Each plant is anchored at its base point (--bx,
   --by, from anchors.css) at (--x, --y, from its garden's layout file) and sized by height
   in --u units. Shapes carry classes, and these rules turn the tokens in src/tokens.css
   into their fills and strokes. */

.garden {
  --u: min(1svh, 0.6vw);
}

.plant {
  position: fixed;
  z-index: -1;
  display: none;
  left: var(--x);
  top: var(--y);
  height: calc(var(--u) * var(--h));
  aspect-ratio: var(--ar);
  translate: calc(var(--bx) * -100% + var(--dx, 0px)) calc(var(--by) * -100% + var(--dy, 0px));
  rotate: var(--r, 0deg);
  scale: var(--flip, 1) 1;
  transform-origin: calc(var(--bx) * 100%) calc(var(--by) * 100%);
  pointer-events: none;
}

/* One garden shows at a time, the one main.ts marks on the root. Beds of the others stay hidden
   and are never fetched until their garden shows. */
:root[data-garden="tropical"] .garden .plant:not([data-garden="tropical"]),
:root[data-garden="mediterranean"] .garden .plant:not([data-garden="mediterranean"]),
:root[data-garden="desert"] .garden .plant:not([data-garden="desert"]),
:root[data-garden="afroalpine"] .garden .plant:not([data-garden="afroalpine"]),
:root[data-garden="savanna"] .garden .plant:not([data-garden="savanna"]),
:root[data-garden="fynbos"] .garden .plant:not([data-garden="fynbos"]),
:root[data-garden="namib"] .garden .plant:not([data-garden="namib"]),
:root[data-garden="mangrove"] .garden .plant:not([data-garden="mangrove"]),
:root[data-garden="eastasian"] .garden .plant:not([data-garden="eastasian"]),
:root[data-garden="taiga"] .garden .plant:not([data-garden="taiga"]),
:root[data-garden="american"] .garden .plant:not([data-garden="american"]),
:root[data-garden="woodland"] .garden .plant:not([data-garden="woodland"]) {
  display: none;
}

.garden .plant[data-crowded] {
  display: none;
}

/* Water: a garden with water sets --water (in --u units, from gardens.ts or its layout).
   The surface rises with --tide as the garden grows, tinting the paper below it with a soft
   watercolor edge; main.ts softens submerged roots and draws the meniscus where each root or
   stem crosses the surface. */
.garden .water {
  position: fixed;
  inset: auto 0 0;
  z-index: -1;
  height: calc(var(--u) * var(--water, 0));
  transform: translateY(calc((1 - var(--tide, 1)) * 100%));
  pointer-events: none;
  background: linear-gradient(
    180deg,
    transparent 0,
    color-mix(in oklch, var(--water-line) 14%, transparent) 2px,
    color-mix(in oklch, var(--water-tint) 22%, transparent) 12px,
    color-mix(in oklch, var(--water-tint) 26%, transparent) 45%,
    color-mix(in oklch, var(--water-tint) 36%, transparent) 100%
  );
}

/* A plant entering from beyond its place moves on its own layer. */
.garden .plant[data-enters] {
  will-change: transform;
}

.plant svg {
  display: block;
  width: 100%;
  height: 100%;
  overflow: visible;
}

/* Watercolor glazes: the base color (or --pc), shifted per shape by --dl, --dh, --dc. */
.garden .wash {
  fill: oklch(from var(--pc, var(--leaf)) calc(l + var(--dl, 0)) calc(c * var(--dc, 1)) calc(h + var(--dh, 0)));
  fill-opacity: 0.8;
  stroke: oklch(from var(--pc, var(--leaf)) calc(l + var(--dl, 0) - 0.2) calc(c * var(--dc, 1)) calc(h + var(--dh, 0) + 6));
  stroke-opacity: 0.32;
  stroke-width: calc(0.7 * var(--k));
}
.garden .wash.deep { fill: oklch(from var(--pc, var(--leaf)) calc(l + var(--dl, 0) - 0.22) calc(c * var(--dc, 1)) calc(h + var(--dh, 0) + 12)); fill-opacity: 0.26; stroke: none; }
.garden .wash.stem, .garden .wash.band, .garden .wash.lime, .garden .wash.heart, .garden .wash.blush, .garden .wash.green-cap, .garden .wash.keel, .garden .wash.petal, .garden .wash.lilac-flush, .garden .wash.anther, .garden .wash.filament, .garden .wash.water-edge { stroke: none; }
.garden .wash.stem { fill-opacity: 0.7; }
.garden .wash.band { fill: oklch(from var(--leaf) calc(l + 0.3) calc(c * 0.4) calc(h - 10)); fill-opacity: 0.75; }
.garden .wash.felt { fill-opacity: 0.72; }
.garden .wash.lime { fill-opacity: 0.7; }
.garden .wash.shine { fill: #fff; fill-opacity: 0.22; stroke: none; }
.garden .wash.keel { fill: oklch(from var(--spathe) calc(l - 0.14) calc(c * 1.1) calc(h + 18)); fill-opacity: 0.35; }
.garden .wash.heart { fill-opacity: 0.7; }
.garden .wash.bark { fill-opacity: 1; stroke: none; }
.garden .wash.bark-shade { fill: oklch(from var(--pc) calc(l - 0.14) c h); fill-opacity: 0.45; stroke: none; }
.garden .wash.bark-lit { fill: #fff; fill-opacity: 0.18; stroke: none; }
.garden .wash.blush { fill-opacity: 0.45; }
.garden .wash.green-cap { fill-opacity: 0.55; }
.garden .wash.petal { fill-opacity: 0.95; }
.garden .wash.lilac-flush { fill-opacity: 0.24; }
.garden .wash.lilac-flush.deep { fill: oklch(from var(--pc) calc(l - 0.16) calc(c * 1.5) h); fill-opacity: 0.4; }
.garden .wash.anther { fill-opacity: 0.9; }
.garden .wash.fruit:not(.deep) { fill-opacity: 0.96; }
.garden .wash.filament { fill-opacity: 0.95; }
.garden .wash.water-edge { fill: var(--water-tint); fill-opacity: 0.34; }
.garden .wash.needles { fill: none; stroke: oklch(from var(--leaf) calc(l + var(--dl, 0)) calc(c * var(--dc, 1)) calc(h + var(--dh, 0))); stroke-width: calc(1.8 * var(--k)); stroke-linecap: round; stroke-opacity: 0.85; }
.garden .vein-band { fill: none; stroke: oklch(from var(--leaf) calc(l + 0.5) calc(c * 0.4) h); stroke-width: 4; stroke-linecap: round; stroke-opacity: 0.85; }

/* Ink: one pen, light on the lit edge and heavy on the shadow side. Widths are CSS pixels at
   any plant size: main.ts sets --k, the drawing units per pixel, on each plant. Faint lines
   use stroke-opacity, which needs no compositing group of its own. */
.garden .ink { fill: none; stroke: var(--garden-ink); stroke-linecap: round; stroke-linejoin: round; }
.garden .ink.hair { stroke-width: calc(0.45 * var(--k)); stroke-opacity: 0.75; }
.garden .ink.vein { stroke-opacity: 0.5; }
.garden .ink.thin { stroke-width: calc(0.8 * var(--k)); }
.garden .ink.mid { stroke-width: calc(1.1 * var(--k)); }
.garden .ink.thick { stroke-width: calc(1.6 * var(--k)); }
.garden .ink.dots { stroke-width: calc(1.6 * var(--k)); stroke-opacity: 0.5; }
.garden .ink.root { stroke-opacity: 0.8; }
.garden .ink.bark-tex { stroke-opacity: 0.4; }
.garden .ink.bumps { stroke-opacity: 0.45; }
.garden .ink.petal-edge { stroke-opacity: 0.6; }
.garden .ink.petal-vein { stroke: var(--petal-vein); stroke-opacity: 0.45; }
.garden .ink.petal-vein.standard { stroke: var(--petal-vein-deep); stroke-opacity: 0.65; }
.garden .ink.spine { stroke: var(--spine); }
.garden .ink.hook { stroke: var(--spine-hook); }
.garden .ink.wool { stroke: var(--wool); stroke-width: calc(0.5 * var(--k)); stroke-opacity: 0.8; }
.garden .ink.stripe { stroke: var(--stripe-crinum); stroke-width: calc(0.9 * var(--k)); stroke-opacity: 0.8; }
.garden .ink.filament-edge { stroke-opacity: 0.55; }
.garden .ink.water-line { stroke: var(--water-line); stroke-width: calc(0.8 * var(--k)); stroke-opacity: 0.72; }