/* Sunflower garden — self-contained. Remove this file + garden.js + the 3 GARDEN lines in index.html to revert. */

#garden { padding-top: 48px; padding-bottom: 40px; } /* the garden is the page footer */

.g-head-row { display: flex; justify-content: space-between; align-items: baseline; gap: 16px; }
.g-head-row .label { margin-bottom: 0; }
.g-count { font-size: 13px; color: var(--muted); font-variant-numeric: tabular-nums; }
.g-plot {
  position: relative;
  height: 220px;
  border-bottom: 1px solid var(--line);
  cursor: crosshair;
  overflow: hidden;
  outline: none;
}
.g-plot:focus-visible { box-shadow: inset 0 0 0 2px var(--accent); }

.g-bar {
  display: flex; justify-content: space-between; align-items: center;
  padding: 14px 0 0;
  font-size: 13px; color: var(--muted);
}
.g-weather { display: flex; gap: 6px; }
.g-weather button {
  width: 36px; height: 36px;
  display: grid; place-items: center;
  border: 1px solid var(--line); border-radius: 50%;
  background: var(--bg); color: var(--ink);
  cursor: pointer;
  transition: color .2s, border-color .2s, transform .15s;
}
.g-weather button:hover { color: var(--accent); border-color: var(--accent); }
.g-weather button:active { transform: scale(.92); }
.g-weather svg { width: 18px; height: 18px; }

/* Flowers */
.g-flower {
  position: absolute; bottom: 0;
  width: 60px; height: 160px;
  margin-left: -30px;
  transform: scale(var(--size, 1));
  transform-origin: 50% 100%;
  pointer-events: none;
  animation: g-pop .35s ease-out;
}
.g-flower svg { display: block; overflow: visible; }
@keyframes g-pop { from { opacity: 0; transform: scale(calc(var(--size, 1) * .6)); } }

.g-stem { fill: #5e8c4a; }
.g-leaf, .g-sprout path, .g-bud-base { fill: #6f9e57; }
.g-petal { fill: #f4c542; }
.g-petal.back { fill: #e9a92b; }
.g-centre { fill: #6b4423; }
.g-seed { fill: #4a2e17; }

.g-grow { transition: transform 1.2s cubic-bezier(.2, .8, .2, 1), opacity .6s ease; }

.g-stem {
  transform-box: fill-box; transform-origin: 50% 100%;
  transform: scaleY(var(--s));
}
.g-head { transform: translateY(calc((1 - var(--s)) * 120px)); }

.g-leaf { transform-box: fill-box; transform: scale(0); }
.g-leaf.l { transform-origin: 100% 100%; }
.g-leaf.r { transform-origin: 0 100%; }
.g-flower:is([data-stage="2"], [data-stage="3"], [data-stage="4"]) .g-leaf { transform: scale(1); }

.g-sprout, .g-bud, .g-bloom { transform-box: fill-box; transform-origin: 50% 50%; opacity: 0; transform: scale(.3); }
.g-flower:is([data-stage="0"], [data-stage="1"]) .g-sprout { opacity: 1; transform: scale(1); }
.g-flower[data-stage="2"] .g-bud { opacity: 1; transform: scale(.8); }
.g-flower[data-stage="3"] .g-bud { opacity: 1; transform: scale(1.2); }
.g-flower[data-stage="4"] .g-bloom { opacity: 1; transform: scale(1); }

.g-sway { transform-box: view-box; transform-origin: 30px 160px; }
.g-flower[data-stage="4"] .g-sway { animation: g-sway 4s ease-in-out infinite alternate; animation-delay: var(--delay, 0s); }
@keyframes g-sway { from { transform: rotate(-2.5deg); } to { transform: rotate(2.5deg); } }

/* Weather effects */
.g-sun {
  position: absolute; top: 0; right: 0;
  width: 200px; height: 200px;
  /* closest-side: fully transparent by the box edge, so the glow fades out on every side */
  background: radial-gradient(circle closest-side, rgba(251, 214, 99, .95) 0 22%, rgba(251, 214, 99, .45) 40%, rgba(251, 214, 99, .12) 70%, rgba(251, 214, 99, 0) 100%);
  pointer-events: none;
  animation: g-sun 2s ease-in-out forwards;
}
@keyframes g-sun {
  0% { opacity: 0; transform: scale(.6); }
  30%, 70% { opacity: 1; transform: scale(1); }
  100% { opacity: 0; transform: scale(1.1); }
}

.g-drop {
  position: absolute; top: -20px;
  width: 2px; height: 14px; border-radius: 2px;
  background: #8fb8de;
  pointer-events: none;
  animation: g-fall .7s linear forwards;
}
@keyframes g-fall { to { transform: translateY(250px); opacity: .4; } }

@media (prefers-reduced-motion: reduce) {
  .g-grow, .g-flower, .g-sway, .g-sun, .g-drop { transition: none !important; animation: none !important; }
  .g-sun, .g-drop { display: none; }
}