/* Growing tree (tree.js) */
:root{
  --t-outline:#2A1D16;--t-cream:#FFF4E2;
  --t-dark:#2E7A43;--t-dark-sh:#1F5A30;
  --t-mid:#46A35A;--t-mid-sh:#2F8044;
  --t-light:#7CC968;--t-light-sh:#55A853;
  --t-bark:#A56A40;--t-bark-sh:#774628;
  --t-soil:#A8714A;--t-soil-sh:#7E5032;
  --t-seed:#D49A5A;--t-seed-sh:#A8703A;
  --t-fruit:#E4572E;--t-fruit-sh:#B23A17;
  --t-petal:#FFC2CF;--t-pistil:#FFD260;--t-blush:#F2898F;
  --t-pebble:#C9B7A4;
}
@media (prefers-color-scheme:dark){
  :root{
    --t-soil:#946240;--t-soil-sh:#6B4329;
    --t-pebble:#A99784;
  }
}

.tree{overflow:visible;--tw:3.5;--s:.42}
.tree .t-plant{--k:var(--s)}
.tree .t-ol{stroke:var(--t-outline);stroke-width:calc(var(--tw) * 1px / var(--k,1));stroke-linejoin:round;stroke-linecap:round}
.tree .t-ol-only{fill:none;stroke:var(--t-outline);stroke-width:calc(var(--tw) * 1px / var(--k,1));stroke-linejoin:round}
.tree .t-olu{fill:var(--t-outline);stroke:var(--t-outline);stroke-width:calc(var(--tw) * 2px / var(--k,1))}
.tree .t-olu-s{stroke-width:calc(var(--tw) * 1.6px / var(--k,1))}
/* --k = local scale factor, so outlines keep one constant weight everywhere */

.tree .t-hl{fill:var(--t-cream)}
.tree .t-hl-line{fill:none;stroke:var(--t-cream);stroke-width:3;stroke-linecap:round;opacity:.85}
.tree .t-soil{fill:var(--t-soil)}.tree .t-soil-sh{fill:var(--t-soil-sh)}
.tree .t-pebble{fill:var(--t-pebble)}
.tree .t-grass{fill:var(--t-light)}
.tree .t-seed{fill:var(--t-seed)}.tree .t-seed-sh{fill:var(--t-seed-sh)}
.tree .t-bark{fill:var(--t-bark)}.tree .t-bark-sh{fill:var(--t-bark-sh)}
.tree .t-knot{fill:none;stroke:var(--t-bark-sh);stroke-width:2.5;stroke-linecap:round}
.tree .t-dark{fill:var(--t-dark)}.tree .t-dark-sh{fill:var(--t-dark-sh)}
.tree .t-mid{fill:var(--t-mid)}.tree .t-mid-sh{fill:var(--t-mid-sh)}
.tree .t-light{fill:var(--t-light)}.tree .t-light-sh{fill:var(--t-light-sh)}
.tree .t-leaf-s{fill:var(--t-mid)}
.tree .t-vein{fill:none;stroke:var(--t-outline);stroke-width:1.6;stroke-linecap:round;opacity:.35}
.tree .t-stem{fill:none;stroke:var(--t-outline);stroke-width:2;stroke-linecap:round}
.tree .t-stem-ol{fill:none;stroke:var(--t-outline);stroke-width:calc(var(--tw) * 1px / var(--k,1) * 2 + 3px);stroke-linecap:round}
.tree .t-stem-in{fill:none;stroke:var(--t-mid);stroke-width:3px;stroke-linecap:round}
.tree .t-fruit{fill:var(--t-fruit)}.tree .t-fruit-sh{fill:var(--t-fruit-sh)}
.tree .t-petal{fill:var(--t-petal)}.tree .t-pistil{fill:var(--t-pistil)}
.tree .t-eye{fill:var(--t-outline)}.tree .t-glint{fill:#fff}
.tree .t-blush{fill:var(--t-blush);opacity:.75}
.tree .t-mouth{fill:none;stroke:var(--t-outline);stroke-width:2;stroke-linecap:round}

/* springy parts: each .tp scales from its local origin (set by the wrapping translate) */
.tree .tp{transform:scale(0);transition:transform .55s cubic-bezier(.3,1.6,.5,1)}
.tree .tp.on{transform:scale(1)}
.tree .t-sprout:not(.on),.tree .t-seedg:not(.on),.tree .t-sap:not(.on){transition-duration:.3s;transition-timing-function:ease-in}
.tree .t-plant{transform:scale(var(--s));transition:transform .6s cubic-bezier(.3,1.6,.5,1)}

/* celebration */
.tree .t-pt{opacity:0;transform-box:fill-box;transform-origin:center}
.tree.full .t-sway{animation:t-sway 1s cubic-bezier(.3,.7,.4,1) .15s}
.tree.full .t-bob{animation:t-bob .7s cubic-bezier(.3,1.6,.5,1) .1s;transform-box:fill-box;transform-origin:50% 100%}
.tree.full .t-clump:nth-of-type(odd) .t-bob{animation-delay:.2s}
.tree.full .t-pt{animation:t-pop 1.3s cubic-bezier(.2,.7,.4,1) calc(.15s + var(--i) * .05s) both}
@keyframes t-sway{0%,100%{transform:rotate(0)}25%{transform:rotate(-3deg)}55%{transform:rotate(2deg)}80%{transform:rotate(-.8deg)}}
@keyframes t-bob{0%,100%{transform:scale(1)}35%{transform:scale(1.08,.93)}65%{transform:scale(.97,1.04)}}
@keyframes t-pop{
  0%{opacity:0;transform:translate(0,0) scale(.4) rotate(0)}
  15%{opacity:1;transform:translate(calc(var(--dx) * .5),calc(var(--dy) * .7)) scale(1.1) rotate(calc(var(--rot) * .4))}
  70%{opacity:1}
  100%{opacity:0;transform:translate(var(--dx),calc(var(--dy) + 40px)) scale(.9) rotate(var(--rot))}
}

@media (prefers-reduced-motion:reduce){
  .tree .tp,.tree .t-plant{transition:none}
  .tree.full .t-sway,.tree.full .t-bob,.tree.full .t-pt{animation:none}
}