/* THE GARDEN — see garden.js. Everything in it moves or answers a touch. */
#scGarden{justify-content:flex-start;padding:0;overflow:hidden}
.ga-scene{position:absolute;inset:0;z-index:0}
.ga-scene svg.ga-svg{position:absolute;inset:0;width:100%;height:100%;display:block}
.ga-cloud{animation:gaCloud linear infinite}
@keyframes gaCloud{from{transform:translateX(-30px)}to{transform:translateX(130px)}}
.ga-sun{transform-box:fill-box;transform-origin:50% 50%;animation:gaSun 14s linear infinite}
@keyframes gaSun{from{transform:rotate(0)}to{transform:rotate(360deg)}}
/* water: the stripes flow */
.ga-flow{stroke-dasharray:6 10;animation:gaFlow 1.1s linear infinite}
.ga-fall .ga-flow{animation-duration:.55s}
@keyframes gaFlow{to{stroke-dashoffset:-16}}
.ga-fall.disturbed .ga-sheet{animation:gaWobble .7s ease-out}
@keyframes gaWobble{0%{transform:scaleX(1)}30%{transform:scaleX(1.25) translateX(-3px)}60%{transform:scaleX(.9)}100%{transform:scaleX(1)}}
.ga-sheet{transform-box:fill-box;transform-origin:50% 0}
.ga-ripple{fill:none;stroke:#fff;stroke-width:1.2;opacity:.9;transform-box:fill-box;transform-origin:50% 50%;animation:gaRipple 1s ease-out forwards}
@keyframes gaRipple{from{transform:scale(.2);opacity:.95}to{transform:scale(2.4);opacity:0}}
.ga-drop{fill:#BFE9FB;animation:gaDrop .7s ease-in forwards}
@keyframes gaDrop{to{transform:translateY(18px);opacity:0}}
.ga-splash{fill:#E4F5FF;animation:gaSplash .6s ease-out forwards;transform-box:fill-box;transform-origin:50% 100%}
@keyframes gaSplash{0%{transform:translateY(0) scale(.5);opacity:1}100%{transform:translateY(-14px) translateX(var(--dx,0)) scale(1.2);opacity:0}}
/* flowers */
.ga-flower .petals{transform-box:fill-box;transform-origin:50% 50%;transform:scale(0);transition:transform .9s var(--spring)}
.ga-flower .stem{transform-box:fill-box;transform-origin:50% 100%;transform:scaleY(.35);transition:transform .9s var(--spring)}
.ga-flower .leaf{transform-box:fill-box;transform-origin:100% 50%;transform:scale(.55);transition:transform .8s var(--spring) .2s}
.ga-flower.g1 .stem{transform:scaleY(.65)} .ga-flower.g1 .leaf{transform:scale(.8)}
.ga-flower.g2 .stem{transform:scaleY(.9)} .ga-flower.g2 .leaf{transform:scale(1)} .ga-flower.g2 .petals{transform:scale(.45)}
.ga-flower.g3 .stem{transform:scaleY(1)} .ga-flower.g3 .leaf{transform:scale(1)} .ga-flower.g3 .petals{transform:scale(1)}
.ga-flower.g3 .head{animation:gaSway 3.4s ease-in-out infinite;transform-box:fill-box;transform-origin:50% 100%}
@keyframes gaSway{0%,100%{transform:rotate(-3deg)}50%{transform:rotate(3deg)}}
.ga-flower .thirsty{opacity:0;transition:opacity .4s}
.ga-flower.dry .thirsty{opacity:1;animation:gaBob 1.6s ease-in-out infinite}
@keyframes gaBob{0%,100%{transform:translateY(0)}50%{transform:translateY(-3px)}}
/* creatures */
.ga-bee{transform-box:fill-box;transform-origin:50% 50%;animation:gaBee 4s ease-in-out infinite}
@keyframes gaBee{0%{transform:translate(0,0)}25%{transform:translate(9px,-6px)}50%{transform:translate(2px,-11px)}75%{transform:translate(-8px,-5px)}100%{transform:translate(0,0)}}
.ga-bee .wing{animation:gaWing .12s linear infinite alternate;transform-box:fill-box;transform-origin:50% 100%}
@keyframes gaWing{from{transform:scaleY(1)}to{transform:scaleY(.4)}}
.ga-butterfly{animation:gaFlutter 11s ease-in-out infinite;transform-box:fill-box;transform-origin:50% 50%;cursor:pointer}
@keyframes gaFlutter{0%{transform:translate(0,0)}20%{transform:translate(28px,-14px)}40%{transform:translate(52px,6px)}60%{transform:translate(30px,18px)}80%{transform:translate(-12px,8px)}100%{transform:translate(0,0)}}
.ga-butterfly .wing{animation:gaWing .22s ease-in-out infinite alternate;transform-box:fill-box;transform-origin:50% 100%}
.ga-butterfly.flit{animation:gaFlit 1.4s ease-in forwards}
@keyframes gaFlit{to{transform:translate(40px,-120px) scale(.4);opacity:0}}
.ga-snail{animation:gaCrawl 40s linear infinite alternate;cursor:pointer}
@keyframes gaCrawl{from{transform:translateX(0)}to{transform:translateX(56px)}}
.ga-snail.hide .body{transform:scaleX(.2);transform-box:fill-box;transform-origin:100% 100%;transition:transform .3s}
.ga-snail .body{transition:transform .6s var(--spring)}
.ga-frog{cursor:pointer;transform-box:fill-box;transform-origin:50% 100%}
.ga-frog.jump{animation:gaJump .7s var(--spring)}
@keyframes gaJump{0%{transform:translateY(0) scaleY(1)}30%{transform:translateY(-16px) scaleY(1.1)}60%{transform:translateY(-14px)}100%{transform:translateY(0) scaleY(1)}}
.ga-bird{cursor:pointer;transform-box:fill-box;transform-origin:50% 100%}
.ga-bird.sing{animation:gaSing .5s ease-in-out 3}
@keyframes gaSing{0%,100%{transform:rotate(0)}50%{transform:rotate(-8deg) translateY(-2px)}}
.ga-bird .beak{transform-box:fill-box;transform-origin:0 50%}
.ga-bird.sing .beak{animation:gaBeak .16s linear 9 alternate}
@keyframes gaBeak{to{transform:rotate(-18deg)}}
/* the watering can, an html thing that can be dragged */
.ga-can{position:absolute;left:54%;top:31%;width:34%;max-width:170px;z-index:6;touch-action:none;cursor:grab;
  transition:left .6s var(--spring),top .6s var(--spring),transform .3s ease}
/* tilted the right way: the spout comes DOWN over the plant */
/* HELD, THE CAN PIVOTS ON THE FINGER, NOT ON ITS HANDLE.
   With the origin down at the handle end, scaling the can up threw the spout
   nearly forty units across a hundred-unit garden — a hand's width between
   where a child was touching and where the water came out, which is too far
   apart to be one action. Pivoting on the grip keeps the spout a thumb ahead
   of the finger instead, close enough to aim and still clear of the plant. */
.ga-can.held{transition:none;cursor:grabbing;transform:rotate(30deg) scale(1.25);transform-origin:62% 50%}
.ga-can.held.flip{transform:rotate(-30deg) scale(-1.25,1.25);transform-origin:38% 50%}
.ga-can.look{animation:gaLook 1.1s var(--spring) 4}
@keyframes gaLook{0%,100%{transform:scale(1)}40%{transform:scale(1.18) rotate(-8deg)}}
.asked{animation:gaAsked 1.2s ease-in-out infinite;transform-box:fill-box;transform-origin:50% 50%}
@keyframes gaAsked{0%,100%{filter:brightness(1)}50%{filter:brightness(1.35) drop-shadow(0 0 6px #FFCE3D)}}
.ga-can.full svg{animation:gaBob .5s var(--spring)}
.ga-can .ga-level{transition:transform .25s ease}
.ga-can svg{width:100%;height:auto;display:block;overflow:visible;filter:drop-shadow(3px 6px 6px rgba(59,42,30,.22))}
.ga-can.home{animation:gaBob 2.2s ease-in-out infinite}
.ga-pour{position:absolute;pointer-events:none;z-index:5;width:4px;height:4px}
.ga-pour i{position:absolute;left:0;top:0;width:5px;height:10px;border-radius:50%;background:#BFE9FB;box-shadow:0 0 3px #fff;animation:gaPour .65s ease-in forwards}
@keyframes gaPour{to{transform:translate(var(--dx),110px);opacity:0}}
/* the two of them stand on the lawn above the beds, at the right, so every
   plant along the bottom is in the clear */
.ga-cast{position:absolute;left:1%;bottom:calc(var(--pad-bot) + 4px);width:27%;height:21%;display:flex;align-items:flex-end;justify-content:flex-start;gap:4%;z-index:4}
.ga-cast .char{width:60%;max-width:110px;cursor:pointer}
.ga-cast .char.pip{width:34%;max-width:64px}
.ga-cast .char svg{width:100%;height:auto;display:block;overflow:visible}
.ga-hint{position:absolute;left:50%;top:calc(var(--pad-top) + 20px);transform:translateX(-50%);z-index:7;
  font-size:clamp(13px,3.6vw,16px);font-weight:700;color:var(--ink-soft);background:rgba(255,255,255,.85);padding:6px 14px;border-radius:16px;opacity:0;transition:opacity .4s}
.ga-hint.on{opacity:1}
body.no-asking #scGarden .ga-hint{display:none}

/* ---- v105: the sun, the rain, the rabbit, the ducks, the petals, the rainbow ---- */
.ga-sun{cursor:pointer}
.ga-sun.shine{animation:gaSun 2s linear infinite,gaShine .9s ease-in-out}
@keyframes gaShine{0%,100%{transform:scale(1)}50%{transform:scale(1.35)}}
.ga-sun .face{transform-box:fill-box}
.ga-raincloud{transform:translateX(70px);opacity:0;transition:transform 1.4s ease,opacity .8s}
.ga-raincloud.in{transform:translateX(0);opacity:1}
.ga-raincloud .ga-drop{stroke:#9BDCF6;stroke-width:1.1;stroke-linecap:round;fill:none;animation:gaRain 1.3s linear infinite}
@keyframes gaRain{from{transform:translateY(0);opacity:1}to{transform:translateY(120px);opacity:0}}
.ga-rainbow{transition:opacity 1.6s ease}
.ga-rainbow.on{opacity:.85}
.ga-carrot{cursor:pointer;transform-box:fill-box;transform-origin:50% 100%}
.ga-carrot .root{transition:transform .5s var(--spring)}
.ga-carrot.pulled .root{transform:translateY(-6px)}
.ga-carrot.pulled .top{animation:gaSway 1s ease-in-out 2}
.ga-carrot.gone{opacity:.25;transition:opacity .4s}
.ga-rabbit{transform-box:fill-box;transform-origin:50% 100%;transform:translate(0,8px) scale(.2);opacity:0}
.ga-rabbit.out{opacity:1}
.ga-rabbit.hop{animation:gaRabbitHop .45s ease-in-out 2}
@keyframes gaRabbitHop{0%,100%{translate:0 0}50%{translate:0 -6px}}
.ga-rabbit.munch .mouth{animation:gaMunch .2s linear 8 alternate}
@keyframes gaMunch{to{transform:translateY(1px) scaleY(2)}}
.ga-bread{cursor:pointer;transform-box:fill-box;transform-origin:50% 100%}
.ga-bread.throw{animation:gaThrow .6s var(--spring)}
@keyframes gaThrow{0%{transform:rotate(0)}40%{transform:rotate(-40deg) translateY(-3px)}100%{transform:rotate(0)}}
.ga-crumb{animation:gaCrumb .9s ease-out forwards}
@keyframes gaCrumb{0%{transform:translate(0,0)}50%{transform:translate(calc(var(--dx) * .5),-10px)}100%{transform:translate(var(--dx),-6px)}}
.ga-duck{transition:transform 2.4s ease-in-out}
.ga-duck.bob{animation:gaDuckBob 1.1s ease-in-out infinite}
@keyframes gaDuckBob{0%,100%{translate:0 0}50%{translate:0 -1px}}
.ga-petal{animation:gaPetal 1.4s ease-out forwards}
@keyframes gaPetal{0%{transform:translate(0,0) rotate(0);opacity:1}100%{transform:translate(var(--dx),var(--dy)) rotate(180deg);opacity:0}}
.ga-cast .char.pip{transition:transform 1.3s ease-in-out}
.ga-cast .char.pip.tofence{transform:translate(-10%,-300%) scale(.9)}
#scGarden .corner-btn{z-index:9}

/* ---- v106: the monkey, the mole, the wet frog, the questions ---- */
.ga-monkey{cursor:pointer;transform-box:fill-box;transform-origin:50% 0}
.ga-monkey.swing .mk-body{animation:gaSwing .7s ease-in-out 3;transform-box:fill-box;transform-origin:50% 0}
@keyframes gaSwing{0%,100%{transform:rotate(-14deg)}50%{transform:rotate(14deg)}}
.mk-nut{transform-box:fill-box;transform-origin:50% 50%}
.mk-nut.thrown{animation:gaNut 1s cubic-bezier(.3,.8,.6,1) forwards}
@keyframes gaNut{0%{transform:translate(0,0) rotate(0)}60%{transform:translate(8px,80px) rotate(300deg)}80%{transform:translate(10px,70px) rotate(360deg)}100%{transform:translate(14px,84px) rotate(420deg);opacity:0}}
.ga-mole{cursor:pointer;transform-box:fill-box;transform-origin:50% 100%;transform:translateY(12px) scaleY(.1);opacity:0;transition:transform .35s var(--spring),opacity .2s}
.ga-mole.up{transform:none;opacity:1}
.ga-mole.bonk{animation:gaBonk .45s var(--spring)}
@keyframes gaBonk{0%{transform:scaleY(1)}40%{transform:scaleY(.3)}100%{transform:scaleY(.1) translateY(12px);opacity:0}}
.ga-frog.onmo{animation:gaOnMo .9s cubic-bezier(.3,.9,.5,1) forwards}
@keyframes gaOnMo{0%{transform:translate(0,0)}50%{transform:translate(-14px,-40px) scale(1.1)}100%{transform:translate(-24px,26px)}}

/* ---- v107: the picnic — a basket to fill, and what goes in it ---- */
.ga-basket{position:absolute;left:50%;transform:translateX(-50%);top:calc(var(--pad-top) + 8px);z-index:7;display:flex;gap:6px;padding:6px 10px;
  background:linear-gradient(180deg,#E4C89A,#C9A05E);border-radius:14px 14px 18px 18px;box-shadow:0 6px 14px rgba(59,42,30,.22),inset 0 2px 0 rgba(255,255,255,.4)}
.ga-basket::before{content:'';position:absolute;left:30%;right:30%;top:-9px;height:12px;border:3px solid #B98A50;border-bottom:0;border-radius:10px 10px 0 0}
.ga-basket i{width:clamp(28px,8vw,38px);height:clamp(28px,8vw,38px);border-radius:10px;background:rgba(255,255,255,.55);display:block;position:relative;opacity:.55}
.ga-basket i::after{content:'';position:absolute;inset:3px;background-size:contain;background-repeat:no-repeat;background-position:center;opacity:.35}
.ga-basket i.got{opacity:1;background:#fff}
.ga-basket i.got::after{opacity:1}
.ga-basket i.pop{animation:gaBob .5s var(--spring)}
.ga-basket.look{animation:gaLook 1s var(--spring) 3}
.ga-basket i[data-k="honey"]::after{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M6 9q-3 8 2 13h8q5-5 2-13z' fill='%23F3B21E'/%3E%3Crect x='6' y='3' width='12' height='6' rx='2' fill='%238A5A2B'/%3E%3C/svg%3E")}
.ga-basket i[data-k="carrot"]::after{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M9 8q3 14 6 0z' fill='%23FFA45C'/%3E%3Cpath d='M12 8q-4-6-1-8m1 8q0-7 3-8' stroke='%234FA85C' stroke-width='2' fill='none'/%3E%3C/svg%3E")}
.ga-basket i[data-k="berry"]::after{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 6q-7 8 0 16q7-8 0-16z' fill='%23E0714E'/%3E%3Cpath d='M8 6h8l-4 3z' fill='%234FA85C'/%3E%3C/svg%3E")}
.ga-basket i[data-k="apple"]::after{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Ccircle cx='12' cy='14' r='8' fill='%23E0714E'/%3E%3Cpath d='M12 6q1-4 4-4' stroke='%234FA85C' stroke-width='2' fill='none'/%3E%3C/svg%3E")}
.ga-canopy{cursor:pointer}
.ga-canopy circle{transition:transform .8s cubic-bezier(.4,0,.7,1),opacity .3s .7s;transform-box:fill-box}
.ga-canopy circle.fallen{transform:translateY(60px);opacity:0}
.ga-canopy.shake{animation:gaShake .5s ease-in-out 2;transform-box:fill-box;transform-origin:50% 50%}
@keyframes gaShake{0%,100%{transform:translateX(0)}50%{transform:translateX(3px)}}
.ga-honeypot{opacity:0;transform:translateY(6px);transition:opacity .4s,transform .5s var(--spring);cursor:pointer;transform-box:fill-box}
.ga-honeypot.ready{opacity:1;transform:translateY(-12px);animation:gaBob 1.6s ease-in-out infinite}
.ga-honeypot.taken{opacity:0;transform:translateY(-30px) scale(.4)}
.ga-berries{cursor:pointer}
.ga-berries .berry path{transition:fill .8s}
.ga-berries.ripe .berry path{fill:#E0714E}
.ga-berries .berry{transform-box:fill-box;transform-origin:50% 100%;transition:transform .4s,opacity .3s}
.ga-berries .berry.picked{transform:translateY(-14px) scale(.3);opacity:0}
.ga-berries .thirsty{opacity:1;animation:gaBob 1.6s ease-in-out infinite}
.ga-berries.ripe .thirsty{opacity:0}
.ga-picnic{position:absolute;left:50%;top:70%;width:52%;height:12%;transform:translate(-50%,0) scaleX(0);z-index:3;border-radius:50%;
  background:repeating-linear-gradient(90deg,#FF8FA6 0 10px,#FFF3D8 10px 20px),#FF8FA6;background-blend-mode:multiply;opacity:.92;transition:transform .8s var(--spring)}
.ga-picnic::after{content:'';position:absolute;left:14%;right:14%;top:20%;height:60%;
  background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 30'%3E%3Ccircle cx='15' cy='15' r='9' fill='%23E0714E'/%3E%3Cpath d='M32 6q-3 10 3 18h10q6-8 3-18z' fill='%23F3B21E'/%3E%3Cpath d='M62 8q-8 10 0 20q8-10 0-20z' fill='%23E0714E'/%3E%3Cpath d='M82 8q4 16 8 0z' fill='%23FFA45C'/%3E%3C/svg%3E") center/contain no-repeat}
.ga-picnic.on{transform:translate(-50%,0) scaleX(1)}

/* picking a grown flower */
.ga-flower.g3{cursor:pointer}
.ga-flower.picked .head{animation:gaPicked .8s ease-in forwards}
@keyframes gaPicked{to{transform:translateY(-60px) scale(.3);opacity:0}}
.ga-basket i[data-k="flower"]::after{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cg fill='%23FF7BA0'%3E%3Ccircle cx='12' cy='5' r='3.5'/%3E%3Ccircle cx='12' cy='15' r='3.5'/%3E%3Ccircle cx='7' cy='10' r='3.5'/%3E%3Ccircle cx='17' cy='10' r='3.5'/%3E%3C/g%3E%3Ccircle cx='12' cy='10' r='3' fill='%23FFCE3D'/%3E%3Cpath d='M12 14v9' stroke='%234FA85C' stroke-width='2'/%3E%3C/svg%3E")}
.ga-basket i{width:clamp(24px,7vw,34px);height:clamp(24px,7vw,34px)}

/* THE PLANT UNDER THE SPOUT. The water lands a hand's width from the finger,
   so this is the only thing telling a child which plant they are actually
   watering. It leans, the way a plant leans towards water. */
/* the flowers carry no transform of their own — their shape is drawn at real
   coordinates — so they can lean */
.ga-flower.aim{transform-box:fill-box;transform-origin:50% 100%;
  animation:gaAim .7s ease-in-out infinite alternate;filter:drop-shadow(0 0 6px rgba(110,198,240,.95))}
@keyframes gaAim{from{transform:rotate(-3deg) scale(1.02)}to{transform:rotate(3deg) scale(1.08)}}
/* THE STRAWBERRY PLANT MAY NOT LEAN, and this is not a style choice. It is
   placed with an SVG transform ATTRIBUTE — translate(18 152) — and a CSS
   transform animation REPLACES that attribute rather than adding to it, so the
   whole plant would jump to the top-left corner of the garden the moment the
   spout came near it. (Third time this trap has been hit in this app; see the
   note about animating an inner <g> in the story-games skill.) It glows
   instead, which reads the same and moves nothing. */
.ga-berries.aim{animation:gaAimGlow .7s ease-in-out infinite alternate}
@keyframes gaAimGlow{from{filter:drop-shadow(0 0 3px rgba(110,198,240,.7)) brightness(1)}
                     to{filter:drop-shadow(0 0 9px rgba(110,198,240,1)) brightness(1.14)}}

/* ================================================ EVERY TAP ANSWERS
   The spring a thing does when it cannot do the big thing — see the note on
   Garden.nudge. It has to work on an SVG group and on an HTML element, so it
   only touches transform, and it uses fill-box so a group springs about its
   own middle rather than the whole canvas's. */
.ga-nudge{transform-box:fill-box;transform-origin:50% 100%;
  animation:gaNudge .5s cubic-bezier(0.34,1.56,0.64,1)}
@keyframes gaNudge{0%,100%{transform:translateY(0) scale(1)}
  35%{transform:translateY(-6%) scale(1.14,.9)}
  65%{transform:translateY(0) scale(.94,1.06)}}

/* the reason it would not do it, floating up off the thing itself */
.ga-mark{position:absolute;width:26px;height:26px;transform:translate(-50%,-100%);
  pointer-events:none;z-index:9;animation:gaMark 1.1s ease-out forwards}
@keyframes gaMark{0%{opacity:0;transform:translate(-50%,-70%) scale(.5)}
  25%{opacity:1;transform:translate(-50%,-110%) scale(1.1)}
  100%{opacity:0;transform:translate(-50%,-190%) scale(.9)}}
/* a water drop: this one is thirsty */
.ga-mark-water{background:radial-gradient(circle at 38% 34%,#BFE8FA,#5FB1DD 62%,#3F9BD0);
  border-radius:50% 50% 50% 50%/60% 60% 40% 40%;clip-path:polygon(50% 0,88% 52%,88% 76%,50% 100%,12% 76%,12% 52%)}
/* three dots: this one is busy, try again in a second */
.ga-mark-wait{background:none}
.ga-mark-wait::before{content:'•••';position:absolute;inset:0;text-align:center;line-height:26px;
  font-size:18px;font-weight:900;color:#8A5A2B;letter-spacing:1px}

/* A DUCK, A BEE, A RABBIT ANSWERING A TOUCH.
   `.ga-bob` animates TRANSFORM, so it must never go on an element that is
   already positioned by one — a transform attribute or an inline style both
   get replaced rather than added to, and the thing jumps to the origin. Every
   one of these has an inner group (.ga-duckbob, .ga-beebob) that exists purely
   to be animated. */
.ga-bob{transform-box:fill-box;transform-origin:50% 100%;
  animation:gaBob2 .55s cubic-bezier(0.34,1.56,0.64,1)}
@keyframes gaBob2{0%,100%{transform:translateY(0) rotate(0)}
  40%{transform:translateY(-18%) rotate(-8deg)}
  70%{transform:translateY(-4%) rotate(6deg)}}

/* THE WATERFALL'S BIG GO — every third touch throws up a spray */
.ga-spray{fill:#DFF3FF;opacity:.9;
  animation:gaSpray 1.1s cubic-bezier(.2,.7,.4,1) forwards}
@keyframes gaSpray{0%{transform:translate(0,0);opacity:.95}
  100%{transform:translate(var(--dx),var(--dy));opacity:0}}
#gaRainbow.mist{animation:gaMist 1.8s ease-in-out}
@keyframes gaMist{0%,100%{opacity:0}30%,60%{opacity:.75}}

/* the strawberries ripening where you can see it happening */
.ga-berries.rip1 .berry path{fill:#C9DD7A}
.ga-berries.rip2 .berry path{fill:#F0A96B}

/* AN INVISIBLE PAD THE SIZE OF A FINGERTIP. The drawn fruit and the bee are a
   few units across, which is 20-something pixels on a real screen — far under
   what a three-year-old can land on. The pad catches the miss. It must be a
   real paint (not `none`) or it takes no touches at all. */
.ga-hit{fill:transparent;pointer-events:all}
/* ripe, and saying so */
.ga-berries.ripe .berry{animation:gaRipe 1.4s ease-in-out infinite alternate}
.ga-berries.ripe .berry:nth-child(2){animation-delay:.2s}
.ga-berries.ripe .berry:nth-child(3){animation-delay:.4s}
@keyframes gaRipe{from{transform:translateY(0) scale(1);filter:none}
  to{transform:translateY(-4%) scale(1.08);filter:drop-shadow(0 0 4px rgba(255,140,140,.9))}}