.footer-garden {
  position: relative;
  isolation: isolate;
  width: 100%;
  height: clamp(240px, 34vw, 340px);
  overflow: hidden;
  background: var(--paper);
  touch-action: pan-y;
  contain: layout paint;
}

.footer-garden:focus-visible { outline: 2px solid var(--link); outline-offset: -3px; }
.garden-scenery, .garden-white-edge { position: absolute; inset: 0; pointer-events: none; }
.garden-scenery { z-index: 0; }
.garden-landscape {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center bottom;
}
.garden-white-edge {
  z-index: 1;
  background: linear-gradient(to bottom, var(--paper) 0%, transparent 35%);
}
.garden-character {
  position: absolute;
  z-index: 2;
  left: 0;
  top: 79%;
  width: 0;
  height: 0;
  opacity: 0;
  pointer-events: none;
  will-change: transform;
}
.footer-garden.is-ready .garden-character { opacity: 1; }
.garden-mascot {
  position: absolute;
  width: 128px;
  height: 128px;
  left: -64px;
  top: -110px;
  pointer-events: none;
}
.garden-shadow {
  position: absolute;
  left: -23px;
  top: -3px;
  width: 48px;
  height: 9px;
  border-radius: 50%;
  background: radial-gradient(ellipse, rgba(26, 64, 43, .42), rgba(26, 64, 43, .18) 40%, transparent 72%);
  transform-origin: center;
  filter: blur(1px);
}
.garden-foreground {
  position: absolute;
  z-index: 3;
  bottom: -2px;
  width: 33.15%; /* Half of 102%, scaled uniformly to 65%. */
  aspect-ratio: 1024 / 768;
  overflow: hidden;
  pointer-events: none;
  transform-origin: bottom center;
  animation: garden-breeze 7s ease-in-out infinite alternate;
  animation-play-state: paused;
}
.garden-foreground--left { left: -1%; }
.garden-foreground--right { right: -1%; }
.garden-foreground img {
  position: absolute;
  top: 0;
  left: 0;
  display: block;
  width: 200%;
  max-width: none;
  height: auto;
}
.garden-foreground--right img { left: -100%; }
.footer-garden.is-active .garden-foreground { animation-play-state: running; }
@keyframes garden-breeze {
  from { transform: translateX(-1px) rotate(-.12deg); }
  to { transform: translateX(1px) rotate(.12deg); }
}
:root[data-theme="dark"] .garden-scenery,
:root[data-theme="dark"] .garden-foreground { filter: brightness(.38) saturate(.72) hue-rotate(17deg); }
:root[data-theme="dark"] .garden-white-edge {
  background: linear-gradient(to bottom, var(--paper), rgba(25, 24, 23, .94) 8%, rgba(25, 24, 23, .5) 35%, transparent 68%);
}
:root[data-theme="dark"] .garden-mascot { filter: brightness(.8) saturate(.82); }
:root[data-theme="dark"] .garden-shadow { opacity: .8; }
@media (max-width: 620px) {
  .footer-garden { height: 260px; }
  .garden-landscape { width: 160%; max-width: none; margin-left: -30%; }
  .garden-foreground { width: 50.375%; /* Half of 155%, scaled to 65%. */ }
}
@media (prefers-reduced-motion: reduce) {
  .garden-foreground { animation: none; }
}