/*
 * How creatures arrive, move, greet and leave in Explore mode.
 * Owner: creature movement (js/behaviors.js). Loaded after css/style.css.
 * Most paths are Web Animations made in js/behaviors.js; this file has the wrappers, walking legs,
 * wing shimmer, the little props (silk, soil hole, snail trail) and the reduced-motion fallbacks.
 */

/* ---------- Explore mode ---------- */
body[data-play=explore] #strip { display: none; }

#herd { position: absolute; inset: 0; z-index: 3; pointer-events: none; }

.critter {
  position: absolute; translate: -50% 0; pointer-events: auto; cursor: pointer;
  transition: left var(--walk, 5s) linear, opacity .8s ease;
}
.critter svg, .flyer svg, .egg-spot svg { width: 100%; height: auto; display: block; overflow: visible; }
/* the default pop-up arrival; creatures that js/behaviors.js moves (b-own) have their own */
.c-rise { animation: rise .7s cubic-bezier(.2, .8, .2, 1) both; transform-origin: 50% 100%; }
.critter.b-own .c-rise { animation: none; }
@keyframes rise { from { opacity: 0; translate: 0 22%; scale: .92; } to { opacity: 1; translate: 0 0; scale: 1; } }
.critter .c-rise, .critter .c-bob { position: relative; }
.c-bob { transform-origin: 50% 100%; }
.c-bob.hop { animation: critterHop .56s cubic-bezier(.3, .7, .4, 1); }
@keyframes critterHop { 0% { translate: 0 0; } 40% { translate: 0 -16%; } 100% { translate: 0 0; } }
.c-face { transition: scale .35s ease, --flip .35s ease; }   /* --flip: the sun's shadows turn with it (css/sky.css) */
.c-face.left { scale: -1 1; }

/* wrappers added by js/behaviors.js inside the flip: .c-face > .b-go (travel) > .b-pose (idle) > svg */
.b-go, .b-pose { position: relative; transform-origin: 50% 94.3%; }   /* the feet: y 132 of 140 */

/* the palm-smash giant strolling across the hills (made by js/app.js) */
.big-walker { opacity: .5; filter: saturate(.55); color: #7E8C84; pointer-events: none; --leg-t: 1.3s; --swing: 9deg; }
.big-walker .c-bob { animation: waddle .65s ease-in-out infinite; }
@keyframes waddle { 0%, 100% { translate: 0 0; rotate: 0deg; } 50% { translate: 0 -2%; rotate: -.8deg; } }
.big-walker.gait-crawl .c-bob { animation: crawl 1.2s ease-in-out infinite; transform-origin: 0% 100%; }
@keyframes crawl { 0%, 100% { scale: 1 1; } 50% { scale: 1.06 .93; } }
.critter.gone, .flyer.gone, .egg-spot.gone { opacity: 0 !important; transition: opacity .8s ease; }

/* legs swing while walking: leg-a and leg-b in opposite phase. Each creature sets its own
   stride (--leg-t) and swing (--swing); the arrow-key friend uses the defaults. */
.walking .leg-a, .walking .leg-b {
  transform-box: fill-box; transform-origin: 50% 10%;
  animation: legSwing var(--leg-t, .9s) ease-in-out infinite;
}
.walking .leg-b { animation-delay: calc(var(--leg-t, .9s) * -.5); }
@keyframes legSwing {
  0%, 100% { transform: rotate(var(--swing, 7deg)); }
  50% { transform: rotate(calc(var(--swing, 7deg) * -1)); }
}
.walking .foot { opacity: 0; }

/* off the ground (owl gliding in, spider on its silk, ball rolling): no ground shadow on the drawing */
.b-aloft .dino-svg .ground { opacity: 0; }
.critter .dino-svg .ground { transition: opacity .4s ease; }

/* ---------- props drawn by the movement code ---------- */
/* the spider's silk: from where it meets the body (y 30 of 140) up past the top of the screen */
.b-silk {
  position: absolute; left: 50%; bottom: 78.57%; translate: -50% 0;
  width: max(1px, .12vh); height: 160vh; pointer-events: none;
  background: linear-gradient(to top, rgba(96, 90, 82, .55), rgba(96, 90, 82, .35) 40%, rgba(96, 90, 82, .2));
}
body.night .b-silk { background: linear-gradient(to top, rgba(232, 228, 214, .55), rgba(232, 228, 214, .25)); }

/* the earthworm's hole: soil and a dark pit behind it, the near lip of the pit in front */
.b-hole {
  position: absolute; left: 50%; bottom: 5.7%; width: 30%; translate: -50% 50%;
  pointer-events: none; transform-origin: 50% 50%;
}
.b-hole svg { width: 100%; height: auto; display: block; overflow: visible; }
.b-hole .soil { fill: #8C6B4C; }
.b-hole .pit { fill: #3A2A1F; }
.b-lip .soil { fill: #7A5C42; }
.b-crumb {
  position: absolute; bottom: 5.4%; width: 2.2%; aspect-ratio: 1; border-radius: 50%;
  background: #7A5C42; pointer-events: none;
}
.m-worm .c-rise { transform-origin: 50% 94.3%; }

/* the snail's shiny trail */
.b-trail {
  position: absolute; bottom: 5.1%; height: max(2px, .45vh); border-radius: .3vh; pointer-events: none;
  background: linear-gradient(rgba(255, 255, 255, .6), rgba(228, 236, 238, .3));
  box-shadow: 0 0 .3vh rgba(255, 255, 255, .35);
}

/* the roly-poly curled into a ball (drawn by js/behaviors.js until the art has a 'ball' pose) */
.b-ball { position: absolute; inset: 0; opacity: 0; pointer-events: none; }
.b-ball svg { transform-origin: 52% 77.14%; }   /* the ball's center: (104, 108) of 200 x 140 */
.b-ball .b-spin { transform-box: view-box; transform-origin: 104px 108px; }
.b-ball .b-ball-shadow { fill: #4A4036; opacity: .12; }

/* ---------- flyers ---------- */
.flyer {
  position: absolute; width: calc(17 * var(--su)); translate: -50% 0; z-index: 2;
  transition: left var(--fly, 9s) linear, opacity .8s ease;
  animation: flyIn .9s ease-out both;
}
@keyframes flyIn { from { opacity: 0; scale: .6; } to { opacity: 1; scale: 1; } }
.f-glide { animation: glide 3.2s ease-in-out infinite; }
.flyer.b-own .f-glide { animation: none; }   /* the path is made in js/behaviors.js */
@keyframes glide { 0%, 100% { translate: 0 0; } 50% { translate: 0 -1.6vh; } }
.flyer .b-go { transform-origin: 50% 50%; }
.flyer.m-bird .b-go { transform-origin: 50% 94.3%; }   /* birds scale around their feet: they land */

/* wings: a slow beat by default (cards, gallery, anything not listed below) */
.dino-svg .wing, .dino-svg .wing-far { transform-box: fill-box; animation: flap 1.5s ease-in-out infinite; }
.dino-svg .wing { transform-origin: 95% 92%; }
.dino-svg .wing-far { transform-origin: 70% 95%; animation-delay: -.1s; }
@keyframes flap { 0%, 100% { transform: rotate(0deg); } 50% { transform: rotate(14deg); } }
/* birds and the pterosaur: js/behaviors.js times each beat with the flight path */
.flyer.m-bird .wing, .flyer.m-bird .wing-far, .flyer.m-soar .wing, .flyer.m-soar .wing-far { animation: none; }
.flyer.m-soar .wing-far { transform-origin: 96% 96%; }   /* the far wing's root, by the body */
/* bees and dragonflies: a quick, small shimmer of see-through wings (small and soft, not a flicker) */
.flyer.m-buzz .wing, .flyer.m-buzz .wing-far { animation: shimmer .16s ease-in-out infinite alternate; }
.flyer.m-buzz .wing-far { animation-delay: -.08s; }
.flyer.m-dart .wing, .flyer.m-dart .wing-far { animation: shimmer .2s ease-in-out infinite alternate; }
.flyer.m-dart .wing-far { animation-delay: -.1s; }
@keyframes shimmer { from { transform: rotate(-7deg); } to { transform: rotate(9deg); } }
/* the firefly's wing cover beats slowly */
.flyer.m-drift .wing, .flyer.m-drift .wing-far { animation: flap .5s ease-in-out infinite; }
/* a ladybug flying home: its see-through wings whirr */
.critter.b-flying .wing, .critter.b-flying .wing-far { animation: shimmer .18s ease-in-out infinite alternate; }
.critter.b-flying .wing-far { animation-delay: -.09s; }

/* the owl in flight (front view): slow, deep beats from the shoulders */
.dino-svg .owl-wing-l, .dino-svg .owl-wing-r { transform-box: view-box; animation: owlBeatL 1.3s ease-in-out infinite; }
.dino-svg .owl-wing-l { transform-origin: 78px 78px; }
.dino-svg .owl-wing-r { transform-origin: 122px 78px; animation-name: owlBeatR; }
@keyframes owlBeatL { 0%, 100% { transform: rotate(9deg); } 50% { transform: rotate(-13deg); } }
@keyframes owlBeatR { 0%, 100% { transform: rotate(-9deg); } 50% { transform: rotate(13deg); } }
/* butterflies and moths: js/behaviors.js beats the wings (front view, wing-l / wing-r) */
.flyer .wing-l, .flyer .wing-r { transform-box: fill-box; animation: flutter .9s ease-in-out infinite; }
.flyer .wing-l { transform-origin: 100% 50%; }
.flyer .wing-r { transform-origin: 0% 50%; }
.flyer.m-flutter .wing-l, .flyer.m-flutter .wing-r { animation: none; }
@keyframes flutter { 0%, 100% { transform: scaleX(1); } 50% { transform: scaleX(.32); } }

/* ---------- little touches ---------- */
/* (the pressed key's letter is now a tag the creature wears: .key-tag in css/style.css) */
.puff { position: absolute; width: calc(6 * var(--su)); height: calc(4 * var(--su)); translate: -50% 0; scale: var(--s, 1); transform-origin: 50% 100%; pointer-events: none; }
.puff i {
  position: absolute; left: 50%; bottom: 0; width: calc(1.8 * var(--su)); height: calc(1.8 * var(--su)); border-radius: 50%;
  background: #D3CCB2; animation: puff .7s ease-out forwards;
}
.puff i:nth-child(1) { --dx: -2vh; }
.puff i:nth-child(2) { --dx: 0vh; animation-delay: .05s; }
.puff i:nth-child(3) { --dx: 2vh; }
@keyframes puff {
  from { transform: translate(-50%, 0) scale(.4); opacity: .85; }
  to { transform: translate(calc(-50% + var(--dx)), -2.4vh) scale(1.3); opacity: 0; }
}
.egg-spot {
  position: absolute; left: 84%; bottom: 9vh; width: calc(10 * var(--su)); z-index: 6;
  translate: -50% 0; animation: rise .7s cubic-bezier(.2, .8, .2, 1) both;
  transition: opacity .8s ease;
}
.egg-spot.hatch-card { padding: 0; }

/* ---------- reduced motion: creatures fade in and out, nothing travels or flaps ---------- */
@media (prefers-reduced-motion: reduce) {
  .c-rise, .egg-spot { animation: fadeOnly .6s ease both; }
  .flyer { animation: fadeOnly .8s ease both; }
  .walking .leg-a, .walking .leg-b, .dino-svg .wing, .dino-svg .wing-far,
  .flyer .wing-l, .flyer .wing-r, .dino-svg .owl-wing-l, .dino-svg .owl-wing-r,
  .f-glide, .big-walker .c-bob, .c-bob.hop { animation: none !important; }
  .c-face { transition: none; }
}
@keyframes fadeOnly { from { opacity: 0; } to { opacity: 1; } }