/* Decorative wildlife remains above the grass, away from interactive footer content. */
.garden-surprise{position:absolute;inset:0;pointer-events:none}
.growing-flowers{position:absolute;bottom:9%;width:68%;height:110%;transform-origin:50% 100%;opacity:0;will-change:transform;mask-image:linear-gradient(to top,transparent 0%,#000 9%)}
.growing-flowers img{width:100%;height:100%;object-fit:contain;object-position:center bottom}
.flowers-left{right:86%}.flowers-right{left:88%;height:94%;width:63%}.flowers-right img{transform:scaleX(-1)}
.garden-butterfly{position:absolute;width:13%;height:auto;opacity:0;will-change:transform,left,bottom}
.garden-bee{position:absolute;width:65%;aspect-ratio:1;opacity:0;transform-origin:center;will-change:transform,left,bottom}
.garden-bee img{position:absolute;inset:0;width:100%;height:100%;object-fit:contain;opacity:0}
.garden-bee[data-pose=flight] .bee-flight,.garden-bee[data-pose=thanks] .bee-thanks,.garden-bee[data-pose=feeding] .bee-feeding{opacity:1}
@media(max-width:600px){.growing-flowers{width:51%;height:90%}.flowers-left{right:80%}.flowers-right{left:80%;height:78%}.garden-bee{width:82%}}

.garden-surprise[data-stage=grooming] .bee-hands{opacity:1;clip-path:polygon(58% 58%,78% 60%,80% 71%,62% 72%);animation:bee-hand-rub .16s ease-in-out infinite alternate}
@keyframes bee-hand-rub{from{transform:translate(-.8%,.5%) rotate(-1deg)}to{transform:translate(.8%,-.5%) rotate(1deg)}}
.garden-bee[data-pose=flight] .bee-flight{animation:bee-flight-buzz .1s ease-in-out infinite alternate}
@keyframes bee-flight-buzz{from{transform:translateY(-1%) scaleY(.98)}to{transform:translateY(1%) scaleY(1)}}
@media(prefers-reduced-motion:reduce){.garden-bee img{animation:none!important}}

.growing-flowers svg{width:100%;height:100%;overflow:visible}.flowers-right svg{transform:scaleX(-1)}
.flower-stems{transform-origin:512px 1536px}.flower-bloom{transform-box:view-box;opacity:0}

/* Real plant layers, with the flower permanently attached to its own stem. */
.growing-flowers{overflow:visible;mask-image:linear-gradient(to top,transparent,#000 7%)}
.garden-plant{position:absolute;bottom:0;width:43%;transform-origin:50% 100%;will-change:transform}
.growing-flowers .garden-plant .plant-foliage{position:absolute;inset:0;width:100%;height:100%;object-fit:fill;transform:none}
.plant-blossom{position:absolute;left:50%;top:8%;width:86%;aspect-ratio:1;opacity:0;transform-origin:center;will-change:transform}
.growing-flowers .plant-blossom img{width:100%;height:100%;object-fit:contain;transform:none}
.garden-butterfly{aspect-ratio:1;height:auto;perspective:180px}
.butterfly-facing{position:absolute;inset:0;transform-origin:center}
.garden-butterfly img{position:absolute;width:100%;height:100%;object-fit:contain}
.butterfly-body{clip-path:polygon(0 0,31% 0,31% 65%,45% 78%,62% 82%,62% 100%,0 100%)}
.butterfly-wing{clip-path:polygon(31% 0,100% 0,100% 87%,62% 87%,45% 78%,31% 65%);transform-origin:33% 74%;backface-visibility:visible}
.butterfly-wing-back{filter:brightness(.88)}
.garden-bee img{transition:opacity .35s ease;scale:var(--pose-body-scale,1);transform-origin:50% 57%}
@media(prefers-reduced-motion:reduce){.garden-bee img{transition:none}}

.plant-blossom{top:3%}
/* Keep the individual garden plants within the scene at narrower widths. */
.growing-flowers{width:50%}
.flowers-left{right:82%}
.flowers-right{left:82%;width:50%}
.plant-blossom{width:58%}
@media(max-width:600px){.growing-flowers{width:43%}.flowers-left{right:80%}.flowers-right{left:80%;width:43%}}
.growing-flowers{mask-image:none}
.plant-foliage{mask-image:linear-gradient(to top,transparent,#000 7%)}

/* Richer pigment and a fine edge keep green pencil work visible on the meadow. */
.plant-foliage{filter:saturate(1.4) brightness(.72) contrast(1.16) drop-shadow(.35px 0 0 #456334)}
.flowers-left .garden-plant:first-child .plant-foliage{filter:saturate(1.55) brightness(.6) contrast(1.25) drop-shadow(.55px 0 0 #39572d)}
.bee-flight-art{position:absolute;inset:0;opacity:0;transition:opacity .35s ease;transform-origin:center}
.garden-bee[data-pose=flight] .bee-flight-art{opacity:1}
.garden-bee .bee-flight-art img{opacity:1;scale:1}
.bee-flight-body{clip-path:polygon(53% 27%,100% 27%,100% 100%,0 100%,0 48%,39% 48%,55% 43%,49% 35%)}
.bee-flight-wing{clip-path:polygon(0 0,53% 0,53% 28%,49% 35%,56% 43%,39% 48%,0 48%);transform-origin:56% 43%;animation:bee-wingbeat .085s ease-in-out infinite alternate}
.bee-flight-wing-back{animation-delay:-.04s;filter:brightness(.9)}
@keyframes bee-wingbeat{from{transform:perspective(220px) rotateX(-18deg) rotate(-7deg)}to{transform:perspective(220px) rotateX(68deg) rotate(9deg)}}
@media(prefers-reduced-motion:reduce){.bee-flight-wing{animation:none!important}}

.bee-thanks{clip-path:polygon(30% 0,70% 0,64% 26%,65% 31%,76% 39%,100% 39%,100% 100%,0 100%,0 39%,24% 39%,35% 31%,36% 26%)}
.garden-bee[data-pose=thanks] .bee-thanks-wing{opacity:1}
.bee-thanks-wing-left{clip-path:polygon(0 0,30% 0,36% 26%,35% 31%,24% 39%,0 39%);transform-origin:36% 28%!important;animation:bee-hover-wings .11s ease-in-out infinite alternate}
.bee-thanks-wing-right{clip-path:polygon(70% 0,100% 0,100% 39%,76% 39%,65% 31%,64% 26%);transform-origin:64% 28%!important;animation:bee-hover-wings .11s ease-in-out infinite alternate-reverse}
@keyframes bee-hover-wings{from{transform:perspective(300px) rotateY(-12deg)}to{transform:perspective(300px) rotateY(48deg)}}

.bee-thanks-art{position:absolute;inset:0;scale:1.12;transform-origin:50% 57%}
.garden-bee .bee-thanks-art img{scale:1}

/* Outer flowers follow the viewport edges; their heads sit beside TOGETHER. */
.growing-flowers.flowers-low{inset:0;width:100%;height:100%;bottom:0}
.flowers-low .edge-flower{bottom:9%;height:40%;width:clamp(64px,9vw,110px)}
.edge-flower-left{left:calc(50% - 50vw + clamp(28px,3.5vw,64px))}
.edge-flower-right{left:calc(50% + 50vw - clamp(28px,3.5vw,64px))}
.flowers-low .viola-groundcover{left:8%;bottom:9%;height:24%;width:38%}
.viola-groundcover .plant-blossom{width:28%}
.viola-groundcover .plant-foliage{filter:saturate(1.15) brightness(.84)}
@media(max-width:600px){.flowers-low .edge-flower{height:39%;width:64px}.flowers-low .viola-groundcover{left:12%;width:45%;height:23%}}

.flowers-low .viola-groundcover.viola-jackanapes{left:84%;height:23%;width:36%}
@media(max-width:600px){.flowers-low .viola-groundcover.viola-jackanapes{left:85%;width:43%;height:22%}}