/* Farmer plants, the seed toss, and the ammo readout. */

/* Scaling is anchored BOTTOM-CENTRE. Every growth frame was exported onto a
   shared canvas with the trunk at the bottom edge for exactly this reason —
   scaled from the middle, a growing tree sinks into the ground as it gets
   bigger, which reads as it burrowing rather than growing. */
.farm-plant {
  position: absolute;
  transform-origin: 50% 100%;
  pointer-events: none;
  z-index: 25;
  /* Promoted to its own layer: this element's transform changes every frame for
     the whole growth, and without the hint the browser repaints the tree and
     everything behind it each time. */
  will-change: transform;
}
.farm-plant-art {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
  object-position: bottom center;
  /* NO drop-shadow. It looked better, and it was the single most expensive
     thing on screen: drop-shadow re-rasterises from the alpha channel, and this
     is a 1000px image whose scale changes every frame. Trees are 800-1000px and
     up to twelve can share a room, so that is twelve full-size shadow passes
     per frame. A flat sprite that stays at 60fps beats a pretty one that does
     not. */
}

/* Straight up, hang at the top, straight back down — no arc. The whole point
   is a vertical line nobody can mistake for a thrown projectile. */
.farm-seed-toss {
  position: absolute;
  width: 56px;
  height: 56px;
  margin-left: -28px;
  pointer-events: none;
  z-index: 88;
  animation: farm-toss var(--toss-ms, 900ms) cubic-bezier(.32, 0, .5, 1) forwards;
}
.farm-seed-toss img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  filter: drop-shadow(0 4px 8px rgba(0, 0, 0, .5));
}
@keyframes farm-toss {
  0%   { transform: translateY(0) rotate(0deg); }
  55%  { transform: translateY(-330px) rotate(200deg); }
  70%  { transform: translateY(-330px) rotate(250deg); }
  100% { transform: translateY(0) rotate(360deg); }
}

/* Ammo readout. Only present when you are actually holding something. */
.farm-ammo {
  position: absolute;
  left: 50%;
  bottom: 118px;
  transform: translateX(-50%);
  display: flex;
  align-items: center;
  gap: 7px;
  padding: 5px 12px;
  border-radius: 999px;
  background: rgba(6, 12, 20, .74);
  border: 1px solid rgba(255, 255, 255, .14);
  color: #e6f2ff;
  font: 800 13px/1 system-ui, -apple-system, "Segoe UI", sans-serif;
  z-index: 60;
  pointer-events: none;
}
.farm-ammo img {
  width: 22px;
  height: 22px;
  object-fit: contain;
}
/* Running dry is worth noticing before the throw is refused. */
.farm-ammo.is-low {
  border-color: rgba(239, 68, 68, .65);
  box-shadow: 0 0 10px -2px rgba(239, 68, 68, .55);
}

@media (max-width: 640px) {
  .farm-ammo { bottom: 100px; font-size: 12px; }
  .farm-ammo img { width: 18px; height: 18px; }
}

/* The harvest banner — the payoff of a ten-second wait, so it is sized to be
   impossible to miss rather than tucked into a speech bubble. */
.farm-harvest {
  position: absolute;
  left: 50%;
  top: 26%;
  transform: translate(-50%, -50%);
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 14px 26px 14px 18px;
  border-radius: 18px;
  background: rgba(6, 14, 8, .82);
  border: 1px solid rgba(134, 239, 172, .5);
  box-shadow: 0 14px 40px rgba(0, 0, 0, .5), 0 0 24px -6px rgba(74, 222, 128, .55);
  color: #eafff1;
  z-index: 92;
  pointer-events: none;
  animation: farm-harvest-in 2.2s cubic-bezier(.2, .9, .3, 1) forwards;
}
.farm-harvest-art { width: 58px; height: 58px; object-fit: contain; }
.farm-harvest-text {
  display: flex;
  align-items: baseline;
  gap: 9px;
  font: 900 34px/1 system-ui, -apple-system, "Segoe UI", sans-serif;
  letter-spacing: -.02em;
}
.farm-harvest-text b { color: #4ade80; }
.farm-harvest-text span { font-size: 21px; font-weight: 800; color: #eafff1; }

/* Rises and fades: it must clear the fight rather than sit on top of it. */
@keyframes farm-harvest-in {
  0%   { opacity: 0; transform: translate(-50%, -30%) scale(.82); }
  12%  { opacity: 1; transform: translate(-50%, -50%) scale(1.04); }
  20%  { transform: translate(-50%, -50%) scale(1); }
  75%  { opacity: 1; transform: translate(-50%, -62%) scale(1); }
  100% { opacity: 0; transform: translate(-50%, -78%) scale(.97); }
}

@media (max-width: 640px) {
  .farm-harvest-text { font-size: 26px; }
  .farm-harvest-text span { font-size: 17px; }
  .farm-harvest-art { width: 44px; height: 44px; }
}

/* Fruit swelling on the canopy before it falls. Positioned as a percentage of
   the tree, so it stays in the leaves at every canopy size and rides the
   parent's growth scale for free. */
.farm-canopy-fruit {
  position: absolute;
  width: 22%;
  height: auto;
  transform-origin: 50% 0;
  pointer-events: none;
  transition: opacity .18s linear;
  filter: drop-shadow(0 3px 5px rgba(0, 0, 0, .35));
}

/* The same banner as a harvest, in warning colours. Same place on screen on
   purpose: the eye is already there waiting for "+25 Bananas", so that is
   where the reason it did not happen belongs. */
.farm-harvest.is-warning {
  background: rgba(20, 10, 4, .85);
  border-color: rgba(250, 204, 21, .55);
  box-shadow: 0 14px 40px rgba(0, 0, 0, .5), 0 0 24px -6px rgba(250, 204, 21, .5);
}
.farm-harvest-text--warn { flex-direction: column; align-items: flex-start; gap: 3px; }
.farm-harvest-text--warn b { color: #facc15; font-size: 26px; }
.farm-harvest-text--warn span { font-size: 16px; font-weight: 700; color: #f4e7c3; }
.farm-harvest-text--warn u { text-decoration: none; color: #fff; font-weight: 900; }

/* Hit slash: three tapered claw streaks, white core inside a coloured bloom.
   Built from gradients rather than a sprite — it is three shapes, and a PNG
   would be another file to ship, cache and get the alpha wrong on. */
.farm-slash {
  position: absolute;
  transform: translate(-50%, 50%) rotate(var(--slash-rot, -18deg));
  pointer-events: none;
  z-index: 87;
  animation: farm-slash-life 320ms ease-out forwards;
}
.farm-slash i {
  position: absolute;
  left: 6%;
  width: 88%;
  height: 9%;
  border-radius: 50%;
  /* White core, colour bleeding out to nothing at both tips — the taper is
     what separates a claw mark from a painted stripe. */
  background:
    linear-gradient(90deg,
      transparent 0%,
      var(--slash-hue, #ef4444) 14%,
      #fff 42%, #fff 58%,
      var(--slash-hue, #ef4444) 86%,
      transparent 100%);
  filter: drop-shadow(0 0 7px var(--slash-hue, #ef4444));
  transform-origin: 50% 50%;
}
/* Offset and scaled so the three read as one swipe, not a stack of lines. */
.farm-slash i:nth-child(1) { top: 26%; transform: rotate(-7deg) scaleX(.86); }
.farm-slash i:nth-child(2) { top: 46%; transform: rotate(0deg)  scaleX(1); }
.farm-slash i:nth-child(3) { top: 66%; transform: rotate(6deg)  scaleX(.8); }

@keyframes farm-slash-life {
  0%   { opacity: 0; transform: translate(-50%, 50%) rotate(var(--slash-rot, -18deg)) scale(.55); }
  18%  { opacity: 1; transform: translate(-50%, 50%) rotate(var(--slash-rot, -18deg)) scale(1.06); }
  55%  { opacity: .95; transform: translate(-50%, 50%) rotate(var(--slash-rot, -18deg)) scale(1); }
  100% { opacity: 0; transform: translate(-50%, 50%) rotate(var(--slash-rot, -18deg)) scale(1.14); }
}