/* ============================================================
   playful.css · collage-9 interaction pack
   Pokeable clouds/flowers/butterfly, bike bell, and stations
   that lean in when Stella rides close.
   Purely additive: nothing here restyles existing elements
   except gentle .nearby motion on station objects/captions.
   (the crayon cursor trail was removed at the owner's request)
   ============================================================ */

/* — 1. pokeable little things along the route — */
.poke{position:absolute;z-index:3;border:0;background:none;padding:16px;cursor:pointer;transform:translate(-50%,-100%);-webkit-tap-highlight-color:transparent}
.poke:focus-visible{outline:2px dashed #fff3c4;outline-offset:2px;border-radius:40%}
.poke svg{display:block;overflow:visible;transition:transform .55s cubic-bezier(.34,1.56,.64,1),opacity .55s;pointer-events:none}
.poke-cloud svg{animation:cloud-bob 5.2s ease-in-out infinite}
.poke-cloud:nth-of-type(2) svg{animation-delay:-1.7s}
.poke-cloud:nth-of-type(3) svg{animation-delay:-3.4s}
@keyframes cloud-bob{0%,100%{transform:translateY(0)}50%{transform:translateY(-9px)}}
.poke-cloud.poked svg{animation:none;transform:translate(52px,-46px) rotate(5deg) scale(1.07);opacity:.5}
.poke-flower svg{transform-origin:50% 100%}
.poke-flower.poked svg{animation:flower-wiggle .7s ease}
@keyframes flower-wiggle{0%,100%{transform:rotate(0)}20%{transform:rotate(-11deg) scale(1.08)}45%{transform:rotate(7deg)}70%{transform:rotate(-4deg)}}
.poke-butterfly svg{animation:butterfly-hover 3.4s ease-in-out infinite}
@keyframes butterfly-hover{0%,100%{transform:translate(0,0) rotate(-4deg)}50%{transform:translate(6px,-12px) rotate(5deg)}}
.poke-butterfly.poked svg{animation:butterfly-flutter 1.15s ease-out}
@keyframes butterfly-flutter{0%{transform:translate(0,0) rotate(0)}30%{transform:translate(-38px,-60px) rotate(-14deg) scale(1.05)}60%{transform:translate(24px,-96px) rotate(10deg)}100%{transform:translate(0,0) rotate(0)}}

/* — 2. the bike bell — */
#rider.ring .bicycle{animation:bell-shake .5s ease}
@keyframes bell-shake{0%,100%{rotate:0deg}20%{rotate:2.4deg}45%{rotate:-1.8deg}70%{rotate:1deg}}
.bell-note{position:absolute;left:152px;top:2px;z-index:5;font:600 23px/1 Caveat,cursive;color:#fff3c4;text-shadow:0 1px 2px #17365a55;opacity:0;pointer-events:none;white-space:nowrap}
#rider.ring .bell-note{animation:bell-note 1.05s ease-out}
@keyframes bell-note{0%{opacity:0;transform:translateY(8px) rotate(-9deg)}14%{opacity:1}100%{opacity:0;transform:translateY(-36px) rotate(-4deg)}}

/* — 3. stations lean in when Stella rides close — */
.place.nearby .place-object{animation:place-hello 2.8s ease-in-out infinite}
@keyframes place-hello{0%,100%{transform:rotate(0) translateY(0)}50%{transform:rotate(-1.6deg) translateY(-6px)}}
.place.nearby .place-caption{transform:rotate(-.4deg) translateY(-6px)}