/* ---------- Jungle Splash scene (js/ui/scenes/jungle.js) ----------
   Everything is scoped under .scene-jungle; keyframes are prefixed jungle-.
   Only transform and opacity are animated. SVG groups use transform-box:
   fill-box so percentage origins refer to each group's own bounding box. */

.scene-jungle { position: absolute; top: 0; right: 0; bottom: 0; left: 0; overflow: hidden; z-index: 0; background: #9be3ff; }
.scene-jungle .scene-svg { position: absolute; top: 0; left: 0; width: 100%; height: 100%; }

.scene-jungle .jg-vine,
.scene-jungle .jg-monkey,
.scene-jungle .jg-sun,
.scene-jungle .jg-rays,
.scene-jungle .jg-wing,
.scene-jungle .jg-flower,
.scene-jungle .jg-trunk,
.scene-jungle .jg-ear { transform-box: fill-box; }

/* vines swing around their top */
.scene-jungle .jg-vine { transform-origin: 50% 0; animation: jungle-vine 3.4s ease-in-out infinite alternate; }
.scene-jungle .jg-vine.v2 { animation-duration: 2.8s; animation-delay: -1.2s; }
.scene-jungle .jg-vine.v3 { animation-duration: 3.1s; animation-delay: -0.6s; }
.scene-jungle .jg-vine.v4 { animation-duration: 3.8s; animation-delay: -2s; }
@keyframes jungle-vine { from { transform: rotate(-7deg); } to { transform: rotate(7deg); } }

/* monkey on a rope: one full swing there and back every 6 s */
.scene-jungle .jg-monkey { transform-origin: 50% 0; animation: jungle-swing 3s ease-in-out infinite alternate; }
@keyframes jungle-swing { from { transform: rotate(-48deg); } to { transform: rotate(48deg); } }

/* parrots bob on their branches and flap slowly; fast during lights-flash */
.scene-jungle .jg-parrot { animation: jungle-bob 1.3s ease-in-out infinite alternate; }
.scene-jungle .jg-parrot.p2 { animation-duration: 1.6s; animation-delay: -0.7s; }
@keyframes jungle-bob { from { transform: translateY(0); } to { transform: translateY(-10px); } }
.scene-jungle .jg-wing { transform-origin: 0 0; animation: jungle-flap 0.9s ease-in-out infinite alternate; }
.scene-jungle.lights-flash .jg-wing { animation-duration: 0.12s; }
.scene-jungle.lights-flash .jg-parrot { animation-duration: 0.35s; }
@keyframes jungle-flap { from { transform: rotate(0); } to { transform: rotate(-32deg); } }

/* waterfall stripes scroll down */
.scene-jungle .jg-fall { animation: jungle-fall 0.9s linear infinite; }
@keyframes jungle-fall { from { transform: translateY(0); } to { transform: translateY(60px); } }

/* sun rays turn slowly; the whole sun pulses during lights-flash */
.scene-jungle .jg-rays { transform-origin: 50% 50%; animation: jungle-rays 40s linear infinite; }
@keyframes jungle-rays { from { transform: rotate(0); } to { transform: rotate(360deg); } }
.scene-jungle .jg-sun { transform-origin: 50% 50%; }
.scene-jungle .jg-sun-glow { opacity: 0.45; }
.scene-jungle.lights-flash .jg-sun { animation: jungle-pulse 0.5s ease-in-out infinite; }
.scene-jungle.lights-flash .jg-sun-glow { animation: jungle-glow 0.5s ease-in-out infinite; }
@keyframes jungle-pulse { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.28); } }
@keyframes jungle-glow { 0%, 100% { opacity: 0.6; } 50% { opacity: 1; } }

/* flowers wobble on their stems */
.scene-jungle .jg-flower { transform-origin: 50% 100%; animation: jungle-wobble 1.8s ease-in-out infinite alternate; }
@keyframes jungle-wobble { from { transform: rotate(-8deg); } to { transform: rotate(8deg); } }

/* elephant: slow ear flap; trunk wiggle and drop burst while .spraying (400 ms) */
.scene-jungle .jg-ear { transform-origin: 0 50%; animation: jungle-ear 2.6s ease-in-out infinite alternate; }
@keyframes jungle-ear { from { transform: scaleX(1); } to { transform: scaleX(0.86); } }
.scene-jungle .jg-trunk { transform-origin: 100% 0; }
.scene-jungle .jg-elephant.spraying .jg-trunk { animation: jungle-trunk 0.4s ease-in-out; }
@keyframes jungle-trunk {
  0%, 100% { transform: rotate(0); }
  25% { transform: rotate(10deg); }
  50% { transform: rotate(-8deg); }
  75% { transform: rotate(6deg); }
}
.scene-jungle .jg-drop { opacity: 0; }
.scene-jungle .jg-elephant.spraying .jg-drop { animation: jungle-drop 0.34s ease-out both; }
.scene-jungle .jg-elephant.spraying .jg-drop.far { animation-name: jungle-drop-far; }
@keyframes jungle-drop { 0% { transform: translateX(0); opacity: 1; } 70% { opacity: 1; } 100% { transform: translateX(-200px); opacity: 0; } }
@keyframes jungle-drop-far { 0% { transform: translateX(0); opacity: 1; } 70% { opacity: 1; } 100% { transform: translateX(-300px); opacity: 0; } }

/* PAUSE_SCENE_WHILE_STROKING: wash.js adds .paused while a finger is washing. */
.scene.scene-jungle.paused, .scene.scene-jungle.paused * { animation-play-state: paused; }
.scene.scene-jungle.paused .jg-elephant.spraying .jg-trunk,
.scene.scene-jungle.paused .jg-elephant.spraying .jg-drop { animation-play-state: running; } /* the rinse spray still plays */